第11章网站建设综合实训

1、.第第1111章章 网站建设综合实训网站建设综合实训.11.1站点规划站点规划11.2素材准备与站点设计素材准备与站点设计11.3网页制作网页制作11.4WEB服务器的配置服务器的配置11.5站点的上传与发布站点的上传与发布11.6站点的维护与更新站点的维护与更新.随着网络科技的发展，随着网络科技的发展，Internet已经成为企业宣传自己的重要途径已经成为企业宣传自己的重要途径之一。拥有一个好的商业网站就是企业最好的名片。建立商业之一。拥有一个好的商业网站就是企业最好的名片。建立商业网站不仅可以让客户了解企业，提高企业的知名度；而且更能网站不仅可以让客户了解企业，提高企业的知名度；而且更能突

2、破时空的限制，为企业在网络时代创造更多的商机。突破时空的限制，为企业在网络时代创造更多的商机。在本章中，将详细介绍一个商业网站的建设过程。网站首页草图在本章中，将详细介绍一个商业网站的建设过程。网站首页草图如图所示。如图所示。【本章学习目的】【本章学习目的】本章通过详细讲解商业网站建设过程，读者掌握规划网站、页面本章通过详细讲解商业网站建设过程，读者掌握规划网站、页面布局的技术、网站的制作流程。布局的技术、网站的制作流程。.11.1 站点规划站点规划制作网站首先是规划出一个具体的方案，以此作为进一步工作的依制作网站首先是规划出一个具体的方案，以此作为进一步工作的依据。它包括以下几个方面。据。它

3、包括以下几个方面。1. 确定建设网站的目标确定建设网站的目标创建网站的第一步就是确定网站的目标。本章要创建的网站是一个创建网站的第一步就是确定网站的目标。本章要创建的网站是一个小型的商业网站，网站的目标就是要让客户了解该企业的概况、小型的商业网站，网站的目标就是要让客户了解该企业的概况、产品信息、相关技术、产品购买方法以及联系方式等。通过该产品信息、相关技术、产品购买方法以及联系方式等。通过该网站能够建立从客户到公司的有效沟通渠道。网站能够建立从客户到公司的有效沟通渠道。2. 分析目标用户对站点的需求分析目标用户对站点的需求访问该网站的用户主要是已有的客户和潜在的浏览者，所以在制作访问该网站的

4、用户主要是已有的客户和潜在的浏览者，所以在制作网站时，考虑如何为已有的客户提供完善、周到的服务，比如：网站时，考虑如何为已有的客户提供完善、周到的服务，比如：新产品的推广、技术支持、在线订购，同时考虑到如何吸引到新产品的推广、技术支持、在线订购，同时考虑到如何吸引到更多的消费群体，并分析这种消费潜力到底有多大。更多的消费群体，并分析这种消费潜力到底有多大。.3. 确定网站风格确定网站风格在确定了网站的目标和功能之后，接下来就要针对用户需求对网站的在确定了网站的目标和功能之后，接下来就要针对用户需求对网站的风格进行定位。本网站定位于提供企业信息类网站。风格进行定位。本网站定位于提供企业信息类网站

5、。本网站所有页面均采用灰色加草绿色的配色方案，严谨中透着人文化本网站所有页面均采用灰色加草绿色的配色方案，严谨中透着人文化气息，页面全部采用气息，页面全部采用“T”布局，顶部为横条网站标志，下方左边布局，顶部为横条网站标志，下方左边为导航条，右面显示具体内容的布局。网页布局如图为导航条，右面显示具体内容的布局。网页布局如图11.2所示。所示。4. 考虑网络的技术问题考虑网络的技术问题考虑多种浏览器和不同分辨率的兼容性，采用浏览器的分辨率：考虑多种浏览器和不同分辨率的兼容性，采用浏览器的分辨率：800*600，兼顾，兼顾1024*768。运用的技术有：表格、模板、。运用的技术有：表格、模板、CS

