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