网站建设 网站页面设计

06模块-网站页面设计

在网站的制作之前需要对网站进行总体设计，这个设计就包括对网站外观页面的设计。网站的外观页面是呈现给用户的第一信息，也是最直观的信息，是网站的重要组成部分。网站页面的设计可以是局部设计，也可以使用photoshop进行整体设计，通过切片工具存储转换成网页文件。本模块以“易购商城”为具体案例，详细讲述了在photoshop中设计网站页面效果图的步骤，并最终将整个页面效果图切片生成网页文件。能力目标1．能独立设计网站的主页面和子页面。2．能熟练的运用photoshop工具对设计的页面切片。3．能利用photoshop工具制作网站中的GIF小动画。知识目标1．网站LOGO的设计制作。2．网站页面的设计制作。3．photoshop切片使用方法。4．photoshop中制作GIF小动画。任务1网站标志设计任务背景网站标志设计也称网站LOGO设计，LOGO是网站的标志和名片，其它网站链接链接本网站通常是通过网站LOGO链接。因此LOGO是网站形象的重要体现，具有重要的地位和作用。网站的标志LOGO一般会在网站的各级页面中固定位置显示，因此，在网站的页面设计中，第一个任务就是要根据网站的内容和特色设计网站标志LOGO。任务要求1．网站LOGO设计要简单明晰。2．网站LOGO应能够体现网站的主题和特色。【技术要领】使用photoshop中的钢笔工具绘制曲线；运用选区等基本工具完成LOGO字母元素的设计制作；运用photoshop中的基本操作实现LOGO的整体调整。【解决问题】网页LOGO的设计制作。【应用领域】网页页面设计。任务分析“易购商城”是一个商品销售网站，标志的设计本着“易购”的含义，采用图形与文字相结合的方式，使用了“易购”的字母“e”和“G”来设计，以整个网站的主色调橙色作为基色来进行设计。“易购商城”网站LOGO的设计首先使用photoshop中的钢笔工具绘制出装饰气泡，然后运用选区工具绘制LOGO的字母元素“e”和“G”。最后使用文字工具加上“易购”字符，并调整整个LOGO，保存文件。重点和难点

1．运用钢笔工具绘制装饰气泡轮廓，并对其进行调整填充。

2．使用椭圆选区工具、单行选区工具和加减选区完成“e”和“G”字母元素的制作。网站logo效果图任务2网页导航设计任务背景网站的导航是网站的地图，网站导航是使用者搜索寻找信息的重要依据，为网站设计清晰的导航是网站设计的基本要求。因此，在网站的页面设计中，第二个任务就是要规划网站，将网站的信息分门别类，为网站设计制作清晰的导航目录。任务要求1．网站导航分类清晰，方便使用。2．网站导航能够从用户角度出发，方便用户搜索信息，为用户使用提供帮助反馈信息。【技术要领】使用photoshop中的钢笔工具绘制曲线区域作为导航的背景；运用圆角矩形工具绘制导航菜单的衬底；运用文字工具输入导航内容。【解决问题】网页导航的设计制作。【应用领域】网页页面设计。任务分析“易购商城”网站设计以橙色为主要基调，运用流线型的曲线区域作为导航的衬底，菜单导航是在流线底下方用圆角矩形作为衬底设计制作，服务信息导航使用形象的图片加文字设计而成，导航效果清晰易操作。首先使用钢笔工具绘制流线型的区域，然后使用文字工具将菜单导航的内容输入进去，并使用圆角矩形工具作为菜单导航的衬底。将服务信息导航的相关图片进行处理，调整大小和位置，并使用文字工具输入服务信息导航的内容，调整位置完成导航的制作。重点和难点

1．运用钢笔工具绘制主色调曲线区域，并对其进行调整填充。

2．使用自由变换调整图片大小。网站导航效果图任务3主页栏目设计任务背景网站主页栏目是呈现网站信息的重要区域，可以适当的进行底纹边框的装饰，在此区域中可以适当根据网站内容信息的分类运用简单大方的底纹和线条对信息进行分块，使整个网站更加美观。任务要求1．主栏目以衬托凸显网站信息内容为出发点，设计简单大方。2．主栏目的设计要区域明晰，方便用户使用。【技术要领】使用photoshop中的圆角矩形工具绘制底纹；运用选区混合运算绘制不规则形状图；使用定义图案命令来定义图案，并使用图案填充工具进行图案填充。【解决问题】网页主栏目的设计制作。【应用领域】网页页面设计。任务分析“易购商城”主页面中栏目设计主要分为“特价促销”区域和“推荐商品”区域。在这两个区域中继续秉承整个网站的流线型设计风格，以橙色为主色调。首先使用圆角矩形工具绘制“特价促销”区域底纹，使用加减选区工具对底纹进行混合运算，产生半框效果；然后使用文字工具输入“特价促销”，导入SALE小图标和售后员图片；使用圆角矩形工具绘制“推荐商品”区域底纹，运用选区制作圆角细线，完成栏目设计。重点和难点1．将矢量图层栅格化转换成普通图层。2．运用选区工具和混合运算选区制作不规则的图形。3．定义图案，并使用图案填充工具。主要栏目效果图任务4网页左侧模块设计任务背景“易购商城”中网站左侧包含登陆模块、搜索模块和商品销售排行。任务要求能够清晰的呈现各个模块内容。【技术要领】使用图案填充工具填充虚线分割三个模块；使用文字工具输入模块名称。【解决问题】网页左部模块设计。【应用领域】网页页面设计。任务分析“易购商城”网站左侧包含登陆模块、搜索模块和产品销售排行三部分，三个模块在一个大的圆角矩形底上呈现，为了使网站简单清晰大方，采用简单的虚线隔开。首先使用photoshop中的图案填充工具填充出虚线作为分割线；然后使用文字工具输入模块的名称。重点和难点单行选框工具的图案填充方法。网站左侧栏目效果图任务5网页切片制作任务背景在photoshop中将整个网站页面设计完成后，可以通过photoshop中的切片工具对整个页面切块，并存储成web所有格式，实现图片与网页之间的转换。任务要求1.清晰网页中固定表格和活动表格部分，清晰网页中的热区链接。2.切片要精确无误。3.存储格式要正确无误。【技术要领】使用标尺和参考线工具将图片分区域；使用切片工具将整个页面切割；使用存储web所用格式命令将页面存储为网页格式。【解决问题】图片到网页页面衔接。【应用领域】网页的切片。任务分析切片和存储web所用格式命令，能实现photoshop和Dreamwaver之间的转换，在整个网站界面设计实现后，需要进一步使用相应工具实现图片向网页的转换。本任务首先使用标尺和参考线将整个网页的页面进行区域划分，然后使用切片工具来分割区域，最后将切好的页面进行存储，存储为web和设备所用格式。重点和难点

1．切片的思路和精准度。

2．存储的格式与方法。网站切片效果图实训photoshop中Gif动画的制作

实训目的通过使用photoshop中的动画窗口帧变化，结合图层的显示隐藏功能，在photoshop中制作简单的网页GIF小动画，达到美化网页的效果。本实训目的在于让学生使用photoshop中的动