《网页设计与制作》ppt

《《网页设计与制作》ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《网页设计与制作》第11章网站建设综合实训站点规划11.1素材准备与站点设计11.2网页制作11.3WEB服务器的配置11.4站点的上传与发布11.3站点的维护与更新11.4随着网络科技的发展，Internet已经成为企业宣传自己的重要途径之一。拥有一个好的商业网站就是企业最好的名片。建立商业网站不仅可以让客户了解企业，提高企业的知名度；而且更能突破时空的限制，为企业在网络时代创造更多的商机。在本章中，将详细介绍一个商业网站的建设过程。网站首页草图如图所示。【本章学习目的】本章通过详细讲解商业网站建设过程，读者掌握规划网站、页面布局的技术、网站的制作流程。11.1站点规划制

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

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

4、站的色彩方案根据网站的主题收集资料：文字及图像等11.2.1绘制首页草图首页的设计时应该注意以下几个问题：框架清晰，重点突出；色彩搭配既要能够吸引浏览者的注意力，又不要过于花哨，过于浓烈的色彩反而容易引起浏览者的反感；文字和图片相辅相成。11.2.2素材准备有了总体结构，还要进行基本素材的收集，比如文本、动画、图片、音乐、视频素材等。这其中有些可以自己制作，比如使用fireworks制作图片、flash制作动画等；有些可以通过其他途径获得，比如在网上下载，购买素材光盘等等。本网站中使用的主要素材就是图片，一部分是通过实物拍摄后处理获得的，还有一部分装饰图像是通过素材光

5、盘获得。11.3网页制作11.3.1创建站点在Dreamweaver8.0中，执行“站点”菜单｜“新建站点”命令，弹出“站点定义”的对话框。选择“高级”选项卡，单击“本地信息”，在右侧选项中定义网站的一些本地信息。站点名称：综合实例。本地根文件夹：即指定站点文件的保存位置。输入H：shili11-1。默认图像文件夹：H：shili11-1images。其它选择默认项。11.3.2创建网站结构1.目录结构网站的目录结构是指你建立网站时创建的目录。目录结构的好坏，对于网站本身的上传、维护、内容未来的扩充和移植有着重要的影响。将文件分门别类地放在不同的文件夹下，本网站的目

6、录结构如下：Images—用于保存图像素材Page—用于存放网页Css－用于存放CSS样式文件Flash—用于存放Flash动画2.链接结构网站的链接结构是指页面之间相互链接的拓扑结构。如果把每个页面比喻成一个固定点，那么链接就是两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。本网站采用的是最常见的星状链接。所谓星状链接是指每个页面之间都建立链接。星状链接结构的优点是浏览方便，用户可以从当前页面跳转到网站内的任何页面中。网站结构如图所示。11.3.3页面模板的制作使用模板来创建网站的好处是快速建立具有统一风格的多个网页，提高网站设计与制作的效率。本网站有一

7、组风格相同的8个网页，因此，首先制作页面的模板，操作步骤如下：选择“文件”菜单｜“新建”命令，新建一个模板页面，划分模板的锁定区域和可编辑区域。在这个模板中，上、下和右侧的上部是所有网页的共同部分，因此为锁定区域，右侧的中部是每个网页的具体不同部分，创建为可编辑区域，如图所示。模板的编辑过程与普通网页相同。可编辑区域锁定区域11.3.4首页的制作制作过程如下：步骤1选择“文件”菜单｜“新建”命令，新建一个网页，命名保存为“index.html。打开“资源”面板，选择“模板”选项，将模板文件“moban.dwt”直接