6、S样式、样式、Flash动画等。动画等。.11.2 素材准备与站点设计素材准备与站点设计可根据推荐的主题选择网站主题或自定义一个网站主题可根据推荐的主题选择网站主题或自定义一个网站主题确定网站的栏目并画出栏目结构图确定网站的栏目并画出栏目结构图色彩搭配根据网站主题特点，确定网站的色彩方案色彩搭配根据网站主题特点，确定网站的色彩方案根据网站的主题收集资料：文字及图像等根据网站的主题收集资料：文字及图像等.11.2.1绘制首页草图绘制首页草图首页的设计时应该注意以下几个问题：首页的设计时应该注意以下几个问题：框架清晰，重点突出；框架清晰，重点突出；色彩搭配既要能够吸引浏览者的注意力，又不要过于花哨

7、，色彩搭配既要能够吸引浏览者的注意力，又不要过于花哨，过于浓烈的色彩反而容易引起浏览者的反感；过于浓烈的色彩反而容易引起浏览者的反感；文字和图片相辅相成。文字和图片相辅相成。.11.2.2素材准备素材准备有了总体结构，还要进行基本素材的收集，比如文本、动画、图有了总体结构，还要进行基本素材的收集，比如文本、动画、图片、音乐、视频素材等。这其中有些可以自己制作，比如使用片、音乐、视频素材等。这其中有些可以自己制作，比如使用fireworks制作图片、制作图片、flash制作动画等；有些可以通过其他途制作动画等；有些可以通过其他途径获得，比如在网上下载，购买素材光盘等等。径获得，比如在网上下载，购

8、买素材光盘等等。本网站中使用的主要素材就是图片，一部分是通过实物拍摄后处本网站中使用的主要素材就是图片，一部分是通过实物拍摄后处理获得的，还有一部分装饰图像是通过素材光盘获得。理获得的，还有一部分装饰图像是通过素材光盘获得。.11.3网页制作网页制作11.3.1 创建站点创建站点在在Dreamweaver 8.0中，执行中，执行 “站点站点”菜单菜单“新建站点新建站点”命令，命令，弹出弹出“站点定义站点定义”的对话框。的对话框。选择选择“高级高级”选项卡，单击选项卡，单击“本地信息本地信息”，在右侧选项中定义，在右侧选项中定义网站的一些本地信息。网站的一些本地信息。站点名称：综合实例。站点名称

9、：综合实例。本地根文件夹：即指定站点文件的保存位置。输入本地根文件夹：即指定站点文件的保存位置。输入H：shili11-1。默认图像文件夹：默认图像文件夹：H：shili11-1images。其它选择默认项。其它选择默认项。.11.3.2创建网站结构创建网站结构1. 目录结构目录结构网站的目录结构是指你建立网站时创建的目录。目录结构的好坏，网站的目录结构是指你建立网站时创建的目录。目录结构的好坏，对于网站本身的上传、维护、内容未来的扩充和移植有着重要对于网站本身的上传、维护、内容未来的扩充和移植有着重要的影响。的影响。将文件分门别类地放在不同的文件夹下，本网站的目录结构如下：将文件分门别类地放

10、在不同的文件夹下，本网站的目录结构如下：Images用于保存图像素材用于保存图像素材Page用于存放网页用于存放网页Css用于存放用于存放CSS样式文件样式文件Flash用于存放用于存放Flash动画动画2. 链接结构链接结构网站的链接结构是指页面之间相互链接的拓扑结构。如果把每个页网站的链接结构是指页面之间相互链接的拓扑结构。如果把每个页面比喻成一个固定点，那么链接就是两个固定点之间的连线。面比喻成一个固定点，那么链接就是两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。一个点可以和一个点连接，也可以和多个点连接。本网站采用的是最常见的星状链接。所谓星状链接是指每个页面之本网

11、站采用的是最常见的星状链接。所谓星状链接是指每个页面之间都建立链接。星状链接结构的优点是浏览方便，用户可以从间都建立链接。星状链接结构的优点是浏览方便，用户可以从当前页面跳转到网站内的任何页面中。网站结构如图所示。当前页面跳转到网站内的任何页面中。网站结构如图所示。.11.3.3页面模板的制作页面模板的制作使用模板来创建网站的好处是快速建立具有统一风格的多个网页，使用模板来创建网站的好处是快速建立具有统一风格的多个网页，提高网站设计与制作的效率。本网站有一组风格相同的提高网站设计与制作的效率。本网站有一组风格相同的8个网页，个网页，因此，首先制作页面的模板，操作步骤如下：因此，首先制作页面的模

