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

《网页设计与制作》课程设计实训指导书一、实训目的《网页制作课程设计》是电子商务专业的一门重要的专业必修课程，也是该专业的一门重点建设课程。

随着电子商务的迅速发展，网站的建设也越来越重要。

目前很多企业都在上网，开展网络营销活动，设计并制作企业自己的商务网站则是企业实现网络化经营的重要手段。

因此，作为电子商务专业的学生，学习网页的设计与制作是十分必要的。

通过课程设计的训练，使每位学生在掌握理论知识基础上，通过身体力行的实践具备网页设计与制作的相关技术及网页制作的操作技能，能独立设计小型WEB站点。

二、实训任务通过对网站的设计，使学生熟练应用网站设计软件，使学生对网站建设有一个综合系统的掌握。

在制作过程中，主要完成对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成项目作品。

具体要求是：（1）网站中网页的个数不少于10页（2）至少有一页用到表格布局（3）至少有一页用到CSS+DIV布局（4）至少有一页使用框架布局，至少有一页使用页内框架（5）为该网站设计一个调研问卷（6）适当使用图片，并把所有的图片放在一个文件夹下（7）可以借助Dreamweaver工具三、实训计划四、实训考核与评分根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。

评分参考标准如下表所示。

网站开发实训的参考评分标准作品完成情况当场验收考核，实训报告在14周上交。

附录一：实训报告内容•封面•目录•网站全名及logo 标志；•建立网站的目的、意义；•网页设计制作最突出的创意（如Amgo “俺们走”,logo 设计有特色）；•网站的栏目设计；•色彩搭配及其含义（如绿色+ 金黄+ 淡白，体现优雅, 舒适的感觉；）•网站的结构图和页面组成；•网站设计中具体实现的几个关键功能和相关技术说明（例如布局的方法：应用层、应用表格、应用模板、应用Flash 或其他脚本技术）；•对所做各网页的抓图，并做简要说明；•网站建设的心得体会和扩展性分析；•参考资料附录二：参考网站主题（1）制作教学资源网站。

（2）制作个人网站。

（3）制作班级网站。

（4）制作学习网站。

（5）制作学校网站。

（6）制作旅游网站。

（7）制作公司网站。

附录三：网站设计与制作案例3．1 规划网站1．策划网站主题在首手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。

本章所创建的网站是一个学习类网站，主要介绍网页制作的基础知识、网站建立的基础知识、网页制作的技巧、网页特效的制作方法、网络编程语言、动画制作方法、图像处理方法等内容，同时为读者提供大量的网页制作素材、学习网页设计和编程的视频教程，解决学习网页设计与制作过程中遇到的问题。

所以该网站的主题是“提供制作素材、解决学习问题、指导网页制作”。

2．确定网站风格确定好站点主题后，就要根据该主题选择站点的风格。

由于本章所建立的网站是一个学习类网站，要求结构清晰，结合现代教学理念，将学习与网络合理整合，实现教学对象广泛、使用方便、时间自由。

本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格实现效果。

（2）背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅。

（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。

（4）首页的版式结构采用典型的“国”字型结构，二级栏目网页采用“顶部和嵌套的左侧框架”结构以及简单的“左右型”结构。

本章所介绍的网站名称为“网页设计与制作教学网”，简称为“网页教学网”，英文名称为“zzwebjx”。

3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。

本章的“网页教学网”的栏目结构如表17-1所示。

图17-1“网页设计与制作教学网”的首页浏览效果表17-1“网页教学网”的栏目结构为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括11个菜单项：制作基础、制作技巧、网页特效、网页素材、网络编程、网页书籍、网络课程、教学交流、建站指南、图像动画、考试题库，各个主菜单所包括的弹出子菜单如表17-2所示。

三级栏目及内容页面用数字标识其所属子类，例如利用JavaScript 脚本制作网页的第一个内容页面，其文件名为：wytx_02_01.html，“02”代表所属的子类，这一层次的网页与首页中的子菜单对应，“01”代表第一个内容页面的序号。

表17-2首页中的菜单4．规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。

“网页教学网”的目录结构，各文件夹的所存放文件类型如表17-3所示。

※注意※文件夹和文件的名称建议不要使用中文名，因为中文名在HTML 文档中容易生成乱码，导致链接产生错误。

表17-3网站的目录结构及其存放的文件类型网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。

本网站的链接结构采用“网状”链接结构，结构图如图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）在Dreamweaver 8主窗口中，单击菜单【站点】→【新建站点】，将弹出如图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所示。