文档介绍：邵阳学院
课程实验报告
课程名称:网页设计
系别专业班级学号姓名
目录
网页设计与制作的版面布局
1网页的布局结构
2网页的布局设计
网页的风格的设计与制作
网页的图像的制作方法
个人网页的设计与制作方法
心得体会
邵阳学院
课程实验报告
课程名称:网页设计
系别专业班级学号姓名
目录
网页设计与制作的版面布局
1网页的布局结构
2网页的布局设计
网页的风格的设计与制作
网页的图像的制作方法
个人网页的设计与制作方法
心得体会
个人网页设计
一、网页设计与制作的版面布局
在考虑个人网页的主要版面,我们选择的是“三层式”布局:页面上部是网站的标题和导航栏,中间是图片,下面是友情连接
1、网页的布局结构
从上图中可以看出,网页的整体布局结构划分为四行(从上到下),第一行来制作logo,第二行制作导航,第三行制作内容,第四行制作版权信息。在这个基础上,可以对网页布局进行更细致的拆分,如果说前面的拆分是用来制作网页的大框架,那么接下来拆分的就是内容区域了,这里分析的方法和前面是完全一样的。2、网页的布局设计
网页的布局设计,就是指网页中图像和文字之间的位置关系,简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责,只有这样,浏览者才有更好的机会找出吸引他的东西。
简单来说,可以把网页中的内容看城是一个一个的“矩形块”,把多个“矩形块”按照行和列的方式组织起来,就构成了一个网页。
二、网页的风格的设计与制作
“门”形布局:页面上部是网站的标志和广告条,左面是主菜单,
右面放友情链接等,中间是主要内容,布局类似于一个“门”字。
对称对比布局:该类结构采取左右或者上下对称布局,一半深色,一般浅色,一般多用于设计型站点。该中结构的优点是视觉冲击力强,缺点是将两部分有机地结合比较困难
利用Dreamweaver你可以轻松让图像呈现出阴影、模糊、运动、光晕、波浪、淡入、淡出等众多效果,你再也不用为了达到某种图像效果而动用Photoshop。
在Dreamweaver中为图像制作特效,实际上就是利用样式表
(CSC)功能来定义图像的各种参数,让它呈现出各种特技效果,但
是这些特效并不增大图像文件的大小,所以不会影响页面的下载速度,这对于我们有限的网络宽带来说是非常宝贵的。
三、网页图像的制作方法
1、单击Window菜单下的CSSStyles命令,或按F7键,弹出样式表
编辑窗口。
2、单击样式表编辑窗口中的New按钮,弹出对话窗口,在该窗口中
选择“MakeCustomStyle”选项,然后单击OK。
3、在弹出的定义样式表窗口中,单击Category下的Extensions类型,然后在Filter项目中选择一个图像特效类型,定义它的各种参数。Dreamweaver内置有16种图像特效类型。
4、定义完毕,单击OK,回到样式表编辑窗口。
5、选定页面上的图像,将生成的样式表作用于该图像。
6、保存该网页,然后在浏览器中打开,就可以看到图像的特效了。
面请欣赏我的个人网页,欢迎访问站点: