网页制作与网站设计教程.ppt

单击此处编辑母版,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第四周,网页制作与网站设计教程,淮安信息职业技术学院计算机科学与工程系,网页制作与网站设计课程组制,第八章网站建设实例,英语素材库备课辅助系统主页建设实例,网页制作与网站设计课程讲义,第八章网站建设实例,本章要点,网页效果图的制作流程,教育类网站的开发思路,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”,文字复制一层，底层颜色设置为：,897,DA3，,再通过向下和向右箭头分别移动,2,像素，给上层文字增加图层样式，“斜面与浮雕”与“渐变与叠加效果”（选择由蓝色到白色的过渡）的样式设置如图，效果如右图。,英语素材库备课辅助系统,-,效果图制作过程,第八章网站建设实例,9.,用文字供给增加“图像资源”，字号,12,pixel，,颜色为白色，设置外发光效果，同理“音频资源”、“视频资源”、“文字资源”、“查找资源”、“帮助信息”，效果可以直接复制，或直接将特效拖放到新的图层上就可以了，效果如图。,10.,通过抓屏法到其他网页中抓取一个含有“按钮”和“文本框”的图片，然后再添加“用户名”和“密码”字样，本例的效果图到此就制作完成了。,英语素材库备课辅助系统,-,主页的输出,第八章网站建设实例,1.,打开,ImageReady,CS,软件，打开”英语素材库备课辅助平台,.,psd,”,图片，复制“图像资源”层，设置外发光渐变为,F0880A,过渡向透明，设置结束后隐藏该层，用切刀对该图片进行切割，如图。,演示,英语素材库备课辅助系统,-,主页的输出,第八章网站建设实例,2.,当选中切片,4,（图像资源）时，打开“,Web,内容”面板，在该切片上点击右键，选择“增加滚动状态”选项（如左图），之后会发现在该面板下多了一个新的状态，“,over”,状态，此时进入“图层面板”，隐藏蓝色的“图像资源”层，显示橙色的“图像资源”层，最终的效果如右图,演示,英语素材库备课辅助系统,-,主页的输出,第八章网站建设实例,3.,采用同样的方式，将其他的几个切片（音频资源、视频资源、文字资源、图像资源、查找资源、帮助信息）都做成类似的效果。,4.,执行“文件”“将优化结果存储为”命令，对效果图进行输出保存，命名为“,index.html”，,导出完成后即可使用浏览器预览效果。,演示,英语素材库备课辅助系统,-,后期处理与网页编辑,第八章网站建设实例,演示,1.用,DreamWeaver,打开上图后，插入表格为,2行1,列，宽度为,100%,，高度为,100%,，第,1,行高度为,92%,，水平对齐方式为：水平对齐，垂直对齐方式为：中间对齐，第,2,行高为,8%,，将输出的网页表格选中剪切后，粘贴到第,1,行中，预览效果如图所示。,英语素材库备课辅助系统,-,后期处理与网页编辑,第八章网站建设实例,2.,在第,2,行中输入“,Copyright 2004-2007 HCIT,版权所有,:,淮安信息职业技术学院”，字号为,2,像素。,3.,选中“,index20.gif”(,用户名，密码所在的图片,),，观察大小宽,308,像素，高,32,像素，将其删除，同时设置背景图片为“,index20.gif”，,然后再次插入一个,1行5,列的表格，大小为宽,308,像素，高,32,像素。,4.,调整适当的大小，在第,1,列中输入“用户名”，第三列中输入“密码”，再往第,2,列、第,4,列中分别插入一个文本框，在最后一列中插入一个按钮。最终的预览效果如图所示。,英语素材库备课辅助系统,-,后期处理与网页编辑,第八章网站建设实例,第八章网站建设实例,本章小节,网页效果图的制作流程,教育类网站的开发思路,Photoshop,中路径的使用方法,Photoshop,中层的样式的使用方法,效果图切片的技巧,网页导出后的后期修饰,习题,1.在,Internet,上搜索与本系统类似的系统。,2.,课余时间搜集教学辅助系统。,谢谢大家！,第八章网站建设实例,