《网页设计》实验指导材料.docx

实验三页面制作

（1）

实验类型：

基础实验学时：

2课时

一、实验目的：

1.掌握在标准视图中创建和修改表格；

2.掌握布局表格的使用方法；

3.掌握层的使用；

二、实验器材：

1.硬件：

多媒体计算机

2.软件：

MicrosoftWindows2000

MacromediaDreamweaverMX

MacromediaFireworkMX

AdobePhotoshop

3.要求：

学生实验时一人一台机器。

学生在制作中所用的素材（图形、图片、声音、音乐、动画等）自备。

学生在制作中如要用到计算机上没有的工具软件或其他软件，请与实验指导老师联系，由实验指导老师统一安装。

三、实验要求：

1.在站点面板中新建一个文件夹EX3，并在该文件夹内新建一个页面，并根据自己喜欢的名称命名；

2.按照下图的效果，插入表格并修改；

3.保存文件，预览；

4.把配套光盘中第8章内完整表格排版案例素材文件夹复制到EX3内；

5.新建文件，运用案例中的素材，根据下图，设计布局表格，完成页面设计。

（布局表格也可参考课本案例制作，但最好自己设计完成）

6.保存页面，预览；

7.

8.在文件夹EX3中再新建一个文件；

9.在页面中插入一个层，并在层中输入一段文字；

10.再插入3个层，并再这三个层中插入3张大小比较适中的图片，并将它们稍微叠加；

11.通过移动层和调整Z轴顺序，作出类似下图的效果；

四、思考问题：

1.表格属性中的“填充”、“间距”、“边框”等设置的作用是什么？

答：

“填充”文本框用来设置单元格边距.

“间距”是相邻的表格单元格之间的像素数。

“边框”指定表格边框的宽度（以像素为单位）。

2.在制作网页时，什么时候该用层，什么时候用表格？

答：

1.图层最大的缺点就是，在不同的窗口的位置经常发生变化，而表格没有这个问题

2.层定位方便，但如果页面内容繁多需要很多层的话，就比较麻烦，新手用层入门制作网站的时候可以筛选内容不多，且多以块为单位的来制作入门。

3.表格和层可以混用，不过最好是在层里加表格，而不要在表格里加层，因为无法定位。

也可以单独用。

五、实验报告要求：

提交页面文件源代码，在线提交实验报告。

实验四页面制作

（2）

实验类型：

基础实验学时：

2课时

一、实验目的：

1.掌握在页面中表单对象的使用方法；

2.掌握框架页面的制作和应用；

二、实验器材：

1.硬件：

多媒体计算机

2.软件：

MicrosoftWindows2000

MacromediaDreamweaverMX

MacromediaFireworkMX

AdobePhotoshop

3.要求：

学生实验时一人一台机器。

学生在制作中所用的素材（图形、图片、声音、音乐、动画等）自备。

学生在制作中如要用到计算机上没有的工具软件或其他软件，请与实验指导老师联系，由实验指导老师统一安装。

三、实验要求：

1.在站点面板中新建一个文件夹EX4，并在该文件夹内新建一个页面，并根据自己喜欢的名称命名；

2.按照下图的效果，插入表格和表单对象并修改；

3.保存页面，预览；

4.打开http:

//210.38.201.184/bbsxp；

5.点击【注册】，打开论坛用户注册页面；

6.仿照论坛用户注册页面，运用表格和表单对象，制作一个与该注册页面基本一致的页面；

7.在EX4中新建一个页面；

8.打开网站：

；

9.把网易首页下载保存，并按标题区域、左侧导航区域、右侧信息区域分解成3个页面，保存、命名；

10.在刚才新建的页面中设置框架，并导入刚才保存的3个页面，作出类似下图的效果；

四、思考问题：

1.一个页面可以有多少个表单？

同时可提交多少个表单？

答：

个数不限，不要出现表单的嵌套就行了

五、实验报告要求：

提交页面文件源代码，在线提交实验报告。

实验五样式表应用

实验类型：

基础实验学时：

2课时

一、实验目的：

1.掌握在页面中样式表的设置和使用方法；

二、实验器材：

1.硬件：

多媒体计算机

2.软件：

MicrosoftWindows2000

MacromediaDreamweaverMX

MacromediaFireworkMX

AdobePhotoshop

3.要求：

学生实验时一人一台机器。

学生在制作中所用的素材（图形、图片、声音、音乐、动画等）自备。

