网站静态页面设计

1、第6章 网站静态页面设计1本章要点：主页设计栏目与版面设计页面可视化设计静态网页制作技术2确定主页的功能模块设计主页的版面 处理技术上的细节 6.1 主页设计31、确定主页的功能模块网站名称、广告条、主菜单新闻、搜索、友情链接联系及版权信息 等452、主页版面设计勾画草图软件实现3、处理技术上的细节风格、链接、图形、动画、文字、速度6栏目设计版面设计 6.2 栏目与版面设计 7紧扣网站的主题 设立一个最近更新或网站指南栏目 设定一个可以双向交流的栏目 设一个下载或常见问题回答栏目 栏目与版面设计 网站栏目安排要注意以下几方面：栏目设计8版面设计 栏目与版面设计 版面设计的原则版面布局的步骤 版

2、面布局的形式 版面也称为版块：指的是浏览器看到的完整的一个页面（可以包含框架和层） 9主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰 版面设计的原则设计版面布局要做到：正常平衡 异常平衡 对比 凝视 空白 尽量用图片解说 版面设计 布局原则：10正常平衡异常平衡对比凝视空白图片说明11轮廓设计 布局设计 细节设计 版面布局的步骤版面设计 12“T”结构布局 “口”型布局 “三”型布局 对称对比布局 POP布局“国”字型 拐角型 标题正文型 左右框架型 上下框架型综合框架型封面型 Flash型 版面布局的形式版面设计 13色彩的基本知识 网页色彩设计6.3 色彩设计14颜色的概念 色

3、彩的搭配 色彩的心理感觉 色彩的对比 色彩的区域大小和形状 色彩的位置 色彩的基本知识15颜色 是由光的折射产生的。红，黄，蓝被称为三原色，其它的色彩都可以用这三种色彩调和而成 颜色 分非彩色和彩色两类 颜色的概念色彩的基本知识16网页色彩搭配的基本原理：色彩的鲜明性色彩的独特性 彩的合适性色彩的联想性色彩的搭配色彩的基本知识17网页配色的基本方法 网页色彩设计 网页色彩搭配的技巧 网页色彩设计18底色和图形色 整体色调 配色的平衡 配色时要有重点色 配色的节奏 渐变色的调和 在配色方面的统调 在配色方面的分割 网页配色的基本方法网页色彩设计19网页内容 网页标题 导航菜单 侧栏 页脚 网页色

4、彩设计网页色彩设计20暖色调即红色、橙色、黄色、赭色等色彩的搭配 冷色调即青色、绿色、紫色等色彩的搭配 对比色调即把色性完全相反的色彩搭配在同一个空间里 网页色彩搭配的技巧网页色彩设计21 考虑人们的阅读习惯与效果 不要用花纹繁复的图案作背景，以便突出 主要文字内容 定位于国际性质的网站，应该针对不同地 区访问者，设计不同的字体 6. 4 字体设计 22网站导航要清晰，容易查找注意超链接颜色与单纯叙述性文字的颜色区别 一般网页的长度不超过三个屏幕高度为佳 以文档中关键的字眼作为超链接的锚点 网页上传后，逐一测试每一页的每一个超链接 是否有效，以杜绝失败的链接 6.5 导航设计 236.6 图像

5、设计网页中图像的格式：网页中图形设计技巧 网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最广泛主要是GIF和JPEG两种格式24GIF 格式GIF 格式使用 8 位颜色，并在保留锐化细节（如艺术线条、徽标或带文字的插图）的同时，有效地压缩实色区域。还可以使用 GIF 格式创建动画图像。大多数浏览器都支持 GIF 格式。GIF 格式使用 LZW 压缩，它是无损耗的压缩方法。但是，因为 GIF 文件只有 256 种颜色，故将原 24 位图像优化为 8 位 GIF 会导致颜色信息丢失。另外，Photoshop 和 ImageReady 允许对 GIF 文件

6、应用损耗压缩。使用“损耗”选项可通过牺牲一定的图像品质来生成显著减小的文件。25JPEG 格式 JPEG 格式支持 24 位颜色，并保留照片和其它连续色调图像中存在的亮度和色相的显著和细微变化。大多数浏览器都支持 JPEG。JPEG 通过有选择地减少数据来压缩文件大小。因为它会弃用数据，故 JPEG 压缩称为损耗压缩。较高品质设置导致弃用的数据较少，但是 JPEG 压缩方法会降低图像中细节的清晰度，尤其是包含文字或矢量图形的图像。JPEG 格式不支持透明度。 266.7 动画设计动画就是在一定时间内显示的一系列图像或帧。每一帧较前一帧有轻微的变化，当连续、快速地显示这些帧时就创造出运动的效果。

7、 GIF动画Flash动画27附：网站设计基础语言HTMLHTML简介HTML的语法格式文件标签版式标签框架标签字体标签表格与清单标签表单标签超链接标签多媒体标签本节要点：28一、HTML简介（1）HTML语法标记（标签）：以”括起来的内容，大多成对出现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：、指向其他资源的标记：、例：这是粗体字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开 如：属性值属性名29一、HTML简介（2）HTML页

8、面文档的结构一个简单的HTML页面 HTML文件结构 在这里显示文件的主体内容。 30一、HTML简介（3）HTML标记的结构形态页面元素内容如：这是一个文本段落页面元素内容如：红色字如：以内容下换行显示第二行内容31二、创建HTML文档（1）准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用Dreamweaver MX创建HTML文档新建文档查看代码保存文档：文件扩展名 *.htm 或 *.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并

