《网页设计与制作》课程实训指导书

1、网页设计与制作课程实训指导书一、 实训目的本次实训给学生提供了深入学习的资料和信息，紧紧围绕网站设计流程：规划、设计、开发、发布、维护来进行网站的开发，模仿并设计制作出相关的网站。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。二、 实训任务通过对网站的设计，使学生熟练应用网站设计软件，使学生网站建设有一个综合系统的掌握。在制作过程中，主要完成对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实

2、现、表单的使用、模板和库的应用等，完成项目作品。1网站策划1）画出网站结构草图。2）确定栏目。3）进行版面设计。分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容4）搜集素材。如相关文字录入，图片素材，班级相片等等。2制作网页。1）建立站点。例如：命名为webfile,网站的结构如下：2）进行主页的设计。要求主页中包含一个自己完成的Flash。3）进行其他页面的设计。4）建立几个页面间的链接关系。3测试网站4作品提交与评分三、 实训计划序号任务内容课时1实训任务讲解项目任务分析12网站策划画出网站结构草图1确定栏目1进行版面设计1搜集素材33制作网页建立站点1进行主页的设计与制作8进

3、行其他页面的设计2建立几个页面间的链接关系24测试网站检查网页的运行情况15作品提交与评分依照评分表进行考核16实训报告的编写参见附录2合计24四、 实训环境计算机上要求安装有Dreamweaver、Flash、photoshop等软件。计算机与互联网相连，以便学生能够浏览优秀网站，搜集相关素材等。五、 实训过程（含步骤）1. 确定目标 通过网络就某个专题搜索资料， 题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？分那几个栏目，每个栏目的特色和主要内容是什么？参考专题：对计算机基础教育的看法，互动式教学的方式，网上论坛，QQ聊天论述等。也可以是其它的有兴趣的专题如：

4、文学、历史、科技、体育、旅游、生活、时尚等。参考选题：班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网站2. 选择目标用户 确定了站点实现的目标之后，需要确定站点的浏览客户。创建世界上每个人都能使用的 Web 站点是不可能的。人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。因此需要确定目标用户，根据用户的特点来设计站点风格。 3. 组织站点结构 如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的臃肿混乱的文件夹，或导致相关的文件散布在许多名称类似的文件夹中。 设置站点的常规做法是在本地磁盘上创建一个包含

5、站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件拷贝到 Web 服务器上。 组织站点结构时，应注意以下三个问题： 1)      将站点分类，把相关的页面放在同一文件夹中。2)      将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。例如，将所有图像放在Images 文件夹中，当在页面中插入图像时，就可以方便的找到它。3)      本地站点和远程 Web 站点

6、应该具有完全相同的结构。如果使用 Dreamweaver创建本地站点，然后将全部内容上传到远程站点，则 Dreamweaver确保在远程站点中精确拷贝本地结构。  4. 设计外观 页面布局和设计保持一致非常重要。如果不考虑板块设计，浏览者会觉得你的网站内容杂乱、无条理，先要考虑好自己设计的板块与链接结构；根据所需的站点布局外观，在实训报告本上画一个站点草图，以便以后建立站点时可以按照它来操作。如图1所示，是一个站点首页的设计布局图。5. 设计导航方案 设计站点时，应考虑如何使访问者能够方便的从一个区域移动到另一个区域。具体考虑以下几点：明确“当前位置”；导航方便；提供与网站管理员的联

7、系方法。 6. 规划和收集资料 完成了设计和布局后，就可以创建和收集需要的资源了。资源可以是图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项目并做好了准备。否则，可能为找不到一幅图像而中断设计、开发过程。LogoBanner简单功能导航栏功能列表或局部导航主要内容版权声明六、 实训要求1动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。2制作网页前，收集好所需的文字资料、图像资料、flash动画和网页特效。3所创建的网站至少包括8个页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。（1）首页采用表格

8、进行布局，必须包含导航栏；（2）4个二级子页分别为框架网页、表单网页、利用模板制作的网页、利用布局表格制作的网页；（3）3个内容页分别为层布局的网页、应用JavaScript制作特效的网页、应用行为制作特效的网页。（4）各个页面根据需要插入合适的图像和Falsh动画，首页要求插入背景音乐。（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。（6）各个页面之间导航清晰、链接准确无误。4网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。5实训过程中既要虚心接受老师的指导，又要充分发挥主观能动性、独立思考、努力钻研、勤于实践、

