书签 分享 收藏 举报 版权申诉 / 10

类型web网页设计与制作实习报告.docx

  • 文档编号:25979795
  • 上传时间:2023-06-16
  • 格式:DOCX
  • 页数:10
  • 大小:1.34MB

四、实验制作结果图

实验四应用背景图像

一、实验目的

1.掌握CSS背景(background)属性。

2.掌握设置背景图像位置的方法。

3.掌握使用背景图像替换文本的方法。

4.掌握使用背景图像制作圆角框的方法。

二、实验内容

1.制作圆角框。

2.制作泡泡俱乐部首页。

三、实验步骤

1.制作圆角框。

(1)创建站点。

(2)创建内部样式表。

在浏览器中的效果如下:

制作圆角框

四、实验结果

实验五浮动(float)页面布局

一、实验目的

1.掌握固定宽度网页布局的方法。

2.深入理解浮动的概念。

3.掌握三列布局网页的典型逻辑结构。

4.熟练掌握CSS浮动布局的方法。

二、实验内容

制作一个简易的博客首页。

三、实验步骤

1.整体布局与公共CSS定义

分析页面主要分5大块,顶部的Logo、导航条Nav、Banner、Content、Footer,

2.布局Logo栏

首先我们需要把页面上的logo给切割出来,其大小为173*46,名字为:

logo.gif

 

一般网站都会做到点击logo,就会回到主页,应该怎么做呢,大家首先会想到,给图片加上链接就可以了,代码一般会这么写

不过KwooJan要介绍另外一种方法,将图片做成链接a的背景,同样可以达到上面说的效果,并且HTML代码就会更精简,少了,看看下面Logo栏的页面代码,红色的为将logo.gif作为背景的链接

3.布局导航栏Nav

4.Banner布局

第一种:

将图片作为

背景

第二种:

直接将图片插入

之间,代码:

5.内容Content板块布局

从图片上我们看到,内容板块分为左右两个区域,左边ContentL宽度是600px,右边ContentR宽度是300px,但是由于我们要将内边距设置成15px(这样才会好看),所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成300-15*2=270px;

6.Footer布局内容左侧板块(ContentL)布局

7.内容右侧板块(ContentR)布局

四、实验总结

在浏览器中的效果如下:

配套讲稿:

如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制:

部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词:
web 网页 设计 制作 实习 报告
提示  冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:web网页设计与制作实习报告.docx
链接地址:https://www.bdocx.com/doc/25979795.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
展开