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

1、第5章 网站(wn zhn)静态页面设计本章要点：主页设计栏目与版面设计页面可视化设计静态网页制作(zhzu)技术1共四十页一、主页(zh y)设计1、确定主页的功能模块网站名称(mngchng)、广告条、主菜单新闻、搜索、友情链接联系及版权信息 等2共四十页3共四十页2、主页版面设计勾画草图软件实现3、处理技术上的细节风格、链接、图形(txng)、动画、文字、速度4共四十页二、栏目(ln m)与版面设计1、栏目设计栏目设计应紧扣网站主题设计一个最近更新或网站指南栏目设计一个可以双向交流的栏目设计一个下载或常见问题解答栏目大型网站可根据需要设置子栏目联系及版权(bnqun)信息等辅助信息不要放

2、在主栏目5共四十页2、版面设计版面(bnmin)布局原则主次分明，中心突出大小搭配，相互呼应图文并茂，相得益彰版面布局常用方法正常平衡异常平衡对比凝视空白图片解说6共四十页正常(zhngchng)平衡异常(ychng)平衡对比凝视空白图片说明7共四十页版面布局步骤轮廓设计布局设计细节设计版面布局形式“T”形结构布局“口”形布局“三”形布局对称(duchn)对比布局“国”或“同”字形拐角形框架布局Flash动画型，封面型8共四十页三、页面(y min)可视化设计1、色彩设计色彩的基本知识三原色原理色彩搭配色彩的心理感觉色彩的对比色彩的区域(qy)大小和形状色彩的位置9共四十页网页色彩设计网页配色

3、的基本方法底色和图形色整体色彩颜色(yns)的平衡配色时要有重点色渐变色的调和统调配色分割配色10共四十页网页色彩设计网页内容的色彩网页标题色导航菜单色侧栏色页脚色网页色彩搭配的技巧暖色调冷色调对比(dub)色调2、字体设计11共四十页3、导航(dohng)设计突出超链接链接层次不宜过深“上一页、下一页，转到N页”的使用“返回”及“回首页”的使用12共四十页4、图像设计图像的格式与大小大小：单张30KB，单页60KB，较大图像应进行“切割”图象(t xin)的格式：GIF、JPEG图像设计技巧为图片加入说明缩略图的使用图片的更新透明色的使用慎用网页背景图片5、动画设计GIF动画与Flash动画

4、13共四十页四、静态网页制作(zhzu)技术1、HTML语言：Hyper Text Markup Language，中文名“超文标记语言”特点：通过“标记”描述页面元素（文本、图片、动画、音乐、影片等媒体）的显示方式源文件为纯文本文件，无需编译，通过浏览器解释(jish)运行一个HTML文件（*.htm，*.html）对应一个Web页具备各个Web页面可以通过“链接标记”实现“超级链接”14共四十页2、客户端Script脚本语言Script：脚本，一段嵌在HTML源代码中的小程序JavaScript：Netscape公司开发VBScript：Microsoft公司开发的，是VB的一个子集3、C

5、SS技术Cascading Style Sheets，层叠样式表功能：实现(shxin)网页数据的编排、格式化显示及特殊效果，以弥补HTML在格式化网页数据方面的不足15共四十页练习(linx)请利用(lyng)PhotoShop或Fireworks或其他图像设计软件为网上书店进行主页设计。16共四十页附：网站设计基础(jch)语言HTMLHTML简介HTML的语法格式文件标签版式(bnsh)标签框架标签字体标签表格与清单标签表单标签超链接标签多媒体标签本节要点：17共四十页一、HTML简介(jin ji)（1）HTML语法标记（标签）：以”括起来的内容，大多成对出现（称为首标记与尾标记），也

6、有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：、指向其他资源的标记：、例：这是粗体字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步(y b)提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开 如：属性值属性名18共四十页一、HTML简介(jin ji)（2）HTML页面文档的结构一个简单的HTML页面 HTML文件(wnjin)结构 在这里显示文件的主体内容。 19共四十页一、HTML简介(jin ji)（3）HTML标记的结构形态页面元素内容如：这是一个文本段落(dunlu)页面元素内容如：红色字如：以内容

7、下换行显示第二行内容20共四十页二、创建(chungjin)HTML文档（1）准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用Dreamweaver MX创建HTML文档新建文档查看代码保存文档：文件扩展名 *.htm 或 *.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名查看保存的HTML文档效果打开(d ki)IE浏览器，执行“文件打开(d ki)”菜单命令21共四十页二、创建(chungjin)HTML文档（2）在浏览

8、页面时修改HTML源文件执行“查看源文件”菜单(ci dn)，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。三、文件标记（1）标记：不是HTML文档必须，但最好保持文档的完整性标记：此标记中内容是提供给浏览器的，即文件头信息。22共四十页三、文件(wnjin)标记（2）标记可包括属性，由此决定页面内容的总体显示风格、背景(bijng)等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。Background属性：用于

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

