目录
一、设计目的 ________________________ 3 二、设计思想 ________________________ 3 三、网页详细设计分析 ________________ 4
（1）建立布局 __________________________________________________________ 4 （2）网页中的图像 ______________________________________________________ 4 （1）在网页中插入图像 __________________________________________________ 4 （2）图像的各种属性设置 ________________________________________________ 5 （3)怎样编辑网页中的图像 ________________________________________________ 6 (4）使用背景图像 ________________________________________________________ 7 (5）设置链接 ____________________________________________________________ 8
四、网页说明 ________________________ 8 五、总结 ___________________________ 10
2 / 10
东北大学秦皇岛分校3123420
网页设计试验报告
一、设计目的
本课程的设计目的是通过实践使我经历Dreamweaver 8开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver8可视化开发工具进行网页开发的方法；了解网页设计制作过程。我本次主要是设计的“祖国六十年\"为主题的网页，针对祖国六十年的发展了介绍。
二、设计思想
利用Dreamweaver8制作一个关于“祖国六十年”的网站，利用表格、行为、层和链接等网页设计技术设计页面。
本网站以新中国发展为素材，主要讲解了与新中国变化相关的内容。
各网站链接示意图如下所示：
3 / 10
东北大学秦皇岛分校3123420
祖国六十年 国情总览 经济发展 航天事业 武器装备 人口增长 环境保护 法律体系 教育体系 卫生体系 北京 上海 深圳 天津 杭州 东方红一号 神州五号 嫦娥一号 神州八号 天宫一号 红鸟导弹 翼龙无人机 L—15教练机 99式坦克 辽宁号 三、网页详细设计分析
(1)建立布局
在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver 8是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助,很难组织出一个协调合理的页面。
（2)网页中的图像
（1）在网页中插入图像
利用Dreamweaver 8可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：
4 / 10
东北大学秦皇岛分校3123420
1.新建一个空白网页，把光标定位在网页的开始位置。
2.打开“工具”菜单,选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框.
3.在此对话框中单击“浏览\"按钮，出现一个“选择文件”对话框。
4.在“选择文件\"对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。
(2)图像的各种属性设置
1。选中所插入的图片，单击鼠标右键，弹出一个快捷菜单,在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框。
2。打开“外观”选项卡。
（1）设定图像边框粗细：在“外观”选项卡的“布局\"栏里可以根据需要定义图像的边框，也可以定义边框值为“0\即无边框.
(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像,要求右边的文字就像没有图像时可以多行输入,这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：
①左环绕：图像在左边，文本在图像的右边进行环绕。 ②右环绕:图像在右边,文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框,选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右
5 / 10
东北大学秦皇岛分校3123420
环绕方式.
（3）编辑图像大小：在Dreamweaver8中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。
（4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口,还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化,与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下:
1。选中网页中的图像,单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项,弹出一个“图像属性”对话框.
2。在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比\"单选按钮，然后在“宽度”和“高度\"栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距\"栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。
（3)怎样编辑网页中的图像
在Dreamweaver8中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有:图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
6 / 10
东北大学秦皇岛分校3123420
另外，为了使图片更符合要求，我们还在photoshop中对所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。
(4）使用背景图像
使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充,而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：
1。新建一个空白网页。
2.单击鼠标右键，弹出的快捷菜单里选“网页属性\"，弹出“网页属性”对话框。
3.开“背景”选项卡.
4。在“背景”选项卡的“格式\"栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮,出现一个“选择背景图片”对话框。
5。在“选择背景图像”对话框中单击“浏览文件”按钮,出现一个“选择文件”对话框。
6。在“选择文件\"对话框的文件列表中选择图像文件，单击“确定”按钮.
这样，所选图片将作为整个网页的背景,如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时,背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸
7 / 10
东北大学秦皇岛分校3123420
引人。
(5）设置链接
选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页.我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询.
四、网页说明
1。在首页中
分别连接在不同的网页中
友情链接，连接到与之对应的网站,同时在其他
网页中也用同样的作用.
8 / 10
东北大学秦皇岛分校3123420
2在“国情总览”网页中，
分别连接在本网页的相应位置
不同栏目中不同的资料，通过点击可以连接到本页中的对应位置 3.在“经济发展”网页中
点击后分别连接到五个地方经济发展的状况 4。在“航天事业”网页中
点击后分别连接到在中国航天史上具有重要意义的时刻的叙述中 5.在“武器发展“网页中
通过点击可以进入相关武器的介绍中去
9 / 10
东北大学秦皇岛分校3123420
五、总结
通过这次网页课程设计激发学习兴趣,调动学习的自觉性,自己动脑、动手,动口,运用网络资源，结合教材及老师的指导,通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说,整个学期的学习过程，我学会了很多知识，
在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界,去不断的学习，去不断的探索;同时去不断的充实，去不断的完善自我,在网络的天空下逐渐的美化自己的人生！
做好页面,并不是一件容易的事,它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西.本次课程设计不是很好，页面过于简单,创新意识反面薄弱，这是我需要提高的地方.需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。
总体来说，通过这次的对网页课程设计,有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着,我将来设计出的网页会更加专业,更完善。
10 / 10
因篇幅问题不能全部显示，请点此查看更多更全内容