网页制作与网站设计教程567011048.pptVIP

* 第四周 网页制作与网站设计教程 淮安信息职业技术学院计算机科学与工程系 网页制作与网站设计课程组制 第八章网站建设实例 英语素材库备课辅助系统主页建设实例 ——网页制作与网站设计课程讲义 第八章网站建设实例 本章要点 网页效果图的制作流程 教育类网站的开发思路 Photoshop中路径的使用方法 Photoshop中层的样式的使用方法 效果图切片的技巧 网页导出后的后期修饰 英语素材库备课辅助系统---项目背景 第八章网站建设实例 《现代远程高等教育资源库》项目是国家教育部新世纪网络课程建设工程的一个主题项目，该项目的英语教学素材库子模块于2002年3月立项，目前已完成。在现有的素材库的基础上，开发适合教师电子备课的支撑平台，成为了进一步的重点开发目标。本系统是基于现有英语素材库的网上电子备课平台的一个界面。 英语素材库备课辅助系统---网站设计草图 第八章网站建设实例 背景图片 系统名称 子模块 子模块 子模块 子模块 子模块 子模块 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 过程演示 1.打开Photoshop软件，新建文件命名为“英语素材库备课辅助平台”，大小为：770像素*430像素，同时打开素材文件夹中的“楼.jpg”，将该图片拖到当前的图中去并且放到适当的位置，如图 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 2.用钢笔工具沿着楼体的走势绘制弧形路径，如图所示。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 3.新建图层“弧形”，选取前景色为与楼体类似的蓝色，回到路径面板中点击【描边】按钮，即可得到一条清晰而平滑的曲线，如图。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 4.双击“弧线”图层，给弧线增加投影效果，最终效果如图。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 5.打开素材文件夹中的“1.jpg” 到“6.jpg”，将这些图片拖到当前的图中去并且放到适当的位置，如图。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 6.将以上六个小图链接起来后，合并这些图层，再给该层增加阴影效果，如图所示。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 7.用文字工具添加“英语素材库辅助备课平台”文字，颜色设置为：F6530B，字体大小为24像素，效果如图所示。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 8. 用文字工具添加“E-Prepare”文字，颜色设置为：F6530B，字体大小为60像素，点击编辑菜单后选择“自由变换”工具将“E-Prepare”调整，效果如图8-8 所示。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 9.将“E-Prepare”文字复制一层，底层颜色设置为：897DA3，再通过向下和向右箭头分别移动2像素，给上层文字增加图层样式， “斜面与浮雕”与“渐变与叠加效果”（选择由蓝色到白色的过渡）的样式设置如图，效果如右图。 英语素材库备课辅助系统---效果图制作过程 第八章网站建设实例 9.用文字供给增加“图像资源”，字号12pixel，颜色为白色，设置外发光效果，同理“音频资源”、“视频资源”、“文字资源”、“查找资源”、“帮助信息”，效果可以直接复制，或直接将特效拖放到新的图层上就可以了，效果如图。 10.通过抓屏法到其他网页中抓取一个含有“按钮”和“文本框”的图片，然后再添加“用户名”和“密码”字样，本例的效果图到此就制作完成了。 英语素材库备课辅助系统---主页的输出 第八章网站建设实例 1.打开ImageReady CS软件，打开” 英语素材库备课辅助平台.psd”图片，复制“图像资源”层，设置外发光渐变为F0880A 过渡向透明，设置结束后隐藏该层，用切刀对该图片进行切割，如图。 演示 英语素材库备课辅助系统---主页的输出 第八章网站建设实例 2.当选中切片4（图像资源）时，打开“Web内容”面板，在该切片上点击右键，选择“增加滚动状态”选项（如左图），之后会发现在该面板下多了一个新的状态，“over”状态，此时进入“图层面板”，隐藏蓝色的“图像资源”层，显示橙色的“图像资源”层，最终的效果如右图 演示 英语素材库备课辅助系统---主页的输出 第八章网站建设实例 3.采用同样的方式，将其他的几个切片（音频资源、视频资源、文字资源、图像资源、查找资源、帮助信息）都做成类似的效果。 4.执行“文件”→“将优化结果存储为”命令，对效果图进行输出保存，命名为“index.html”，导出完成后即可使用浏览器预览效果。 演示 英语素材库备课辅助系