模块网站页面设计课件.ppt

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小图标和售后员图片；使用圆角矩形工具绘制“推荐商品”