第2章商务网页布局与设计.中职课件电子教案.ppt

《第2章商务网页布局与设计.中职课件电子教案.ppt》由会员分享，可在线阅读，更多相关《第2章商务网页布局与设计.中职课件电子教案.ppt（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 长沙民政商务网页设计与制作商务网页设计与制作商务网页布局与设计第二章 长沙民政理解并掌握网页风格设计要点能针对商务诉求组织网页内容能绘制网页布局草图学习目标 长沙民政 项项 目目 概概 述述 任务任务1：网页风格设计：网页风格设计 任务任务2：草图绘制：草图绘制学习内容 第二章项项 目目 概概 述述网页风格设计草图绘制 长沙民政项项 目目 概概 述述长沙市碧雅园花卉苗木基地成立于2008年，位于美丽的湘江河畔，是长沙市著名的花卉苗木公司。近三年来，苗木基地面积一直稳居同行首位，荣获全国优秀苗木基地提名单位等多项荣誉称号。公司经营的苗木品种有乔灌木、移栽大树、扦插小苗、树桩盆景、竹类植物、藤本

2、植物、草本花卉、草皮草种、造林苗、新优果苗、种籽种苗等，其中红花紫薇、罗汉杉、红梅、广玉兰、海棠、樱花、香樟、桂花为其经营的特色苗木。公司希望通过企业网站的建设，提高网络知名度，开拓网络销售渠道。小王所在的智越网络公司承接了基地的网站建设项目。网站建设部经理安排小王负责该项目，并要求小王在五天内提交网站首页草图。第二章项项 目目 概概 述述网页风格设计草图绘制 长沙民政项项 目目 分分 析析 第二章项项 目目 概概 述述网页风格设计草图绘制网站建设业务流程图网站建设业务流程图 1、网页草图是进一步、网页草图是进一步挖掘客户需求的网页挖掘客户需求的网页原型之一，也是制作原型之一，也是制作效果图的

3、蓝本。效果图的蓝本。2、具体工作包括页面、具体工作包括页面布局、色彩搭配、文布局、色彩搭配、文字图片编排、页面内字图片编排、页面内容组织等。容组织等。长沙民政任任 务务 分分 解解 第二章项项 目目 概概 述述网页风格设计草图绘制本项目本项目可分解为以下两个任务：可分解为以下两个任务：任务任务1：网页风格设计：网页风格设计任务任务2：网页草图绘制：网页草图绘制 长沙民政 项项 目目 概概 述述 任务任务1：网页风格设计：网页风格设计 任务任务2：草图绘制：草图绘制学习内容 第二章项项 目目 概概 述述网页风格设计草图绘制 长沙民政任务一、任务一、网页风格设计网页风格设计 第二章项 目 概 述网

4、页风格设计网页风格设计草图绘制 风格设计的重点是版面布局、颜色的使用和搭配、文字和图片的编排等。要完成这一任务，可以从分析比较同类网站入手，以快速形成初步的设计方案。【任务说明任务说明】长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制【任务步骤任务步骤-1、竞争对手网站对比分析】、竞争对手网站对比分析】竞争对手网站获取途径竞争对手网站获取途径关键词搜索关键词搜索行业网站会员行业网站会员相关统计报告相关统计报告竞争对手网站筛选竞争对手网站筛选用户体验度用户体验度百度权重、百度权重、PR值值分析要点分析要点网页配色网页配色 页面布局页面布局 文字、图像的编排文字、图像的编排内容组织内

5、容组织栏目结构栏目结构 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制【任务步骤任务步骤-2、网页配色网页配色】主色调主色调 在主色调的选择上，首先应该明确网站的主题、服务对象、所要传达的信息，还有利用色彩想要达到的视觉和心理效果，以确保所选用的色彩与网站形象相吻合。主色调选取要点：主色调选取要点：1）、色彩分为无彩色和有彩色两大类，无彩色是指黑、白、灰，其它的为有彩色。2）、有彩色又可分为暖色调和冷色调两大类，它们分别给人以不同的感觉。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制冷暖色对比冷暖色对比 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图

6、绘制辅助用色辅助用色 在确定了网页的主色调后，可以适当地辅以其它几种辅助色，但一般不超过三种（背景色和主体文字颜色不计入其中），这样可以对整个页面的色彩起着调和的作用，让页面生动活泼、富有生气，并使主色调更加流畅地贯穿整体。辅助用色分类：辅助用色分类：1）、辅助用色包括辅色调、点睛色、背景色三种。2）、仅次于主色调的视觉面积的辅色调，能起到烘托主色调、支持主色调、融合主色调的作用；点睛色是在小范围内“点”上强烈的颜色来突出主题效果，使页面更加鲜明生动；背景色是衬托整体的色调，起到协调的作用。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制示例：示例：长沙民政 第二章项 目 概 述

