电子商务网站设计与管理5

第五章网站静态页面设计1第5章网站静态页面设计本章要点：主页设计栏目与版面设计页面可视化设计静态网页制作技术第五章网站静态页面设计2一、主页设计1、确定主页的功能模块网站名称、广告条、主菜单新闻、搜索、友情链接联系及版权信息等第五章网站静态页面设计3第五章网站静态页面设计42、主页版面设计勾画草图—软件实现3、处理技术上的细节风格、链接、图形、动画、文字、速度第五章网站静态页面设计5二、栏目与版面设计1、栏目设计栏目设计应紧扣网站主题设计一个最近更新或网站指南栏目设计一个可以双向交流的栏目设计一个下载或常见问题解答栏目大型网站可根据需要设置子栏目联系及版权信息等辅助信息不要放在主栏目第五章网站静态页面设计62、版面设计版面布局原则主次分明，中心突出大小搭配，相互呼应图文并茂，相得益彰版面布局常用方法正常平衡异常平衡对比凝视空白图片解说第五章网站静态页面设计7正常平衡异常平衡对比凝视空白图片说明第五章网站静态页面设计8版面布局步骤轮廓设计布局设计细节设计版面布局形式“T”形结构布局“口”形布局“三”形布局对称对比布局“国”或“同”字形拐角形框架布局Flash动画型，封面型第五章网站静态页面设计9三、页面可视化设计1、色彩设计色彩的基本知识三原色原理色彩搭配色彩的心理感觉色彩的对比色彩的区域大小和形状色彩的位置第五章网站静态页面设计10网页色彩设计网页配色的基本方法底色和图形色整体色彩颜色的平衡配色时要有重点色渐变色的调和统调配色分割配色第五章网站静态页面设计11网页色彩设计网页内容的色彩网页标题色导航菜单色侧栏色页脚色网页色彩搭配的技巧暖色调冷色调对比色调2、字体设计第五章网站静态页面设计123、导航设计突出超链接链接层次不宜过深“上一页、下一页，转到N页”的使用“返回”及“回首页”的使用第五章网站静态页面设计134、图像设计图像的格式与大小大小：单张30KB，单页60KB，较大图像应进行“切割”图象的格式：GIF、JPEG图像设计技巧为图片加入说明缩略图的使用图片的更新透明色的使用慎用网页背景图片5、动画设计GIF动画与Flash动画第五章网站静态页面设计14四、静态网页制作技术1、HTML语言：HyperTextMarkupLanguage，中文名“超文标记语言”特点：通过“标记”描述页面元素（文本、图片、动画、音乐、影片等媒体）的显示方式源文件为纯文本文件，无需编译，通过浏览器解释运行一个HTML文件（*.htm，*.html）对应一个Web页具备各个Web页面可以通过“链接标记”实现“超级链接”第五章网站静态页面设计152、客户端Script脚本语言Script：脚本，一段嵌在HTML源代码中的小程序JavaScript：Netscape公司开发VBScript：Microsoft公司开发的，是VB的一个子集3、CSS技术CascadingStyleSheets，层叠样式表功能：实现网页数据的编排、格式化显示及特殊效果，以弥补HTML在格式化网页数据方面的不足第五章网站静态页面设计16练习请利用PhotoShop或Fireworks或其他图像设计软件为网上书店进行主页设计。第五章网站静态页面设计17附：网站设计基础语言HTMLHTML简介HTML的语法格式文件标签版式标签框架标签字体标签表格与清单标签表单标签超链接标签多媒体标签本节要点：第五章网站静态页面设计18一、HTML简介（1）HTML语法标记（标签）：以””、””括起来的内容，大多成对出现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：body、p、h1指向其他资源的标记：img、a例：这是b粗体/b字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开如：imgsrc=logo.gifwidth=520height=81属性值属性名第五章网站静态页面设计19一、HTML简介（2）HTML页面文档的结构一个简单的HTML页面htmlheadtitleHTML文件结构/title/headbody在这里显示文件的主体内容。/body/html第五章网站静态页面设计20一、HTML简介（3）HTML标记的结构形态标记页面元素内容/标记如：p这是一个文本段落/p标记属性名=“属性值”页面元素内容/标记如：fontcolor=“red”红色字/font标记如：以内容下换行显示br第二行内容第五章网站静态页面设计21二、创建HTML文档（1）准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用DreamweaverMX创建HTML文档新建文档查看代码保存文档：文件扩展名*.htm或*.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名查看保存的HTML文档效果打开IE浏览器，执行“文件—打开”菜单命令第五章网站静态页面设计22二、创建HTML文档（2）在浏览页面时修改HTML源文件执行“查看—源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。三、文件标记（1）html/html标记：不是HTML文档必须，但最好保持文档的完整性head/head标记：此标记中内容是提供给浏览器的，即文件头信息。第五章网站静态页面设计23三、文件标记（2）body标记可包括属性，由此决定页面内容的总体显示风格、背景等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。Background属性：用于设定背景图片Scroll属性：设定浏览器滚动条是否显示，取值”yes”或“no”，一般用于弹出式窗口第五章网站静态页面设计24三、文件标记（2）title/title标记：置于head区段，用于设定浏览器的标题meta标记：用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字常见属性：Name和content属性：指定“网页描述”类型及相应值http-equiv和content属性：指定HTTP响应头标及相应值举例：第五章网站静态页面设计25四、排版标记功能：实现页面的版式编排，应用广泛，兼容性强。主要有以下标记：!----：注释标记p/p：段落标记br：换行标记hr：水平线标记pre/pre：预设格式标记div/div区段标记第五章网站静态页面设计26!----：注释标记注释格式：!–注释内容--p/p段落标记br标记hr标记Size属性：设置水平线高度，以像素为单位width属性：设置水平线宽度，以像素为单位，也可以视窗的百分比为宽度。Align属性：设置水平线水平对齐方式，可取值：left、right、centerColor属性：指定水平线颜色Noshade属性：无需设置属性值，设置水平线无阴影。Title属性：用于设置水平线在鼠标指向时的提示说明pre/pre标记div/div区段标记Align属性：取值left、right、center第五章网站静态页面设计27五、框架标记功能：实现页面的框架分割，一般多用于在页面需保留一部分信息的情况下。framesetframeset框架集标记：定义框架内部的基本结构Rows属性：设置横向分割窗口的比例（框架页的高度），可以是像素值，也可为%，*代表剩余高度如framesetrows=“30%,*”/framesetCols属性：用于设置纵向分割窗口的比例Border属性：设置框边界宽度，以像素为单位Bordercolor属性：设置框边界颜色。第五章网站静态页面设计28frame框架内容标记Src属性：指定当前框架中显示的页面文件Name属性：设置框架名称noframes/noframes标记用于设置不支持frame时页面显示的信息如在含有框架的HTML页面中加入noframes对不起，你的浏览器不支持frame!/noframes第五章网站静态页面设计29六、字体标记功能：用于设定字体的大小、粗线、颜色等b/b：粗体strong/strong：加强语气（一般通过加粗来实现，视不同浏览器面有所不同）h1/h1（小）……h6/h6（大）标题标记u/u下划线标记strike/strike删除线标记sub/sub下标标记与sup/sup上标标记第五章网站静态页面设计30font/font字体标记Face属性：用于指定字体，多个字体用逗号分隔，默认字体中文为“宋体”，英文“TimesNewRoman”Color属性：设置文字颜色，属性值可以为颜色英文代码，也可为RGB颜色代码（#rrggbb）rr、gg、bb分别表示红、绿、蓝三原色代码，取值00—FF如：fontcolor=“red”红字/fontfontcolor=“#FF0000”红字/fontSize属性：设置字号，取值1（大）—7（小），默认为3，第五章网站静态页面设计31七、项目清单与表格标记一个项目清单实例ul/ul、ol/ol与li/li标记ul/ul（unorderedlist）无序清单标记ol/ol（orderedlist）有序清单标记例：无序列表有序列表ulolli无序项目1/lili有序项目1/lili无序项目2/lili有序项目2/li/ul/ol第五章网站静态页面设计32表格完整代码示例tabletrtd第一行第一列/tdtd第一行第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr/table第一行第一列第一行第二列第二行第一列第二行第二列构成表格的一行构成表格的一列第五章网站静态页面设计33table/table、tr/tr、td/td标记table/table标记：表格开始与结束标记border属性：表格边线宽度，以像素为单位，为0时不显示表格线Cellpadding属性：设置单元格内容与边线之间空间，默认值为1Cellspacing属性：表格内单元格之间的距离。默认值为2Width属性：表格宽度，可以为像素值和%两种形式Height属性：表格高度，可以为像素值和%两种形式Align属性：水平对齐方式，取值left、right、centerValign属性：垂直对齐方式，取值top、center、bottomBgcolor属性：表格背景色Bordercolor属性：表格边界线颜色Bordercolorlight与bordercolordark属性：三维表格亮色与暗色颜色Background属性：表格背景图片tr/tr表格行开始与结束标记td/td单元格开始与结束标记说明：表格标记属性较多。设置较复杂，一般先通过软件生成，于细节处利用代码