规划动态网站学习单元课件1

1、学习单元一规划静态网站学习单元一规划静态网站工作描述网站规划设计的基本的流程：首先，要认真解读网站项目策划书，了解客户的背景、网站的定位、网站的结构以及网站的主要内容，获取全面资料；其次，与客户的进一步沟通交流，确定网站的设计风格、网站的页面版式布局，细化页面元素（文字、图片）的呈现形式，撰写网站整体设计说明书；最后，使用图像处理软件进行绘制，具体呈现出高保真的网站美工效果图（PSD文件），呈交给客户。工作描述网站规划设计的基本的流程：首先，要认真解读网站项目目录任务一 解读静态网站策划书任务二 撰写网站整体设计说明书任务三 绘制静态网站页面效果图目录任务一 解读静态网站策划书任务二 撰写网站

2、整体设计说明书任务一 解读静态网站策划书为了更好地理解客户的需求，美工在策划师的协助下，认真解读策划书，了解客户的经营理念和发展背景，进一步对网站的风格进行了定位，了解网站的功能，确定网站的设计结构，并依此规划网站的设计内容。解读网站策划书的具体流程如图所示：任务一 解读静态网站策划书为了更好地理解客户的需求，美工在策网站策划书的基本构成文本文本文本文本文本文本文本文本网站策划书的基本构成文本文本文本文本文本文本文本文本任务实施1、了解客户的背景信息公司组织架构了解客户需求任务实施1、了解客户的背景信息公司组织架构了解客户需求2.了解网站定位2.了解网站定位3了解网站结构设计网站的结构设计是体

3、现内容设计与创意设计的关键环节。北京缘艺花卉有限公司的结构设计如图所示。该结构设计采用最简单的组织结构方式，将导航和内容结合在一起，从而构成了整个网站的结构体系。3了解网站结构设计网站的结构设计是体现内容设计与创意设计的4了解网站内容规划产品的分类与网站中产品相关栏目的设置有直接的关系，对产品相关页面的布局也会有很大的影响。客户公司产品系列4了解网站内容规划产品的分类与网站中产品相关栏目的设置有直1、列表形式根据客户公司的产品分类，页面设计中就会有很多的实现方法。1、列表形式根据客户公司的产品分类，2、横排形式2、横排形式 通过阅读本策划书，发现还缺少企业联系方式、企业的logo、域名信息、备

4、案信息等介绍性资料，以及成功案例、服务项目说明、相关图片等业务性资料。为此，美工将需要客户提供的资料，形成列表文档，如资料列表所示。美工将根据网站建设进度，向用户索要相关的资料。 通过阅读本策划书，发现还缺少企业联系方式、企业的lo5了解网站建设进度计划按照网站建设的项目流程，北京缘艺花卉有限公司网站的制作进度计划如图所示。5了解网站建设进度计划按照网站建设的项目流程，北京缘艺花卉任务二 撰写网站整体设计说明书任务描述：在策划师的帮助下，美工完成了网站策划书的解读，了解到客户需求以及网站策划书所表达的设计思想，现要根据网站的功能确定网站的链接结构，根据网站的风格确定网站的版式和色彩。经与客户反

5、复沟通交流后，将最终的设计方案和设计思想以文字的形式记录到网站整体设计说明文档中，交予客户，双方在网站整体设计说明书文档上签字确认。任务二 撰写网站整体设计说明书任务描述：任务分析： 静态网站网站整体设计说明书的编写将从以下几个方面开展工作 1.网站整体设计风格 2.网站版式布局：首先以不同色块设计页面的版式草图，然后使用框线图具体呈现页面内容。 3.网站配色方案：包括主色调和辅助色。 4.网站视觉元素设计：文字（标题文字、正文）的字体、字号以及图片的规格等任务分析：任务实施：1、确定网页版式布局，绘制线框图通常，一个网站的页面是由页面顶部、页面主体和页面底部三部分构成，如图所示：任务实施：1

6、、确定网页版式布局，绘制线框图通常，一个网站的页页面顶部【Head】一般，在企业形象宣传类网站的页面顶部会放置右图的内容。页面顶部【Head】一般，在企业形象宣传类网站的页面顶部会放页面主体【BODY】 美工在设计版式时，要注意把握整体布局，将重点版块放在突出位置，同时要注意各版块之间大小和色彩的平衡。对于所放内容在页面中的位置，应按照其内容的重要程度，结合人的视觉流程来确定。考虑到大多数人的阅读习惯是按照从上到下、从左到右的方向，所以重要的内容一般安排的页面的左上位置。页面主体【BODY】 美工在设计版式时，要注意把握整体页面底部通常用来标注网站所属公司的名称、地址、网站版权信息、备案信息和

