网页设计与制作-第一章+赏析电子商务网站页面

知识分析
• 网站规划设计中须注意的问题。
– – – – – – – – – – 可先用笔，画出网站框架的草稿。 可在使用计算机编写前，考虑好页面的布局和内容上的构思。 慎用特殊字体。 页面中避免长文本。 网页内容要易读。 图像的运用要适当。 注重留白。 注重对比。 注重连贯。 不要忽视错别字，这是非常重要的，但往往被忽视。
课后作业
分析亚马逊商城主页的特点。
SEO和网站优化
Version: 1.0 Lesson No: TNM-2-01
WWW工作原理Flash
构成网页的基本元素
•Logo、Banner、导航条 •文字、图像、多媒体、动态效果 •表格、框架、超链接、表单
网页设计与制作工具
•Dreamweaver •PhotoShop •FireWorks •Flash
任务二 赏析行业类综合网站
分类信息清晰的导航条
方便快捷的查询功能
任务二 赏析行业类综合网站
任务二 赏析行业类综合网站
快捷的搜索
排行榜让用户更快的找到自己需要的产品
总结
• 该类型网站的布局结构常采用“左拐角形”和“同字形”。 • 主要特色是属于行业性门户网站，主页上资讯非常丰富，由于访问对象主要 是行业内企业及相关人员，因此资讯的及时、全面、准确就成为网站的首要 因素，美观等因素则是次要。 • 同时广告收入也是该类型网站的重要收入来源，因此该类型网站会在页面上 大量放置相关行业企业广告。 • 该类型网站的导航条设计也是以企业的需求为特色来构成的。 • 在主体部分，行业产品的分类非常重要，是方便访问者寻找资讯的重要渠道。 • 作为行业性网站，论坛部分在网站中也占据相当重要的地位，是访问者互相 了解、互动、分享资源的地方。
知识分析
WWW
•URI统一资源定位符 •HTTP超文本传送协议 •HTML超文本标记语言
World Wide Web
网页和网站
•网页是构成网站的基本元素，是承载各种网站应用的平台。 •网站就是一系列围绕同一主题的统一风格的网页的组合。 •静态网页、动态网页。
网页版面布局类型
•同字形（回字形）：顶端、主体和底部。 •拐角形：左拐角形、右拐角形。 •标题正文型：最上面是标题或类似的一些东西，下方是正文，很想平时的文章。多用于新闻页面。 •封面型：整个页面的绝大部分为一个动画或者精美的图像。 •框架形：采用框架的结构布局。常见的是“左右框架”，左面是导航，右面是正文。常用于一些大型论坛中。 •Flash形：该结构与封面形结构类似，只是采用flash制作，页面表达的信息更为丰富。
任务一 赏析中小企业形象网站
Logo
导航条
收藏本站
联系方式、搜索
Banner
主体内容
联系方式
联系方式、版权
任务一 赏析中小企业形象网站
总结
• 颜色多采用公司的标准色、logo的颜色以及和企业主体相联系的颜色，或者是蓝、 灰等体现商务简约风格的色调。 • 整体布局常采用“同字形”和“左拐角形”。数据展示多使用表格，产品配有图片。 • 导航条常有“首页”、“关于公司”、“新闻中心”、“产品中心”、“营销网 络”、“联系我们” • 网页中Banner调，现在逐渐变成主页中起主要修饰作用的模块，主要由动态图像 或静态图像组成，大小也在逐渐变大，更为醒目。常见的图像素材有企业产品、 企业建筑、企业人员、企业工程项目、和主体有关的修饰图像、说明资质的图标 等。 • 主体部分主要是各栏目的具体信息。 • 底部一般是版权信息、友情链接、企业联系方式、说明性信息等。 • 二级页面为了保持整个网站的风格，往往只在页面主体部分保持不同。也有例外。 • 一些为人们生活提供服务的餐饮、娱乐、购物、休闲等服务类公司形象网站，在 页面的布局上更为开放，图像、动画、色彩运用的更多，为了能更好的吸引普通 访问者，在栏目设计上也会有自身的一些特色。
任务三 电子商务商城网站赏析
任务三 电子商务商城网站赏析
任பைடு நூலகம்三 电子商务商城网站赏析
总结
• 大篇幅来显示分类列表，一般位于主体部分的左侧边栏。 • 网站的布局因为和分类列表区域结合，也大多采用“左拐 角形”布局，主页的中间则是活动促销信息，下面往往是 橱窗展示区，而在底部则是该网站的问题解答。 • 二级页面一般是具体某样商品的描述页面，结构和主页类 似。 • 主页的底部一般是常见问答、友情链接、网站版权、备案 等信息。
知识分析
网页制作基本原则
• 内容、速度、页面美感。 • 简洁、一致性、好的对比度。
WWW的工作原理
• 查看flash
网站设计与制作的三个阶段
• 网站规划。主要包含确定网站主题、搜集网站材料和规划 网站架构。 • 网站制作。主要包含网站制作、测试评估以及将网站正式 上线。 • 后期维护。主要包含网站的推广和营销，以及对网站的维 护和内容的更新
网页设计与制作
SEO和网站优化
Version: 1.0 Lesson No: TNM-2-02
第一章 赏析电子商务网站页面
赏析电子商务网站页面
能力目标
• 分析网站的配色方案。 • 分析网站的版式结构。 • 编写简易网站赏析报告。 • 模仿同类网站进行规划设计。
知识目标
•网页基础知识。 • 网页的基本构成。 • 网站的构成和风格设置。 • 网页布局的常用结构。 • 网站的规划原理。