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

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

一、 实训目的

本次实训给学生提供了深入学习的资料和信息，紧紧围绕网站设计流程：规划、设计、开发、发布、维护来进行网站的开发，模仿并设计制作出相关的网站。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。

二、 实训任务

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

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

1．网站策划

1）画出网站结构草图。 2）确定栏目。 3）进行版面设计。

分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容

4）搜集素材。如相关文字录入，图片素材，班级相片等等。

2．制作网页。

1）建立站点。

例如：命名为webfile,网站的结构如下：

2）进行主页的设计。

要求主页中包含一个自己完成的Flash。

3）进行其他页面的设计。 4）建立几个页面间的链接关系。

3．测试网站 4．作品提交与评分

三、 实训计划

序号 1 任务 实训任务讲解 项目任务分析 画出网站结构草图 2 网站策划 确定栏目 进行版面设计 搜集素材 建立站点 3 制作网页 进行主页的设计与制作 进行其他页面的设计 建立几个页面间的链接关系 4 5 6 测试网站 作品提交与评分 实训报告的编写 检查网页的运行情况 依照评分表进行考核 参见附录 合计 内容 课时 1 1 1 1 3 1 8 2 2 1 1 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动画和

距”设置为1；“文本缩进”设置为0；“菜单延迟”设置为500ms，相当于0.5秒钟；取消对“显示边框”复选框的选择。下面可以看到其外观效果，如图17-23所示。

图17-23 “显示弹出式菜单”对话框中的“高级”选项卡

（4）设置位置选项

切换到“位置”选项卡，设置弹出式菜单相对于触发图像或链接文字的显示位置。先单击【低于且位于触发器的左边缘】按钮，在“X”文本框中输入“-130”，即弹出式菜单显示在触发链接文字的左边130像素外；在“Y”文本框中输入“13”，其原因是首页中显示水平弹出式菜单的位置只留出了13像素的空间。选中“在发生onMouseOut事件时隐藏菜单”复选框，如图17-24所示。

图17-24 “显示弹出式菜单”对话框中的“位置”选项卡

在图17-24所示的对话框中单击【确定】按钮，返回网页编辑窗口，在“行为”面板列表中显示了两个动作：onMouseOut（隐藏弹出式菜单）、onMouseOver（显示弹出式菜单）。如图17-25所示。

如果需要重新设置弹出式菜单的选项，可以在“行为”面板中双击“显示弹出式菜单”，或者单击鼠标右键，在弹出菜单中单击【编辑行为】命令，即可重新打开“显示弹出式菜单”对话框，对弹出式菜单进行修改，修改完成后单击【确定】按钮即可。

4．保存该网页文档，在浏览器中查看弹出式菜单的效果，如图17-26所示。

图17-25 行为面板中显示了两个动作和“编辑行为”菜单

图17-26 首页中“网页特效”主菜单的弹出式菜单

使用同样的方法为其他主菜单设置弹出式菜单。

3.8 查看与设置站点地图

站点地图使用直观的树状结构显示网站中文件的链接关系，在站点视图中可以将文件加入到站点中，或者加入、修改、删除链接。 1．查看站点地图

在“文件”面板中，单击视图列表中的“地图视图”，如图17-27所示，这时，在文件列表中将以站点地图的方式显示网站的文件，展现出站点中文件之间的链接关系。

单击【展开以显示本地和远端站点】按钮

，

将把以地图视图显示的“文件”面板展开，如图17-28所示。在图17-28中单击工具栏的【站点地图】按钮

，从其下拉菜单中选择“地图和文

件”，如图17-29所示，也可以选择“仅地图”。

在站点地图视图中，首页文档index.html显示在最上方，在index.html文件名下方的页面都是由首页所链向的页面。在站点地图视图中，不仅能显示出内部链接，还能显示出外部链接、电子邮件链接、外部样式文件、图像文件等。

图17-27 选择“地图视图”

图17-28 站点文件以“地图”形式显示

2．站点地图中的操作 （1）隐藏文件

在站点地图中选定一个或几个要隐藏的文件，然后单击鼠标右键，在弹出的快捷菜单单击【显示/隐藏】命令，被选中的文件就会在站点地图中消失。

图17-29 “站点地图”下拉菜单

※注意※

如果菜单【查看】→【站点地图选项】中的级联菜单项【显示标记为隐藏的文件】已经被选中，则设置隐藏文件时，文件就不会从站点地图中消失了。

（2）显示文件

如果要显示隐藏的文件，可以单击菜单【查看】→【站点地图选项】→【显示标记为隐藏的文件】。

在站点地图可进行的操作较多，例如可以完成“链接到新文件”、“链接到已有文件”、“改变链接”、“移除链接”、“打开链接源”、“显示网页标题”等操作。

3．保存站点地图

站点地图可以作为图形文件保存，操作很简单，单击菜单【文件】→【保存站点地图】，在弹出的“保存站点地图”对话框，输入文件名，单击【保存】按钮即可。如图17-30所示即为所保存的站点地图。

图17-30 所保存的站点地图

3.9 测试网站

一个网站包含很多链接，可能会出现链接错误或断链现象，在发布站点前有必要检查整个站点的链接，以避免站点发布之后出现无效链接情形。利用Dreamweaver 8提供的“检查链接”可以检查网站中存在断链、孤立文件等。

链接检查无误后，可以在浏览器中浏览各个网页，检查文字、图片、链接是否有误、是否会出现乱码，，网页元素定位是否准确，浏览速度和视觉效果是否满意。经过测试、修改、再测试、再修改，反复多次循环，直到各方面都合格方可发布网站。

3.10 发布网站

发布网站就是把网页文件上传到Web服务器，发布网站之前先必须申请一个主页空间，拥有网页空间的访问域名、FTP用户名和密码。如果主页空间已成功申请，可以先与远程Web服务器进行连接，连接成功后，再通过单击“文件”面板上的【上传文件】按钮，往远程Web服务器中上传本地站点，上传成功后，就可以在浏览器中输入正确的网址访问网站了。

本文来源：https://www.bwwdw.com/article/tho2.html