12、板，操作步骤如下：选择选择“文件文件”菜单菜单“新建新建”命令，新建一个模板页面，命令，新建一个模板页面， 划分模划分模板的锁定区域和可编辑区域。在这个模板中，上、下和右侧的板的锁定区域和可编辑区域。在这个模板中，上、下和右侧的上部是所有网页的共同部分，因此为锁定区域，右侧的中部是上部是所有网页的共同部分，因此为锁定区域，右侧的中部是每个网页的具体不同部分，创建为可编辑区域，如图所示。模每个网页的具体不同部分，创建为可编辑区域，如图所示。模板的编辑过程与普通网页相同。板的编辑过程与普通网页相同。.可编辑区域锁定区域.11.3.4首页的制作首页的制作制作过程如下：制作过程如下：步骤步骤1选择选择

13、“文件文件”菜单菜单“新建新建”命令，新建一个网页，命名保存为命令，新建一个网页，命名保存为“index.html。打开。打开“资源资源”面板，选择面板，选择“模板模板”选项，将模板文件选项，将模板文件“moban.dwt”直接拖动到直接拖动到“文档文档”窗口。即此网页应用了该模板。窗口。即此网页应用了该模板。步骤步骤2将光标置于可编辑区域将光标置于可编辑区域main中，插入一个二行二列的表格，表格中，插入一个二行二列的表格，表格宽度为宽度为100%，光标放在第一行第一个单元格内，设置背景颜色为，光标放在第一行第一个单元格内，设置背景颜色为“#ff9900”，输入文本：前言。，输入文本：前言。

14、步骤步骤3将第二行合并，输入文本，选中文本，单击将第二行合并，输入文本，选中文本，单击“属性属性”面板中的面板中的“文本缩进文本缩进”按钮，插入图像：按钮，插入图像：images/a1.gif，选中图像，在属性面，选中图像，在属性面板中设置图像的对齐方式板中设置图像的对齐方式:右对齐，设置垂直边距和水平边距均为右对齐，设置垂直边距和水平边距均为15像素。像素。至此，首页制作完成后，保存在根目录下。其它页面的制作与首页制作至此，首页制作完成后，保存在根目录下。其它页面的制作与首页制作相似，只是在可编辑区域输入的文本和内容不同，其中网上订购页面相似，只是在可编辑区域输入的文本和内容不同，其中网上订

15、购页面是一个提交表单，这些网页均存放在是一个提交表单，这些网页均存放在Pages文件夹。文件夹。.11.3.5添加页面间链接添加页面间链接网站中的页面已基本做好了，但是它们现在只是一张张散页，还没网站中的页面已基本做好了，但是它们现在只是一张张散页，还没有形成一个有机的整体。下面我们就要添加页面间链接。页面有形成一个有机的整体。下面我们就要添加页面间链接。页面链接的添加是在模板中进行。链接的添加是在模板中进行。打开模板文件打开模板文件“moban.dwt”，选中文本，选中文本“主页主页”，在，在“属性属性”面面板中，单击链接文本框右侧的板中，单击链接文本框右侧的“浏览文件浏览文件”按钮，弹出按

16、钮，弹出“选择选择文件文件”对话框，选择根目录下的对话框，选择根目录下的index.html，此时链接栏地址，此时链接栏地址为：为：./index.html。用同样的方法，添加其它链接地址，其它页面的路径与首页有所不用同样的方法，添加其它链接地址，其它页面的路径与首页有所不同，其路径都在同，其路径都在pages文件夹中，例如文件夹中，例如“公司简介：公司简介：”文本导文本导航的链接地址为：航的链接地址为：./pages/introduce.html，其它网页路径相，其它网页路径相同只是文件名不同。同只是文件名不同。保存模板时，要基于此模板更新所有文件。保存模板时，要基于此模板更新所有文件。.1

