网站静态页面设计

1,第6章网站静态页面设计,2,本章要点：,主页设计栏目与版面设计页面可视化设计静态网页制作技术,3,确定主页的功能模块设计主页的版面处理技术上的细节,6.1主页设计,4,1、确定主页的功能模块,网站名称、广告条、主菜单新闻、搜索、友情链接联系及版权信息等,5,6,2、主页版面设计勾画草图软件实现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导航设计,24,6.6图像设计,网页中图像的格式：,网页中图形设计技巧,网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最广泛主要是GIF和JPEG两种格式,25,GIF格式,GIF格式使用8位颜色，并在保留锐化细节（如艺术线条、徽标或带文字的插图）的同时，有效地压缩实色区域。还可以使用GIF格式创建动画图像。大多数浏览器都支持GIF格式。GIF格式使用LZW压缩，它是无损耗的压缩方法。但是，因为GIF文件只有256种颜色，故将原24位图像优化为8位GIF会导致颜色信息丢失。另外，Photoshop和ImageReady允许对GIF文件应用损耗压缩。使用“损耗”选项可通过牺牲一定的图像品质来生成显著减小的文件。,26,JPEG格式,JPEG格式支持24位颜色，并保留照片和其它连续色调图像中存在的亮度和色相的显著和细微变化。大多数浏览器都支持JPEG。JPEG通过有选择地减少数据来压缩文件大小。因为它会弃用数据，故JPEG压缩称为损耗压缩。较高品质设置导致弃用的数据较少，但是JPEG压缩方法会降低图像中细节的清晰度，尤其是包含文字或矢量图形的图像。JPEG格式不支持透明度。,27,6.7动画设计,动画就是在一定时间内显示的一系列图像或帧。每一帧较前一帧有轻微的变化，当连续、快速地显示这些帧时就创造出运动的效果。GIF动画Flash动画,28,附：网站设计基础语言HTML,HTML简介HTML的语法格式文件标签版式标签框架标签,字体标签表格与清单标签表单标签超链接标签多媒体标签,本节要点：,29,一、HTML简介（1）,HTML语法标记（标签）：以”括起来的内容，大多成对出现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：、指向其他资源的标记：、例：这是粗体字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开如：,30,一、HTML简介（2）,HTML页面文档的结构一个简单的HTML页面HTML文件结构在这里显示文件的主体内容。,31,一、HTML简介（3）,HTML标记的结构形态页面元素内容如：这是一个文本段落页面元素内容如：红色字如：以内容下换行显示第二行内容,32,二、创建HTML文档（1）,准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用DreamweaverMX创建HTML文档新建文档查看代码保存文档：文件扩展名*.htm或*.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名查看保存的HTML文档效果打开IE浏览器，执行“文件打开”菜单命令,33,二、创建HTML文档（2）,在浏览页面时修改HTML源文件执行“查看源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。,三、文件标记（1）,标记：不是HTML文档必须，但最好保持文档的完整性标记：此标记中内容是提供给浏览器的，即文件头信息。,34,三、文件标记（2）,标记可包括属性，由此决定页面内容的总体显示风格、背景等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。Background属性：用于设定背景图片Scroll属性：设定浏览器滚动条是否显示，取值”yes”或“no”，一般用于弹出式窗口,35,三、文件标记（2）,标记：置于区段，用于设定浏览器的标题标记：用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字常见属性：Name和content属性：指定“网页描述”类型及相应值http-equiv和content属性：指定HTTP响应头标及相应值举例：,36,四、排版标记,功能：实现页面的版式编排，应用广泛，兼容性强。主要有以下标记：注释标记：段落标记：换行标记：水平线标记：预设格式标记区段标记,37,：注释标记注释格式：段落标记标记标记Size属性：设置水平线高度，以像素为单位width属性：设置水平线宽度，以像素为单位，也可以视窗的百分比为宽度。Align属性：设置水平线水平对齐方式，可取值：left、right、centerColor属性：指定水平线颜色Noshade属性：无需设置属性值，设置水平线无阴影。Title属性：用于设置水平线在鼠标指向时的提示说明标记区段标记Align属性：取值left、right、center,38,五、框架标记,功能：实现页面的框架分割，一般多用于在页面需保留一部分信息的情况下。框架集标记：定义框架内部的基本结构Rows属性：设置横向分割窗口的比例（框架页的高度），可以是像素值，也可为%，*代表剩余高度如Cols属性：用于设置纵向分割窗口的比例Border属性：设置框边界宽度，以像素为单位Bordercolor属性：设置框边界颜色。,39,框架内容标记Src属性：指定当前框架中显示的页面文件Name属性：设置框架名称标记用于设置不支持frame时页面显示的信息如在含有框架的HTML页面中加入对不起，你的浏览器不支持frame!,40,六、字体标记,功能：用于设定字体的大小、粗线、颜色等：粗体：加强语气（一般通过加粗来实现，视不同浏览器面有所不同）（小）（大）标题标记下划线标记删除线标记下标标记与上标标记,41,字体标记Face属性：用于指定字体，多个字体用逗号分隔，默认字体中文为“宋体”，英文“TimesNewRoman”Color属性：设置文字颜色，属性值可以为颜色英文代码，也可为RGB颜色代码（#rrggbb）rr、gg、bb分别表示红、绿、蓝三原色代码，取值00FF如：红字红字Size属性：设置字号，取值1（大）7（小），默认为3，,42,七、项目清单与表格标记,一个项目清单实例、与标记（unorderedlist）无序清单标记（orderedlist）有序清单标记例：无序列表有序列表无序项目1有序项目1无序项目2有序项目2,43,表格完整代码示例,第一行第一列第一行第二列第二行第一列第二行第二列,44,、标记标记：表格开始与结束标记border属性：表格边线宽度，以像素为单位，为0时不显示表格线Cellpadding属性：设置单元格内容与边线之间空间，默认值为1Cellspacing属性：表格内单元格之间的距离。默认值为2Width属性：表格宽度，可以为像素值和%两种形式Height属性：表格高度，可以为像素值和%两种形式Align属性：水平对齐方式，取值left、right、centerValign属性：垂直对齐方式，取值top、center、bottomBgcolor属性：表格背景色Bordercolor属性：表格边界线颜色Bordercolorlight与bordercolordark属性：三维表格亮色与暗色颜色Background属性：表格背景图片表格行开始与结束标记单元格开始与结束标记说明：表格标记属性较多。设置较复杂，一般先通过软件生成，于细节处利用代码修改,45,八、表单标记,功能：用于提供与用户交互，收集用户信息，通常需配合CGI、ASP等服务器端Web程序来实现。一个表单实例表单标记Action属性：指定表单处理程序，其值为一个服务器端Web程序URL。Method属性：指定数据传递的方法，取值为get或postName属性：指定表单名称，区分不同表单，及便于其他程序调用。,46,表单元素标记详释,输入标记name属性：表单元素名称type属性：反映不同类型输入项目，可取TEXT：文本框PASSWORD：口令框。CHECKBOX：复选框RADIO：单选按钮SUBMIT：提交按钮RESET：复位按钮IMAGE：图像按钮HIDDEN：隐藏表单组件Value属性：表单元素初始值,47,下拉列表标记选项标记，置于区段内Selected属性：默认选项，无属性值Value属性：设置选项被选中后提交的内容，默认为之间显示的内容多行文本框标记Rows属性：设定textarea输入框行数Cols属性：textarea输入框列数,48,九、超链接标记,功能：提供浏览者在不同Web页面进行跳转标记（anchor）Href属性：设定链接目标文件，一般为一URL地址或本地Web路径文件例：链接到本地Web网页：回首页链接到本地Web路径下一普通文件：软件下载链接到本地Web路径下一图片：打开我的照片链接到internet上某一网站：搜狐网链接到电子邮件地址：给我写信,49,链接到Web页面中特定结点（称为锚）