第11章-网页设计与制作综合实训.pptVIP

《网页设计与制作》 西京学院 电子商务教研室 第11章 网站建设综合实训 随着网络科技的发展，Internet已经成为企业宣传自己的重要途径之一。拥有一个好的商业网站就是企业最好的名片。建立商业网站不仅可以让客户了解企业，提高企业的知名度；而且更能突破时空的限制，为企业在网络时代创造更多的商机。 在本章中，将详细介绍一个商业网站的建设过程。网站首页草图如图所示。 【本章学习目的】 本章通过详细讲解商业网站建设过程，读者掌握规划网站、页面布局的技术、网站的制作流程。 11.1 站点规划 制作网站首先是规划出一个具体的方案，以此作为进一步工作的依据。它包括以下几个方面。 1. 确定建设网站的目标 创建网站的第一步就是确定网站的目标。本章要创建的网站是一个小型的商业网站，网站的目标就是要让客户了解该企业的概况、产品信息、相关技术、产品购买方法以及联系方式等。通过该网站能够建立从客户到公司的有效沟通渠道。 2. 分析目标用户对站点的需求 访问该网站的用户主要是已有的客户和潜在的浏览者，所以在制作网站时，考虑如何为已有的客户提供完善、周到的服务，比如：新产品的推广、技术支持、在线订购，同时考虑到如何吸引到更多的消费群体，并分析这种消费潜力到底有多大。 3. 确定网站风格 在确定了网站的目标和功能之后，接下来就要针对用户需求对网站的风格进行定位。本网站定位于提供企业信息类网站。 本网站所有页面均采用灰色加草绿色的配色方案，严谨中透着人文化气息，页面全部采用“T”布局，顶部为横条网站标志，下方左边为导航条，右面显示具体内容的布局。网页布局如图11.2所示。 4. 考虑网络的技术问题 考虑多种浏览器和不同分辨率的兼容性，采用浏览器的分辨率：800*600，兼顾1024*768。运用的技术有：表格、模板、CSS样式、Flash动画等。 11.2 素材准备与站点设计 可根据推荐的主题选择网站主题或自定义一个网站主题 确定网站的栏目并画出栏目结构图 色彩搭配根据网站主题特点，确定网站的色彩方案 根据网站的主题收集资料：文字及图像等 11.2.1绘制首页草图 首页的设计时应该注意以下几个问题： ? 框架清晰，重点突出； ? 色彩搭配既要能够吸引浏览者的注意力，又不要过于花哨，过于浓烈的色彩反而容易引起浏览者的反感； ? 文字和图片相辅相成。 11.2.2素材准备 有了总体结构，还要进行基本素材的收集，比如文本、动画、图片、音乐、视频素材等。这其中有些可以自己制作，比如使用fireworks制作图片、flash制作动画等；有些可以通过其他途径获得，比如在网上下载，购买素材光盘等等。 本网站中使用的主要素材就是图片，一部分是通过实物拍摄后处理获得的，还有一部分装饰图像是通过素材光盘获得。 11.3 网页制作 11.3.1 创建站点 在Dreamweaver 8.0中，执行 “站点”菜单｜“新建站点”命令，弹出“站点定义”的对话框。 选择“高级”选项卡，单击“本地信息”，在右侧选项中定义网站的一些本地信息。 站点名称：综合实例。 本地根文件夹：即指定站点文件的保存位置。输入H：\shili11-1\。 默认图像文件夹：H：\shili11-1\images。 其它选择默认项。 11.3.2 创建网站结构 1. 目录结构 网站的目录结构是指你建立网站时创建的目录。目录结构的好坏，对于网站本身的上传、维护、内容未来的扩充和移植有着重要的影响。 将文件分门别类地放在不同的文件夹下，本网站的目录结构如下： Images—用于保存图像素材　　　Page—用于存放网页 Css－用于存放CSS样式文件　　Flash—用于存放Flash动画 2. 链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。如果把每个页面比喻成一个固定点，那么链接就是两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。 本网站采用的是最常见的星状链接。所谓星状链接是指每个页面之间都建立链接。星状链接结构的优点是浏览方便，用户可以从当前页面跳转到网站内的任何页面中。网站结构如图所示。 11.3.3页面模板的制作 使用模板来创建网站的好处是快速建立具有统一风格的多个网页，提高网站设计与制作的效率。本网站有一组风格相同的8个网页，因此，首先制作页面的模板，操作步骤如下： 选择“文件”菜单｜“新建”命令，新建一个模板页面， 划分模板的锁定区域和可编辑区域。在这个模板中，上、下和右侧的上部是所有网页的共同部分，因此为锁定区域，右侧的