网页制作课程设计总结

网页制作课程设计总结阐述该网站的设计意图和创意，简洁介绍网站。

2.设计思想

阐述网站的整体设计思想，包括：

2.1网站整体结构规划思想

要求阐述网站整体结构的选择、设计的思想，绘制网站结构草图。

2.2主页设计思想

要求对主页的布局思路进行阐述和分析。

2.3子页的设计思想

要求对子页的设计以及网页对象的选取思路进行阐述和分析。

3网页具体设计分析

要求选取一张网页，对网页的设计实现过程进行阐述和分析，具体说明制作该网页的步骤，所使用的网页对象以及该网页对象的操作方法。

4结论

对整个设计报告做归纳性总结，并分析设计过程中的困难及如何解决的，最终提出展望。

一、设计目的

本课程的设计目的是通过实践使同学们经受Dreamweaver8开发的全过程和受到一次综合训练，以便能较全面地理解、把握和综合运用所学的学问。结合详细的开发案例，理解并初步把握运用Dreamweaver8可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到把握网页设计、制作的技巧。了解和熟识网页设计的基础学问和实现技巧。依据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。娴熟把握Photoshop8、Dreamweaver8等软件的的操作和应用。增加动手实践力量，进一步加强自身综合素养。我本次主要是设计的一"新加坡之旅'为主题的网页，针对新加坡的漂亮风景做了介绍。

二、设计思想

利用Dreamweaver8.0制作一个关于"新加坡之旅'的网站，利用表格、行为、层和链接等网页设计技术设计页面。

本网站以新加坡旅游为素材，主要讲解了与新加坡景点相关的内容。首页设风景介绍和风景观赏两个栏目。景点介绍设7个栏目，风景观赏只含一个页面。

三、网页具体设计分析

(一)建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver8是大多数人设计网页的称手兵器，也是众多入门者的捷径。特殊是其在布局方面的精彩表现，更受青睐。大家都知道，没有表格的关心，很难组织出一个协调合理的页面。

1.点击"ALT+F6'键，进入布局模式，插入布局表格。建立一个也许的布局。

2.使用背景图片：选中该项，按扫瞄可以插入一幅预备好的图片作为表格的背景，由于图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要掌握好。

(二)网页中的图像

图像传输是的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度;二是能更清晰地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。假如网页做得像一幅风景画，扫瞄者肯定会流连忘返(假如图片很大，效果会适得其反)。图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。

(1)在网页中插入图像

利用Dreamweaver8可以便利地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作特别简洁：

1.新建一个空白网页，把光标定位在网页的开头位置。

2.打开"工具'菜单，选择"图片'菜单项，在子菜单中选择"来自文件'菜单项，或者单击工具栏中的图片工具图标，弹出一个"图片'对话框。

3.在此对话框中单击"扫瞄'按钮，消失一个"选择文件'对话框。

4.在"选择文件'对话框的文件列表中选择某个图像文件，然后单击"确定'按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。

(2)图像的各种属性设置

1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择"图片属性'菜单项，消失一个"图片属性'对话框.

2.打开"外观'选项卡。

(1)设定图像边框粗细：在"外观'选项卡的"布局'栏里可以依据需要定义图像的边框，也可以定义边框值为"0'，即无边框。

(2)设置图像环绕方式：一般状况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：

①左环绕：图像在左边，文本在图像的右边进行环绕。

②右环绕：图像在右边，文本在图像的左边进行环绕。

在"外观'选项卡的"布局'栏中打开"对齐方式'下拉列表框，选择"左'选项，并单击"确定'按钮，图像就被设置为左环绕方式，同样，假如选"右'，图像就被设置为右环绕方式。

(3)编辑图像大小：在Dreamweaver8中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，假如加入的图像太大或太小，或有其他特殊需要，就得调整图像的大小。调整图像大小特别简洁敏捷，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满足的尺寸。

(4)设置图像缩放比例：网页设计的一个重要原则就是网页的.兼容性，对于不同的扫瞄器或者不同的辨别率，不管是800600的窗口，还是1024768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与扫瞄器的大小成一固定比例，这样在不同大小的扫瞄器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：

1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择"图像属性'菜单项，弹出一个"图像属性'对话框.

2.在"大小'栏中选中"指定大小'复选框，同时选中"宽度'和"高度'下面的"百分比'单选按钮，然后在"宽度'和"高度'栏里输入想显示的比例，单击"确定'完成设置。外还可以在"外观'选项卡的"水平间距'和"垂直间距'栏里进行设置，水平间距是指图像与四周元素在水平方向的间距，以象素为单位;垂直间距指图像与四周元素在垂直方向的间距。

(3)怎样编辑网页中的图像

在Dreamweaver8中，可以使用"图片'工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。

另外，为了使图片更符合要求，我们还在photoshop8中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。

(4)使用背景图像

使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的详细步骤如下：

1.新建一个空白网页。

2.单击鼠标右键，弹出的快捷菜单里选"网页属性'，弹出"网页属性'对话框.

3.开"背景'选项卡。

4.在"背景'选项卡的"格式'栏中选中"背景图片'复选框，然后单击下面的"扫瞄'按钮，消失一个"选择背景图片'对话框。

5.在"选择背景图像'对话框中单击"扫瞄文件'按钮，消失一个"选择文件'对话框。

6.在"选择文件'对话框的文件列表中选择图像文件，单击"确定'按钮。

这样，所选图片将作为整个网页的背景，假如在第4步时同时选中"水印'复选框，背景图片将显示为特别的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透亮     层的效果，特别吸引人。

(5)插入flash动画

关于Flash视频使用Dreamweaver中的"插入Flash视频'命令，可将Flash视频内容插入Web页面，而无需使用Flash创作工具。该命令可以插入Flash组件;当您在扫瞄器中查看它时，它显示所选择的Flash视频内容以及一组播放控件。

(6)设置鼠标经过图片，进行图片交互

再插入图片的下拉菜单中有一项是"鼠标经过'，点击