计算机网络应用基础 第3版 教学课件 作者 王建珍 第08章 网页设计与制作技术.ppt

《计算机网络应用基础 第3版 教学课件 作者 王建珍 第08章 网页设计与制作技术.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、1第8章网页设计与制作技术2第8章网页设计与制作技术网页与网站的概念8.1网页的设计与规划8.2网站的开发流程8.3网站的开发流程8.4初识Dreamweaver88.58.6创建基本网页8.1网页与网站的概念◆构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。◆通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。48.2网页的设计与规划色彩文字主题版式和布局8.2.1网页主题网页的主题指网页所要表现

2、的最主要的思想内涵，可以说是网页的灵魂。主题的概念是很模糊的，它是一种约束，是同一站点中各个页面于五彩缤纷中体现出统一风格的约束；它也是一种力量，是将各个设计者的作品有机结合起来的力量。主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。8.2.2网页的文字文字是网页最主要的表达形式，尽管图形使得网页变得五彩缤纷，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们总是首先浏览文字内容，而甚少关心其他页面元素，甚至对导航系统也是如此。所以，给浏览者一个亲和的文字界面是必要的。文字艺术与文字应用同一页面采用三种字体以内字型大小变化在3-6个

3、层次以内大标题﹑小内文﹑粗标题﹑细内文应用闪烁字效应控制得当特殊字体应用时应使用图片格式色彩与背景应拉开层次文字艺术与文字应用同一页面采用三种字体以内字型大小变化在3-6个层次以内大标题﹑小内文﹑粗标题﹑细内文应用闪烁字效应控制得当特殊字体应用时应使用图片格式色彩与背景应拉开层次8.2.3网页的色彩在制作网站的时候，色彩的选择和搭配十分重要，因为一个网站格调的确定，往往取决于色彩的选择与搭配是否适当，一般的情况下，从以下几个方面来考虑色彩的选择：色彩的鲜明性网站色彩的选择与搭配要鲜艳，这样比较容易吸引访问者的注意，而且在访问者的记忆中驻留的时间也比较长。色彩的独特性网站色彩的选择

4、与搭配要与众不同，这样就可以使得访问者留下深刻的印象。色彩的合适性网站色彩的选择与搭配要与网站的内容气氛相适合。色彩的联想性不同的色彩会产生不同的联想，在网站的设计中多运用具有美好联想的色彩，可以使你的网站流露出另外一种气息。页面中各处用色的选择首先确定主色。主色是指页面中相对来说较大面积使用的色彩。主色可以反映出整个网页的风格，亦可使页面内容以色彩语言表达出来。接下来是确定辅助色。辅助色可以有多种，其应用范围包括输入框的颜色，表格边框颜色、表格的底色、小图标用色、文字颜色以及链接色等等。色彩设计既要有理性的一面，还要有感性的一面。不仅要了解色彩的科学性知识和合理的配色方法，还要

5、了解色彩表现情感的力量。色彩设计不仅仅是为了传递某种信息，更重要的是以它特有的魅力激发起人们的情感反应，达到影响人﹑感染人使人容易接受的目的。网页设计——网页色彩设计一、布局设计理念页面尺寸显示器分辨率的高低决定页面的显示尺寸。8.2.4网页版面与布局设计页面尺寸显示器分辨率的高低决定页面的显示尺寸。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个像素；分辨率在1024x768的情况下，页面的显示尺寸为：1007x600个像素。宽度：760px左右宽度：960px左右8.2.4网页版面与布局设计一、布局设计理念页面尺寸页面版式显示器分辨率的高低决定显示页面的

6、尺寸。T型结构、同字型结构、川字型结构、三字型结构、封面型结构、Flash型结构。T型　结　构同　字　结　构川　字　结　构三　字　结　构单　一　结　构单　一　结　构二、布局设计的方法纸上布局在纸上画出页面的布局草图。软件布局手绘布局草图手绘布局草图手绘布局草图手绘布局草图二、布局设计的方法纸上布局软件布局在纸上画出页面的布局草图。利用软件来完成页面的布局。软件布局图WordPhotoshopCS常用软件三、布局设计的技术表格布局CSS布局框架布局表格布局技术它能对不同对象加以处理，而又不用担心各对象之间的影响。优点表格

7、布局技术页面结构与表现混杂在一起，不利于后期的维护。缺点源代码存在大量的冗余代码,页面下载速度受到影响。CSS布局技术表现形式和内容结构相分离，网页结构清晰，便于更好的控制页面布局。优点大大缩减页面代码，提高页面浏览速度,缩减了带宽成本。易于修改和维护。框架布局技术优点访问者的浏览器不需为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。框架布局技术缺点并不是所有浏览器都提供良好的框架支持。难以实现在不同框