9、勇于创新。6在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。7实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，实训成绩按不及格处理。七、 实训考核与评分根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。评分参考标准如下表所示。网站开发实训的参考评分标准序号考核项目评分比例1网站效果（1）内容方面

10、：主题明确，内容健康、具体，各个页面的文字、图像、动画能够清晰地表达主题。70%（2）版面结构：版面结构合理，每个页面都有返回上一级或链接到其他页面的文字或按钮。（3）视觉感受：色彩搭配协调、美观，页面设计规范，没有出现乱码、空链接和错误链接。（4）网站风格：网站具有特色，主题、文字、图像、动画有创新。2纪律考核实训期间组织纪律性强，无迟到、早退、缺课现象10%3创新情况制作的网页具有独创性，构思巧妙、有新意5%4成员协作所有的成员在规定时间内完成实训任务，无雷同现象或抄袭现象。5%5实训报告实训报告书写认真、完整、字迹清楚、页面整洁，实训收获较大10%合计100%作品完成情况当场验收考核，实

11、训报告在整周实训结束后上交。附录一：实训报告内容 封面  目录  网站全名及 logo 标志  建立网站的目的、意义  网页设计制作最突出的创意（如 Amgo “俺们走” ,logo 设计有特色）  网站的栏目设计  色彩搭配及其含义（如绿色 + 金黄 + 淡白，体现优雅 , 舒适的感觉）  网站的结构图和页面组成  网站设计中具体实现的几个关键功能和相关技术说明（例如布局的方法：应用层、应用表格、应用模板、应用 Flash 或其他脚本技术）  如何安排进度和计划完成时间  网站建设的心得体会和

12、扩展性分析  参考资料附录二：参考网站主题（1）制作教学资源网站。（2）制作个人网站。（3）制作班级网站。（4）制作学习网站。（5）制作学校网站。（6）制作旅游网站。（7）制作公司网站。（8）制作体育网站。附录三：网站开发案例31 规划网站1策划网站主题在首手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。本章所创建的网站是一个学习类网站，主要介绍网页制作的基础知识、网站建立的基础知识、网页制作的技巧、网页特效的制作方法、网络编程语言、动画制作方法、图像处理方法等内容，同时为读者提供大量的网页制作素材、学习网页设计和编程的视频教程，解决学习网页设计与制作过程中遇到

13、的问题。所以该网站的主题是“提供制作素材、解决学习问题、指导网页制作”。2确定网站风格确定好站点主题后，就要根据该主题选择站点的风格。由于本章所建立的网站是一个学习类网站，要求结构清晰，结合现代教学理念，将学习与网络合理整合，实现教学对象广泛、使用方便、时间自由。本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格实现效果。（2）背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅。（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。（4）首页的版式结构采用典型的“国”字型结构，二级栏目网页采用“顶部

14、和嵌套的左侧框架”结构以及简单的“左右型”结构。本章所介绍的网站名称为“网页设计与制作教学网”，简称为“网页教学网”，英文名称为“zzwebjx”。3构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。本章的“网页教学网”的栏目结构如表17-1所示。图17-1“网页设计与制作教学网”的首页浏览效果表17-1“网页教学网”的栏目结构一级栏目二级栏目三级栏目及内容页面首页index.html网页制作基础：wyjch.htmlwyjch_xx_xx.html网页制作技巧：wyjq.htmlwyjq_xx_xx.html网页特效制作：wytx.htmlwy

15、tx_xx_xx.html网页素材下载：wysc.htmlwysc_xx_xx.html网络编程技术：wybch.htmlwybch_xx_xx.html网页书籍浏览：wybook.htmlwybook_xx_xx.html网络课程浏览：wykch.htmlwykch_xx_xx.html教学交流答疑：wyjl.htmlwyjl_xx_xx.html网站建设指南：wzjsh.htmlwzjsh_xx_xx.html图像动画制作：txdh.htmltxdh_xx_xx.html练习考试题库：examtk.htmlexamtk_xx_xx.html教学论坛（）为了简化对网站的浏览过程，大部分网页通

16、过二级栏目就能浏览内容页面，首页的主菜单包括11个菜单项：制作基础、制作技巧、网页特效、网页素材、网络编程、网页书籍、网络课程、教学交流、建站指南、图像动画、考试题库，各个主菜单所包括的弹出子菜单如表17-2所示。三级栏目及内容页面用数字标识其所属子类，例如利用JavaScript脚本制作网页的第一个内容页面，其文件名为：wytx_02_01.html，“02”代表所属的子类，这一层次的网页与首页中的子菜单对应，“01”代表第一个内容页面的序号。表17-2首页中的菜单首页中主菜单名称弹出式子菜单名称制作基础Dreamweaver、Frontpage、HTML、XML、CSS、JavaScrip