7、邮件地址等。使浏览者能够从中了解到该站点所有者的一些基本情况，如图所示。页面底部【Footer】页面底部通常用来标注网站所属公司的名称、地址、网站版权信息、至此，网站页面的版式草图已经形成，网站版式布局规划设计完毕至此，网站页面的版式草图已经形成，网站版式布局规划设计完毕 通过首页线框图，再根据客户需求进行进一步的细化，美工还需要标明首页各部分的尺寸。 通过首页线框图，再根据客户需求进行进一步的细2、确定网页色彩方案 客户公司所属的行业类型为农业、种植业，网站应力求体现出健康、自然和清爽，有生机、有活力 - 在色调方面绿色是最好的选择，能给人以青春和活力，使人联想设计想到自然界的植物。 2、确

8、定网页色彩方案 客户公司所属的行业类型为农业、种3、网站视觉元素设计网站视觉元素包括文字、图片、表单、列表、多媒体等等，是网站外观设计的组成部分，服从于网站的整体风格需要。在北京缘艺花卉有限公司网站的页面字体选取上，考虑到流行性、通用性，将导航文字选用了网页上流行使用的微软雅黑字体，因为是标题文字，字号设置为14像素，便于导航文字的阅读，文字颜色配合网站颜色选择了深绿色（#128500）。正文文字使用了系统默认的宋体，字号为12像素，文字颜色为黑色.3、网站视觉元素设计网站视觉元素包括文字、图片、表单、列表、4、确定网站链接结构网站的链接结构是页面间链接关系的结构，反映了页面间的层次关系，也称

9、为网站的逻辑结构。逻辑结构设计的目的在于合理使用链接、提高导航效率。一般的，建立网站的链接结构有两种基本方式： 树状链接结构（一对一），这类似DOS的目录结构，星状链接结构（一对多），类似网络服务器的链接。4、确定网站链接结构网站的链接结构是页面间链接关系的结构，反任务三 绘制静态网站页面效果图子任务1：绘制网站首页效果图 任务描述： 本任务是静态企业网站项目“缘艺花卉公司”的首页页面设计，使用Photoshop中的基本绘图工具完成线条简洁、布局规整的页面绘制，要求能扩大公司的宣传，树立公司的企业形象，体现出公司的业务职能，页面的整体设计要能表现出园艺行业的清爽感。任务分析： 网站首页效果图将

10、按照页面顶部、页面主体和页面底部三大版块进行绘制。任务三 绘制静态网站页面效果图子任务1：绘制网站首页效果图 1、页面顶部：网站标识Logo（客户提供）、网站Banner、网站导航网站标识Logo： 花朵般的网站LOGO很放置在页面的左上角，突出主题，不经意间点缀了画面，与Banner画面和谐自然地融合到一起。网站Banner： 北京缘艺花卉有限公司的产品是花卉、绿植，客户希望网站Banner广告能呈现出一幅唯美的自然田园风光，给人以清新、宁静、生机盎然的感觉。为此我们进行了如下的创意构思：在绿叶的掩映下，一条小路蜿蜒而去，路旁是一望无边的茵茵绿草地，座落于小路尽头的是一座被彩虹环绕着的古堡。

11、网站导航： 北京缘艺花卉有限公司网站的频道导航不多，为了与Banner浑然一体、过渡自然，考虑将网站横向水平导航与网站Banner交错、叠加在一起，设计成立体地面的感觉。2、页面主体：服务项目、产品展示、联系我们、成功案例3、页面底部：版权信息1、页面顶部：网站标识Logo（客户提供）、网站Banner任务实施：一、准备绘制1. 启动Photoshop CS3软件，执行“文件”“新建”命令，按照网站整体设计说明书中对页面尺寸的约束要求，新建宽度为1000像素、高度为800像素的文件，分辨率为72像素/英寸，RGB颜色模式，如图所示。行业经验：图片分辨率的选择 图片的分辨率不是越高越好，这与图片

12、的用途相关，一般的屏幕上显示的图片，分辨率为72PPI就足够了，需要打印输出的图片，分辨率应在300PPI以上。任务实施：一、准备绘制2. 参考标注尺寸的首页结构图，如图所示，添加标尺和参考线，进行页面布局。2. 参考标注尺寸的首页结构图，如图所示，添加标尺和参考线，选择“视图”菜单 “标尺”命令，显示出标尺，如下左图所示。操作技巧：精确设置参考线选择“视图”菜单“新建参考线”命令，精准输入数值，如图下所示。选择“视图”菜单 “标尺”命令，显示出标尺，如下左图所示。参考网页版式布局图上的数据，新建参考线。将页面划分为页面顶部、页面主体和页面底部，页面主体又分成左右两部分，如图所示。操作技巧：编

