网站静态页面设计

《网站静态页面设计》由会员分享，可在线阅读，更多相关《网站静态页面设计（50页珍藏版）》请在金锄头文库上搜索。

1、第六章 网站静态页面设计第6章 网站静态页面设计1第六章 网站静态页面设计本章要点：v主页设计v栏目与版面设计v页面可视化设计v静态网页制作技术2第六章 网站静态页面设计确定主页的功能模块设计主页的版面 处理技术上的细节 6.1 主页设计3第六章 网站静态页面设计1、确定主页的功能模块v网站名称、广告条、主菜单v新闻、搜索、友情链接v联系及版权信息 等4第六章 网站静态页面设计5第六章 网站静态页面设计2、主页版面设计v勾画草图软件实现 3、处理技术上的细节v风格、链接、图形、动画、文字、速 度6第六章 网站静态页面设计栏目设计版面设计 6.2 栏目与版面设计 7第六章 网站静态页面设计紧扣网

2、站的主题 设立一个最近更新或网站指南栏目 设定一个可以双向交流的栏目 设一个下载或常见问题回答栏目 栏目与版面设计 网站栏目安排要注意以下几方面：栏目设计8第六章 网站静态页面设计 版面设计 栏目与版面设计 版面设计的原则 版面布局的步骤 版面布局的形式 版面也称为版块：指的是浏览器看到的完整的一个页面（可以包含框架和层） 9第六章 网站静态页面设计主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰 版面设计的原则设计版面布局要做到： 正常平衡 异常平衡 对比 凝视 空白 尽量用图片解说 版面设计 布局原则：10第六章 网站静态页面设计正常平衡异常平衡对比凝视空白图片说明11第六章 网

3、站静态页面设计轮廓设计 布局设计 细节设计 版面布局的步骤版面设计 12第六章 网站静态页面设计“T”结构布局 “口”型布局 “三”型布局 对称对比布局 POP布局 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 版面布局的形式版面设计 13第六章 网站静态页面设计色彩的基本知识 网页色彩设计6.3 色彩设计14第六章 网站静态页面设计颜色的概念 色彩的搭配 色彩的心理感觉 色彩的对比 色彩的区域大小和形状 色彩的位置 色彩的基本知识15第六章 网站静态页面设计颜色 是由光的折射产生的。红，黄，蓝被称为三原色，其它的色彩都可以用这三种色彩调和而成 颜色

4、 分非彩色和彩色两类 颜色的概念色彩的基本知识16第六章 网站静态页面设计网页色彩搭配的基本原理：色彩的鲜明性色彩的独特性 彩的合适性色彩的联想性色彩的搭配色彩的基本知识17第六章 网站静态页面设计网页配色的基本方法 网页色彩设计 网页色彩搭配的技巧 网页色彩设计18第六章 网站静态页面设计底色和图形色 整体色调 配色的平衡 配色时要有重点色 配色的节奏 渐变色的调和 在配色方面的统调 在配色方面的分割 网页配色的基本方法网页色彩设计19第六章 网站静态页面设计网页内容 网页标题 导航菜单 侧栏 页脚 网页色彩设计网页色彩设计20第六章 网站静态页面设计暖色调即红色、橙色、黄色、赭色等色彩的搭

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

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

7、 ImageReady 允许对 GIF 文件应用损耗 压缩。使用“损耗”选项可通过牺牲一定的图 像品质来生成显著减小的文件。25第六章 网站静态页面设计JPEG 格式 JPEG 格式支持 24 位颜色，并保留照片 和其它连续色调图像中存在的亮度和色相的 显著和细微变化。大多数浏览器都支持 JPEG。 JPEG 通过有选择地减少数据来压缩文件 大小。因为它会弃用数据，故 JPEG 压缩称 为损耗压缩。较高品质设置导致弃用的数据 较少，但是 JPEG 压缩方法会降低图像中细 节的清晰度，尤其是包含文字或矢量图形的 图像。 JPEG 格式不支持透明度。 26第六章 网站静态页面设计6.7 动画设计动

8、画就是在一定时间内显示的一系 列图像或帧。每一帧较前一帧有轻微的 变化，当连续、快速地显示这些帧时就 创造出运动的效果。 vGIF动画vFlash动画27第六章 网站静态页面设计附：网站设计基础语言HTMLvHTML简介vHTML的语法格式v文件标签v版式标签v框架标签v字体标签v表格与清单标签v表单标签v超链接标签v多媒体标签本本节要点：节要点：28第六章 网站静态页面设计 一、HTML简介（1）HTML语法v标记（标签）：以”括起来的内容，大多成对出 现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空 格与回车分类：描述页面元素样式的标记：、指向其他资源的

9、标记：、例：这是粗体字v标记的作用：描述页面元素的显示方式及其他资源访问 方式 v属性及其值：进行一步提供详细描述信息，所有属性均 放在首标记中，多个属性间以空格分开如：属性值属性名29第六章 网站静态页面设计一、HTML简介（2）HTML页面文档的结构v一个简单的HTML页面HTML文件结构在这里显示文件的主体内容。30第六章 网站静态页面设计一、HTML简介（3）HTML标记的结构形态v页面元素内容如：这是一个文本段落v页面元素 内容如：红色字v如：以内容下换行显示第二行 内容31第六章 网站静态页面设计二、创建HTML文档（1）准备工作v新建一个用于保存网页及相关资料的文件夹v收集网页素