17、t、VBScript。制作技巧网页文本、网页图像、网页链接、网页导航、表格布局、层的布局、框架网页、模板与库、媒体应用、网页美化、表单网页、色彩搭配。网页特效标记特效、脚本特效、行为特效、插件特效。网页素材网页模板、Logo图片、首页背景、精美按钮、网页广告、网页欣赏、动画图片、扩展插件、导航菜单。网络编程ASP、PHP、JSP、.NET、Java、数据库。网页书籍网页制作、网页特效、网络编程、图形图像、动画制作、网站建设、艺术设计。网络课程学习入门、操作指导、教学向导。教学交流有问必答、经验交流、方法探讨、制作心得。建站指南方案设计、创意设计、网站结构、申请域名、申请空间、网站测试、网站发布

18、。图像动画Fireworks、Photoshop、Flash。考试题库理论题库、操作题库、实训题库、成套题库、模拟实训。视频教程Dreamweaver视频教程、Fireworks视频教程、Flash视频教程、Photoshop视频教程、 常用软件。4规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。“网页教学网”的目录结构，各文件夹的所存放文件类型如表17-3所示。注意文件夹和文件的名称建议不要使用中文名，因为中文名在HTML文档中容易生成乱码，导致链接产生错误。表17-3网站的目录结构

19、及其存放的文件类型文件夹名称存放的文件类型cssCSS样式文件。flash 动画文件、视频文件。image图像文件、照片。js外部脚本文件。Library库文件。music音乐、音频文件。Templates模板文件。text文字素材。webpage_1一级页面文件，该文件夹又有多个子文件夹，例如webpage_1_01。webpage_2二级页面文件，该文件夹又有多个子文件夹，例如webpage_2_01。other其他类型的文件。webstandby备用页面、备用素材index.html主页网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站

20、的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。本网站的链接结构采用“网状”链接结构，结构图如图17-2所示。图17-2“网页教学网”中的链接结构5主要页面布局设计使用表格对首页与其他几个主面导航页面的布局结构草图进行设计，主页布局结构草图如图17-3所示，两种形式的导航页面布局结构草图如图17-4和图17-5所示。由于本网站中许多页面都采用图17-5所示的布局结构，所以可以将该网页制作成模板。图17-3主页的布局结构草图图17-4利用“框架”制作的导航页面图17-5利用“表格、层、浮动框架”制作的导航页面3.2准备素材根据网站的栏目、内容设计，链接结构设计，首

21、页的布局结构，几个主要导航页面的布局结构，准备所需素材1准备文本准备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜集文字资料，然后制作成word文档或文本文件，注意各种文字资料的文件名命名要科学合理，避免日后找不到所需的文本内容。2准备Logo利用Fireworks或Photoshop量身定做本网站的Logo标志，Logo标志要与本网站的主题相符，要有新意。3准备图片及按钮根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。注意图片文件要尽可能小。4准备动画网站中的动画最好能突出主题，起到画龙点睛之功效。动画一般利用flash软件制作，本网站主页

22、和导航页的标题动画就是利用flash软件量身定做。5建立库项目网页中经常用到的项目，例如版权区，可以事先定义为库项目，以备制作网页时重复使用，提高工作效率。3.3创建网站1创建本地站点在开始着手设计网页之前，首先要定义站点。因为网页只是网站的一个组成部分，所有设计的网页和相关文件都要放置于站点之中。定义站点的好处是：定义站点以后的所有操作都是在站点统一监控之下进行。如果使用了外部文件，Dreamweaver就会自动检测并予以提示和询问是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件夹或文件重新命名了，系统会自动更新所有的链接，以保证原有的链接关系的正确性。创建站点之前，要求先建立一

23、个文件夹，以便创建站点时为站点指定存储位置。在Windows操作系统中，打开“资源管理器”，创建一个名为“网页教学网”的文件夹。创建站点在第3章已有详细介绍，在此只作简要说明，与第3章中的步骤有所区别，这里假设事先已申请了主页空间，所申址的网址为：，用户名和密码也已经知道。定义站点的操作步骤如下：（1）在Dreamweaver 8主窗口中，单击菜单【站点】【新建站点】，将弹出如图17-6所示站点定义对话框。在该对话框中先输入站点的名称，然后输入网址，如图17-6所示。接着单击【下一步】按钮，进入到下一步操作。（2）选择“否，我不想使用服务器技术”单选按钮，然后单击【下一步】按钮，进入到下一步操