13、辑参考线移动参考线：使用工具箱中的“移动工具”，可以拖拽参考线到所需的位置。删除参考线：使用工具箱中的“移动工具”，将参考线拖出图像窗口之外，如果要删除所有参考线，可以选择“视图”菜单“清除参考线”。锁定参考线：锁定参考线，使其不能被移动，只需选择“视图”菜单“锁定参考线”命令。隐藏参考线：选择“视图”菜单“显示”“参考线”命令。参考网页版式布局图上的数据，新建参考线。将页面划分为页面顶部3. 创建图层组，分类管理按照页面结构图，如左图所示，构建图层组结构，如右图所示。3. 创建图层组，分类管理按照页面结构图，如左图所示，构建二、设计制作网站Banner 按照网站BANNER的构思设想，在网络

14、的素材库中收集所需的各种格式素材，并根据图片的特点，选择适合的抠像工具（魔棒工具、快速选择工具），提取素材图片中所需的元素。1. 将素材放入文件 选择“文件” “置入”命令我使用的PS内没有此功能，请老师核实。（PS CS3、CS4都有此功能），单击“进行变换”按钮，将田间小路的素材置入画布中，素材图片作为智能对象存放在自动生成的新图层中。将此图层命名为“田间小路”，并将图层放置于“页面顶部”图层组中。右键该图层，选中“栅格化图层”命令将素材图层转化为常规图层，如图所示。二、设计制作网站Banner 按照网站BANNER的构选用工具箱中的“快速选择工具”，将草地以外的蓝天区域选中，按Delet

15、e键删除，按Ctrl+D取消选区。使用“移动工具”，拖拽图像到指定的位置，效果如图所示。选用工具箱中的“快速选择工具”，将草地以外的蓝天区域选中，按2.运用同样的方法，将树叶素材置入画布中，选用工具箱中的“魔棒工具”，设置容差值，如图所示。将树叶的白色背景选中，按Delete键删除，再按Ctrl+D取消选区，如图所示。选用带露珠的树叶，是为了更好呈现花卉鲜活的生命力。2.运用同样的方法，将树叶素材置入画布中，选用工具箱中的“魔背景效果布局，使用“移动工具”，拖拽图像到指定的位置，如图所示。背景效果布局，使用“移动工具”，拖拽图像到指定的位置，如图所3.运用同样的方法，将古堡素材、鲜花素材、盆栽

16、素材、树丛素材等以及网站LOGO置入画布中，使用“移动工具”，拖拽图像到指定的位置。调整古堡图层和草地图层的上下顺序，让古堡在后方出现，如图所示。3.运用同样的方法，将古堡素材、鲜花素材、盆栽素材、树丛素材4.制作网站宣传标语。 利用横排文字工具输入网站宣传语“以花卉服务客户，为客户建立温馨协调的绿色环境，打造花卉文化！”，设置文字的字体为“华文新魏”、字体大小为24点，文字颜色为白色（#FFFFFF），如图所示。 为了使输入的文字与图片更好的融为一体，考虑给文字增加一些效果，由于宣传标语的字数比较多，又要保持文字图层可编辑，因此决定利用图层样式为文字添加效果。 选中文字图层，单击图层调板下方

17、的“添加图层样式”按钮，如右图所示。4.制作网站宣传标语。 利用横排文字工具输入网站宣传语添加图层样式中的描边和投影，设置参数如图所示。添加图层样式中的描边和投影，设置参数如图所示。最终的完成效果，如图所示：最终的完成效果，如图所示：三、设计制作网站导航1. 单击图层面板上的“创建新图层”按钮新建一个图层，选择工具箱中的“圆角矩形工具”，如图所示。在属性栏中选择“路径”，设置圆角的半径为15px，拖拽鼠标绘制大小为900300像素的圆角矩形，按转化为选区，按填充任意前景色。按Ctrl+T工具进行自由变形，可以来调整导航栏的大小。三、设计制作网站导航1. 单击图层面板上的“创建新图层”按钮2.添

18、加图层样式美化导航栏。单击“图层”面板底部的“添加图层样式”按钮，在弹出的菜单中选择“渐变叠加”命令，然后在打开的“渐变叠加”面板中设置渐变的颜色从#e5e5e5到#ffffff，样式为线性，如图渐变叠加所示。2.添加图层样式美化导航栏。单击“图层”面板底部的“添加图层单击“图层”面板底部的“添加图层样式”按钮，在弹出的菜单中选择“描边”命令，然后在打开的“描边”面板中设置描边的颜色为#ffffff，描边大小为2像素，如图描边样式所示。单击“图层”面板底部的“添加图层样式”按钮，在弹出的菜单中选3.添加导航文字 使用横排文字工具，在属性栏进行设置，如图文字设置所示，设置字体系列为微软雅黑，设置

