网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第15章教案 项目十五 网页三剑客──制作一翔集团网页

1、项目十五 网页三剑客制作一翔集团网页,任务一 制作页眉,（一） 制作网站logo 【操作步骤】 1.启动Photoshop CS3，进入其操作界面，如图所示。,2.在菜单栏中选择【文件】【新建】命令，打开【新建】对话框，参数设置如图所示，然后单击 按钮创建一个图像文件。 3.单击工具箱底部的前景色按钮，在弹出的【拾色器】对话框中设置颜色参数，如图所示，然后单击 按钮。,4.在工具箱中用鼠标右键单击 （自定形状工具）按钮，在弹出的隐藏 工具组中选取工具，并激活工具属性栏中的 按钮，然后按住Shift键，在图像窗口中的适当位置拖曳鼠标光标，绘制一个圆形，如图所示。,5.在菜单栏中选择【图层】【图层样式】【描边】命令，打开【图层样式】对话框，参数设置如图所示，其中颜色设置为黑色。,6.单击 按钮，添加图层样式后的效果如图所示 。 7.在菜单栏中选择【图层】【复制图层】命令，打开【复制图层】对话框，单击 按钮，将“形状 1”层复制生成为“形状 1副本”层。 8.在菜单栏中选择【图层】【图层样式】【清除图层样式】命令，将“形状1副本”层中的图层样式删除。,9.单击工具属性栏中的 按钮，在弹出的【

2、拾取实色】对话框中将“形状 1副本”层中的颜色修改为黑色，然后在【图层】面板中将其【图层混合模式】设置为“滤色”，如图所示。,10.在菜单栏中选择【图层】【图层样式】【内阴影】命令，弹出【图层样式】对话框，参数设置如图所示。,11.在【图层样式】对话框中，切换到【渐变叠加】样式，并进行参数设置，如图所示。,12.在绘制的图形上按下鼠标左键进行拖动，调整渐变叠加颜色的位置，如图所示。,13.单击按钮，然后将“形状1副本”层复制生成为“形状 1副本 2”层，然后将鼠标光标移动到效果层左侧的眼睛图标上单击，将“形状1副本2”层中的内阴影效果层隐藏，其状态如图所示。 14.双击“形状 1副本 2”层下面的“渐变叠加”样式层，打开【图层样式】对话框，将渐变叠加的颜色光晕移动到圆形的右下边位置，如图所示。,15.修改【图层样式】对话框中的参数，如图所示，然后单击 按钮 。 16.在【图层】面板中，单击底部的 （创建新图层）按钮，在【图层】面板中新建“图层1”，然后按X键，将前景色和背景色互换。 17.选取工具，单击属性栏中的 按钮，弹出【自定形状】样式面板，再单击面板右上角的按钮，选择【全部】命令

3、，然后在弹出的提示对话框中直接单击 按钮，即可在【自定形状】样式面板中增加更多的样式，最后选取图所示的样式如图。,18.在圆形上拖曳鼠标光标，绘制出所选择的图形，然后在工具箱中单击 （移动工具）按钮，通过移动鼠标光标来调整图形的位置。 19.在工具箱中单击 （ 横排文字工具）按钮，在属性栏中设置其属性，并在图像窗口中输入文本，文本的颜色为黑色，并可使用 （移动工具）调整其位置，如图所示 。,20.在图层面板中新建一个图层，继续在图像窗口中输入文本，设置文本的颜色为橘黄色（R:250,G:100），如图所示。,21.在菜单栏中选择【文件】【存储】命令，打开【存储为】对话框，在此对话框中设置文件的名称、存储类型以及存储路径等，这里分别保存为两个文件，一个是“logo.psd”，另一个是“logo.gif”。至此，网站logo就制作完成了。,（二） 制作宣传标语 【操作步骤】 1.在菜单栏中选择【文件】【新建】命令，打开【新建】对话框，参数设置如图所示。,2.单击 按钮创建一个图像文件，并将其暂时保存为“welcome.psd”。 3.在工具箱中单击（竖排文字工具）按钮，在属性栏中设置其属性