17、1.4 WEB服务器的配置服务器的配置本节将详细介绍在本地计算机发布网站的方法。即本地计算机设本节将详细介绍在本地计算机发布网站的方法。即本地计算机设置为置为Web服务器。在同一网络中的用户都可以通过浏览器访问服务器。在同一网络中的用户都可以通过浏览器访问此此Web服务器，如果本地计算机有一个公有的服务器，如果本地计算机有一个公有的IP地址，并设置地址，并设置DNS的域名解析，那它就是一个真正意义上可被的域名解析，那它就是一个真正意义上可被internet上用上用户访问的户访问的web服务器了。服务器了。下面以在下面以在Windows XP中设置中设置IIS组件为例，介绍在本地计算机进组件为例

18、，介绍在本地计算机进行网站发布的方法。行网站发布的方法。 .安装完毕，测试安装完毕，测试web服务器是否安装成功，测试方法有如下几种：服务器是否安装成功，测试方法有如下几种：在浏览器中输入在浏览器中输入http：/localhost（本地计算机测试方法）（本地计算机测试方法）在浏览器中输入在浏览器中输入http：/（本地计算机测试方法）（本地计算机测试方法）在浏览器中输入在浏览器中输入http：/本地的计算机名称（本地计算机测试和局本地的计算机名称（本地计算机测试和局域网访问方法）域网访问方法）在浏览器中输入在浏览器中输入http：/本机本机IP地址（本地计算机测试和局域网访

19、地址（本地计算机测试和局域网访问方法）问方法）web站点的默认的路径为：系统盘站点的默认的路径为：系统盘:inetpub，将用户的网站内容，将用户的网站内容放在此根目录下，通过上述测试方法即可访问。放在此根目录下，通过上述测试方法即可访问。.11.5站点的测试、上传与发布站点的测试、上传与发布 11.5.1 申请网站空间申请网站空间网页制作完成，就需要把它放到网页制作完成，就需要把它放到Internet上，让全世界的人都看到。上，让全世界的人都看到。对于大型企业来说，可能会选择自架服务器（即对于大型企业来说，可能会选择自架服务器（即11.4所述）或主机托管，所述）或主机托管，对于中小型企业或个

20、人网站，常常会选用虚拟主机。本小节内容是针对于中小型企业或个人网站，常常会选用虚拟主机。本小节内容是针对建站的个人爱好者，选择免费的个人空间。对建站的个人爱好者，选择免费的个人空间。申请的一般步骤为：申请的一般步骤为：首先取一个自己喜欢又容易记住的名字，不要与他人重复，即为账号。首先取一个自己喜欢又容易记住的名字，不要与他人重复，即为账号。在申请页面上设定密码并填写一些关于自己和主页的资料，如姓名、在申请页面上设定密码并填写一些关于自己和主页的资料，如姓名、身份证、身份证、email、单位等。、单位等。登录成功，服务器会发一封确认信。过一定时间，就会收到账号开通登录成功，服务器会发一封确认信。

21、过一定时间，就会收到账号开通的邮件，这封邮件中包括的邮件，这封邮件中包括FTP地址、地址、FTP账号和密码、免费域名等，账号和密码、免费域名等，这些需记忆，现在已经成功地申请到了主页空间。这些需记忆，现在已经成功地申请到了主页空间。.11.5.2上传和发布站点上传和发布站点主页空间也申请成功后，接下来最重要的就是上传网页，给主页空间也申请成功后，接下来最重要的就是上传网页，给Internet上用户浏览。上传网页的方法有很多种，这里介绍比较上用户浏览。上传网页的方法有很多种，这里介绍比较常用的常用的CuteFTP软件上传。软件上传。CuteFTP是一个基于文件传输协议（是一个基于文件传输协议（F