24、作。（3）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮，接着在下面的文本框中输入站点文件在本地计算机上的存放位置，也可以选择存储位置，然后单击【下一步】按钮，进入到下一步操作。（4）选择连接到远程服务器的方式为“FTP”,然后分别输入Web服务器的主机名、在服务器上文件的存储位置、FTP用户名、FTP密码等参数，如图17-7所示。然后单击【下一步】按钮。（5）选择“否，不启用存回和取出”单选按钮，如图17-8所示。接着单击【下一步】按钮，此时会显示所定义的站点信息。如果发现有误可以单击【上一步】按钮，返回到上一步操作的对话框中重新修改。如果站点定义信息符合要求，可以

25、单击【完成】按钮，完成站点的定义。此时会自动显示“文件”面板，并且会自动切换到新创建的网站。图17-6输入站点名称及网址图17-7设置连接远程服务器的参数2网站目录结构的搭建创建站点后，在“文件”面板中切换到新创建的站点，然后利用快捷菜单创建文件夹及子文件夹，本网站的目录结构如图17-9所示。图17-8选择是否启用存回和取出图17-9“网页教学网站”的目录结构3.4网站首页的设计与制作首先在网站根目录下创建首页文件index.html，在设计视图状态下，打开index.html，开始对首页进行布局。3.4.1网站首页的布局设计首页的布局方案如下：（1）整个页面分为9个区域，从上往下依次为：表格

26、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列），第三

27、列插入表格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: 16

28、0%; 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

29、; border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; 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: #00

30、0000 1px solid; border-left: #000000 1px solid; height:22px; text-align: center; padding: 8px; #nav1 background-position: top; width:762px; border-right: #000000 1px solid; border-left: #000000 1px solid; height:20px ; text-align: left; top: 2px ; background-color: #ffcc99; padding: 2px; #nav4 backg

31、round: #f8e587; background-position: top; width:766px; border-right: #000000 1px solid; border-left: #000000 1px solid;height:20px; text-align: left;padding-top: 5px #text font-size: 14px; margin: 12px; line-height: 160%; text-align: left #foot background: #eaba27; background-position: top; width:76

32、6px; border-top: #000000 1px solid; border-right: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid; text-align: center; padding-top: 3px #logolink background: #ffffff ; background-position: top; width:766px ; height:33px; text-align: cente r; padding-top: 5px ; bor

33、der-top-width: 1px ; border-right-width: 1px; border-left-width: 1px ; border-top-style: solid; border-right-style: solid ; border-left-style: solid; border-top-color: #000000 ; border-right-color: #000000 ; border-left-color: #000000; #wordlink background: #ffffff ; background-position: top ; width

34、:766px; height:22px ; text-align: center ; padding-top: 5px ; border-top-width: 1px ; border-right-width: 1px ; border-left-width: 1px ; border-top-style: solid ; border-right-style: solid ; border-left-style: solid ; border-top-color: #000000 ; border-right-color: #000000 ; border-left-color: #0000

35、00; 在网站首页代码的HEAD部分添加一行代码（<link href="css/style1.css" rel="stylesheet" type="text/css" />），引入CSS样式文件。3.4.3网站首页的布局设计1网站首页的主体布局在首页中插入三个表格，定义六个块（用div标记符定义），并在style1.css样式文件中为这六个块定义样式。首页主体布局的浏览效果如图17-11所示。图17-11网站首页布局的浏览效果首页主体布局的HTML代码如下：<html><head><tit

36、le>网页设计与制作教学网|网页教学|网页制作|网页特效|素材下载</title><meta http-equiv="content-type" content="text/html; charset=gb2312" /><base onmouseover="window.status='网页教学网！'return true" /><link href="css/style1.css" rel="stylesheet" type=&

37、quot;text/css" /></head><body bgcolor="#ffffff" leftmargin="0" topmargin="3"> <div align="center"> <div id="top"> <table id="table1" border="0" cellpadding="0" cellspacing="0"

38、> <tr><td width="760" height="120" valign="middle">表格1</td></tr> </table> </div></div> <div align="center"><div id="nav" >页面区域1<!-首页菜单-></div></div> <div align="center