7、网页风格设计网页风格设计草图绘制 辅助用色要点：辅助用色要点：1）、可以考虑跟主色调相邻近的颜色，也可以用主色调的对比色。2）、相邻色给人的感觉是稳定、和谐、内向；而对比色给人的感觉是冲突，强的对比色运用可以使画面的开放性增强，整体印象变得轻松舒畅。3）、在具体应用的时候用把握整体和谐、局部对比的原则。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制辅助用色基准辅助用色基准 -色环图：色环图：长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制本项目拟建网站配色参考：本项目拟建网站配色参考：主色调：白色；辅色调：绿色；点睛色：红色。长沙民政 第二章项 目 概 述网页风格

8、设计网页风格设计草图绘制【任务步骤任务步骤-3、网页版式设计】、网页版式设计】在网页布局，即设计网页内容及各元素空间分布时，因充分考虑“F”型的阅读习惯，确保最重要的信息能有效展示在浏览者面前。F型热点图型热点图 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制国字型网国字型网页布局页布局 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制拐角型网拐角型网页布局页布局 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制框架型网框架型网页布局页布局 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制“回回”字型字型网页布局网页布局 长沙民政 第二

9、章项 目 概 述网页风格设计网页风格设计草图绘制自由式结自由式结构布构布局局 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制“另类另类”结结构构 结构布结构布局局 长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制本项目拟建网站布局：本项目拟建网站布局：在展示型企业网站中，产品往往是展示的重点。在产品线较长、产品品种较多的情况下，一般需要在页面中给出相应的列表，并将该列表置于页面的左侧，以符合“F型热点图”规律。在该项目中，“拐角型”布局可以作为首选。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制【任务步骤任务步骤-4、文字和图像编排、文字和图像编排

10、】文字的编排文字的编排 在网页中通过设置其字体、字号、行距，以及采用不同的排列和表现形式，还可以表达出特别的视觉效果，从而强化要传递的商业诉求。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制示例：示例：通过文字大小及疏密的处理，可突出重点，给人层次分明 的感觉。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制图像的编排图像的编排 图像在页面中的位置、排列方式及其大小、数量、外形等，对页面的均衡、视觉流程、文字的强调均能产生较大的影响。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制示例：示例：图像的大小不仅决定着主从关系，也控制着页面的均衡与 运动。

11、大小对比强烈，给人跳跃感，使主角更突出；大小 对比减弱，则页面稳定、安静。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制示例：示例：不同的图像自由叠置或分类叠置，构成的块状组合，具有轻快、活泼的特性，却不失整体感。在图像较多时，会无法突出重点，这时可改变图像的面积，有效地区分层次。长沙民政 第二章项 目 概 述网页风格设计网页风格设计草图绘制本项目拟建网站文字与图像编排要点：本项目拟建网站文字与图像编排要点：首页中需要展示的文字量不是很大，正文使用默认字体字号，即宋体、12磅字即可。在颜色的使用上，可考虑使用此前确定的辅助用色红色，来处理其中需要强化表达的部分文字。本项目中的苗

12、木基地在同行业中具有一定的影响力，为强化企业品牌形象及主营产品，可使用较大尺寸的图片作为Banner的背景图片，展示基地实景、特色苗木等。内容区的产品图片，可采用块状形式排列。为了与Banner图片匹配，产品图片尺寸可适当小一些，具体到每行图片的数量及大小，在制作效果图时，应根据视觉效果适当调整。长沙民政 项项 目目 概概 述述 任务任务1：网页风格设计：网页风格设计 任务任务2：草图绘制：草图绘制学习内容 第二章项 目 概 述网页风格设计草图绘制草图绘制 长沙民政任务二、任务二、草图绘制草图绘制 网页风格的设计一旦确定，就可以开始确定网站的栏目及页面中要展示的内容，在此基础上，再绘制出网页的

13、草图。特别注意，在这一阶段中，保持与客户的及时联系和充分沟通非常重要。因为，客户对网页内容的把握，肯定比设计师更专业。【任务说明任务说明】第二章项 目 概 述网页风格设计草图绘制草图绘制 长沙民政【任务步骤任务步骤-1、网站栏目设计网站栏目设计】第二章项 目 概 述网页风格设计草图绘制草图绘制 根据网站栏目设置的原则及设计方法，参照竞争对手网站栏目结构，给出本项目网站的栏目结构：长沙民政【任务步骤任务步骤-2、首页内容组织、首页内容组织】第二章项 目 概 述网页风格设计草图绘制草图绘制 本项目网站首页内容组织：长沙民政【任务步骤任务步骤-3、结构参数设定、结构参数设定】第二章项 目 概 述网页风格设计草图绘制草图绘制 以屏幕分辨率1024*768为基础，设定本项目网站首页各部分结构参数：长沙民政谢谢 谢谢 ！