4、，并在图像窗口中输入文本“创新”，设置文本的颜色为红色，然后运用同样的方法输入文本“科技”，如图所示。,4.在【图层】面板中选择“科技”图层，在工具箱中单击（竖排文字工具）按钮，在属性栏中设置文本的颜色为绿色，这时文本“科技”的颜色变为绿色，如图所示。,5.在【图层】面板中，选择“创新”图层，然后在菜单栏中选择【图层】【图层样式】【斜面和浮雕】命令，参数设置如图所示，最后单击按钮加以确认。,6.在菜单栏中选择【图层】【图层样式】【拷贝图层样式】命令复制“创新”图层的图层样式，然后在【图层】面板中选择“科技”图层，并在菜单栏中选择【图层】【图层样式】【粘贴图层样式】命令将“创新”图层的图层样式应用到“科技”图层上，如图所示。,7.在工具箱中单击 （直线工具）按钮，并设置属性栏中的相关参数，其中样式为“Yellow Paper Clip”，如图所示。 8.按住Shift键不放，在窗口中绘制6条直线，如图所示。,9.在【图层】面板中新建一个图层，然后在工具箱中单击 （横排文字蒙板工具）按钮，在属性栏中设置其属性，并在图像窗口中输入文本，设置文本颜色为白色，如图所示。,10.将鼠标光标移至文字

5、蒙板的外侧，当鼠标光标呈现图所示形状时，按下鼠标左键并拖动，调整文字的位置。 11.单击工具属性栏中的（提交所有当前编辑）按钮，或按Ctrl+Enter键确定输入，此时得到图所示的文字选区 。,12.在菜单栏中选择【编辑】【描边】命令，打开【描边】对话框，参数设置如图所示，其中颜色为黑色，【位置】为“居外”。,13.在菜单栏中选择【选择】【取消选择】命令，取消选区的选择状态，如图所示。 14.在【图层】面板中再新建一个图层，然后运用相同的方法输入文字“就是力量”并进行相应设置，如图所示。,15.在【图层】面板中再新建一个图层，然后在工具箱中单击按钮，并设置工具属性参数，其中颜色为“#948f8f”，形状为“Right foot”，样式为“Yellow Paper Clip”，最后在窗口中绘制出两个脚印，如图所示。将文件保存为“welcome.psd”和“welcome.gif”两个文件。,（三） 布局页眉 【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下，并将上面制作的图像文件“logo.gif”和“welc

6、ome.gif”复制到站点的“images”文件夹中。 2.在站点中创建网页文件“index.htm”，并针对该文档重新定义标签“body”的CSS样式，设置文本大小为“12像素”，背景颜色为“#FFFFCC”，文本对齐方式为“居中”，如图所示。,3.在【文档】工具栏的【标题】文本框中输入显示在浏览器的标题“一翔集团主页”。 4.在菜单栏中选择【插入】【表格】命令，在文档中插入一个1行4列的表格，其属性设置如图所示。,6.设置第1个单元格的宽度为“200”，在其中插入图像“logo.gif”。 7.设置第2个单元格的宽度为“580”、水平对齐方式为“右对齐”，在其中插入图像“welcome.gif”，如图所示 。页眉布局完毕后保存文件,任务二 制作主体,（一） 制作宣传动画 【操作步骤】 1.启动Flash 8，首先出现版权页，然后会出现开始页，如图所示。,2.在开始页中单击【创建新项目】栏的【Flash文档】选项，创建一个Flash文档，如图所示。,3.在菜单栏中选择【文件】【保存】命令将文件暂时保存为“yixiang.fla”。 4.在【属性】面板中单击【大小】右侧的 按钮（或者在

7、舞台上单击鼠标右键，在弹出的快捷菜单中选择【文档属性】命令），打开【文档属性】对话框，设置文档的尺寸、背景颜色和帧频，如图所示，然后单击 按钮加以确认。,5.在菜单栏中选择【文件】【导入】【导入到库】命令将“项目素材/flash”文件夹下的图像素材导入到【库】面板中，如图所示。,6.将【库】面板中的图像“bg1.jpg”拖到舞台上，然后在菜单栏中依次选择【修改】【对齐】【水平居中】和【垂直居中】命令，使图像居中对齐。 7.在时间轴的图层列表区，双击“图层1”，将其名称修改为“背景”，然后按Enter键确认。 8.在时间轴的第35帧处单击鼠标右键，在弹出的快捷菜单中选择【插入关键帧】命令插入一个关键帧，如图所示 。,9.在图层列表区单击左下角的 （插入图层）按钮，在【背景】图层上再插入一个图层，并将其名称修改为“遮罩”。 10.在工具栏中单击 （矩形工具）按钮，然后在舞台中绘制一个可以将背景图像全部遮住的矩形，如图所示。,11.在“遮罩”图层的第35帧处插入一个关键帧，然后将播放头移至第1帧，在工具栏中单击 （选择工具）按钮，在【属性】面板中将矩形的宽度设置为“1”，如图所示。 12.单

