路径、渐变工具 - 网页设计精品课程学习网站.pptVIP

本课练习 本课练习 本课练习 课程内容——网页的页面排版 (1)标准型 (2)偏置型 (3)上下型 (4)标题型 (5)左右型 (6)封面型 (7)Flash型 课程内容——网页的页面排版 3、第三步是进行页面的信息布局，也就是在网页框架的不同版面区域内安排内容。在进行页面的信息布局时应该把主要信息放置到显要的页面位置。例如：把网站的标志放置在页面左上角，最新新闻应该放置在页面的中间，如果页面框架是三分栏结构，那么就应该把主打内容放置在中间栏，其它相对不重要的信息模块放置在两侧栏中。 4、第四步是设计网页的页面版面。当网站的主题、网页的版面结构和信息结构确定好之后就应该用具体方法技术来实现网页的页面排版。首先，绘制页面草图。其次，用图像处理软件Photoshop设计与制作。 课程内容——切片 使用切片工具可以把设计好的网页图稿切成一片片的图像和一个个表格。这样可以让每张图像单独优化以及利于网络传输、下载。利用切片工具切出大致的网页框架后，还可以利用网页编辑工具Dreamweaver进一步编辑和调整。 1、创建切片 （1）使用切片工具创建切片 （2）使用辅助线创建切片 （3）基于图层创建切片 课程内容——切片 2、编辑切片 （1）选择、移动和调整切片 （2）删除和提升切片 （3）划分切片 （4）显示和隐藏自动切片 （5）调整切片的叠层 3、导出网页 （1）切片选项的设置 （2）优化和和输出HTML网页 制作设计公司网站的导航条效果图如右下所示。 操作要点： （1）新建文件宽“500px”，高“50px”，背景为白色； （2）制作导航背景图层。创建“500px x 30px“的矩形选区，填充前景色，然后设置“渐变叠加”图层样式，渐变条上，两端色标为“#87B6D4”，中间色标为“#4D8EBA”。“描边”图层样式的颜色为“#4D8EBA”。 （3）制作斜纹图层。选择斜线条纹填充导航背景区域。然后将图层不透明度改为“43%”。 （4）制作“左上角图块”图层。先绘制选区，接着填充渐变色为“#366F99”到“#5891BA” ，然后添加“内阴影”和“描边”图层样式。通过复制“左上角图块”图层得到“右下角图块”。 （5）制作分隔线。用白色和“#316B94” 绘制如右图所示的图像。然后把分隔线顶上小段和底下小段处理成“过渡到透明”。 用切片工具切割下面所示网页图像，生成网页。 使用切片工具分割图像时，注意事项： 明确规划出要创建互动效果的位置。 先查看画面，决定哪些区域必须保持较高的质量，哪些区域可以使用较大的压缩率。 如果图像中存在近似单色的区域，则要将它分割为单独的切片。 尽可能采用井字形分割，避免保存之后的HTML编码出现问题。。 院级精品课程 图像处理——Photoshop 网页美工设计 项目概述 1 任务1 路径、图层样式和渐变工具的应用 2 任务2 使用Photoshop制作网页 3 4 项目概述 一、项目描述 本项目是学习使用Photoshop进行网页图像美化、网页排版、网页生成等网页美工设计技术。通过该项目的学习，应该进一步理解Photoshop图层样式、路径、渐变工具、切片工具的功能和操作应用，掌握利用 Photoshop进行网页创意设计与制作的思想与方法。 该项目共两个任务： 1、路径、图层样式、渐变工具的应用 2、使用Photoshop制作网页 项目概述 二、该项目的基本知识要求 掌握路径的绘制、编辑与操作 掌握图层特效的设置与图层样式的操作 掌握渐变工具的使用方法和渐变样式的编辑 了解色彩的三要素和Web安全色的使用 掌握网页色彩的搭配技巧 掌握网页的页面排版 掌握切片工具切割网页图像和优化与输出网页的方法 项目概述 三、该项目的能力要求 路径的绘制、编辑和路径的复制、变形与组合操作 图层样式的设置和图层样式的新建、复制、停用与清除等操作 渐变工具的使用方法与编辑平滑渐变样式、杂色渐变样式的操作 Web安全色的使用与色彩的搭配技巧 网页框架的规划与设置 网页图像与网页的整体创作 切片的创建、选择、移动、调整、提升、删除、划分与叠层顺序的调整 切片的优化和网页图像的输出 项目概述 四、学时要求 该项目共6学时。基础知识的讲解分两次进行，第1次讲解1学时，第2次讲解2学时，第1次讲解后练习1学时，第2次讲解后练习2学时。第3次，要求学生根据网站主题，进行网站主页图像的创意设计与制作。 五、考核方法及要求 完成实训指导书中4-3题目的制作，个人在规定时间内提交，以相似性、完整性和创意性来评定成绩。 完成项目设计 路径、图层样式、渐变工具的应用 学习任务1的目的 1 本课任务 2 内容讲解 3 技能练习 4