9、输入文件全名查看保存的HTML文档效果打开IE浏览器，执行“文件打开”菜单命令32二、创建HTML文档（2）在浏览页面时修改HTML源文件执行“查看源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。三、文件标记（1）标记：不是HTML文档必须，但最好保持文档的完整性标记：此标记中内容是提供给浏览器的，即文件头信息。33三、文件标记（2）标记可包括属性，由此决定页面内容的总体显示风格、背景等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”

10、，不设定时取默认值（蓝、红、紫）。Background属性：用于设定背景图片Scroll属性：设定浏览器滚动条是否显示，取值”yes”或 “no”，一般用于弹出式窗口34三、文件标记（2）标记：置于区段，用于设定浏览器的标题标记：用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字常见属性： Name和content属性：指定“网页描述”类型及相应值http-equiv和content属性：指定HTTP响应头标及相应值举例：35四、排版标记功能：实现页面的版式编排，应用广泛，兼容性强。主要有以下标记：注释标记：段落标记：换行标记：水平线标记：预设格式标记区段标

11、记36：注释标记注释格式：段落标记标记标记Size属性：设置水平线高度，以像素为单位width属性：设置水平线宽度，以像素为单位，也可以视窗的百分比为宽度。Align属性：设置水平线水平对齐方式，可取值：left、right、centerColor属性：指定水平线颜色Noshade属性：无需设置属性值，设置水平线无阴影。Title属性：用于设置水平线在鼠标指向时的提示说明标记区段标记Align属性：取值left、right 、center37五、框架标记功能：实现页面的框架分割，一般多用于在页面需保留一部分信息的情况下。 框架集标记：定义框架内部的基本结构Rows属性：设置横向分割窗口的比例（

12、框架页的高度），可以是像素值，也可为%，* 代表剩余高度如Cols属性：用于设置纵向分割窗口的比例Border属性：设置框边界宽度，以像素为单位Bordercolor属性：设置框边界颜色。38框架内容标记Src属性：指定当前框架中显示的页面文件Name属性：设置框架名称标记用于设置不支持frame时页面显示的信息如在含有框架的HTML页面中加入 对不起，你的浏览器不支持frame!39六、字体标记功能：用于设定字体的大小、粗线、颜色等：粗体：加强语气（一般通过加粗来实现，视不同浏览器面有所不同）（小）（大）标题标记下划线标记删除线标记下标标记与上标标记40字体标记Face属性：用于指定字体，多

13、个字体用逗号分隔，默认字体中文为“宋体”，英文“Times New Roman” Color属性：设置文字颜色，属性值可以为颜色英文代码，也可为RGB颜色代码（#rrggbb）rr、gg、bb分别表示红、绿、蓝三原色代码，取值00FF如：红字 红字Size属性：设置字号，取值1（大）7（小），默认为3，41七、项目清单与表格标记一个项目清单实例、 与 标记（unordered list）无序清单标记（ordered list）有序清单标记例：无序列表有序列表无序项目1 有序项目1无序项目2有序项目2 42表格完整代码示例 第一行第一列第一行第二列 第二行第一列第二行第二列 第一行第一列第一行第

14、二列第二行第一列第二行第二列构成表格的一行构成表格的一列43、标记标记：表格开始与结束标记border属性：表格边线宽度，以像素为单位，为0时不显示表格线Cellpadding属性：设置单元格内容与边线之间空间，默认值为1Cellspacing属性：表格内单元格之间的距离。默认值为2Width 属性：表格宽度，可以为像素值和%两种形式Height属性：表格高度，可以为像素值和%两种形式Align属性：水平对齐方式，取值left、right、centerValign属性：垂直对齐方式，取值top、center、bottomBgcolor属性：表格背景色Bordercolor属性：表格边界线颜色B

15、ordercolorlight与bordercolordark属性：三维表格亮色与暗色颜色Background属性：表格背景图片表格行开始与结束标记单元格开始与结束标记说明：表格标记属性较多。设置较复杂，一般先通过软件生成，于细节处利用代码修改44八、表单标记功能：用于提供与用户交互，收集用户信息，通常需配合CGI、ASP等服务器端Web程序来实现。一个表单实例表单标记Action属性：指定表单处理程序，其值为一个服务器端Web程序URL。Method属性：指定数据传递的方法，取值为get或postName属性：指定表单名称，区分不同表单，及便于其他程序调用。45表单元素标记详释输入标记nam

16、e属性：表单元素名称type属性：反映不同类型输入项目，可取TEXT：文本框PASSWORD：口令框。CHECKBOX：复选框RADIO：单选按钮SUBMIT：提交按钮RESET：复位按钮IMAGE：图像按钮HIDDEN：隐藏表单组件Value属性：表单元素初始值46下拉列表标记选项标记，置于区段内Selected属性：默认选项，无属性值Value属性：设置选项被选中后提交的内容，默认为之间显示的内容多行文本框标记Rows属性：设定textarea输入框行数Cols属性：textarea输入框列数47九、超链接标记功能：提供浏览者在不同Web页面进行跳转标记（anchor）Href属性：设定链接目标文件，一般为一URL地址或本地Web路径文件例：链接到本地Web网页：回首页 链接到本地Web路径下一普通文件： 软件下载链接到本地Web路径下一图片：打开我的照片链接到internet上某一网站：搜狐网链接到电子邮件地址：给我写信48链接到Web页面中特定结点（称为