东南大学电子商务网站设计与管理PPT

1 第5章网站静态页面设计 本章要点 主页设计栏目与版面设计页面可视化设计静态网页制作技术 2 一 主页设计 1 确定主页的功能模块网站名称 广告条 主菜单新闻 搜索 友情链接联系及版权信息等 3 4 2 主页版面设计勾画草图 软件实现3 处理技术上的细节风格 链接 图形 动画 文字 速度 5 二 栏目与版面设计 1 栏目设计栏目设计应紧扣网站主题设计一个最近更新或网站指南栏目设计一个可以双向交流的栏目设计一个下载或常见问题解答栏目大型网站可根据需要设置子栏目联系及版权信息等辅助信息不要放在主栏目 6 2 版面设计版面布局原则主次分明 中心突出大小搭配 相互呼应图文并茂 相得益彰版面布局常用方法正常平衡异常平衡对比凝视空白图片解说 7 正常平衡 异常平衡 对比 凝视 空白 图片说明 8 版面布局步骤轮廓设计布局设计细节设计版面布局形式 T 形结构布局 口 形布局 三 形布局对称对比布局 国 或 同 字形拐角形框架布局Flash动画型 封面型 9 三 页面可视化设计 1 色彩设计色彩的基本知识三原色原理色彩搭配色彩的心理感觉色彩的对比色彩的区域大小和形状色彩的位置 10 网页色彩设计网页配色的基本方法底色和图形色整体色彩颜色的平衡配色时要有重点色渐变色的调和统调配色分割配色 11 网页色彩设计网页内容的色彩网页标题色导航菜单色侧栏色页脚色网页色彩搭配的技巧暖色调冷色调对比色调2 字体设计 12 3 导航设计突出超链接链接层次不宜过深 上一页 下一页 转到N页 的使用 返回 及 回首页 的使用 13 4 图像设计图像的格式与大小大小 单张30KB 单页60KB 较大图像应进行 切割 图象的格式 GIF JPEG图像设计技巧为图片加入说明缩略图的使用图片的更新透明色的使用慎用网页背景图片5 动画设计GIF动画与Flash动画 14 四 静态网页制作技术 1 HTML语言 HyperTextMarkupLanguage 中文名 超文标记语言 特点 通过 标记 描述页面元素 文本 图片 动画 音乐 影片等媒体 的显示方式源文件为纯文本文件 无需编译 通过浏览器解释运行一个HTML文件 htm html 对应一个Web页具备各个Web页面可以通过 链接标记 实现 超级链接 15 2 客户端Script脚本语言Script 脚本 一段嵌在HTML源代码中的小程序JavaScript Netscape公司开发VBScript Microsoft公司开发的 是VB的一个子集3 CSS技术CascadingStyleSheets 层叠样式表功能 实现网页数据的编排 格式化显示及特殊效果 以弥补HTML在格式化网页数据方面的不足 16 练习 请利用PhotoShop或Fireworks或其他图像设计软件为网上书店进行主页设计 17 附 网站设计基础语言HTML HTML简介HTML的语法格式文件标签版式标签框架标签 字体标签表格与清单标签表单标签超链接标签多媒体标签 本节要点 18 一 HTML简介 1 HTML语法标记 标签 以 括起来的内容 大多成对出现 称为首标记与尾标记 也有单一的标记 书写约定 不区分大小写 忽略标记间多余的空格与回车分类 描述页面元素样式的标记 指向其他资源的标记 例 这是粗体字标记的作用 描述页面元素的显示方式及其他资源访问方式属性及其值 进行一步提供详细描述信息 所有属性均放在首标记中 多个属性间以空格分开如 19 一 HTML简介 2 HTML页面文档的结构一个简单的HTML页面HTML文件结构在这里显示文件的主体内容 20 一 HTML简介 3 HTML标记的结构形态页面元素内容如 这是一个文本段落页面元素内容如 红色字如 以内容下换行显示第二行内容 21 二 创建HTML文档 1 准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材 复制保存在新建文件夹中画出网页草图 安排页面元素用工具软件创建HTML文档利用DreamweaverMX创建HTML文档新建文档查看代码保存文档 文件扩展名 htm或 html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意 保存文件时 保存类型应选择 所有文件 并输入文件全名查看保存的HTML文档效果打开IE浏览器 执行 文件 打开 菜单命令 22 二 创建HTML文档 2 在浏览页面时修改HTML源文件执行 查看 源文件 菜单 调用记事本打开源代码 欲重新查看修改后的效果只需单击IE工具栏 刷新 按钮 三 文件标记 1 标记 不是HTML文档必须 但最好保持文档的完整性标记 此标记中内容是提供给浏览器的 即文件头信息 23 三 文件标记 2 标记可包括属性 由此决定页面内容的总体显示风格 背景等 Text属性 用于设定文字颜色Bgcolor属性 设定页面背景颜色link alink vlink属性 分别用于设定页面中超级链接 访问前 正在按下时 访问后的颜色 不设定时取默认值 蓝 红 紫 Background属性 用于设定背景图片Scroll属性 设定浏览器滚动条是否显示 取值 yes 或 no 一般用于弹出式窗口 24 三 文件标记 2 标记 置于区段 用于设定浏览器的标题标记 用于描述HTML文档相关信息 如编辑器类型 字符集等 通常用来为搜索引擎定义页面关键字常见属性 Name和content属性 指定 网页描述 类型及相应值http equiv和content属性 指定HTTP响应头标及相应值举例 25 四 排版标记 功能 实现页面的版式编排 应用广泛 兼容性强 主要有以下标记 注释标记 段落标记 换行标记 水平线标记 预设格式标记区段标记 26 注释标记注释格式 段落标记标记标记Size属性 设置水平线高度 以像素为单位width属性 设置水平线宽度 以像素为单位 也可以视窗的百分比为宽度 Align属性 设置水平线水平对齐方式 可取值 left right centerColor属性 指定水平线颜色Noshade属性 无需设置属性值 设置水平线无阴影 Title属性 用于设置水平线在鼠标指向时的提示说明标记区段标记Align属性 取值left right center 27 五 框架标记 功能 实现页面的框架分割 一般多用于在页面需保留一部分信息的情况下 框架集标记 定义框架内部的基本结构Rows属性 设置横向分割窗口的比例 框架页的高度 可以是像素值 也可为 代表剩余高度如Cols属性 用于设置纵向分割窗口的比例Border属性 设置框边界宽度 以像素为单位Bordercolor属性 设置框边界颜色 28 框架内容标记Src属性 指定当前框架中显示的页面文件Name属性 设置框架名称标记用于设置不支持frame时页面显示的信息如在含有框架的HTML页面中加入对不起 你的浏览器不支持frame 29 六 字体标记 功能 用于设定字体的大小 粗线 颜色等 粗体 加强语气 一般通过加粗来实现 视不同浏览器面有所不同 小 大 标题标记下划线标记删除线标记下标标记与上标标记 30 字体标记Face属性 用于指定字体 多个字体用逗号分隔 默认字体中文为 宋体 英文 TimesNewRoman Color属性 设置文字颜色 属性值可以为颜色英文代码 也可为RGB颜色代码 rrggbb rr gg bb分别表示红 绿 蓝三原色代码 取值00 FF如 红字 红字Size属性 设置字号 取值1 大 7 小 默认为3 31 七 项目清单与表格标记 一个项目清单实例 与标记 unorderedlist 无序清单标记 orderedlist 有序清单标记例 无序列表有序列表无序项目1有序项目1无序项目2有序项目2 32 表格完整代码示例 第一行第一列第一行第二列第二行第一列第二行第二列 33 标记标记 表格开始与结束标记border属性 表格边线宽度 以像素为单位 为0时不显示表格线Cellpadding属性 设置单元格内容与边线之间空间 默认值为1Cellspacing属性 表格内单元格之间的距离 默认值为2Width属性 表格宽度 可以为像素值和 两种形式Height属性 表格高度 可以为像素值和 两种形式Align属性 水平对齐方式 取值left right centerValign属性 垂直对齐方式 取值top center bottomBgcolor属性 表格背景色Bordercolor属性 表格边界线颜色Bordercolorlight与bordercolordark属性 三维表格亮色与暗色颜色Background属性 表格背景图片表格行开始与结束标记单元格开始与结束标记说明 表格标记属性较多 设置较复杂 一般先通过软件生成 于细节处利用代码修改 34 八 表单标记 功能 用于提供与用户交互 收集用户信息 通常需配合CGI ASP等服务器端Web程序来实现 一个表单实例表单标记Action属性 指定表单处理程序 其值为一个服务器端Web程序URL Method属性 指定数据传递的方法 取值为get或postName属性 指定表单名称 区分不同表单 及便于其他程序调用 35 表单元素标记详释 输入标记name属性 表单元素名称type属性 反映不同类型输入项目 可取TEXT 文本框PASSWORD 口令框 CHECKBOX 复选框RADIO 单选按钮SUBMIT 提交按钮RESET 复位按钮IMAGE 图像按钮HIDDEN 隐藏表单组件Value属性 表单元素初始值 36 下拉列表标记选项标记 置于区段内Selected属性 默认选项 无属性值Value属性 设置选项被选中后提交的内容 默认为之间显示的内容多行文本框标记Rows属性 设定textarea输入框行数Cols属性 textarea输入框列数 37 九 超链接标记 功能 提供浏览者在不同Web页面进行跳转标记 anchor Href属性 设定链接目标文件 一般为一URL地址或本地Web路径文件例 链接到本地Web网页 回首页链接到本地Web路径下一普通文件 软件下载链接到本地Web路径下一图片 打开我的照片链接到internet上某一网站 搜狐网链接到电子邮件地址 给我写信 38 链接到Web页面中特定结点 称为锚 适用 当页面超长时 可利用此方法实现页面内部的跳转先