刘莎网页设计与制作论文 (1)
- 格式：doc
- 大小：455.00 KB
- 文档页数：7
邵阳学院
课程设计报告
课程设计题目：
网页设计与制作
姓 名： 刘 莎
学 号： 1040102064
专 业: 管理科学
班 级: 10管理科学2班
2011年10月10日
目 录
一 网页设计与制作的版面布局 ............................................. 3
1网页的布局结构 .................................................................................................................... 3
2网页的布局设计 .................................................................................................................... 3
二 网页的风格的设计与制作 ............................................... 4
三 网页图像的制作方法 ....................................................... 5
四 网页刘莎个人网站主页的设计与制作方法 ....................... 6
五 心得体会 ............................................................................. 7
一 网页设计与制作的版面布局
刘莎个人网站的主要版面，我选择的布局形式为：页面上部是网站的标志、
名称、背景图片以及导航条，左边是个人简历、用户登陆、生活照，右边是最近
更新、留言簿，中间是考试成绩、自拍照，页面底部是版权信息等。
1网页的布局结构
从下图中可以看出，网页的整体布局结构划分为四行（从上到下），第一行
来制作Logo，第二行制作导航，第三行制作内容，第四行制作版权信息。然后
在第三行又拆分为三列（从左到右），分别在左中右三列中制作不同的内容。
在这个基础上，可以对网页布局进行更细致的拆分，如果说前面的拆分是用
来制作网页的大框架，那么接下来拆分的就是内容区域了，这里分析的方法和前
面是完全一样的，将上一段所说的三列按如下方法拆分：第一列拆分为三行，第
二、三列拆分为两行。
2网页的布局设计
网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可
以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读
的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、
界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好
的机会找出吸引他的东西。
简单来说，可以把网页中的内容看成是一个一个的“矩形块”，把多个“矩形
块”按照行和列的方式组织起来，就构成了一个网页。下面举例来进行说，如1
所示，为邵阳学院刘莎个人网站的网页效果图。
图1
二 网页的风格的设计与制作
布局形式为：页面上部是网站的标志、名称、背景图片以及导航条，左边是
个人简历、用户登陆、生活照，右边是最近更新、留言簿，中间是考试成绩、自
拍照，页面底部是版权信息等。
对称对比布局：该类结构采取左右对称布局，一般多用于设计型站点。该种
结构的优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。
三 网页图像的制作方法
网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会
使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。
而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览
者的易读性。
所以我选择了绿色和橙色为主色，让整个网站能产生很好的视觉效果，使人
舒服地浏览网页。
利用Dreamweaver你可以轻轻松松让图像呈现出阴影、模糊、运动、
光晕、波浪、淡入淡出等众多效果，下面我们就来具体了解一下图像特效的制作
方法。
在Dreamweaver中为图像制作特效，实际上就是利用样式表（CSS）
功能来定义图像的各种参数，让它呈现出各种特技效果，但是这些特效并不增大
图像文件的大小，所以不会影响页面的下载速度，这对于我们有限的网络带宽来
说是非常宝贵的。下面我们首先来看如何创建一个样式表。
1.单击Window菜单下的CSS Styles命令，或按F7键，弹出样式表
编辑窗口。
2.单击样式表编辑窗口中的New按钮，弹出对话窗口，在该窗口中选
择“Make Custom Style”选项，然后单击OK。
3.在弹出的定义样式表窗口中，单击Category下的Extensions类型，
然后在Filter项目中选择一个图像特效类型，定义它的各种参数。Dreamweaver
内置有16种图像特效类型。
4.定义完毕，单击OK，回到样式表编辑窗口。
5.选定页面上的图像，将生成的样式表作用于该图像。
6.保存该网页，然后在浏览器中打开，就可以看到图像的特效了。
四 网页刘莎个人网站主页的设计与制作方法
依据上面所述的方法利用其布局，整理出网页的大概框图
调整以色彩学简单的冷色系与暖色系，利用Dreamweaver，编辑网页的图
片效果，把一张用模糊效果渲染。
最上面用一幅背景图，添加链接，首页，个人简历，学习成绩，照片，个人
爱好，小论文，心得体会、友情链接。
大体就这样布局，其他最新更新、留言簿等添加就好了。
五 心得体会
“Dreamweaver”“Photoshop”“Flash”有了大致的认识，页初步了解了它
们的用法，知道了网页制作的简单步骤和方法，在这里要感谢老师对我们的培养！
这次的“课程设计”，是我人生中得第一个“网页设计”，对我来说恨重
要，但也做得相当辛苦。由于什么都是第一次，所以我不断在摸索中前进，中途
得困难与可想而知。经历了种种的挫折，终于完成了我的题目——“邵阳学院刘
莎个人网站的设计与制作”。虽然我知道我在作品中运用的技术都是些皮毛，网
页的设计搭配也不是很合理，但我相信，在以后的时间里我会不断前进！
从拿到题目到网页制作完毕，历时一个星期，在这段时间里我翻阅了一
些关于制作网站的书籍，也从中学到了很多知识。我做的题目是关于“韩国风格
时尚服饰”,应该以新颖，创新为特色，但由于自己的知识尚浅，不能把自己的
想法在网但由于自己的知识尚浅，不能把自己的想法在网页上，但我相信经过，
我不懈的努力一定会有所进步。面对自己做的网页，我不知道该用如释重负还是
该用惭愧不已来形容，但这两个词的确是我的真实想法。如释重负，因为我的网
页做好了，可以交上去了；惭愧，则是因为自己的网页做的很幼稚，还大不到自
己的要求。我会在以后的日子里不断学习争取进步。
我从一个网站上看到以下的文字，在这里我引用一下：
正如所谓“一千个读者就有一千个哈姆雷特”，对于主页的好坏，每位
网友都有自己的评价标准。但要做好网页还是应该有以下几点：
以上就是我这次“课程设计”心得体会，在这次课程设计的过程中，我
学到了很多平常学不到的东西，我要感谢我的老师，我想说一声，老师，您辛苦
了！
