网页制作案例教程 陈建孝 陆锡聪 余晓春 江玉珍 第12章 网站制作综合应用新

网页制作案例教程第1章：网站与网页概述第2章：HTML入门第3章：网页根本编辑第4章：表格第5章：框架第6章：APDiv第7章：表单第8章：CSS和模板第9章：网页图形处理工具FireworksCS5第10章：图像处理工具PhotoshopCS5第11章：动画制作工具FlashCS5第12章：网站制作综合应用2023/11/11学习目标：第12章网站制作综合应用熟悉和掌握网站建设的根本流程综合运用DreamWeaver、FireWorks、Photoshop和Flash能独立设计一个内容完整、图文并茂、技术运用得当的网站2023/11/1212.1网站建设流程一般地，一个网站建设大致需要以下几项流程：网站筹划设计网页测试站点发布站点2023/11/1312.1.1网站筹划网站筹划一般包括以下步骤：定位网站主题定位网站CI形象确定网站的栏目和版块确定网站的目录结构和链接结构确定网站的整体风格和创意设计2023/11/14定位网站主题定位网站CI形象确定网站的栏目和版块确定网站的目录结构和链接结构确定网站的整体风格和创意设计12.1.1网站筹划〔续〕2023/11/1512.1.1网站筹划〔续〕定位网站主题网站主题：网站所要表达信息的题材。如求职、聊天、社区、娱乐、旅行等。对于个人网站，建议选择题材时，首先主题要小而精，即定位要小，内容要精；其次题材最好是自己擅长或者喜爱的内容；再次题材不要太滥或者目标太高。2023/11/1612.1.1网站筹划〔续〕确定网站的栏目和版块栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。版块比栏目的概念要大一些，每个版块都有自己的栏目。设置版块时，应该注意：●各版块要有相对独立性；●各版块要有相互关联；●版块的内容要围绕站点主题。2023/11/1712.1.1网站筹划〔续〕确定网站的目录结构和链接结构网站的目录结构是指建立网站时创立的文件目录。对于站点本身的上传维护，未来内容的扩充和移植有着重要的影响。建议：●不要将所有文件都存放在根目录下；●按栏目内容建立子目录；●在每个主目录下都建立独立的images目录；●目录的层次不要太深，建议不要超过3层；●其它需要注意的，包括：不要使用中文目录、不要使用过长的目录、尽量使用意义明确的目录等。2023/11/1812.1.1网站筹划〔续〕网站的链接结构是指页面之间相互链接的拓扑结构。两种根本链接结构：●树状链接结构〔一对一〕。首页链接指向一级页面，一级页面链接指向二级页面。●星状链接结构〔一对多〕。每个页面相互之间都建立有链接。2023/11/1912.1.1网站筹划〔续〕确定网站的整体风格和创意设计网站的风格是指站点的整体形象给浏览者的综合感受。包括站点的CI〔标志，色彩，字体，标语〕，版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。风格是独特的，是站点不同于其他网站的地方，或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的；风格又是有人性的，通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。2023/11/11012.1.1网站筹划〔续〕以下几条是确定网站风格的参考意见：●将标志logo，尽可能的出现在每个页面上，或者页眉，或者页脚，或者背景。●突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。●突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。●想一条朗朗上口宣传标语。把它做在网站的横幅广告里，或者放在醒目的位置。●使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。●使用统一的图片处理效果。比方，阴影效果的方向，厚度，模糊度都必须一样。●创造站点特有的符号或图标。●用自己设计的花边，线条，点。●展示网站的荣誉和成功作品。网站的创意是网站生存的关键，是传达网站信息的一种特别方式。创意的目的是更好的宣传推广网站。2023/11/11112.1.2设计网页首页的设计是整个网站设计的难点，是网站成功与否的关键。一般的设计步骤是：1、确定首页的功能模块。首页的功能模块是指需要在首页上实现的主要内容和功能。一般的站点都有：网站名称〔logo〕，广告条〔banner〕，主菜单〔menu〕，新闻〔what'snew〕，搜索〔search〕，友情链接〔links〕，邮件列表〔maillist〕，计数器〔count〕，版权〔copyright〕等。2、设计首页的版面设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾勒出来，然后再用网页制作软件实现。3、处理技术上的细节常见的技术细节，如：制作的主页如何能在不同分辨率下保持不变形，如何能在IE和Firefox下看起来都不至于太丑陋，如何设置字体和链接颜色等等。其他二级网页，在设计时应当保持与首页风格的一致性。2023/11/11212.1.3测试站点测试站点，一般有浏览器兼容性测试和超链接测试。检查浏览器兼容性检测时可以先设置目标浏览器最低版本2023/11/11312.1.3测试站点〔续〕超链接测试。检查站点链接查看超链接测试结果2023/11/11412.1.4发布站点一、设置远程效劳器信息1.菜单栏中“站点〞|“管理站点〞命令，翻开管理站点对话框；2.选择要上传的站点名称。单击“编辑〞按钮，翻开“站点设置对象〞对话框；2023/11/11512.1.4发布站点〔续〕3.设置效劳器。点击“效劳器〞；填写根本信息并保存。2023/11/11612.1.4发布站点〔续〕二、上传站点1.在“文件〞面板单击链接按钮，与远程效劳器建立链接；2.在本地目录中选择上传的文件或文件夹，单击上传按钮，开始上传文件；3.浏览作品。翻开浏览器，在地址栏中输入“://[学号].hpd.pc.hstc〞，即可浏览到作品。2023/11/11712.2综合应用实例介绍一个网站“家乡风光〞的设计过程，网站主题为自然风景展示。主要过程如下：利用FireWorks设计网页利用Flash设计动画利用DreamWeaver制作网站具体操作过程见教材。2023/11/11812.3小结本章简单介绍了网站建设的一般流程。通过综合运用DreamWeaver、FireWorks、Photoshop和Flash，创立一个实例网站。通过这些内容的学习，使读者对网站建设有一个最根本的感性认识。2023/11/11912.4习题

练习参见教材10分钟2023/11/120本章结束放我回家！本章到此结束！欢送您提意见和建议！2023/11/121在线教务辅导网：

更多课程配套课件资源请访问在线教务辅导网2023/11/1222023/11/1232023/11/1242023/11/1252023/11/1262023/11/127馋死2023/11/1282023/11/1292023/11/1302023/11/1312023/11/1322023/