导学案(总).docVIP

项目八——网页设计 一个优秀的网站必定有着独具特色的网页设计，漂亮的网页页面能够吸引浏览者的注意力。设计网页时要根据网络的特殊性对页面进行精心的设计和编排。本章以制作多个类型的网页为例，介绍网页的设计方法和制作技巧。 课堂学习目标 ● 掌握网页的设计思路和表现手法 ● 掌握网页的制作方法和技巧 8.1.5 【实战演练】制作食品网页 使用矩形选框工具和椭圆形选框工具制作背景效果。使用椭圆形工具、圆角矩形工具、直线工具和文字工具制作图标和导航条效果。使用文字工具添加宣传性文字。（最终效果参看光盘中的“Ch08 效果 制作食品网页”，见图8-1。） 按Ctrl＋N组合键，新建一个文件：宽度为38.8厘米，高度为27.5厘米，分辨率为72像素/英寸，颜色模式为RGB，背景内容为白色，单击“确定”按钮。 新建图层并将其命名为“色块”，选择“矩形选框”工具，在图像窗口中绘制矩形选区，效果如图8-2所示。将前景色设为灰色（其R、G、B值分别为83、83、83）。按Alt+Delete组合键，用前景色填充选区，按Ctrl+D组合键，取消选区，效果如图8-3所示。 图8-2 图8-3 新建图层并将其命名为“形状”，选择“椭圆选框”工具，在图像窗口中绘制椭圆选区，效果如图8-4所示。按Ctrl+Shift+I组合键，将选区反选，如图8-5所示。 将前景色设为黄灰色（其R、G、B值分别为208、202、185）。按Alt+Delete组合键，用前景色填充选区，按Ctrl+D组合键，取消选区，效果如图8-6所示。在“图层”控制面板上方，将“形状”图层 “不透明度”选项设为30%，如图8-7所示，效果如图8-8所示。 图8-5 图8-6 图8-7 图8-8 图8-9 将前景色设为绿色（其R、G、B值分别为118、188、41），新建图层并将其命名为“圆形”，选择“矩形”工具，选中“填充像素”按钮，按住Shift键的同时，在图像窗口中的适当位置拖曳鼠标绘制图形，效果如图8-10所示。使用相同方法绘制其他图形，效果如图8-11所示。 图8-10 图8-11 选择“横排文字”工具，在适当的位置输入文字并选取文字，在属性栏中选择合适的字体并设置文字大小，在“图层”控制面板中生成新的文字图层，效果如图8-12所示。选中文字“完”，将文字颜色设为白色，并调整文字大小，效果如图8-13所示。 图8-1 图8-13 将前景色设为灰色（其R、G、B值分别为83、83、83），新建图层并将其命名为“导航条”。选择“圆角矩形”工具，将“半径”选项设为5px，选中属性栏中的“填充像素”按钮，在图像窗口中拖曳鼠标绘制圆角矩形，效果如图8-14所示。 将前景色设为白色，选择“横排文字”工具，在适当的位置输入文字并选取文字，在属性栏中选择合适的字体并设置文字大小，在“图层”控制面板中生成新的文字图层，效果如图8-15所示。 图8-14 图8-15 将前景色设为灰色（其R、G、B值分别为105、105、105），新建图层并将其命名为“直线”。选择“直线”工具，选中属性栏中的“填充像素”按钮，将“粗细”选项设为2px，按住Shift键的同时，在适当的位置拖曳鼠标绘制一条直线，效果如图8-16所示。使用相同方法绘制其他直线，效果如图8-17所示。 图8-16 图8-17 将前景色设为黄色（其R、G、B值分别为245、183、51），选择“横排文字”工具，在适当的位置输入文字并选取文字，在属性栏中选择合适的字体并设置文字大小，在“图层”控制面板中生成新的文字图层，效果如图8-18所示。 图8-18 按Ctrl＋O组合键，打开光盘中的“Ch08 素材 制作食品网页 01”文件，选择“移动”工具，将图片拖曳到图像窗口中适当的位置，效果如图8-19所示，在“图层”控制面板中生成新的图层并将其命名为“汉堡”。 将前景色设为灰色（其R、G、B值分别为83、83、83），选择“横排文字”工具，在适当的位置输入文字并选取文字，在属性栏中选择合适的字体并设置文字大小，在“图层”控制面板中生成新的文字图层，效果如图8-20