21栏式结构网页的制作2全解Word文档下载推荐.docx

21栏式结构网页的制作2全解Word文档下载推荐.docx

《21栏式结构网页的制作2全解Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《21栏式结构网页的制作2全解Word文档下载推荐.docx（11页珍藏版）》请在冰豆网上搜索。

9.219.22

课时

4

班级

高计1431

授课方式

讲授、演示、上机

作业题数

1

拟用时间

40’

教学目的

栏式结构网页中上下型网页的制作方法和技巧。

选用教具挂图

多媒体

重点

难点

栏式结构网页的制作的操作过程

教学回顾

学生通过对“栏式结构网页中上下型网页的制作”基本掌握了它的制作方法与技巧。

说明

审阅签名：

教学过程

第1页

第二章一节栏式结构网页的制作

（1）

一、课堂导入

为了进一网页布局是的动手操作能力现在我们就应用“栏式结构网页中上下型网页的制作出如下所示的网页：

二、新课讲授

（一）．操作步骤：

1．新建文件并划分大致布局

（1）启动PhotoshopCS5，新建宽度、高度分别为1004像素、640像素的文件，白色背景，文

件名保存为“Motorola.psd”。

（2）建立位置分别为90像素、460像素、580像素的水平参考线。

（3）建立2条垂直参考线，位置分别为770像素、975像素，结果如图2-8所示。

2．制作灰色背景

新建“灰色背景”图层，设置前景色为“#E3EIEl”，背景色为“#FEFEFE”，单击“矩形选框工具”

具”按钮，选择位置为90像素以上部分，单击“渐变工具”按钮，建立前景到背景的线性渐变，从选区下部往上拖曳；

设置前景色为“#E7E7E7”，单击“矩形选框工具”按钮，选择位置为460像素以下部分，使用前景色填充，效果如图2-9所示。

3．制作导航条

新建图层组“导航区”、“导航”和图层“导航白背景”，单击“矩形选框工具”按钮，选择“样

式”为“固定大小”，设置宽、高分别为670像素、20像素，绘制矩形选框，单击“渐变工具”按

钮，从选区左端向右端拖曳绘制白色到透明的渐变，插入素材文件“项目2/P2T1/素材／文字.txt”中

导航区中水平导航条下部分的文字，调整文字位置，效果如图2-10所示。

4．制作LOGO

（1）新建宽度、高度分别为140像素、65像素的文件，白色背景，文件名保存为“LOGO.psd”。

将素材文件“项目2/P2T1/素材／素材l.gif'

’拖曳到“LOGO.psd”中并调整大小及位置，修改图层名

称为“模子”。

新建图层组“LOGO”，图层“M”，单击“钢笔工具”按钮，模式为“路径”，沿白色M边缘绘制出路径。

（2）设置前景色为白色，将路径转换为选区，使用前景色填充，新建“黑色背景”图层，调整

“黑色背景”图层到“M”图层下方，单击“椭圆选框工具”鬟笼按钮，绘制一个直径为65像素的正圆

选区，填充黑色，调整位置。

（3）插入素材文件“项目2/P2T1／素材／文字.txt”中导航区下LOGO部分的文字，字体为

Ve，dana，大小为11像素，消除锯齿的方法为锐利，颜色为黑色，水平缩放为80%，字距50，仿斜体。

（4）关闭“LOGO”组并保存文件。

（5）选中“Motorola.psd”中的“导航区”组，将“LOGO.psd”中“LOGO”组中所有图像拖曳到

“Motorola．psd”中并调整位置，如图2-11所示。

（6）保存文件。

5．制作跳转菜单

（1）新建宽度、高度分别为240像素、20像素的文件，白色背景，保存为“跳转菜单.psd”。

新

建图层组“跳转菜单”和图层“跳转菜单背景”。

设置前景色为白色，建立比文件宽、高各小1像素

的选区，使用前景色填充，添加图层样式为“内阴影”，不透明度为10%，距离为2像素，大小为1

像素，添加图层样式为“描边”，大小为1像素，颜色为“#ABABAB”。

