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

《网页制作与网站设计教程.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第四周网页制作与网站设计教程淮安信息职业技术学院计算机科学与工程系网页制作与网站设计课程组制第八章网站建设实例淮安信息职业技术学院网站建设实例——网页制作与网站设计课程讲义第八章网站建设实例本章要点网页设计的流程事业单位网站的设计思路Photoshop路径的描边技巧Dreamweaver满屏网页制作的技巧淮安信息职业技术学院网站建设实例---项目背景第八章网站建设实例淮安信息职业技术学院是经江苏省人民政府批准、教育部备案的一所全日制专科层次的普通高等学校。网页界面要简洁、大气能反映学院的性质。中国电信淮安分公司

2、10000号服务网站---参考淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例1.打开Photoshop软件，新建文件命名为“淮安信息职业技术学院”，宽为770像素，高为430像素。2.使用矩形选区工具选区矩形选区，设置前景色为蓝色（RGB值为0859AD）在图像中画一个矩形，然后用“油漆桶工具”将其填充（快捷键〈Ctrl+Delete〉）,如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例3.打开素材文件夹，找到“实验楼”图片，用椭圆工具将主楼选中如图8-27所

3、示：用多边形工具减去局部可得如图所示图形。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例4.将所选择的楼主体复制并粘贴到新图中，然后执行“编辑”→“自由编辑”命令，调整图像的大小（注意要保持图像的等比例变化）效果如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例5.在图层面板中点击按钮，执行“投影”命令，如图所示的界面，设置投影选项，可得效果如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例6.在工具箱中选中“椭圆工具”，在属性选项中

4、选中绘制椭圆型路径按钮，在图像中绘制椭圆路径，执行“编辑”→“自由编辑”命令，对其进行大小调整与旋转转换，同理绘制第二个椭圆，如图。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例7.建一个图层，设置前景色为浅蓝色，回到路径面板选择路径后点击描边按钮，即可得到如图8-33所示的效果，为了使椭圆和楼主体形成立体效果，用橡皮工具擦除部分图像，最终效果如图。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例8.新建图层，使用“椭圆选框工具”在图层中画一个适中的小圆圈，前景色设置为

5、蓝色（RGB值为0859AD）然后用渐变工具填充这个小圆，然后复制该图层（快捷键为〈Ctrl+J〉），复制同样的小圆图层4次，再将这几层相链接起来，使用“移动工具”，对这几层进行排列，使其和谐排列在椭圆线上，最终可以等到如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例9.选中小球所在的图层，在图层面板中点击按钮，执行“投影”命令，对以小球图层增加投影效果，参数如左图所示，最终效果如右图。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例10.打开素材文件夹中的院标

6、文件“院标.psd”，将院标拖到效果图中，放到适当的位置，调整大小，效果如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例11.打开素材文件夹中的院名文件“院名.psd”，将院名标拖到效果图中，放到适当的位置，然后设置图层的混合模式为“点光”模式，效果如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例12.在院名下面写上“HuaianCollegeofInformationTechnology”的文字,为了加强院名与英文名称的区别，新建一个图层，在新图层上

7、用单横线选取工具选取一条单横线，并用浅蓝色填充，然后将该图层点击【添加矢量蒙版】按钮，在蒙板图层上用渐变工具进行填充，多次调整后最终得到效果如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例13.用文字工具在左起第一个小球下写入“新区建设”，并调整这几个字的大小与字体，最后再给这几个字增加投影效果同理将“招生就业”，“图书馆”，“教务频道”，“人才招聘”等都写入，也运用同样的效果，如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例14.用文字工具写入“学院

8、概括”，“系部概况”，“公共服务”，“启迪网站”，设置为白色，效果如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例15.用矩形工具绘制一个大矩形，填充为蓝色，再在其中减去一个小矩形，减去右上的一小部分，就可得到一个新闻框图，对该框图层增加阴影效果，如图所示。淮安信息职业技术学院网站建设实例---效果图的制作第八章网站建设实例16.增加一些辅助性的的图标，添