39、"><div id="nav1">页面区域2<!-位置导航-></div></div> <div align="center"><div id="nav4">页面区域3<!-视频课程-></div></div> <table id="table2" cellspacing="0" width="760" align="center&quo

40、t; border="0"> <tbody> <tr> <td width="176" height="200" align="center" valign="middle" style="border-right: #111111 1px solid;border-left: #000000 1px solid ; border-bottom:#111111 1px solid;">表格2：a单元格</td> <t

41、d width="381" height="200" align="center" valign="middle" bgcolor="#ffffff" style="border-right: #000000 1px solid; border-bottom:#111111 1px solid;">表格2：b单元格</td> <td width="202" height="200" align="cen

42、ter" valign="middle" bgcolor="#ffffff" style="border-right: #000000 1px solid; border-bottom:#111111 1px solid;">表格2：c单元格</td> </tr> </tbody> </table> <table id="table3" cellspacing="0" width="760" align=&

43、quot;center" border="0"> <tbody> <tr> <td width="176" height="200" align="center" valign="middle" style="border-right: #111111 1px solid;border-left: #000000 1px solid"> 表格3：a单元格</td> <td width="381&q

44、uot; height="200" align="center" valign="middle" style="border-right: #000000 1px solid">表格3：b单元格</td> <td height="200" align="center" valign="middle" style="border-right: #000000 1px solid">表格3：c单元格</t

45、d> </tr> </tbody> </table> <div align="center"> <div id="logolink">页面区域4 </div></div> <div align="center"> <div id="wordlink">页面区域5 </div></div> <div align="center"> <div i

46、d="foot">页面区域6 </div></div></body></html>2插入嵌套表格分别在表格2和表格3的三个单元格各插入一个表格，例如在表格2的B单元格中插入一个5行2列的嵌套表格22，该表格的HTML代码如下，其他的几个嵌套表格的HTML代码与表格22相似。<table width="100%" height="200" border="0" align="center" cellspacing="0"

47、;> <tbody> <tr> <td colspan="2" background=" image/line.gif" height="1">表格22:A单元格</td> </tr> <tr> <td width="153" height="23" background="bg02.gif" >表格22:B单元格</td> <td width="234&qu

48、ot; background="bg02.gif" >表格22:C单元格</td> </tr> <tr> <td colspan="2" background=" image/line.gif" height="1">表格22:D单元格</td> </tr> <tr> <td height="168" align="center" valign="middle"

49、><br/>表格22:E单元格</td> <td valign="top" align="middle">表格22:F单元格</td> </tr> <tr> <td colspan="2" background=" image/line.gif" height="1">表格22:G单元格</td> </tr> </tbody></table>接下来在表格21、

50、表格22、表格23、表格31、表格32、表格33中再插入嵌套表格，形成三层嵌套结构，例如表格23中插入一个18行2列的表格231，该表格的的HTML代码如下。其也的几个表格的HTML代码与表格231相似。<table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td width="25" height="23"></td>

51、; <td width="157" height="23"></td> </tr> <tr> <td background=" image/sing.jpg" tppabs=colspan="2" height="3"></td> </tr> <tr> <td width="25" height="23"></td> <td wid

52、th="157" height="23"></td> </tr> <tr> <td background=" image/sing.jpg" colspan="2" height="3"></td> </tr> <!-8行为文字内容，尺寸相同-> <!-8行为间隔行，尺寸相同-> <tr> <td background="image/sing.jpg" co

53、lspan="2" height="3"></td> </tr> </tbody></table>3.4.4编辑美化网站首页在首页中输入文字、插入图片、flash动画、脚本代码，对首页进行编辑和美化，主要操作内容如下：（1）设置页面属性网页标题设置为“网页设计与制作教学网|网页教学|网页制作|网页特效|建站指南|网络编程|素材下载|教程下载|HTML|CSS|数据库”，“上边距”设置为0。（2）在表格1插入标题flash和Logo标志。（3）在页面区域1中输入导航文字：“制作基础 | 制作技巧 | 网