22、TP）的客户端应用软件，通）的客户端应用软件，通过它，用户无需知道协议本身的细节，就可以充分利用过它，用户无需知道协议本身的细节，就可以充分利用FTP强强大的功能，轻松地在全球范围内的远程大的功能，轻松地在全球范围内的远程FTP服务器间上传、下服务器间上传、下载文件。载文件。.11.6 站点的维护与更新站点的维护与更新网站建成后，要定期对站点进行维护。网站建成后，要定期对站点进行维护。.11.6.1站点的维护站点的维护保持站点有效地运转是一项长期的工作。对于商业网站来讲，对维保持站点有效地运转是一项长期的工作。对于商业网站来讲，对维护工作的要求更严格。在此简要介绍一些站点维护过程中要注护工作的

23、要求更严格。在此简要介绍一些站点维护过程中要注意的事项。意的事项。1. 保证服务的安全保证服务的安全网站的安全性是网站能够生存的一个必要条件。服务安全不仅要保网站的安全性是网站能够生存的一个必要条件。服务安全不仅要保护用户的数据不会被泄露，还要保证服务的有效性。用户能在护用户的数据不会被泄露，还要保证服务的有效性。用户能在任何时候得到必要的服务，而且服务的内容同网站的介绍是一任何时候得到必要的服务，而且服务的内容同网站的介绍是一致的。致的。2. 及时回复用户反馈及时回复用户反馈在企业的在企业的Web站点上，要认真回复用户的电子邮件和传统的联系方站点上，要认真回复用户的电子邮件和传统的联系方式如

24、信件、电话垂询和传真，做到有问必答。最好将用户进行式如信件、电话垂询和传真，做到有问必答。最好将用户进行分类，如售前一般了解、售中和售后服务等，由相关部门处理，分类，如售前一般了解、售中和售后服务等，由相关部门处理，使网站访问者感受到企业的真实存在，产生信任感。使网站访问者感受到企业的真实存在，产生信任感。.11.6.2站点的更新站点的更新网页浏览者的随意性决定了网站要能够持久的吸引用户，必须要网页浏览者的随意性决定了网站要能够持久的吸引用户，必须要不断地更新内容，对用户保持足够的新鲜度。在内容上要突出不断地更新内容，对用户保持足够的新鲜度。在内容上要突出时效性和权威性，并且要不断推出新的服务

25、栏目，不能只是在时效性和权威性，并且要不断推出新的服务栏目，不能只是在原有的基础上增加和删减，必要时甚至要重新建设。原有的基础上增加和删减，必要时甚至要重新建设。另外，要持续推广站点，保持公众的新鲜感。可以考虑如下建议：另外，要持续推广站点，保持公众的新鲜感。可以考虑如下建议：在各大搜索引擎上登记自己的网站，让别人可以搜索到网站。在各大搜索引擎上登记自己的网站，让别人可以搜索到网站。用用QQ,MSN等通讯工具等通讯工具,把网站地址传给其他潜在访问者。把网站地址传给其他潜在访问者。可以在可以在BBS上作宣传上作宣传,把网站地址写在签名里。把网站地址写在签名里。多和别的网站做友情链接。多和别的网站

26、做友情链接。.本本 章章 小小 结结本章通过详细介绍了一个网站的建设流程，通过本章的学习，读者应对本章通过详细介绍了一个网站的建设流程，通过本章的学习，读者应对网站设计与制作以及后期的上传、更新和维护过程都有了深刻的认识网站设计与制作以及后期的上传、更新和维护过程都有了深刻的认识和理解，能够独立设计与制作初具规模的商业网站。和理解，能够独立设计与制作初具规模的商业网站。上上 机机 实实 训训背景知识背景知识根据本学期所学过的关于网页设计与制作的知识，并结合所学的网络知根据本学期所学过的关于网页设计与制作的知识，并结合所学的网络知识，着手进行商业网站的规划、设计与制作。识，着手进行商业网站的规划、设计与制作。实训准备工作实训准备工作首先要确定网站的主题，然后在首先要确定网站的主题，然后在internet上准备素材和创作网站。上准备素材和创作网站。实训要求实训要求网站设计方案的确定网站设计方案的确定要求：首先确定访客群体的需求特点；其次确定站点结构、配色方要求：首先确定访客群体的需求特点；其次确定站点结构、配色方案；最后确定网页的布局方案。案；最后确定网页的布局方案。设计网站首页及其它页面设计网站首页及其它页面要求：要求：