网页设计实训教案

项目一综合实训（网站维护）

【项目内容】

讲授站点的维护方法

【项目目的】

1. 该岗位工作流程及基本工作技能

2. 页面内容的更新 ( 例如 : 更新最新消息 )

3. 通过修改模板删除一个栏目或一个增加栏目

4. 网站运行常见错误的处理 ( 如断链、死链、孤立文件 )

5. 网站的推广策略

【项目重点】

1. 该岗位工作流程及基本工作技能

2. 页面内容的更新 ( 例如 : 更新最新消息 )

3. 通过修改模板删除一个栏目或一个增加栏目

【项目难点】

网站的推广策略

【相关知识】

一、网站维护的意义

一个好的企业网站，不仅仅是一次性制作完美就可以的了，由于企业的情况在不断地变化，网站的内容也需要随之调整，给人常新的感觉，这样才会更加吸引访问者，而且给访问者很好的印象。这就要求我们对站点进行长期的不间断的维护和更新。特别是在企业推出了新产品，或者有了新的服务内容，等有了大的动作或变更的时候，都应该把企业的现有状况及时地在网站上反映出来，以便让客户和合作伙伴及时的了解企业的详细状况，企业也可以及时得到相应的反馈信息，以便做出合理的处理结果。

二、网站维护的范畴

1. 网站技术支持及维护

监测网站是否被黑客攻击，页面是否被篡改，监控因特网链路是否正常，确保网站数据库的安全，并对网站进行定期数据备份。

2. 网站紧急恢复服务

网站发生瘫痪等情况时，提供紧急恢复服务，解决故障直至网站恢复开通。

3. 日常数据监控

针对具在线交互性的企业网站。定期监控站点论坛、留言板及专题评论等交互区域的信息回馈，删除无用信息，并特别提醒客户有用信息的出现。

4. 信息更新

本项服务可以为网站提供行业信息更新、企业信息更新、产品与服务更新等内容的维护，

为企业可以创造和把握更多的商机。

三、企业网站建设后的网站维护方法

网站建好并不是一劳永逸的，建好网站后还需要企业精心的运营维护才会越显成效。大致的说，企业网站建好之后，要做几个方面的工作：

1、网站内容的维护和更新

网站的信息内容应该适时的更新，如果现在客户访问企业的网站看到的是企业去年的新闻或者说客户在秋天看到新春快乐的网站祝贺语，那么他们对企业的印象肯定大打折扣。因此注意适时更新内容是相当重要的。在网站栏目设置上，也最好将一些可以定期更新的栏目如企业新闻等放在首页上，使首页的更新频率更高些。

2、网站服务与回馈工作要跟上

企业应设专人或专门的岗位从事网站的服务和回馈处理。客户向企业网站提交的各种回馈表单、购买的商品、发到企业邮箱中的电子邮件、在企业留言板上的留言等等，企业如果没有及时处理和跟进，不但丧失了机会，还造成很坏的影响，以致客户不会再相信你的网站。

3、网上推广与营销不可缺少

要让更多的人知道你的网站，了解你的企业就要在网上进行推广。网上推广的手段很多，有免费的，也有付费的，主要的推广手段包括搜索引擎注册、注册加入行业网站、邮件宣传、论坛留言、新闻组、友情连接、互换广告条、B2B（Business To Business是企业与企业之间通过互联网进行产品、服务及信息的交换。）站点发布信息等。除了网上的推广外，还有很多网上与网下结合的渠道。比如将网址和企业的商标一起使用，通过产品、信笺、名片、公司资料等途径可以很快地将企业的网站告知你的客户，也方便他们从网上了解企业的最新动态。

4、不断完善网站系统，提供更好的服务

企业初始建网站一般投入不是非常大，功能也不是很强。随着业务的发展，网站的功能也应该不断完善以满足顾客的需要，此时使用集成度高的电子商务应用系统可以更好地实现网上业务的管理和开展，从而将企业的电子商务带向更高的阶段，也将取得更大的收获。

四、网站的推广策略