8、击“遮罩”图层的第135帧中的任意一帧，然后在【属性】面板的【补间】下拉列表中选择【形状】选项，如图所示。,13.在图层列表区，用鼠标右键单击“遮罩”图层，在弹出的快捷菜单中选择【遮罩层】命令，将该层转换为遮罩层，然后将“背景”图层第35帧处的关键帧拖动到第80帧处，如图所示。,14.在图层列表区单击左下角的 （插入图层）按钮，在【遮罩】图层的上面再插入一个图层，并将其名称修改为“文字”。 15.在“文字”图层的第35帧处插入一个关键帧，然后用鼠标单击工具栏中的 （文字工具）按钮，在舞台上输入文本“民族的就是世界的！”，接着单击工具栏中的 （选择工具）按钮，将文本拖动到舞台左外侧，其【属性】面板参数设置如图所示，其中文本颜色为“#CC3300”。,16.在【文字】图层的第80帧处插入一个关键帧，然后单击工具栏中的（选择工具）按钮，并在菜单栏中选择【修改】【对齐】【水平居中】命令将文本居中显示，如图所示。 17.单击“文字”图层的第3580帧中的任意一帧，然后在【属性】面板的【补间】下拉列表中选择【动画】选项，如图所示。,18.在菜单栏中选择【控制】【测试影片】命令，测试动画的播放效果，

9、如图所示。 19最后在菜单栏中选择【文件】【保存】命令再次保存文件。,20.在菜单栏中选择【文件】【导出】【导出影片】命令，打开【导出影片】对话框，设置文件名称、类型及保存位置，如图所示。 21.单击按钮打开一个文件参数设置窗口，如图所示，直接单击按钮将出现一个导出进度条，很快作品就被导出为一个独立的Flash动画文件了 。,（二） 布局主体页面 【操作步骤】 1.将制作的Flash动画“yixiang.swf”复制到站点的“images”文件内。 2.在页眉的下面插入一个1行1列的表格，并设置其背景图像为“image/bg.jpg”，如图所示。,3.在表格下面继续插入表格，属性设置如图所示 。 4.将鼠标光标置于单元格中，然后在菜单栏中选择【插入】【媒体】【Flash】命令，将制作的Flash动画插入到单元格中。 5.在【属性】面板中设置Flash动画为循环自动播放，如图所示。,6.将第2步制作的表格复制粘贴到Flash动画所在表格的下面。最后再次保存文件。至此，网页主体部分就制作完了。,任务三 制作页脚,（一） 制作导航图像 【操作步骤】 1.在菜单栏中选择【文件】【新建】命令，打开【新建】对话框，参数设置如图所示，然后将其保存为“nav.psd”。,2.在工具箱中单击（渐变工具）按钮，然后设置工具属性，其中颜色条左端色标的颜色为“#1ab58f”，右端色标的颜色为“#ffffff”，如图所示。,3.按住鼠标左键不放，在文档窗口中从左向右拖动鼠标光标，如图所示 。 4.释放鼠标左键，在文档窗口中形成了渐变效果，如图所示。,5.在【图层】面板中新建一个图层，然后在工具箱中单击（横排文字工具）按钮，并设置工具属性，其中颜色为白色，如图所示。 6.在文档窗口中输入文本，按Ctrl+Enter键确认，并适当调整其位置，如图所示。,7.保证在【图层】面板中选中文字图层，然后在菜单栏中选择【图层】【图层样式】【描边】命令，打开【图层样式】对话框

《网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第15章教案 项目十五 网页三剑客──制作一翔集团网页》由会员E****分享，可在线阅读，更多相关《网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第15章教案 项目十五 网页三剑客──制作一翔集团网页》请在金锄头文库上搜索。