网站静态页面设计

第六章网站静态页面设计1第6章网站静态页面设计第六章网站静态页面设计2本章要点：主页设计栏目与版面设计页面可视化设计静态网页制作技术第六章网站静态页面设计3确定主页的功能模块设计主页的版面处理技术上的细节6.1主页设计第六章网站静态页面设计41、确定主页的功能模块网站名称、广告条、主菜单新闻、搜索、友情链接联系及版权信息等第六章网站静态页面设计5第六章网站静态页面设计62、主页版面设计勾画草图—软件实现3、处理技术上的细节风格、链接、图形、动画、文字、速度第六章网站静态页面设计7栏目设计版面设计6.2栏目与版面设计第六章网站静态页面设计8紧扣网站的主题设立一个最近更新或网站指南栏目设定一个可以双向交流的栏目设一个下载或常见问题回答栏目栏目与版面设计网站栏目安排要注意以下几方面：栏目设计第六章网站静态页面设计9版面设计栏目与版面设计版面设计的原则版面布局的步骤版面布局的形式版面也称为版块：指的是浏览器看到的完整的一个页面（可以包含框架和层）第六章网站静态页面设计10主次分明，中心突出大小搭配，相互呼应图文并茂，相得益彰版面设计的原则设计版面布局要做到：正常平衡异常平衡对比凝视空白尽量用图片解说版面设计布局原则：第六章网站静态页面设计11正常平衡异常平衡对比凝视空白图片说明第六章网站静态页面设计12轮廓设计布局设计细节设计版面布局的步骤版面设计第六章网站静态页面设计13“T”结构布局“口”型布局“三”型布局对称对比布局POP布局“国”字型拐角型标题正文型左右框架型上下框架型综合框架型封面型Flash型版面布局的形式版面设计第六章网站静态页面设计14色彩的基本知识网页色彩设计6.3色彩设计第六章网站静态页面设计15颜色的概念色彩的搭配色彩的心理感觉色彩的对比色彩的区域大小和形状色彩的位置色彩的基本知识第六章网站静态页面设计16颜色是由光的折射产生的。红，黄，蓝被称为三原色，其它的色彩都可以用这三种色彩调和而成颜色分非彩色和彩色两类颜色的概念色彩的基本知识第六章网站静态页面设计17网页色彩搭配的基本原理：色彩的鲜明性色彩的独特性彩的合适性色彩的联想性色彩的搭配色彩的基本知识第六章网站静态页面设计18网页配色的基本方法网页色彩设计网页色彩搭配的技巧网页色彩设计第六章网站静态页面设计19底色和图形色整体色调配色的平衡配色时要有重点色配色的节奏渐变色的调和在配色方面的统调在配色方面的分割网页配色的基本方法网页色彩设计第六章网站静态页面设计20网页内容网页标题导航菜单侧栏页脚网页色彩设计网页色彩设计第六章网站静态页面设计21暖色调即红色、橙色、黄色、赭色等色彩的搭配冷色调即青色、绿色、紫色等色彩的搭配对比色调即把色性完全相反的色彩搭配在同一个空间里网页色彩搭配的技巧网页色彩设计第六章网站静态页面设计22考虑人们的阅读习惯与效果不要用花纹繁复的图案作背景，以便突出主要文字内容定位于国际性质的网站，应该针对不同地区访问者，设计不同的字体6.4字体设计第六章网站静态页面设计23网站导航要清晰，容易查找注意超链接颜色与单纯叙述性文字的颜色区别一般网页的长度不超过三个屏幕高度为佳以文档中关键的字眼作为超链接的锚点网页上传后，逐一测试每一页的每一个超链接是否有效，以杜绝失败的链接6.5导航设计第六章网站静态页面设计246.6图像设计网页中图像的格式：网页中图形设计技巧网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最广泛主要是GIF和JPEG两种格式第六章网站静态页面设计25GIF格式GIF格式使用8位颜色，并在保留锐化细节（如艺术线条、徽标或带文字的插图）的同时，有效地压缩实色区域。还可以使用GIF格式创建动画图像。大多数浏览器都支持GIF格式。GIF格式使用LZW压缩，它是无损耗的压缩方法。但是，因为GIF文件只有256种颜色，故将原24位图像优化为8位GIF会导致颜色信息丢失。另外，Photoshop和ImageReady允许对GIF文件应用损耗压缩。使用“损耗”选项可通过牺牲一定的图像品质来生成显著减小的文件。第六章网站静态页面设计26JPEG格式JPEG格式支持24位颜色，并保留照片和其它连续色调图像中存在的亮度和色相的显著和细微变化。大多数浏览器都支持JPEG。JPEG通过有选择地减少数据来压缩文件大小。因为它会弃用数据，故JPEG压缩称为损耗压缩。较高品质设置导致弃用的数据较少，但是JPEG压缩方法会降低图像中细节的清晰度，尤其是包含文字或矢量图形的图像。JPEG格式不支持透明度。第六章网站静态页面设计276.7动画设计动画就是在一定时间内显示的一系列图像或帧。每一帧较前一帧有轻微的变化，当连续、快速地显示这些帧时就创造出运动的效果。GIF动画Flash动画第六章网站静态页面设计28附：网站设计基础语言HTMLHTML简介HTML的语法格式文件标签版式标签框架标签字体标签表格与清单标签表单标签超链接标签多媒体标签本节要点：第六章网站静态页面设计29一、HTML简介（1）HTML语法标记（标签）：以””、””括起来的内容，大多成对出现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：body、p、h1指向其他资源的标记：img、a例：这是b粗体/b字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开如：imgsrc=logo.gifwidth=520height=81属性值属性名第六章网站静态页面设计30一、HTML简介（2）HTML页面文档的结构一个简单的HTML页面htmlheadtitleHTML文件结构/title/headbody在这里显示文件的主体内容。/body/html第六章网站静态页面设计31一、HTML简介（3）HTML标记的结构形态标记页面元素内容/标记如：p这是一个文本段落/p标记属性名=“属性值”页面元素内容/标记如：fontcolor=“red”红色字/font标记如：以内容下换行显示br第二行内容第六章网站静态页面设计32二、创建HTML文档（1）准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用DreamweaverMX创建HTML文档新建文档查看代码保存文档：文件扩展名*.htm或*.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名查看保存的HTML文档效果打开IE浏览器，执行“文件—打开”菜单命令第六章网站静态页面设计33二、创建HTML文档（2）在浏览页面时修改HTML源文件执行“查看—源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。三、文件标记（1）html/html标记：不是HTML文档必须，但最好保持文档的完整性head/head标记：此标记中内容是提供给浏览器的，即文件头信息。第六章网站静态页面设计34三、文件标记（2）body标记可包括属性，由此决定页面内容的总体显示风格、背景等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。Background属性：用于设定背景图片Scroll属性：设定浏览器滚动条是否显示，取值”yes”或“no”，一般用于弹出式窗口第六章网站静态页面设计35三、文件标记（2）title/title标记：置于head区段，用于设定浏览器的标题meta标记：用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字常见属性：Name和content属性：指定“网页描述”类型及相应值http-equiv和content属性：指定HTTP响应头标及相应值举例：第六章网站静态页面设计36四、排版标记功能：实现页面的版式编排，应用广泛，兼容性强。主要有以下标记：!----：注释标记p/p：段落标记br：换行标记hr：水平线标记pre/pre：预设格式标记div/div区段标记第六章网站静态页面设计37!----：注释标记注释格式：!–注释内容--p/p段落标记br标记hr标记Size属性：设置水平线高度，以像素为单位width属性：设置水平线宽度，以像素为单位，也可以视窗的百分比为宽度。Align属性：设置水平线水平对齐方式，可取值：left、right、centerColor属性：指定水平线颜色Noshade属性：无需设置属性值，设置水平线无阴影。Title属性：用于设置水平线在鼠标指向时的提示说明pre/pre标记div/div区段标记Align属性：取值left、right、center第六章网站静态页面设计38五、框架标记功能：实现页面的框架分割，一般多用于在页面需保留一部分信息的情况下。framesetframeset框架集标记：定义框架内部的基本结构Rows属性：设置横向分割窗口的比例（框架页的高度），可以是像素值，也可为%，*代表剩余高度如framesetrows=“30%,*”/framesetCols属性：用于设置纵向分割窗口的比例Border属性：设置框边界宽度，以像素为单位Bordercolor属性：设置框边界颜色。第六章网站静态页面设计39frame框架内容标记Src属性：指定当前框架中显示的页面文件Name属性：设置框架名称noframes/noframes标记用于设置不支持frame时页面显示的信息如在含有框架的HTML页面中加入noframes对不起，你的浏览器不支持frame!/noframes第六章网站静态页面设计40六、字体标记功能：用于设定字体的大小、粗线、颜色等b/b：粗体strong/strong：加强语气（一般通过加粗来实现，视不同浏览器面有所不同）h1/h1（小）……h6/h6（大）标题标记u/u下划线标记strike/strike删除线标记sub/sub下标标记与sup/sup上标标记第六章网站静态页面设计41font/font字体标记Face属性：用于指定字体，多个字体用逗号分隔，默认字体中文为“宋体”，英文“TimesNewRoman”Color属性：设置文字颜色，属性值可以为颜色英文代码，也可为RGB颜色代码（#rrggbb）rr、gg、bb分别表示红、绿、蓝三原色代码，取值00—FF如：fontcolor=“red”红字/fontfontcolor=“#FF0000”红字/fontSize属性：设置字号，取值1（大）—7（小），默认为3，第六章网站静态页面设计42七、项目清单与表格标记一个项目清单实例ul/ul、ol/ol与li/li标记ul/ul（unorderedlist）无序清单标记ol/ol（orderedlist）有序清单标记例：无序列表有序列表ulolli无序项目1/lili有序项目1/lili无序项目2/lili有序项目2/li/ul/ol第六章网站静态页面设计43表格完整代码示例tabletrtd第一行第