4 行业企业类网站
设计要求
1.网页布局合理 2.网页导航清晰 3.网页配色专业
任务1.2 网站鉴赏分析
1 整体布局
• 1. LOGO、导航突出 • 2. 统一的平台风格 • 3. 链接布局合理
LOGO
导航
页面头部
产品形象展示
网站内容
网站内容 页脚
2 网页配色技巧
45度同类色
90度邻近色
135度对比色
搜索引擎 网页索引数据库
网络蜘蛛网页爬行 ，搜取数据，形成 网页索引数据
网络蜘蛛网页爬行 ，搜取数据，形成 网页索引数据
搜索引擎优化下网页设计目标
➢（1）让设计与制作的网页在搜索引擎结 果中有一个较好的排名；
➢（2）网页能够吸引用户的目光，增加被 点击几率；
➢（3）用户进入网页后，网页能达到用户 期望，从而减少跳失率；
000001000010000100@000010000000001000000001000@0000100000
000001011110000000
000010@000100000001
0001000100@00001000
000010000000
000@100001000010
00100
电子商务网页 0001001000@10000
搜 索 引 擎 工 作 原 理
1
---------------------------------------------------------------------------------------------------------------
互联网网页
网络蜘蛛网页爬行， 搜取数据，形成网页 索引数据
（2）主栏目清晰并且全站统一。
❖ 3 冰山效应网页优化
在图中，有效地避免了网页冰 山效应，立即购买和加入购物车 在网页的第一屏已醒目地显示出 来，用户如需更多的信息可以转 向第二屏。用户打开网页后，所 见到的信息能反映网页的全貌， 加强了用户继续阅读的信心。
❖ 4. Flash 网站优化
• 虽然能从搜索结果中了解梦洁为 家纺类上市企业，但进入网站后 用户容易无所适从，从图中，我 们可以通过点击链接继续访问， 但网站内容和主题不直观，营销 用户体验以及Flash 动画也对搜 索引擎的提取等问题都待改善。
执行操作
执行某项操作，如网上支付、网上购物、网上 预约、发布博客或发布论坛帖子等。
任务1.1 不同类型网站的设计要求 1 资讯门户类网站
设
计
统一的平台风格
要
求
全面的内容频道
良好的导航体验
2 电子商务类网站
设计要求
清晰的导航结构 清晰的图片展示
丰富的交易外功能
3 交通旅游类网站
设计要求
1导航清晰 2网站内容丰富 3网页配色亮丽
10000
0000110001000 0100100
设计与制作
0010001000@01000
000100000010000@0000001
000100001000010001000010010001000010000
00001100010000100000000100100001000000001000001000000001
目录
项目一 网站鉴赏与网站规划 项目二 网页设计基础 项目三 网页设计的基本应用 项目一 网站鉴赏与网站规划 项目二 网页设计基础
项目1 网络鉴赏与 网站规划
➢一、不同类型网站的设计要求
任
➢二、网站鉴赏分析
务 ➢三、SEO 网站优化
➢四、网站规划
我们通常 在 网 上 做什么？
搜索信息
是搜索某种信息，如新闻、空调选购信息、健康资 讯等。
➢（4）网页和网站能提供用户额外价值， 最终提高网站转化率，提高用户满意度 。
2 网站主题优化
• 网站主题的确定 • （1）主题内容定位，做到小而精，主题定位小，内容精； • （2）主题明确，凸显重点，去除与主题无关的内容； • （3）专题内容丰富，展现高品质的产品和服务。
3 网站布局优化
❖ 1 页面定位的优化 • （1）网页标题：
• 其代码如下：
代码：
• <meta name="keywords" content=" 冰箱, 冷柜, 洗衣机, 彩电, 热水器, 空调, 厨房电器, 整体厨房, 生活小家电, 电脑 , 手机数码, 商用空调, 商用冷柜, 商用电视, 商用电脑, 家居 集成解决方案, 住居解决方案, 服务与安装, 产品注册, 在线 客服, 延保服务, 设计体验中心, 营销活动, 服务与支持, 论 坛, 说明书, 产品特性, 型号参数, 产品评论 " />
Title & Meta
4 ❖ 1. Title 信息优化 网 • （1）首页：网站名称或者网站名称_ 提供服务介绍或产品介绍 页 • （2）频道页：频道名称_ 网站名称
• （3）文章页：文章Title_ 频道名称 _ 网站名称
• （4）标题主题明确，应包含该网页中最重要的内容核心关键字
• （5）简明精练，不罗列与网页内容不相关的信息
• （6）遵循从左到右的阅读习惯，重要的内容应该放到Title 的靠 前的位置
信 息 优 化
❖2. Keywords 关键字优化
❖ 我们可以在网页中添加Name 为Keywords 属 性的Meta 标签，其中Content 属性值即为关 键字内容，多个关键字间用逗号间隔，逗号 表示是逻辑“或”，空格表示逻辑“与”。
• 在Firefox 和IE 浏览器中，网页的标题显示在窗口 的顶部或地址栏下方的标签页上。
• （2）URL ：
• URL 应当对网页的内容有所反映，比如本理财案 例对应的URL 路径money 目录。
• （3）路径导航：
• 对于用户来说，这些链接能够清楚表明他们正在 网站的哪个层级，当前正在浏览什么页面。
• （5）段落标题：
• 也能帮助用户确定网页位置。
• （6）标志和标语：
• 人们普遍认为能从网页的左上角得知自己正在访 问的网站及位置。
• （7）分类导航按钮：
• 本案例没有体现，通常体现在左右侧边栏的分类 导航按钮。
❖ 2 弹簧高跷浏览行为优化
optimize
（1）增加左侧导航栏，页面跳转时，不 会出现明显的网站各层级之间跳转的用 户感受；
180度互补色
3 导航设计
（1）主导航结构和名称清晰。 （2）网站导航采用文本链接。 （3）面包屑导航 。 （4）导航阅读习惯。
4 网站图片设计
使用图片需 要考虑与网 站的总体设 计协调、考 虑放置位置 ，并预计浏 览器是否支 持该图像的 显示、用户 能接受其下 载速度等。
任务1.