54、页特效 | 网页素材 | 网络编程| 网页书籍 | 网络课程 | 教学交流 | 建站指南 | 图像动画 | 考试题库”。（4）在页面区域2左侧输入“当前位置：网页教学网 >> 首页”，右侧输入文字“日期：”，然后插入日期与时间，中间用空格分隔。插入显示日期与时间的JavaScript代码的步骤如下：在Dreamweaver 8主窗口中，单击菜单【插入】【HTML】【脚本对象】【脚本】，在弹出的“脚本”对话框“内容”列表框中输入以下代码：<span id="showtime" ><script>setInterval("showt

55、ime.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay();",1000);</script> </span>如图17-15所示的“脚本”对话框，然后单击【确定】按钮，在首页中文字“日期：”右侧将会动态显示浏览网页的日期和时间。图17-12“脚本”对话框（5）在页面区域3输入文字：“推荐视频教程：Dreamweaver视频教程 | Fireworks视频教程 | Flash视频教程 | Photoshop视频教程 | 常

56、用软件”。（6）在表格21、表格211、表格22、表格221、表格23、表格231中插入图像、输入文字，注意将间隔单元的背景设置为网状点图片。（7）在表格31、表格311、表格32、表格321、表格33、表格331中插入图像、输入文字，注意将间隔单元的背景设置为网状点图片。（8）在页面区域4中插入图片型友情链接，在页页区域5中插入文字型友情链接，在页面区域6中输入导航菜单文字和版权信息。（9）利用属性面板，对添加的各网页元素进行修饰，包括文字或图片的对齐方式，表格或单元格的背景颜色等。（10）应用CSS样式在页面的六个块区域中应用CSS样式，如表17-4所示。表17-4CSS样式的应用页面区域

57、应用的样式的HTML代码页面区域1<div id="top"></div>页面区域2<div id="nav1"></div>页面区域3<div id="nav4"></div>页面区域4<div id="logolink"></div>页面区域5<div id="wordlink"></div>页面区域6<div id="foot"></

58、div>（11）在状态插入“打字效果”的文字特效文字在状态栏中从左往右一个一个显示，好像打字一样，在代码的HEAD区域输入如下代码，实现打字效果的文字特效。<script language="javascript" type="text/javascript">var msg = "欢迎光临湖南铁道职业技术学院网页教学网，请多提宝贵意见" ;var interval = 220 /间隔时间var seq=0;function statushow() len = msg.length; /字符串长度window.sta

59、tus = msg.substring(0, seq+1);seq+;if ( seq >= len ) seq = 0; window.status = '' window.settimeout("statushow();", interval ); else window.settimeout("statushow();", interval );statushow();</script>（12）保存首页，并预览其效果。首页的预览效果如图17-1所示。3.5制作二级栏目网页和内容网页3.5.1制作模板由于本网站的二级

60、栏目页和内容页存在大量布局结构相同的页面，它们只是具体的内容不同，为了统一外观、提高制作效率，这些页面基于模块文件创建。接下来制作模板。1创建基于表格和层的模板（1）新建一个网页文件。（2）插入一个2行2列的表格，且将第一行的两个单元格合并。（3）在第二行左边的单元格插入一个20行2列的嵌套表格，该表格最后一行的两个单元格合并，且输入文字“返回首页”。在嵌套表格前19行左边的单元格插入特殊字符“”。（4）为文字“返回首页”设置超链接选中文字“返回首页”，在“链接”文本框中输入“index.html”，在“目标”下拉列表框中选择“_parent”。（5）在第二行右边的单元格绘制一个层，该层的宽度

61、为558px，高度为658px。页面的外观如图17-13所示，以上操作是设计模板的页面文档，此时的文档仍是页面文档，而不是模板文档，下面将页面文档保存为模板文档。（6）在Dreamweaver 8主窗口中，单击菜单【文件】【另存为模板】，弹出“另存板”对话框，在该对话框中，选择站点“网页教学网”，输入模板的名称：wyjch.dwt，然后单击【保存】按钮，将当前文档保存为模板文档。（7）定义可编辑区域将页面文档保存为模板后，还需要在模板中定义可编辑区域，如果不在模板中定义可编辑区域，则基于该模板创建的网页文档都是不可编辑的。选中页面中2行2列表格中第一行，单击菜单【插入】【模板对象】【可编辑区域】，将会弹出“新建可编辑区域”对话框，输入可编辑区域的名称：EditRegion3，然后单击【确定】按钮，完成可编辑区域的创建。按照同样的操作方法将层和嵌套表格都设置为可编辑区域，名称分别为EditRegion4、EditRegion5。单击标准工具栏中的【全部保存】按钮，保存模板文档。模板文档的外观如图17-13所示。图17-13基于表格和层的模板2创建基于表单的页面模板为了使网页浏览者既能