21栏式结构网页的制作2全解Word文档下载推荐.docx
- 文档编号:13682576
- 上传时间:2022-10-12
- 格式:DOCX
- 页数:11
- 大小:1.31MB
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,其
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 21 结构 网页 制作