项目11网站首页设.docVIP

课 题：项目11　网站首页设计——图像设计、切片、动画、Web格式 课 时：共9学时（其中操作6 学时，项目设计3学时），建议分四次课完成。 课 次 理论课时 上机课时 自学（作业）课时 第1次课 2 第2次课 2 建议1学时 第3次课 2 建议1学时 项目设计 3 可选 合计 9 项目目标： 网站首页图像设计是网站建设的基础，包括Photoshop图像设计和图像web切片技术，项目包括三个实训任务： 任务1：网站banner设计； 任务2：网站LOGO与导航条设计； 任务3：栏目设计。 通过完成三个实训任务，理解图像色彩调整的功能与原理、应用操作与技巧，掌握网页背景图像设计和动画制作的基本方法。 项目重点： 仿制图章、文字、路径、羽化、色彩范围与快速选取综合技术应用；蒙版、图层混和模式、变形文字等处理技术综合应用；选区修改（平滑/边界/羽化/扩展）、不透明度、字符编辑、切片、动画等处理技术。 项目难点： 图像处理技术综合应用；图像设计综合应用能力。 教学用具：多媒体计算机网络机房，PhotoShop CS4软件，随书配套光盘素材：“项目11”。 教学方法：建议以演示教学，项目任务等教学方法为主。 第1次课 2学时 任务1：网站banner栏设计 能力目标： 完成图11-2所示网站banner栏设计。 网站banner栏的组成及设计要素。 色彩搭配技术、仿制图章、羽化、文字、选择、钢笔路径图像处理综合应用与技巧。 教学重点： 网站设计基础，仿制图章、文字、路径、羽化、色彩范围与快速选取综合技术应用。 教学难点： 图像处理技术的综合应用能力；网页平面设计基础与应用。 任务分析： 网站设计基础。 网站广告通常有两种：Banner广告条和botton广告按钮。但随着Web技术的发展，广告模式从传统的banner逐步过渡到方形广告模式，从静态过渡到动画、视频等。 Banner网站广告条可以位于网页顶部、中部、底部以及任意一处，有的则横向贯穿整个或者大半个页面。而botton广告则仅仅是一个小图片或者按钮链接，它的目的则是吸引点击。比较而言，banner的效果要比botton要好。 网站广告反映了客户和用户的双方需求和技术特征，绝大多数站点应用的广告尺寸如下：468*60px 全尺寸BANNER、392*72px 全尺寸带导航条BANNER 、234*60px 半尺寸BANNER、125*125px 方形按钮、120*90px 按钮#1、120*60px 按钮#2 、88*31px 小按钮 、120*240px 垂直BANNER等。 网站banner栏效果图由蓝天白云地球底图、高楼大厦建筑、上互联网的网民以及网站名称和域名组成。 整体以蓝色基调为主，色彩柔和，空旷飘渺，浩瀚无边，网络的科技力量更是博大精深、漫无边际，因为有了网络世界变得更“小”。所以在设计网站banner时不仅要求色彩图像搭配合理，也要充分突出主题。要完成符合主题的banner设计，先要作好规划，再来配备素材精心设计。 在本次任务的网站banner栏设计中完成图像制作并不难，难在构思与实现，这需要多欣赏一些优秀网站页面作品，分析研究其实现价值。 教学过程： Ⅰ、室内装饰设计基础 一、网站首页设计基础 常见的网页制作软件：Frontpage、Dreamweaver、EditPlus等。 网站设计辅助软件：photoshop、Photoimpact、flash、Cool 3d、Gif Animator。 应用photoshop辅助设计网站需要具备以下知识： 1、版面布局 ?? ?设计网站首页图像就象设计报刊杂志一样需要进行排版布局。 2、设计基础 网站风格是包括站点的CI形象（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、内容价值等。 设计网站标志(LOGO)：LOGO是指网站的标志，可以是中文、英文字母，也可以是符号、图案等。 设计网站色彩：适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。 设计网站字体：需要注意的是：使用非默认字体只能用图片的形式表示，因为浏览者的计算机里没有安装特别的字体，相应字体效果也无法实现。 二、制作步骤 1、确定网页大小（如：1024×768像素），设置标尺和辅助参考线，规划首页结构； 2、划分区块 区块的划分一般为：头（网站banner设计）、中上（网站LOGO与导航条设计）、中与下（栏目设计）； 3、以区块为单位创建图层组，区内的素材图像元素放在一个图层组文件夹中，以方位名称命名图层文件夹，以区位内容命名图层。 4、图片素材准备与图像制作，逐个区块进行设计，直至整张网页的PSD文件完成。 5、整张网页设计完成后，应用切片工具对整个图像切片并保存为Web格式文件。 Ⅱ、任务1