学生优秀作品展示页面制作
过程:
1. 在PS里面新建一个3像素*3像素的文件,制作这样的图案。保存为“beijing2.jpg”。
(放大到3200%的样子)
2. 新建一个20像素*20像素的文件,填充上面的图案。用圆形选区画出1/4圆填充颜色,
保存为“biankuang.jpg”和“biankuang2.jpg”。
(放大到400%的图像)
3. 新建一个91*30像素的文件,填充颜色,用圆角矩形工具画出一个居中下方的矩形。保
存为“daohang3.jpg”。
(放大到300%)
4. 新建一个786*192像素的文件,填充绿色,用滤镜和调色制作玻璃碎片的效果。用加深
减淡工具做一些处理。
复制多一层,执行滤镜-画笔描边-喷溅,滤镜-模糊-径向模糊。颜色模式为滤色。
新建一层制作渐变。颜色模式为强光。
输入文字。为文字添加一些图层样式,例如斜面浮雕,投影,发光,描边等。
保存为“daohang2.jpg”。
5. 用同样的底纹输入不同的文字。例如“网页设计学生优秀作品展示”,同样保存
“wangyesheji.jpg”。
6. 把一些图片保存,裁切为160*160像素的图片。
7. 在dreamweaver里面新建站点命名为“优秀学生作品展示”。把上面的图片都保存到站
点里面的images文件夹里面。
8. 新建一个786像素宽的表格,无边框。设置居中在页面,背景填充“beijing2.jpg”。
有这样的填充效果。
9. 在表格里面新建一个表格,把背景设置为“daohang2.jpg”填充。
10. 在下方再建一个表格100%宽度,填充颜色#00566A。在这个表格里面建一个60%的表
格居中。再在这个小表格里面新建5个宽度分别为20%的小表格。这5个小表格都背景
填充daohang3.jpg”。然后输入文字,文字垂直方向贴底部。效果如下。
11. 在下行建一个表格,两列一行,宽度100%,左边一列的宽度为15%。在右边建一列八
行的表格。在8行的每个表格里面这样建表格。(怎么那么多表格,好烦。)有些忘记当
初是怎么建的了,貌似是三行两列,左边那列宽度为20像素,上下两个小方块的像素
都是20*20,分别填充“biankuang.jpg”和“biankuang2.jpg”。右边中间那个里再建一行
三列的表格,左边的设置160*160像素,填充#2DE4AC,中间的宽度10像素,右边的
格子里面再建一个两行一列的表格,分别写“网页设计”和各个网站的名字。
12. 接下来就是复制复制复制。改变下字就OK啦。
保存为“zhuye.html”。
13. 用同样的方法,可以算是复制多一个出来。然后换个导航,换文字,添加图片就形成了
网页设计的作品展示页面。
14. 为文字添加链接。选中文字。在链接的地方输入一个网址或者另一个文件的地址。为了
美观,把链接的字体都弄成白色字无下划线了。