《网页设计与制作》.

Presentation on theme: "《网页设计与制作》."— Presentation transcript:

1 《网页设计与制作》

2 第11章 网站建设综合实训 站点规划 素材准备与站点设计 网页制作 WEB服务器的配置 站点的上传与发布 站点的维护与更新 11.1
11.2 网页制作 11.3 WEB服务器的配置 11.4 站点的上传与发布 11.3 站点的维护与更新 11.4

3 随着网络科技的发展，Internet已经成为企业宣传自己的重要途径之一。拥有一个好的商业网站就是企业最好的名片。建立商业网站不仅可以让客户了解企业，提高企业的知名度；而且更能突破时空的限制，为企业在网络时代创造更多的商机。 在本章中，将详细介绍一个商业网站的建设过程。网站首页草图如图所示。 【本章学习目的】 本章通过详细讲解商业网站建设过程，读者掌握规划网站、页面布局的技术、网站的制作流程。

4

5 11.1 站点规划 制作网站首先是规划出一个具体的方案，以此作为进一步工作的依据。它包括以下几个方面。 1. 确定建设网站的目标
创建网站的第一步就是确定网站的目标。本章要创建的网站是一个小型的商业网站，网站的目标就是要让客户了解该企业的概况、产品信息、相关技术、产品购买方法以及联系方式等。通过该网站能够建立从客户到公司的有效沟通渠道。 2. 分析目标用户对站点的需求 访问该网站的用户主要是已有的客户和潜在的浏览者，所以在制作网站时，考虑如何为已有的客户提供完善、周到的服务，比如：新产品的推广、技术支持、在线订购，同时考虑到如何吸引到更多的消费群体，并分析这种消费潜力到底有多大。

6 3. 确定网站风格 在确定了网站的目标和功能之后，接下来就要针对用户需求对网站的风格进行定位。本网站定位于提供企业信息类网站。 本网站所有页面均采用灰色加草绿色的配色方案，严谨中透着人文化气息，页面全部采用“T”布局，顶部为横条网站标志，下方左边为导航条，右面显示具体内容的布局。网页布局如图11.2所示。 4. 考虑网络的技术问题 考虑多种浏览器和不同分辨率的兼容性，采用浏览器的分辨率：800*600，兼顾1024*768。运用的技术有：表格、模板、CSS样式、Flash动画等。

7 11.2 素材准备与站点设计 可根据推荐的主题选择网站主题或自定义一个网站主题 确定网站的栏目并画出栏目结构图
色彩搭配根据网站主题特点，确定网站的色彩方案 根据网站的主题收集资料：文字及图像等

8 11.2.1绘制首页草图 首页的设计时应该注意以下几个问题：  框架清晰，重点突出；
 框架清晰，重点突出；  色彩搭配既要能够吸引浏览者的注意力，又不要过于花哨，过于浓烈的色彩反而容易引起浏览者的反感；  文字和图片相辅相成。

9 11.2.2素材准备 有了总体结构，还要进行基本素材的收集，比如文本、动画、图片、音乐、视频素材等。这其中有些可以自己制作，比如使用fireworks制作图片、flash制作动画等；有些可以通过其他途径获得，比如在网上下载，购买素材光盘等等。 本网站中使用的主要素材就是图片，一部分是通过实物拍摄后处理获得的，还有一部分装饰图像是通过素材光盘获得。

10 11.3 网页制作 创建站点 在Dreamweaver 8.0中，执行 “站点”菜单｜“新建站点”命令，弹出“站点定义”的对话框。 选择“高级”选项卡，单击“本地信息”，在右侧选项中定义网站的一些本地信息。 站点名称：综合实例。 本地根文件夹：即指定站点文件的保存位置。输入H：\shili11-1\。 默认图像文件夹：H：\shili11-1\images。 其它选择默认项。

11 创建网站结构 1. 目录结构 网站的目录结构是指你建立网站时创建的目录。目录结构的好坏，对于网站本身的上传、维护、内容未来的扩充和移植有着重要的影响。 将文件分门别类地放在不同的文件夹下，本网站的目录结构如下： Images—用于保存图像素材　　　Page—用于存放网页 Css－用于存放CSS样式文件　　Flash—用于存放Flash动画 2. 链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。如果把每个页面比喻成一个固定点，那么链接就是两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。 本网站采用的是最常见的星状链接。所谓星状链接是指每个页面之间都建立链接。星状链接结构的优点是浏览方便，用户可以从当前页面跳转到网站内的任何页面中。网站结构如图所示。

12

13 11.3.3页面模板的制作 使用模板来创建网站的好处是快速建立具有统一风格的多个网页，提高网站设计与制作的效率。本网站有一组风格相同的8个网页，因此，首先制作页面的模板，操作步骤如下： 选择“文件”菜单｜“新建”命令，新建一个模板页面， 划分模板的锁定区域和可编辑区域。在这个模板中，上、下和右侧的上部是所有网页的共同部分，因此为锁定区域，右侧的中部是每个网页的具体不同部分，创建为可编辑区域，如图所示。模板的编辑过程与普通网页相同。

14 可编辑区域 锁定区域