10、材，复制保存在新建文件夹中v画出网页草图，安排页面元素 用工具软件创建HTML文档v利用Dreamweaver MX创建HTML文档新建文档查看代码保存文档：文件扩展名 *.htm 或 *.html 用文本编辑软件创建HTML文档v用记事本进行HTML文档的编辑v注意：保存文件时，保存类型应选择“所有文件”，并输入 文件全名 查看保存的HTML文档效果v打开IE浏览器，执行“文件打开”菜单命令32第六章 网站静态页面设计二、创建HTML文档（2） 在浏览页面时修改HTML源文件v执行“查看源文件”菜单，调用记事本 打开源代码，欲重新查看修改后的效果只需 单击IE工具栏“刷新”按钮。三、文件标记

11、（1） 标记：不是HTML文档必 须，但最好保持文档的完整性 标记：此标记中内容是 提供给浏览器的，即文件头信息。33第六章 网站静态页面设计 三、文件标记（2） 标记v可包括属性，由此决定页面内容的总体显 示风格、背景等。vText属性：用于设定文字颜色vBgcolor属性：设定页面背景颜色vlink，alink，vlink属性，分别用于设定 页面中超级链接“访问前、正在按下时、访问后 的颜色”，不设定时取默认值（蓝、红、紫）。vBackground属性：用于设定背景图片vScroll属性：设定浏览器滚动条是否显示 ，取值”yes”或 “no”，一般用于弹出式窗口34第六章 网站静态页面设计

12、 三、文件标记（2） 标记：v置于区段，用于设定浏览器的标 题 标记：v用于描述HTML文档相关信息。如编辑器类 型，字符集等，通常用来为搜索引擎定义页面关 键字v常见属性：Name和content属性：指定“网页描述”类型及 相应值 http-equiv和content属性：指定HTTP响应头标及相 应值 举例：35第六章 网站静态页面设计 四、排版标记 功能：v实现页面的版式编排，应用广泛，兼容性 强。 主要有以下标记：v：注释标记v：段落标记v：换行标记v：水平线标记v：预设格式标记v区段标记36第六章 网站静态页面设计：注释标记v注释格式： 段落标记 标记 标记vSize属性：设置水平

13、线高度，以像素为单位 vwidth属性：设置水平线宽度，以像素为单位，也可以视 窗的百分比为宽度。 vAlign属性：设置水平线水平对齐方式，可取值：left、 right、center vColor属性：指定水平线颜色 vNoshade属性：无需设置属性值，设置水平线无阴影。 vTitle属性：用于设置水平线在鼠标指向时的提示说明 标记 区段标记vAlign属性：取值left、right 、center37第六章 网站静态页面设计五、框架标记功能：实现页面的框架分割，一般多用于 在页面需保留一部分信息的情况下。框架集标记 ：定义框架内部的基本结构vRows属性：设置横向分割窗口的比例（框 架

14、页的高度），可以是像素值，也可为%，* 代 表剩余高度v如vCols属性：用于设置纵向分割窗口的比例vBorder属性：设置框边界宽度，以像素为 单位vBordercolor属性：设置框边界颜色。 38第六章 网站静态页面设计框架内容标记vSrc属性：指定当前框架中显示的页面文 件vName属性：设置框架名称 标记v用于设置不支持frame时页面显示的信 息v如在含有框架的HTML页面中加入对不起，你的浏览器不支持 frame!39第六章 网站静态页面设计六、字体标记功能：用于设定字体的大小、粗线、颜色等 ：粗体 ：加强语气（一般通 过加粗来实现，视不同浏览器面有所不同） （小）（大 ）标题标

15、记 下划线标记 删除线标记 下标标记与 上标标记40第六章 网站静态页面设计字体标记vFace属性：用于指定字体，多个字体用逗号分 隔，默认字体中文为“宋体”，英文“Times New Roman” vColor属性：设置文字颜色，属性值可以为颜色 英文代码，也可为RGB颜色代码（#rrggbb）rr、gg、bb分别表示红、绿、蓝三原色代码，取 值00FFv如：红字 红字vSize属性：设置字号，取值1（大）7（小） ，默认为3，41第六章 网站静态页面设计七、项目清单与表格标记一个项目清单实例 、 与 标记 （unordered list）无序清 单标记 （ordered list）有序清单 标记 例： 无序列表有序列表无序项目1 有 序项目1 无序项目2有 序项目242第六章 网站静态页面设计 表格完整代码示例第一行第一列第一行第二列第二行第一列第二行第二列第一行第一列第一行第二列 第二行第一列第二行第二列构成表格的一行构成表格的一列43第六章 网站静态页面设计、标 记 标记：表格开始与结束标记vborder属性：表格边线宽度，以像素为单位，为0时不显示 表格线vCellpadding属性：设置单元格内容与边线之间空间，默认 值为1vCellspacing属性：表格内单元格之间的距离。默认值为2vWidth 属性：表格宽度，可以为像素值和%两种形式vHeight属性：表格高度