《网页设计与制作》课程实训指导书.docx
《《网页设计与制作》课程实训指导书.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》课程实训指导书.docx（42页珍藏版）》请在冰豆网上搜索。
《网页设计与制作》课程实训指导书
《网页设计和制作》课程实训指导书
一、实训目的
本次实训给学生提供了深入学习的资料和信息，紧紧围绕网站设计流程：
规划、设计、开发、发布、维护来进行网站的开发，模仿并设计制作出相关的网站。
以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：
搜集资料、整理数据、制表绘图、发现和分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。
二、实训任务
通过对网站的设计，使学生熟练使用网站设计软件，使学生网站建设有一个综合系统的掌握。
在制作过程中，主要完成对网页的布局、色彩的搭配、框架的使用、层的运用、行为的实现、表单的使用、模板和库的使用等，完成项目作品。
1．网站策划
1）画出网站结构草图。
2）确定栏目。
3）进行版面设计。
分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容
4）搜集素材。
如相关文字录入，图片素材，班级相片等等。
2．制作网页。
1）建立站点。
例如：
命名为webfile,网站的结构如下：
2）进行主页的设计。
要求主页中包含一个自己完成的Flash。
3）进行其他页面的设计。
4）建立几个页面间的链接关系。
3．测试网站
4．作品提交和评分
三、实训计划
序号
任务
内容
课时
1
实训任务讲解
项目任务分析
1
2
网站策划
画出网站结构草图
1
确定栏目
1
进行版面设计
1
搜集素材
3
3
制作网页
建立站点
1
进行主页的设计和制作
8
进行其他页面的设计
2
建立几个页面间的链接关系
2
4
测试网站
检查网页的运行情况
1
5
作品提交和评分
依照评分表进行考核
1
6
实训报告的编写
参见附录
2
合计
24
四、实训环境
计算机上要求安装有Dreamweaver、Flash、photoshop等软件。
计算机和互联网相连，以便学生能够浏览优秀网站，搜集相关素材等。
五、实训过程（含步骤）
1.确定目标
通过网络就某个专题搜索资料，题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？
分那几个栏目，每个栏目的特色和主要内容是什么？
参考专题：
对计算机基础教育的看法，互动式教学的方式，网上论坛，QQ聊天论述等。
也可以是其它的有兴趣的专题如：
文学、历史、科技、体育、旅游、生活、时尚等。
参考选题：
班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网站……
2.选择目标用户
确定了站点实现的目标之后，需要确定站点的浏览客户。
创建世界上每个人都能使用的Web站点是不可能的。
人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。
因此需要确定目标用户，根据用户的特点来设计站点风格。
3.组织站点结构
如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的臃肿混乱的文件夹，或导致相关的文件散布在许多名称类似的文件夹中。
设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。
当准备好发布站点并允许公众查看时，再将这些文件拷贝到Web服务器上。
组织站点结构时，应注意以下三个问题：
1） 将站点分类，把相关的页面放在同一文件夹中。
2） 将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。
例如，将所有图像放在Images文件夹中，当在页面中插入图像时，就可以方便的找到它。
3） 本地站点和远程Web站点应该具有完全相同的结构。
如果使用Dreamweaver创建本地站点，然后将全部内容上传到远程站点，则Dreamweaver确保在远程站点中精确拷贝本地结构。
4.设计外观
页面布局和设计保持一致非常重要。
如果不考虑板块设计，浏览者会觉得你的网站内容杂乱、无条理，先要考虑好自己设计的板块和链接结构；根据所需的站点布局外观，在实训报告本上画一个站点草图，以便以后建立站点时可以按照它来操作。
如图1所示，是一个站点首页的设计布局图。
5.设计导航方案
设计站点时，应考虑如何使访问者能够方便的从一个区域移动到另一个区域。
具体考虑以下几点：
明确“当前位置”；导航方便；提供和网站管理员的联系方法。
6.规划和收集资料
完成了设计和布局后，就可以创建和收集需要的资源了。
资源可以是图像、文本或媒体等项目。
在开始开发站点前，请确保收集了所有这些项目并做好了准备。
否则，可能为找不到一幅图像而中断设计、开发过程。
Logo
Banner
简单功能
导航栏
功能列表
或
局部导航
主要内容
版权声明
六、实训要求
1．动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。
2．制作网页前，收集好所需的文字资料、图像资料、flash动画和网页特效。
3．所创建的网站至少包括8个页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。
（1）首页采用表格进行布局，必须包含导航栏；
（2）4个二级子页分别为框架网页、表单网页、利用模板制作的网页、利用布局表格制作的网页；
（3）3个内容页分别为层布局的网页、使用JavaScript制作特效的网页、使用行为制作特效的网页。
（4）各个页面根据需要插入合适的图像和Falsh动画，首页要求插入背景音乐。
（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。
（6）各个页面之间导航清晰、链接准确无误。
4．网页的版面尺寸使用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。
5．实训过程中既要虚心接受老师的指导，又要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。
6．在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。
要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。
7．实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。
缺课节数达三分之一以上者，实训成绩按不及格处理。
七、实训考核和评分
根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的使用，网站的整体浏览效果等方面进行综合评分。
评分参考标准如下表所示。
网站开发实训的参考评分标准
序号
考核项目
评分比例
1
网站效果
（1）内容方面：
主题明确，内容健康、具体，各个页面的文字、图像、动画能够清晰地表达主题。
70%
（2）版面结构：
版面结构合理，每个页面都有返回上一级或链接到其他页面的文字或按钮。
（3）视觉感受：
色彩搭配协调、美观，页面设计规范，没有出现乱码、空链接和错误链接。
（4）网站风格：
网站具有特色，主题、文字、图像、动画有创新。
2
纪律考核
实训期间组织纪律性强，无迟到、早退、缺课现象
10%
3
创新情况
制作的网页具有独创性，构思巧妙、有新意
5%
4
成员协作
所有的成员在规定时间内完成实训任务，无雷同现象或抄袭现象。
5%
5
实训报告
实训报告书写认真、完整、字迹清楚、页面整洁，实训收获较大
10%
合计
100%
作品完成情况当场验收考核，实训报告在整周实训结束后上交。
附录一：
实训报告内容
•封面
• 目录
• 网站全名及logo标志
• 建立网站的目的、意义
• 网页设计制作最突出的创意（如Amgo“俺们走”,logo设计有特色）
• 网站的栏目设计
• 色彩搭配及其含义（如绿色+金黄+淡白，体现优雅,舒适的感觉）
• 网站的结构图和页面组成
• 网站设计中具体实现的几个关键功能和相关技术说明（例如布局的方法：
使用层、使用表格、使用模板、使用Flash或其他脚本技术）• 如何安排进度和计划完成时间
• 网站建设的心得体会和扩展性分析
• 参考资料
附录二：
参考网站主题
（1）制作教学资源网站。
（2）制作个人网站。
（3）制作班级网站。
（4）制作学习网站。
（5）制作学校网站。
（6）制作旅游网站。
（7）制作公司网站。
（8）制作体育网站。
附录三：
网站开发案例
3．1规划网站
1．策划网站主题
在首手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。
本章所创建的网站是一个学习类网站，主要介绍网页制作的基础知识、网站建立的基础知识、网页制作的技巧、网页特效的制作方法、网络编程语言、动画制作方法、图像处理方法等内容，同时为读者提供大量的网页制作素材、学习网页设计和编程的视频教程，解决学习网页设计和制作过程中遇到的问题。
所以该网站的主题是“提供制作素材、解决学习问题、指导网页制作”。
2．确定网站风格
确定好站点主题后，就要根据该主题选择站点的风格。
由于本章所建立的网站是一个学习类网站，要求结构清晰，结合现代教学理念，将学习和网络合理整合，实现教学对象广泛、使用方便、时间自由。
本网站的主要特点如下：
（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格实现效果。
（2）背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅。
（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。
（4）首页的版式结构采用典型的“国”字型结构，二级栏目网页采用“顶部和嵌套的左侧框架”结构以及简单的“左右型”结构。
本章所介绍的网站名称为“网页设计和制作教学网”，简称为“网页教学网”，英文名称为“zzwebjx”。
3．构思网站栏目结构
先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。
本章的“网页教学网”的栏目结构如表17-1所示。
图17-1 “网页设计和制作教学网”的首页浏览效果
表17-1 “网页教学网”的栏目结构
一级栏目
二级栏目
三级栏目及内容页面
首页
index.html
网页制作基础：
wyjch.html
wyjch_xx_xx.html
网页制作技巧：
wyjq.html
wyjq_xx_xx.html
网页特效制作：
wytx.html
wytx_xx_xx.html
网页素材下载：
wysc.html
wysc_xx_xx.html
网络编程技术：
wybch.html
wybch_xx_xx.html
网页书籍浏览：
wybook.html
wybook_xx_xx.html
网络课程浏览：
wykch.html
wykch_xx_xx.html
教学交流答疑：
wyjl.html
wyjl_xx_xx.html
网站建设指南：
wzjsh.html
wzjsh_xx_xx.html
图像动画制作：
txdh.html
txdh_xx_xx.html
练习测试题库：
examtk.html
examtk_xx_xx.html
教学论坛（）
为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括11个菜单项：
制作基础、制作技巧、网页特效、网页素材、网络编程、网页书籍、网络课程、教学交流、建站指南、图像动画、测试题库，各个主菜单所包括的弹出子菜单如表17-2所示。
三级栏目及内容页面用数字标识其所属子类，例如利用JavaScript脚本制作网页的第一个内容页面，其文件名为：
wytx_02_01.html，“02”代表所属的子类，这一层次的网页和首页中的子菜单对应，“01”代表第一个内容页面的序号。
表17-2 首页中的菜单
首页中主菜单名称
弹出式子菜单名称
制作基础
Dreamweaver、Frontpage、HTML、XML、CSS、JavaScript、VBScript。
制作技巧
网页文本、网页图像、网页链接、网页导航、表格布局、层的布局、框架网页、模板和库、媒体使用、网页美化、表单网页、色彩搭配。
网页特效
标记特效、脚本特效、行为特效、插件特效。
网页素材
网页模板、Logo图片、首页背景、精美按钮、网页广告、网页欣赏、动画图片、扩展插件、导航菜单。
网络编程
ASP、PHP、JSP、.NET、Java、数据库。
网页书籍
网页制作、网页特效、网络编程、图形图像、动画制作、网站建设、艺术设计。
网络课程
学习入门、操作指导、教学向导。
教学交流
有问必答、经验交流、方法探讨、制作心得。
建站指南
方案设计、创意设计、网站结构、申请域名、申请空间、网站测试、网站发布。
图像动画
Fireworks、Photoshop、Flash。
测试题库
理论题库、操作题库、实训题库、成套题库、模拟实训。
视频教程
Dreamweaver视频教程、Fireworks视频教程、Flash视频教程、Photoshop视频教程、常用软件。
4．规划网站目录结构和链接结构
根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。
“网页教学网”的目录结构，各文件夹的所存放文件类型如表17-3所示。
※注意※
文件夹和文件的名称建议不要使用中文名，因为中文名在HTML文档中容易生成乱码，导致链接产生错误。
表17-3 网站的目录结构及其存放的文件类型
文件夹名称
存放的文件类型
css
CSS样式文件。
flash
动画文件、视频文件。
image
图像文件、照片。
js
外部脚本文件。
Library
库文件。
music
音乐、音频文件。
Templates
模板文件。
text
文字素材。
webpage_1
一级页面文件，该文件夹又有多个子文件夹，例如webpage_1_01。
webpage_2
二级页面文件，该文件夹又有多个子文件夹，例如webpage_2_01。
other
其他类型的文件。
webstandby
备用页面、备用素材
index.html
主页
网站的链接结构和目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。
本网站的链接结构采用“网状”链接结构，结构图如图17-2所示。
图17-2 “网页教学网”中的链接结构
5．主要页面布局设计
使用表格对首页和其他几个主面导航页面的布局结构草图进行设计，主页布局结构草图如图17-3所示，两种形式的导航页面布局结构草图如图17-4和图17-5所示。
由于本网站中许多页面都采用图17-5所示的布局结构，所以可以将该网页制作成模板。
图17-3 主页的布局结构草图
图17-4 利用“框架”制作的导航页面
图17-5 利用“表格、层、浮动框架”制作的导航页面
3.2 准备素材
根据网站的栏目、内容设计，链接结构设计，首页的布局结构，几个主要导航页面的布局结构，准备所需素材
1．准备文本
准备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜集文字资料，然后制作成word文档或文本文件，注意各种文字资料的文件名命名要科学合理，避免日后找不到所需的文本内容。
2．准备Logo
利用Fireworks或Photoshop量身定做本网站的Logo标志，Logo标志要和本网站的主题相符，要有新意。
3．准备图片及按钮
根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。
注意图片文件要尽可能小。
4．准备动画
网站中的动画最好能突出主题，起到画龙点睛之功效。
动画一般利用flash软件制作，本网站主页和导航页的标题动画就是利用flash软件量身定做。
5．建立库项目
网页中经常用到的项目，例如版权区，可以事先定义为库项目，以备制作网页时重复使用，提高工作效率。
3.3 创建网站
1．创建本地站点
在开始着手设计网页之前，首先要定义站点。
因为网页只是网站的一个组成部分，所有设计的网页和相关文件都要放置于站点之中。
定义站点的好处是：
定义站点以后的所有操作都是在站点统一监控之下进行。
如果使用了外部文件，Dreamweaver就会自动检测并予以提示和询问是否将外部文件复制到站点内，以保持站点的完整性。
如果某个文件夹或文件重新命名了，系统会自动更新所有的链接，以保证原有的链接关系的正确性。
创建站点之前，要求先建立一个文件夹，以便创建站点时为站点指定存储位置。
在Windows操作系统中，打开“资源管理器”，创建一个名为“网页教学网”的文件夹。
创建站点在第3章已有详细介绍，在此只作简要说明，和第3章中的步骤有所区别，这里假设事先已申请了主页空间，所申址的网址为：
，用户名和密码也已经知道。
定义站点的操作步骤如下：
（1）在Dreamweaver8主窗口中，单击菜单【站点】→【新建站点】，将弹出如图17-6所示站点定义对话框。
在该对话框中先输入站点的名称，然后输入网址，如图17-6所示。
接着单击【下一步】按钮，进入到下一步操作。
（2）选择“否，我不想使用服务器技术”单选按钮，然后单击【下一步】按钮，进入到下一步操作。
（3）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮，接着在下面的文本框中输入站点文件在本地计算机上的存放位置，也可以选择存储位置，然后单击【下一步】按钮，进入到下一步操作。
（4）选择连接到远程服务器的方式为“FTP”,然后分别输入Web服务器的主机名、在服务器上文件的存储位置、FTP用户名、FTP密码等参数，如图17-7所示。
然后单击【下一步】按钮。
（5）选择“否，不启用存回和取出”单选按钮，如图17-8所示。
接着单击【下一步】按钮，此时会显示所定义的站点信息。
如果发现有误可以单击【上一步】按钮，返回到上一步操作的对话框中重新修改。
如果站点定义信息符合要求，可以单击【完成】按钮，完成站点的定义。
此时会自动显示“文件”面板，并且会自动切换到新创建的网站。
图17-6 输入站点名称及网址
图17-7 设置连接远程服务器的参数
2．网站目录结构的搭建
创建站点后，在“文件”面板中切换到新创建的站点，然后利用快捷菜单创建文件夹及子文件夹，本网站的目录结构如图17-9所示。
图17-8 选择是否启用存回和取出
图17-9 “网页教学网站”的目录结构
3.4 网站首页的设计和制作
首先在网站根目录下创建首页文件index.html，在设计视图状态下，打开index.html，开始对首页进行布局。
3.4.1 网站首页的布局设计
首页的布局方案如下：
（1）整个页面分为9个区域，从上往下依次为：
表格1、页面区域1、页面区域2、页面区域3、表格2、表格3、页面区域4、页面区域5、页面区域6。
（2）表格1为1行1列（760×120），用于插入flash动画和Logo标志；表格2和表格3为1行3列；页面区域1为760×22，为导航栏；页面区域2为760×20，为导航栏，页面区域3为760×20，当前位置标识；页面区域4为760×33，图片型友情链接；页面区域5为760×22，文字型友情链接；页面区域6：
760×66，文字型导航菜单和版权信息区。
（3）表格2的第一列插入表格21（4行1列），第二列插入表格22（5行2列），第三列插入表格23（4行1列）；表格21中第4行插入表格211（18行2列）；表格22中第二列插入表格221（16行2列）；表格23中第4行插入表格231（18行2列）。
（4）表格3的结构和表格2相同。
网站首页的布局示意图如图17-13所示。
图17-10 网站首页的布局示意图
※注意※
页面中的间隔线是将表格中有些单元格的背景设置网状点所致。
3.4.2 编辑CSS样式文件
新建一个CSS样式文件“style1.css”，其主要代码代码如下所示：
body{
font-size:
12px;
font-family:
"宋体";
}
td{
font-size:
12px;line-height:
160%;font-family:
"宋体"
}
a:
hover{
color:
#990000;text-decoration:
underline
}
a{
color:
#000000;text-decoration:
none
}
.menu:
link{
color:
#ff0000;text-decoration:
underline
}
.menu:
hover{
color:
#ff0000;text-decoration:
underline
}
.menu:
visited{
color:
#000000;text-decoration:
none
}
#top{
clear:
both;border-right:
#0000001pxsolid;
border-top:
#0000001pxsolid;border-left:
#0000001pxsolid;
width:
760px;padding:
3px;height:
70px
}
#banner{
width:
756px;text-align:
right;padding-right:
4px;
}
#nav{
background-image:
url（../image/d2_bg.gif）;
background-position:
top;width:
750px;
border-right:
#0000001pxsolid;
border-left:
#0000001pxsolid;
height:
22px;text-align:
center;padding:
8px;
}
#nav1{
background-position:
top;width:
762px;
border-right:
#0000001pxsolid;
border-left:
#0000001pxsolid;
height:
20px;text-align:
left;top:
2px;
background-color:
#ffcc99;padding:
2px;
}
#nav4{
background:
#f8e587;background-position:
top;
width:
766px;border-right:
#0000001pxsolid;
border-left:
#0000001pxsolid;height:
20px;
text-align:
left;padding-top:
5px
}
#text{
font-size:
14px;margin:
12px
升级会员 