学生在制作中如要用到计算机上没有的工具软件或其他软件，请与实验指导老师联系，由实验指导老师统一安装。

三、实验要求：

1.打开Dreamweaver；

2.在站点新建文件夹EX_Css，并在该文件夹内新建一网页文件，并编辑；

3.打开【设计】浮动面板，点击“新建CSS样式图标”；

4.在“类型”一栏选择“创建自定义样式”；“定义在”选择“仅对该文档”；“名称”一栏输入一个样式名称（不能和Html代码同名）；点击“确定”；

5.选择“类型”分类，设置字体、颜色、修饰等样式；

6.在网页中插入一段文字；

7.把刚才的样式应用到文字上；

8.保存页面，预览效果；

9.根据不同的对象，设置“背景”、“区块”、“盒子”、“边框”等样式设置，应用到网页对象中查看效果；

10.在站点中新建一个样式表文件；

11.把样式表文件链接到上次实验制作的网站中；

12.根据网站设计需要，取消原来自己应用的部分属性，通过CSS重新设置；

注意：

文本、表格等效果尽量用CSS来设置。

四、思考问题：

1.为什么有的网页用外接样式表？

有的网页用内置样式表？

用法上各有什么区别？

五、实验报告要求：

在网络实验实践教学平台提交页面文件源代码，和撰写实验报告。

实验七行为

实验类型：

基础实验学时：

2课时

一、实验目的：

1.掌握通过设置Behavior（行为）实现网页交互行为的方法；

二、实验器材：

1.硬件：

多媒体计算机

2.软件：

MicrosoftWindows2000

MacromediaDreamweaverMX

MacromediaFireworkMX

AdobePhotoshop

3.要求：

学生实验时一人一台机器。

学生在制作中所用的素材（图形、图片、声音、音乐、动画等）自备。

学生在制作中如要用到计算机上没有的工具软件或其他软件，请与实验指导老师联系，由实验指导老师统一安装。

三、实验要求：

1.打开Dreamweaver；

2.在站点新建文件夹EX7，并在文件夹内新建一个页面；

3.在页面插入2个层，层内各插入一幅大小适中的图片；

4.给刚才的2个层命名；

5.点击“行为”面板中的“显示－隐藏层”行为，选择其中一个层，点击【隐藏】，选择另一个层，点击【显示】，并把该层默认属性设为“隐藏”；

6.把所有的出发条件设置为onClick；

7.保存页面，预览，点击图层观察效果；

8.新建一个页面；

9.准备一些素材图片，在新建页面建立一些层，并把图片插入各自层中，如下图；

10.选择左下方标签栏上的标签，点击行为窗口的“＋”按钮；

11.选择拖动层；

12.在“层”下拉菜单中选择一个要移动的层，在“移动”一栏选择“不限制”，“放下目标”为“购物车”所在的位置，靠齐对齐为50；

13.其他两个层设置一样；

14.保存页面，预览效果，如下图；

移动前移动后

四、思考问题：

1.在网页那些地方会用到现实隐藏层的效果？

五、实验报告要求：

提交页面文件源代码，在线提交实验报告。

实验九网站规划

实验类型：

设计实验学时：

4课时

一、实验目的：

1.综合运用所学知识，设计一个专题网站。

二、实验器材：

1.硬件：

多媒体计算机

2.软件：

MicrosoftWindows2000

MacromediaDreamweaverMX

MacromediaFireworkMX

AdobePhotoshop

3.要求：

学生实验时一人一台机器。

学生在制作中所用的素材（图形、图片、声音、音乐、动画等）自备。

学生在制作中如要用到计算机上没有的工具软件或其他软件，请与实验指导老师联系，由实验指导老师统一安装。

三、实验要求：

三、实验要求：

1.自由组合成开发小组；

2.按照以下内容做好网站分析企划：

网站名称；网站性质；未来网站浏览者特征；网站风格；栏目划分；

3.用Word文档记录好网站的分析企划，并把打印稿交给授课教师；

4.运用所学知识，根据分析企划，制作一个专题网站；

注意：

a）至少每位小组成员负责一个栏目；

b）不允许做新闻、咨询类网站；

c）可参考优秀网站的设计，但不要用网上直接下载到素材（如标题栏、版面设计等）；

d）不要把网站的内容范围定得过大，否则难于完成；

四、思考问题：

1.为什么通常网站都有统一的风格设计？

五、实验报告要求：

在线提交设计方案。