（2）新建图层，命名力“跳转按钮”，设置前景色为“#E5E5E5”，单击“矩形选框工具”匿胺钮，绘制

一个宽度、高度均为16像素的选区，使用前景色填充，添加图层样式为“内发光”，发光颜色为

“#FFFFFF'

’，阻塞为41u/o，大小为1像素，添加图层样式为“斜面和浮雕”，深度为1840/0，大小为0像素。

（3）新建图层，命名为“三角”，单击“自定形状工具”满篓按钮，模式为“填充像素”，形状为标

志3，颜色为黑色，绘制一个黑色三角，插入素材文件“项目2/P2T1/素材／文字.txt”中导航区下跳

转菜单相关文字，字体为Verdana，大小为12像素，颜色为黑色。

（4）关闭“跳转菜单”组，并保存文件。

（5）选中“Motorola.psd”导航区组，将“跳转菜单.psd”中“跳转菜单”组所有图像拖曳到

“Motorola.psd”中并调整位置，如图2-12所示。

6．制作搜索区域

（1）新建宽度、高度分别为215像素、20像素的文件，白色背景，保存为“搜索区域.psd”，新

建图层组“搜索区域”和图层“搜索框”。

设置前景色为白色，单击“矩形选框工具”圆按钮，绘制一个130像素x18像素的选框，用前景色填充，选择“跳转菜单.psd”中的“跳转菜单背景”图层，右击，选择“拷贝图层样式”命令，回到“搜索框”图层，右击，选择“粘贴图层样式”命令。

（2）新建图层“搜索背景”，设置前景色为“#EDEEEF”，背景色为“#CFD2D9”，单击“矩形选框

工具”I受j按钮，绘制一个51像素x18像素的选区，单击“渐变工具”|簇啦安钮，前景到背景，线性渐变，从顶部向下拖曳。

（3）新建宽度、高度分别为4像素、l像素的文件，白色背景，设置前景色为“#666666”，使用

前景色填充左端三个像素，按快捷键Ctrl+A选定整个画布，执行“编辑”_“定义图案”菜单命令，

将整个画布定义为图案“虚线”，给“搜索区域.psd”中的“搜索背景”图层添加图层样式“描边”，大小为1像素，填充类型为图案，图案为“虚线”。

（4）输入文字“SEARCH:

”，字体为Verdana，犬小为11像素，消除锯齿的方法为锐利，颜色

为“#1A9986”，水平缩放为80%，仿粗体，仿斜体。

（5）新建“按钮背景”图层，设置前景色为“#EDEEEF”，背景色为“#CFD2D9”，单击“矩形选框

工具”瞧剖按钮，绘制一个31像素×

18像素的选区，单击“渐变工具”按钮，前景到背景，线性渐

变，从选区顶部向下拖曳，复制“搜索背景”层样式到本层。

（6）新建“圆圈”图层，设置前景色为“#1896F4”，单击“椭圆选框工具”按钮，绘制一个直径为16像素的圆形选区，执行“编辑”——“描边”菜单命令，进行内部2像素的描边，新建“三角”图

层，单击“自定形状工具”按钮，模式为“填充像素”，形状为标志3，颜色为“#1896F4”，绘制一

个三角形，调整角度，关闭“搜索区域”组并保存文件。

（7）选中“Motorola.psd”中的“导航区”组，将“搜索区域.psd”中“搜索区域”组中的所有图像拖曳到“Motorola.psd”中并调整位置。

关闭“导航区”组并保存文件。

效果如图2-13所示。

7．制作主体形象区

（1）新建图层组“主体形象区”、“广告”，再新建图层“广告背景”，单击“矩形选框工具”按钮，绘制一个1004像素x367像素的矩形选区。

（2）单击“渐变工具”按钮，选择径向渐变，从左到右颜色分别为“#FFFFFF”、

“#FFFFFF”、“#1D8CE8”、“#01466E”、“#041529”，位置分别为0%、15%、30%、45%、65%，从选区左上向右拖曳，添加图层样式为“内阴影”，大小为7像素，添加图层样式为“描边”，大小为1像素，颜色为“#050505”。