要让更多的人知道你的网站，了解你的企业就要在网上进行推广。网上推广的手段很多，有免费的，也有付费的，主要的推广手段包括搜索引擎注册、注册加入行业网站、邮件宣传、论坛留言、新闻组、友情连接、互换广告条、B2B（Business To Business是企业与企业之间通过互联网进行产品、服务及信息的交换。）站点发布信息等。除了网上的推广外，还有很多网上与网下结合的渠道。比如将网址和企业的商标一起使用，通过产品、信笺、名片、公司资料等途径可以很快地将企业的网站告知你的客户，也方便他们从网上了解企业的最新动态。

五、网站维护人员基本技能要求

1. 能熟练的运用网页三剑客、Photoshop 、DIV+CSS；

2. 能对网站所需要的资料编辑整理,对网站信息进行更新、维护、发布、审核。

3. 能熟练运用windows操作系统和office办公软件等。熟练掌握网络安全维护常识。

4. 动态网站维护还需掌握、ASP,.net

【项目教学方法】

1. 项目工程互动式教学法

2. “讲、学、练”相结合：对于网站维护的相关操作细节，采用演示、讲解和练习等方式。使学生在网站维护的实践中加深对概念的理解，熟练掌握相关的操作细节。

【项目设计】

第一步：网站维护的意义（ 5 分钟左右）

第二步：网站维护的范畴（ 10 分钟左右）

第三步：企业网站的维护方法（ 10 分钟左右）

第四步：工作流程和基本技能（ 10 分钟左右）

第五步：实训项目

实训项目一：网页内容的更新（静态页面、动态页面）（ 10 分钟左右）

实训项目二：通过修改模板来添加或删除一个页面（ 10 分钟左右）

实训项目三：网站运行常见错误的处理 ( 如断链、死链、孤立文件 ) （ 10 分钟左右）第六步：网站的推广策略（ 10 分钟左右）

第七步：学生练习上述内容，教师指导（ 10 分钟左右）

第八步：项目小结（ 5 分钟左右）

【具体步骤】

实训项目一网页内容的更新（静态页面、动态页面）

(一) 静态页面内容的更新方法

1.下载需更新内容的页面及相关文件（如CSS样式文件）并做个备份；

2.使用Dreamweaver或其它网页制作工具对页面内容进行更改；

3.经审核无误后上传覆盖原文件；

4.验证内容是否更新正确、链接是否通畅。

(二) 动态页面内容的更新方法

1.登录网站管理后台；

2.一般通过“文章管理”功能找到需更新内容的文件，选择“编辑”，对指定内容进行更新；

3.内容修改完后，选择“更新”功能提交更新内容；

4.验证内容是否更新正确、链接是否通畅。

实训项目二通过修改模板来添加或删除一个页面

案例网站为：法律文书写作与训练

（一）删除“政策措施”页面

1.打开网页模板文件；

2.删除导航栏中的“政策措施”条目及对应的网页文件；

3.保存模板文件并选择“更新”来更新使用了此模板的网页文件；

4.由于首面没有采用此模板，还需打开首页文件(index.htm)，删除其中的“政策措施”条目；

5.验证“政策措施”栏目是否是删除。

（二）添加“政策措施”页面

1.打开网页模板文件；

2.在导航栏中添加“政策措施”条目；

3.保存模板文件并选择“更新”来更新使用了此模板的网页文件；

4.应用此模板来创建对应的网页文件

4.由于首面没有采用此模板，还需打开首页文件(index.htm)，在导航栏中添加“政策措施”条目；

5.验证“政策措施”栏目是否是被添加。

实训项目三网站运行常见错误的处理案例网站为：法律文书写作与训练（2006年湖北省级精品课程网站）

实训内容及步骤

(一) 检查并处理网站中的断掉的链接

1.打开此站点；

2.选择“站点”---“检查站点范围的链接”或按Ctrl+F8；

3.在“结果”面板中的“显示”下拉框中选择“断掉的链接”后显示出存在断链的文件及链接；

4.将其修正后，此项自动移去。

(二) 检查网站中的外部链接

1.打开此站点；

2.选择“站点”“检查站点范围的链接”或按Ctrl+F8；

3.在“结果”面板中的“显示”下拉框中选择“外部链接”后显示出存在的外部链接；

4.外部链接需人工确认其正确性。

(三) 检查网站中的孤立文件

