资源描述
《网页设计》实验指导材料.docx
《《网页设计》实验指导材料.docx》由会员分享，可在线阅读，更多相关《《网页设计》实验指导材料.docx（17页珍藏版）》请在冰点文库上搜索。
《网页设计》实验指导材料
教育技术系
实
验
指
导
材
料
课程名称：
网页设计
编写人：
赖永凯
实验一站点定义
实验类型：
基础实验学时：
1课时
一、实验目的：
1.熟悉Dreamweaver操作界面。
2.掌握如何在Dreamweaver中定义静态网站。
3.站点面板的文件操作。
二、实验器材：
1.硬件：
多媒体计算机
2.软件：
MicrosoftWindows2000
MacromediaDreamweaverMX
MacromediaFireworkMX
AdobePhotoshop
3.要求：
学生实验时一人一台机器。
学生在制作中所用的素材（图形、图片、声音、音乐、动画等）自备。
学生在制作中如要用到计算机上没有的工具软件或其他软件，请与实验指导老师联系，由实验指导老师统一安装。
三、实验要求：
1.在硬盘根目录新建一个文件夹作为站点根目录，只能用英文或数字命名；
答：
站点的根目录是：
2.开启Dreamweaver；
3.点击主菜单上的【站点】→【新建站点】；
4.输入一个站点名称，中英文不限，点击下一步；
答：
站点名称：
myweb
5.设置服务器技术，选择否，点击下一步；
6.根据站点文件夹的存放位置，设定相应选项，点击下一步；
7.根据服务器的实际情况选择连接方式，点击下一步；
8.点击完成，完成站点设置；
9.再点击【新建站点】
10.点击【高级】，用高级模式再定义一个站点，设置要求和刚才的站点一致；
11.根据下图，直接在站点面板按图中目录结构建立相应文件夹和页面文件。
四、思考问题：
1.为什么站点的文件夹和站点内各级文件夹必须用英文或数字命名？
答：
尽量采用英文和数字命名格式由于现在对中文名不用的服务器解析差别很大,尤其是unix主机或web服务软件对中文的字符集大多不支持,所以为了保证能正常显示,你你还是要用英文或数字．另外中文文件名很多浏览器本身也是不能正确解析的.所以不赞成使用汉字．
初学者常喜欢将文件夹及文件命名为中文的，这是一个不好的习惯。
网页中的文件名一定要用英文名，包括HTM、图片文件名等。
尽管你们在自己的电脑上测试是正确的，但在上传到服务器后，用中文命名的文件有可能找不到。
所以做网页时要养成用英文或数字命名的习惯
五、实验报告要求：
记录站点名称和简单的操作步骤，回答思考问题，按格式再线提交实验报告。
实验二创建页面
实验类型：
基础实验学时：
1课时
一、实验目的：
1.掌握如何用Dreamweaver创建HTML页面。
2.掌握页面属性的相关设置。
二、实验器材：
1.硬件：
多媒体计算机
2.软件：
MicrosoftWindows2000
MacromediaDreamweaverMX
MacromediaFireworkMX
AdobePhotoshop
3.要求：
学生实验时一人一台机器。
学生在制作中所用的素材（图形、图片、声音、音乐、动画等）自备。
学生在制作中如要用到计算机上没有的工具软件或其他软件，请与实验指导老师联系，由实验指导老师统一安装。
三、实验要求：
1.在站点面板中新建一个页面，并命名为index.htm；
2.双击该页面，进入编辑状态；
3.点击【修改】→【页面属性】，打开“页面属性”窗口；
4.在“标题”、“背景图案”、“背景”、“文本”、“链接”等属性项中根据自己的喜好，设置不同的内容，然后查看页面的变化；
5.仿照下图效果完成页面制作（背景、字体、颜色、内容都可以不相同）；
6.点击【文件】→【保存】并预览页面；
四、思考问题：
除了index.htm，主页文件还可以用那些名字？
答：
主页文件名一般默认为：
index.htm或index.html，还可以命名为：
main.htm（l）或default.htm（l）
五、实验报告要求：
提交页面文件源代码，在线提交实验报告。
答：
页面文件源代码：
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
无标题文档
--
body,td,th{
font-size:
18px;
}
body{
background-color:
#00CCFF;
}
.STYLE1{
font-size:
24px;
font-weight:
bold;
color:
#FF0000;
}
-->
欢迎来到我的主页
实验三页面制作
（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.为什么通常网站都有统一的风格设计？
五、实验报告要求：
在线提交设计方案。
升级会员 