（3）将素材文件“项目2/P2T1/素材／素材2.png”和“素材3.png”分别拖曳到“Motorola.psd”中并调整位置，将生成的新图层名称分别修改为“人物”和“红Z”。

（4）输入“RAZR”，字体为Arial，大小为103像素，消除锯齿的方法为浑厚，颜色为“#FFFFFF”，水平缩放为88u/0，仿粗体，仿斜体，输入其余文字内容，字体为Arial，大小为16像素，消除锯齿的方法为浑厚，颜色力“#FB0202”，仿粗体。

（5）输入“SEEALLTHESHARPFILMSBUYNOW”，字体为Arial，大小为16像素，消除锯齿的方法为浑厚，颜色为白色，水平缩放为80%，仿粗体，仿斜体，新建图层“白色三角”，单击“自定形状工具”按钮，模式为“填充像素”，形状为标志3，颜色为白色，在文字右侧绘制一个三角并调整角度，复制“白色三角”层并调整位置。

（6）新建宽度、高度分别为205像素、285像素的文件，白色背景，保存为“MOTOSTORE.psd”。

新建图层组“MOTOSTORE”，再新建图层“标题栏”。

单击“圆角矩形工具”麓按钮，模式为“填充像素”，半径为5像素，颜色为黑色，绘制一个203像素x28像素的圆角矩形。

（7）添加图层样式为“斜面和浮雕”，大小为1像素，角度为900，高度为100，添加图层样式为“描边”，大小为1像素，颜色为“#616161”。

（8）新建“高光”图层，设置前景色为白色，载入“标题栏”选区，使用前景色填充，删除10像素高以下的部分，设置图层不透明度为20%。

（9）新建“面板”图层，单击“矩形选框工具”圆按钮，绘制一个203像素x260像素的矩形（覆盖标题栏下部圆角），设置前景色为“#323131”，背景色为黑色，单击“渐变工具”}蘸列按钮，前景到背景，对称渐变，从选区中部向上拖曳，添加图层样式为“描边”，大小为1像素，颜色为“#616161”。

（10）将素材文件“项目2/P2T1/素材／素材4.jpg”拖曳到“Motorola.psd”中并调整位置，将生成的新图层名称修改为“图片”，添加图层样式为“外发光”，不透明度为300/0，颜色为白色，大小为1像素。

（11）插入素材文件“项目2/P2T1/素材／文字.txt”中主题形象区中MOTOSTORE相关内容，字体为LucidaSansUnicode，消除锯齿的方法为锐利，水平缩放为800/0，字距为25，仿粗体，其中“SHOPTHEMOTOSTORE”大小为14像素。

颜色为“#FB8AIA”，“PHONES”和“ACCESSORIES”大小为16像素，其他大小为12像素，除了“honeswithnewplan（U.S.ONLY）”颜色为“#FFB400”外，其他颜色为白色。

（12）新建“黄包三角”图层，单击“自定形状工具”按钮，模式为“填充像素”，形状为标志

3，颜色为“#FFBC04”，在文字左侧绘制一个三角并调整角度，复制2次“黄色三角”层并调整位

置，关闭“MOTOSTORE”组并保存文件。

（13）选中“Motorola.psd”中的“主体形象区”组，将“MOTOSTORE.psd”中“MOTOSTORE”组中

所有图像拖曳到“Motorola.psd”中并调整位置，关闭“主体形象区”组并保存文件，效果如图2-14

所示。

8．制作新闻区

（1）新建图层组“内容区”，再新建“新闻背景”图层，单击“矩形选框工具”圆按钮，绘制一个

690像素x23像素的矩形选区，使用白色填充，添加图层样式为“投影”，不透明度为300/0，角度

为-90。

，距离为1像素，大小为l像素。

（2）插入素材文件“项目2/P2T1/素材／文字.txt”中内容区下的新闻内容，字体为Arial，其