19、字体大小为14px，设置文本颜色为#128500，之后分别输入导航文字“首页”、“产品展示”、“绿植租摆”、“园林绿化”、“服务流程”、“成功案例”和“关于我们”。操作技巧：对齐多个文字。选中所有文字层，在对齐面板上进行设置，如下图对齐面板所示。3.添加导航文字 使用横排文字工具，在属性栏进行设置，4.添加文字分割线。新建图层，选择“矩形选框工具”，设置样式为“固定大小”，宽度1px，高度11px，效果如图所示。按Ctrl+Alt填充颜色灰色（# cccccc ）， 效果如图所示。4.添加文字分割线。新建图层，选择“矩形选框工具”，设置样式操作技巧：复制图层样式法1：选中图层，执行“图层”“图

20、层样式”“拷贝图层样式”命令，选中要添加图层样式的图层，执行“图层”“图层样式”“粘贴图层样式”命令。法2：选中图层，按住ALT键不放，将图层样式拖动到另一图层上。5、制作完所有的Menu部分后，按住shift键选择所有的图层，移动到“网站导航Menu”图层组中，并且锁定这个图层组，避免编辑。水平导航栏也可以变换出很多效果：【直角边按钮水平导航1】1. 绘制导航栏背景。使用矩形工具绘制导航栏，添加图层样式中的渐变叠加，参数设置如图所示。2. 制作导航文字。输入文字，设置字体为黑体，字号为14点，绿色#009900，添加图层样式中的描边，参数设置如图所示。3. 依次制作完所有的导航按钮和文字。操

21、作技巧：复制图层样式5、制作完所有的Menu部分后，按住s【直角边按钮水平导航2】 直角边按钮水平导航主要是使用矩形工具绘制直角导航栏背景，使用渐变叠加进行颜色填充，添加白色导航文字，制作鼠标经过时变化为黄色圆角背景、绿色文字，效果如图所示。1. 绘制导航栏背景。使用矩形工具绘制导航栏，添加图层样式中的渐变叠加（#339933 - #66cc00）、内发光和描边（#ccff33）。2. 制作导航文字。输入文字，设置字体为黑体，白色#ffffff。3. 制作鼠标经过状态。新建图层，使用圆角矩形工具绘制圆角矩形、使用矩形工具绘制矩形，将路径转换为选区（ctrl+enter），填充颜色#ccff33

22、，使用选区工具删除多余部分，文字颜色改为# 339933。如图所示。【直角边按钮水平导航2】 直角边按钮水平导航主要是使四、设计制作网站内容区域1. 选择“矩形工具”，设置“形状图层”，如图矩形工具所示。设置“新图层颜色”为白色（#ffffff），按参考线进行拖拽，自动生成图层。给图层添加“描边”样式，设置描边的颜色为#99cc66，描边大小为1像素。同样的方法，选择 “矩形工具”绘制服务项目的区块，填充颜色为灰色（#cccccc）。分别输入服务项目文字，设置字体系列为微软雅黑，设置字体大小为14px，设置文本颜色为绿色（#009900）和黑色（#333333）。将栏目标题素材置入画布中，使用

23、“移动工具”，拖拽图像到指定的位置，如图服务项目所示。四、设计制作网站内容区域1. 选择“矩形工具”，设置“形状图2制作完所有的服务项目部分后，按住shift键选择所有的图层，移动到“服务项目”图层组中，并且锁定这个图层组，避免编辑。3同样的方法，完成“产品展示”部分，如图“产品展示”所示。按住shift键选择所有的图层，移动到“产品展示”图层组中，并且锁定这个图层组。2制作完所有的服务项目部分后，按住shift键选择所有的图4同样的方法，完成“联系方式”部分后，如图“联系方式”所示。按住shift键选择所有的图层，移动到“联系方式”图层组中，并且锁定这个图层组。5同样的方法，完成“成功案例”部分，如图“成功案例”所示，按住shift键选择所有的图层，移动到“成功案例”图层组中，并且锁定这个图层组。4同样的方法，完成“联系方式”部分后，如图“联系方式”所示整个网页的绘制也接近了尾声，如图效果所示。整个网页的绘制也接近了尾声，如图效果所示。五、设计制作首页页面底部Footer区域1. 使用矩形工具，选择形状图层选项，绘制尾部区域，设置新图层颜色“#128500”。2. 输入版权文字“北京缘艺花卉有限公司版权所有 copyright2010 ALL Rights Reserved 京ICP备050