15 11.3.4首页的制作 制作过程如下： 步骤1　选择“文件”菜单｜“新建”命令，新建一个网页，命名保存为“index.html。打开“资源”面板，选择“模板”选项，将模板文件“moban.dwt”直接拖动到“文档”窗口。即此网页应用了该模板。 步骤2　将光标置于可编辑区域main中，插入一个二行二列的表格，表格宽度为100%，光标放在第一行第一个单元格内，设置背景颜色为“#ff9900”，输入文本：前言。 步骤3　将第二行合并，输入文本，选中文本，单击“属性”面板中的“文本缩进”按钮，插入图像：images/a1.gif，选中图像，在属性面板中设置图像的对齐方式:右对齐，设置垂直边距和水平边距均为15像素。 至此，首页制作完成后，保存在根目录下。其它页面的制作与首页制作相似，只是在可编辑区域输入的文本和内容不同，其中网上订购页面是一个提交表单，这些网页均存放在Pages文件夹。

16 11.3.5添加页面间链接 网站中的页面已基本做好了，但是它们现在只是一张张散页，还没有形成一个有机的整体。下面我们就要添加页面间链接。页面链接的添加是在模板中进行。 打开模板文件“moban.dwt”，选中文本“主页”，在“属性”面板中，单击链接文本框右侧的“浏览文件”按钮，弹出“选择文件”对话框，选择根目录下的index.html，此时链接栏地址为：../index.html。 用同样的方法，添加其它链接地址，其它页面的路径与首页有所不同，其路径都在pages文件夹中，例如“公司简介：”文本导航的链接地址为：../pages/introduce.html，其它网页路径相同只是文件名不同。 保存模板时，要基于此模板更新所有文件。

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

18

19

20 安装完毕，测试web服务器是否安装成功，测试方法有如下几种：
在浏览器中输入http：//localhost（本地计算机测试方法） 在浏览器中输入http：// （本地计算机测试方法） 在浏览器中输入http：//本地的计算机名称（本地计算机测试和局域网访问方法） 在浏览器中输入http：//本机IP地址（本地计算机测试和局域网访问方法） web站点的默认的路径为：系统盘:\inetpub\wwwroot，将用户的网站内容放在此根目录下，通过上述测试方法即可访问。

21 11.5站点的测试、上传与发布 11.5.1 申请网站空间 网页制作完成，就需要把它放到Internet上，让全世界的人都看到。
对于大型企业来说，可能会选择自架服务器（即11.4所述）或主机托管，对于中小型企业或个人网站，常常会选用虚拟主机。本小节内容是针对建站的个人爱好者，选择免费的个人空间。 申请的一般步骤为： 首先取一个自己喜欢又容易记住的名字，不要与他人重复，即为账号。 在申请页面上设定密码并填写一些关于自己和主页的资料，如姓名、身份证、 、单位等。 登录成功，服务器会发一封确认信。过一定时间，就会收到账号开通的邮件，这封邮件中包括FTP地址、FTP账号和密码、免费域名等，这些需记忆，现在已经成功地申请到了主页空间。

22 11.5.2上传和发布站点 主页空间也申请成功后，接下来最重要的就是上传网页，给Internet上用户浏览。上传网页的方法有很多种，这里介绍比较常用的CuteFTP软件上传。 CuteFTP是一个基于文件传输协议（FTP）的客户端应用软件，通过它，用户无需知道协议本身的细节，就可以充分利用FTP强大的功能，轻松地在全球范围内的远程FTP服务器间上传、下载文件。

23

24 11.6.1站点的维护 网站建成后，要定期对站点进行维护。保持站点有效地运转是一项长期的工作。对于商业网站来讲，对维护工作的要求更严格。在此简要介绍一些站点维护过程中要注意的事项。 　　1. 保证服务的安全 网站的安全性是网站能够生存的一个必要条件。服务安全不仅要保护用户的数据不会被泄露，还要保证服务的有效性。用户能在任何时候得到必要的服务，而且服务的内容同网站的介绍是一致的。 　　2. 及时回复用户反馈 在企业的Web站点上，要认真回复用户的电子邮件和传统的联系方式如信件、电话垂询和传真，做到有问必答。最好将用户进行分类，如售前一般了解、售中和售后服务等，由相关部门处理，使网站访问者感受到企业的真实存在，产生信任感。

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

26 本 章 小 结 本章通过详细介绍了一个网站的建设流程，通过本章的学习，读者应对网站设计与制作以及后期的上传、更新和维护过程都有了深刻的认识和理解，能够独立设计与制作初具规模的商业网站。

27 上 机 实 训 1. 背景知识 根据本学期所学过的关于网页设计与制作的知识，并结合所学的网络知识，着手进行商业网站的规划、设计与制作。
2. 实训准备工作 首先要确定网站的主题，然后在internet上准备素材和创作网站。 3. 实训要求 （1）网站设计方案的确定 　　要求：首先确定访客群体的需求特点；其次确定站点结构、配色方案；最后确定网页的布局方案。 （2）设计网站首页及其它页面 　　要求： 首先使用fireworks绘制首页和其它页面草图； （3）制作网页主页：切割图片、制作动画、添加样式、录入文字； （4）制作其他页，完善优化网站。 （5）写出实训报告和提交作品 　　要求：提交实训报告的电子文档和打印文档，提交作品的电子版。 课时安排：8课时。