1.打开此站点；

2.选择“站点”——“检查站点范围的链接”或按Ctrl+F8；

3.在“结果”面板中的“显示”下拉框中选择“孤立文件”显示出存在的孤立；

4.将其修正后，此项自动移去。

【项目小结】

本次课我们主要讲述了网站维护的意义、网站维护的范畴、企业网站的维护方法、网站维护工作流程和基本技能；通过三个实训项目运用实例讲解了网页内容的更新、通过修改模板来添加或删除一个页面、网站运行常见错误的处理；另外还学习了网站的推广策略。

项目四 LeapFTP上传/下载

除了用Dreamweaver的上传/下载功能来实现站点的发布、管理、更新外，用户还可以使用LeapFTP等专业的上传/下载软件来实现。下面练习用LeapFTP上传站点，具体操作如下。

（1）从“开始”菜单中启动LeapFTP，进入如图所示的界面。

（2）在“FTP Server”文本框中输入用户注册的域名，即服务器地址。

（3）在“User”文本框中输入用户名，该名称是申请空间时由服务商指定的。

（4）在“Pass”文本框中输入注册密码。该密码一般也是申请空间时由服务商提供的，为了安全起见，用户可以更改该密码。

（5）用户名和注册密码通过后，在对话框右侧即会出现网站中的文件或目录，此时即可在左侧下拉列表框框中选择要上传的网页内容。

（6）选择左侧列表框中需要上传的文件，拖放到右侧的窗口中即可。此时下方的窗口中将显示上载的进度。

（7）上传完成后，若要对网上的内容进行编辑，选取要编辑的文件夹或文件，单击鼠

标右键从弹出的快捷菜单中选择需要的命令即可，如图所示。

当要修改网上某个网页的内容时就需要将网上的文件下载到本地机上后再进行更改。

其操作方法是：用FTP连接欲下载的网站，在窗口的右侧文件列表中选择需要更改的文件或文件夹，再用鼠标右键单击该文件或文件夹图标，在弹出的快捷菜单中选择“下载”命令即可。

上机操作题

在city01上申请一个免费空间，并将制作好的个人主页发布到网上申请的空间中。

项目五个人网站制作实例

基础知识

利用布局视图布局个人主页，个人主页的内容策划。

重点知识

一个完整的个人主页的创建。

本课将利用前面所学的知识，构建名为“吾茶吾心”的个人网站，本网站以个人爱好——茶文化为主题，将网站的主题定位在比较小的范围内，并且跳出了以往个人网站的千篇一律的老模式。主要介绍了茶文化的几个方面，栏目的划分比较简单，网站的色彩和构图以古典的中国文化为主要构成元素，有着浓烈的个人特色。本网站包括首页、茶艺茶道、茶诗茶文和茶水茶具几部分。在构建本网站时，本章将从建立站点开始以步骤的形式详细介绍在Dreamweaver MX 2004中构建个人网站的方法。

制作分析

在制作本网站前应先在电脑中创建一个名为tea的文件夹，然后在该文件夹中创建image和org文件夹。image文件夹中保存网站中的所有图片；org文件夹中放置图片的源文件，以方便要对某个图片进行修改时直接进行修改即可。

制作本例时，先新建一个名为tea的站点，并保存在tea文件夹中，然后在站点根目录下新建一个名为index.htm的页面文件。再新建wcwx.htm页面文件，并将导航栏中的各项链接到对应的名称上，由于网站的各个页面并不是十分规整，这里将利用复制页面文件再进行修改的方法，将wcwx.htm页面文件复制成为cscw.htm页面文件，再对其进行修改。

浏览网站

如图1所示是“吾茶吾心”网站的首页，如图2所示是“吾茶吾心”页面，如图3所示是“茶诗茶文”页面，如图4所示是“《茶》”页面。

图1

图2

图3

图四

上机操作题

根据前面所学的知识，制作一个如图5所示的“我爱漫画”的个人网站。这里只给出了网站的首页，读者可以发挥自己的想像将这个网站建设完整，当然，读者也可以根据自己的喜好，建立自己的个人网站。需要注意的是个人网站是展示自己的一个平台，所以一定要体现个人魅力，有自己的独到之处。