电子商务网页制作项目

DW 项目五 电子商务网页制作 网页版式设计与布局 学习网页版式设计的概念 了解有关网页造型和分辨率的知识 了解网页布局的原则和方法 学习使用表格进行网页布局 项目目标 看一看 网页设计欣赏 网页布局是指在浏览器空间里 依照建站目的和审美的规律 结合各种平面设计的具体特点 将信息内容和页面视觉元素加以组合编排 第一步 打开IE浏览器 在地址栏中输入 看一看 网页设计欣赏 这是一种典型的横向平铺结构 浏览者拖动鼠标向下滚动页面可以流畅地浏览页面 由于网站主要经营白色家电 故采用白色系作为网站主色调 利用不同灰度的浅灰色块将页面巧妙分栏 使信息组织更加清晰有条理 整个页面设计留白较多 空旷开阔的设计给人以高端大气 品质优良的感觉 浏览者在浏览网页时 一般首先看网页的上部中间位置 然后是上部左面 上部右面 最后看整个网页的下面 因此网页左上部和中上部是最佳视域 重要信息应安排在这个位置 例如购物车 账户信息 搜索引擎 导航条等放在整个网页的上部 看一看 网页设计欣赏 第二步 在地址栏中输入http www coca 看一看 网页设计欣赏 首先会看到一个Flash动画的演示 然后正式进入主页 主页布局设计类似于一个家庭影院 让人仿佛置身于生活中常见的体育赛事电视转播情景中 画面比例接近黄金分割 十分协调美观 任意点击页面下方的链接 进入网站浏览 可以发现这里充满了灵动的Flash动画 引人入胜 满足了青少年为主的客户群的审美心理 看一看 网页设计欣赏 第三步 在地址栏中输入http www li 看一看 网页设计欣赏 这是一个典型的采用FLASH动画制作的封面型结构网站 页面表达的信息十分丰富 视觉效果一流 请点击导航栏上的链接图片任意浏览 可以看到站内各个页面保持了高度一致的风格 如图5 2所示 采用醒目的红色图标作为导航区 强烈的视觉对比形成了鲜明的视觉效果 简洁的页面布局 生动的FLASH动画 迎合了年轻消费者的审美心理 看一看 网页设计欣赏 第四步 在地址栏中输入 看一看 网页设计欣赏 这是一个介绍江南古镇的旅游网站 主页设计采用了仿手机界面的形式 新颖别致 点击图标继续浏览 将会看到整个网站页面设计的无不透露着深厚的人文底蕴 独具江南水乡的魅力 页面布局疏密有度 即平常所说的 密不透风 疏可跑马 页面并没有采用一种样式 而是适当留白 运用空格 改变行间距 字符间距等 制造一些变化的效果 给人留下深刻印象 看一看 网页设计欣赏 网页布局最基本的目的就是对信息内容进行分类 重点突出地放置信息 在此基础上形成网页的外观风格 在一些设计类网站中 经常可以看到优秀网页设计作品展示 这些作品着重体现的是设计的艺术性 但对于电子商务网站来说 艺术性绝不是第一位的 易用性 经济性 可维护性才是最终的目标 活动小结 版式设计的含义 网页版式设计是将文字 图形图像 色彩 动画 视频等网页界面的传达要素 根据特定的内容和主题 在网页所限定的范围中 运用造型元素和形式原理进行视觉的关联与配置 从而将设计意图以视觉形式表现出来 版式设计是技术和艺术的高度统一 在设计时要运用统一 对比 对称 均衡 节奏 韵律等形式原理 构造出和谐 流畅 自然的网页界面 分辨率与网页尺寸 显示器的分辨率 是指在计算机屏幕的水平和垂直方向上 各含有多少像素 如分辨率是800 600的屏幕 在水平方向上有800个像素点 而垂直方向上有600个像素点 显示器的分辨率范围 取决于显示器和显卡的性能 常用的屏幕分辨率有以下几种 640 480 800 600 1024 768 1280 1024 1152 864 浏览者使用什么样的分辨率浏览 网页设计者是不可能知道的 所以在设计的时候必须考虑分辨率的问题 由于浏览器本身也会占去不少空间 所以显示在浏览器窗口中的网页尺寸就更小了 分辨率与网页尺寸 800 600分辨率下的网页显示 1024 768分辨率下的网页显示 分辨率越高 网页尺寸越大 另外 浏览器的工具栏也是影响网页尺寸的原因 工具栏全部显示和工具栏全部关闭的情况下 网页的尺寸是不一样的 分辨率与网页尺寸 为了给网页增加更多的内容 必须采用延长网页的办法 浏览者向下拖动网页 即可浏览下面的内容 然而过长的网页会导致过多的滚动 这会让浏览者眼花缭乱 因此 如果网页长度超过三屏 应该在网页中加入书签链接 使浏览者能够自如地在长网页中来回跳转 同时出现纵向滚动条和横向滚动条的网页显示 通常浏览者习惯使用纵向滚动条上下拖动网页 但不能忍受使用向滚动条左右拖动网页 左图所示的同时出现纵向和横向滚动条的情况 是应该尽量避免的 小贴士 网页布局的一般步骤 1 构思根据网站的内容和整体风格 设计版面布局 可以参考其他优秀的网站 调用自己的各种知识储备 特别是艺术方面的积累 并在大脑中不断地酝酿 碰撞 往往不经意间就有闪光的思想出现 这时就要抓紧时间把它变成文字的东西 用笔在纸上粗略地勾画出布局的轮廓 不要讲究细节 只要有一个轮廓就行 当然也可能有多种想法 尽量都把它们画出来 然后再进行比较 采用一种比较满意的方案 网页布局的一般步骤 2 初步填充内容在填充内容时 要考虑到浏览者的浏览习惯 通常把最重要的内容放在窗口的中心位置 次重要的内容放在网页顶部 最不重要的内容放在网页左边 网站的标志 广告条 菜单 导航栏等 是需要重点突出的内容 应该放在最突出 最醒目的位置 然后再考虑其它元素的放置 此布局将屏幕分为5个区 从1 5重要性依次下降 1区放置最重要的和最新的信息 如广告 2区放置公司标志和导航栏 3区放置更新的报导 4区放置用于阅读的常规内容 5区用于放置用户注册和其他链接 网页布局的一般步骤 3 细化在将各主要元素确定好之后 就可以考虑文字 图像 表格等网页元素的排版布局了 可以先把草案做成一个简略的网页 当然对每一种元素所占的比例也要有一个详细的数字 以便以后修改 商务网站的布局原则 商务网站在布局上和咨询类网站有着很多相似的地方 多采用两栏或3栏的布局 两栏或三栏的布局给人一种开放大气的感觉 适用于信息量大的网站 导航多以搜索为主 横排在页面上部 左侧为栏目的内容区 右侧以产品分类为主 可以运用对比和调和 对称与平衡 节奏与韵律以及留白等手段 建立整体的均衡状态 产生和谐的美感 商务网站在配色上多以动感且有活力的颜色为主 如蓝色 洋红 橙色 和黄色等 并且整体页面的明度较高 由于商务网站的产品图片比较多 图片本身的色彩就十分丰富 所以网站的配色应当尽量的简单 商务网站的布局原则 在构思和设计网站布局的过程中 需要要掌握以下几项原则 1 功能第一 形式第二这里的功能也可以指内容 在制作网站前一定要了解浏览者来到网站的目的 比如上百度是为了搜索信息 上淘宝是为了购物 试想如果百度失去了搜索功能 淘宝失去了购物功能 那么这些网站对于浏览者还有什么意义呢 可见功能是第一位的 而布局属于形式 形式是沟通浏览者与网站之间的桥梁 通过形式的优化 让浏览者更易于了解并使用网站 2 服务用户无论是门户网站 企业网站 还是盈利性 非盈利性的网站 直接目的都是服务用户 如果没有浏览者的访问和支持 那么网站就失去了意义 可以说浏览者是网站实现一切目标的核心 有了用户才有一切 通过在布局上合理优化 可以让用户很清楚地快速浏览页面 找到需要的信息 商务网站的布局原则 在构思和设计网站布局的过程中 需要要掌握以下几项原则 3 层次清晰 主次分明布局可以分为两种形式 一种是整体的布局 只绘制出页面的大结构 一种是局部的布局 包括文字图像之间的排列即排版 整体布局要让浏览者知道哪些板块重要 引导浏览者关注 而局部的排版是要在具体的板块中实现内容表述的清晰 美观 4 突出特点浏览者决定网站的成败 拥有的浏览者越多 网站就越成功 如何在数不清的网站中脱颖而出 给浏览者留下深刻印象 让浏览者过目难忘呢 挖掘网站特点是一个好的方法 个人网站要突出个性风格 企业网站要体现企业特点和企业理念 商务网站商品内容要详实 浏览者的购物操作要安全 方便 表格布局概述 表格是常用的网页布局工具 它简单实用 易于掌握 使用表格布局对于初学者来说是一个很好的方法 使用DreamweaverCS5的表格能帮助亲轻松完成网页的布局 在实际应用中 通常使用表格来进行网页布局 对网页元素进行精确定位 例如在制作商品列表页面时 如果不用表格而直接将商品图像插入网页中 很难精确控制图像的位置 商品的文字描述更是难以和相应图片对齐 表格布局概述 在此可以使用一个2行4列的表格来对此商品列表页面进行布局 每个单元格内嵌套一个1行2列的表格分别放置商品图像和文字描述 如图5 12所示 效果会好很多 使用表格布局的商品列表 表格布局概述 在DreamweaverCS5中 表格分为两种 原始表格和布局表格 原始表格和布局表格在本质上都是网页表格 都是由行 列 单元格组成 在DreamweaverCS5 代码 视图中 它们的代码也都是一样的 区别在于它们是DreamweaverCS 在设计表格时所用到的两种不同的模式或方法 原始表格和布局表格是Dreamweaver处理表格的两种模式 即 标准模式 和 布局模式 二者之间可以随意切换 在 标准模式 下为原始表格 一般是通过对话框和属性面板对表格的尺寸 对齐 背景等属性进行设置 在 布局模式 则为布局表格 可以由设计者手工绘制表格和单元格 其大小可以手工调整 在布局时使用布局表格更为直观和简单 小贴士 表格布局的方法 1 使用布局表格布局打开 查看 菜单 选择 表格模式 子菜单中的 布局模式 命令 或者按快捷键 F6 可以切换到布局模式 在 布局模式 下 设计者可以在页面中所见即所地手工绘制布局表格和布局单元格 从而直观地进行网页布局 在插入栏中选择 布局 类别 运用 绘制布局表格 和 绘制布局单元格 按钮可以绘制布局表格和布局单元格 表格布局的方法 通常要先绘制一个布局表格 然后在布局表格中绘制布局单元格 在 设计 视图中 布局表格外框为绿色 而布局单元格外框为蓝色 如果不在布局表格中绘制布局单元格 DreamweaverCS5会自动创建一个布局表格以容纳该单元格 所以 布局单元格不能独立存在于布局表格之外 布局表格和布局单元格具有自动吸附功能 当新绘制的布局表格或布局单元格距离另一个布局表格或布局单元格的边界很近时 就会自动吸附 如果要取消该功能 可以在绘制时按住Alt键 表格布局的方法 2 使用原始表格布局除使用布局表格工具进行布局外 直接插入原始表格同样可以进行网页布局 创建表格时须注意除了要设置表格的行数 列数和宽度以外 还需要将 边框粗细 单元格边距 单元格间距 都设置为0 这样创建的表格没有边框和间距 也适合用于网页布局 表格布局的方法 3 相临表格之间的位置关系不论表格的宽度是多少 两个相临的表格必然是上下的位置关系 因此 在使用表格布局时 可以根据功能将页面划分为若干个区块 每个区块使用一个表格 如图5 16所示为一个上中下结构的布局 可以分别使用三个表格完成header区 主体区和页脚区的布局 表格布局的方法 设置布局表格的属性这里主要是根据实际需要设置表格的行数 列数 宽度 高度 对齐方式 背景等属性 从而实现网页内容的布局 特别是表格以及单元格的宽度和高度 它们决定了网页布局内容的尺寸 在向单元格内添加内容时 比如添加一张图片 如果图片尺寸比单元格的尺寸大 将会把单元格 撑大 这样可能会破坏页面的整体外观 所以在创建表格以及设置单元格尺寸时 要预先算好尺寸 留出合适的空间以存放内容 小贴士 表格布局的方法 嵌套表格的应用在使用表格布局时 大的功能区块内部还有小的区块 各小区块内部还有更具体的内容需要放置 这些情况都需要使用嵌套表格来实现 简而言之 使用嵌套表格可以将大的区块划分为小的区块 也可以将小区块划分更小的区域 从而实现网页元素的精确定位 如下图中使用一个1行2列的嵌套表格将主体区划分为左 右两个子区块 使用嵌套表格时 要