10、式标记区段标记25共四十页：注释标记注释格式：段落标记标记标记Size属性：设置水平线高度，以像素为单位width属性：设置水平线宽度，以像素为单位，也可以(ky)视窗的百分比为宽度。Align属性：设置水平线水平对齐方式，可取值：left、right、centerColor属性：指定水平线颜色Noshade属性：无需设置属性值，设置水平线无阴影。Title属性：用于设置水平线在鼠标指向时的提示说明标记区段标记Align属性：取值left、right 、center26共四十页五、框架(kun ji)标记功能：实现页面的框架分割，一般多用于在页面需保留一部分信息的情况下。 框架集标记：定义框架

11、内部的基本结构Rows属性：设置横向分割窗口的比例（框架页的高度），可以是像素值，也可为%，* 代表剩余高度如Cols属性：用于设置纵向分割窗口的比例Border属性：设置框边界(binji)宽度，以像素为单位Bordercolor属性：设置框边界颜色。27共四十页框架内容标记Src属性：指定当前框架中显示的页面文件Name属性：设置(shzh)框架名称标记用于设置不支持frame时页面显示的信息如在含有框架的HTML页面中加入 对不起，你的浏览器不支持frame!28共四十页六、字体(zt)标记功能：用于设定字体的大小、粗线、颜色等：粗体：加强(jiqing)语气（一般通过加粗来实现，视不同

12、浏览器面有所不同）（小）（大）标题标记下划线标记删除线标记下标标记与上标标记29共四十页字体标记Face属性：用于指定字体，多个字体用逗号分隔，默认字体中文为“宋体”，英文“Times New Roman” Color属性：设置文字颜色，属性值可以为颜色英文代码，也可为RGB颜色代码（#rrggbb）rr、gg、bb分别表示(biosh)红、绿、蓝三原色代码，取值00FF如：红字 红字Size属性：设置字号，取值1（大）7（小），默认为3，30共四十页七、项目清单(qngdn)与表格标记一个(y )项目清单实例、 与 标记（unordered list）无序清单标记（ordered list）

13、有序清单标记例：无序列表有序列表无序项目1 有序项目1无序项目2有序项目2 31共四十页表格完整代码(di m)示例 第一行第一列第一行第二列 第二行第一列第二行第二列 第一行第一列第一行第二列第二行第一列第二行第二列构成表格的一行构成表格的一列32共四十页、标记标记：表格开始与结束标记border属性：表格边线宽度，以像素为单位，为0时不显示表格线Cellpadding属性：设置单元格内容与边线之间空间，默认值为1Cellspacing属性：表格内单元格之间的距离。默认值为2Width 属性：表格宽度，可以为像素值和%两种形式Height属性：表格高度，可以为像素值和%两种形式Align属性

14、：水平对齐方式，取值left、right、centerValign属性：垂直对齐方式，取值top、center、bottomBgcolor属性：表格背景色Bordercolor属性：表格边界线颜色Bordercolorlight与bordercolordark属性：三维表格亮色(lin s)与暗色颜色Background属性：表格背景图片表格行开始与结束标记单元格开始与结束标记说明：表格标记属性较多。设置较复杂，一般先通过软件生成，于细节处利用代码修改33共四十页八、表单标记(bioj)功能：用于提供与用户交互，收集用户信息，通常(tngchng)需配合CGI、ASP等服务器端Web程序来实现

15、。一个表单实例表单标记Action属性：指定表单处理程序，其值为一个服务器端Web程序URL。Method属性：指定数据传递的方法，取值为get或postName属性：指定表单名称，区分不同表单，及便于其他程序调用。34共四十页表单元素(yun s)标记详释输入(shr)标记name属性：表单元素名称type属性：反映不同类型输入项目，可取TEXT：文本框PASSWORD：口令框。CHECKBOX：复选框RADIO：单选按钮SUBMIT：提交按钮RESET：复位按钮IMAGE：图像按钮HIDDEN：隐藏表单组件Value属性：表单元素初始值35共四十页下拉列表(li bio)标记选项标记，置于

16、区段内Selected属性：默认选项，无属性值Value属性：设置选项被选中后提交的内容，默认为之间显示的内容多行文本框标记Rows属性：设定textarea输入框行数Cols属性：textarea输入框列数36共四十页九、超链接标记(bioj)功能：提供浏览者在不同Web页面进行跳转标记（anchor）Href属性(shxng)：设定链接目标文件，一般为一URL地址或本地Web路径文件例：链接到本地Web网页：回首页 链接到本地Web路径下一普通文件： 软件下载链接到本地Web路径下一图片：打开我的照片链接到internet上某一网站：搜狐网链接到电子邮件地址：给我写信37共四十页链接到We

17、b页面中特定结点（称为锚）适用(shyng)：当页面超长时，可利用此方法实现页面内部的跳转先在页面内部设置特定结点名称（锚）页面顶部再设置链接到特定结点（锚）：回顶部设置链接到其他页面内部特定结点（锚）回到首页顶部38共四十页十、多媒体标记(bioj)图片标记Src属性：设置图片路径Alt属性：设置图片说明Align属性：图片旁文字对齐方式：left、right、top、middle、bottomBorder属性：图片边框线Height属性：图片高度Width属性：图片宽度(kund)图片文件类型：*.gif 或 *.jpg图片路径：URL路径，本地绝对路径，本地相对路径例：39共四十页内容摘要第5章 网