网页制作实验报告天明.docVIP

成绩: 实验报告 课程名称: 实验项目: 姓 名: 专 业: 班 级: 学 号: 用户界面设计 网站设计 李天明 计算机科学与技术 计09-6班 0904010619 计算机科学与技术学院 实验教学中心 2011年12月8日 网站的设计思想 （一） 建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver X2004 是人多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方而的出色表现, 更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页而。 点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个人概的布局。 使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为农格的背景，因为图片 是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。 （二） 网页中的图像 图像传输是WWW的真止魅力所在，它?文字相比具有显著的优点：一是直观，人眼观看图像 吋接受信息的速度远远超过观看文字吋接受信息的速度；二是能更清楚地表达细节内容。正 是由于这些优点，所以在进行网页设计吋图像很受欢迎。如果网页做得像--幅风景画，浏览 者一定会流连忘返（如果图片很人，效果会适得其反）。图像文件的格式有儿I?种，如GIF、 JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF 等,现在 Internet Explorer 和 Netscape 支持的、最常用的图像格式是GIF、JPEG和BMP。 （1） 在网页中插入图像 利用Dreamweaver cs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置， 并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单： 新建一个空白网贝，把光标定位在网页的开始位置。 打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单 击工具栏中的图片工具图标，弹出一个“图片”对话框。 在此对话框屮单击“浏览”按钮，出现一个“选择文件”对话框。 在“选择文件”对话框的文件列衣中选择某个图像文件，然后单击“确定”按钮，或直接 双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种 属性进行设置了。 （2） 图像的各种属性设置 选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单 项，出现一个“图片属性”对话框. （D设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框， 也可以定义边框值为“0”，即无边框。 设置图像环绕方式：一般情况下一幅图像只能与一?行文字处在同一高度，但有时需要将 图像和文字分开，H两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没 有图像时可以多行输入，这就要通过设置图像的坏绕方式來实现。在网页中图像的坏绕方式 有两种： 左环绕：图像在左边，文本在图像的右边进行坏绕。 右环绕：图像在右边，文本在图像的左边进行环绕。 在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击 “确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕 方式。 编辑图像大小:在Dreamweaver cs3中,当在网页中加入一幅图像后,图像大小默认设 置为其原来的大小，如果加入的图像A大或太小，或有其他特别需要，就得调整图像的大小。 调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调 整图像的宽度和高度直到达到你满意的尺寸。 设置图像缩放比例：网页设计的一个垂要原则就是网页的兼容性，对于不同的浏览器或 者不同的分辨率，不管是800X600的窗口，还是1024X768的窗口，网页都要能止常的显 示。设置图像缩放比例就是将图像设置为大小町以按比例变化，与浏览器的人小成一固定比 例，这样在不同人小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如 下： 选屮网页屮的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹 出一个“图像属性”对话框. 在“大小”栏中选中“指定大小”复选框，同吋选中“宽度”和“高度”下而的“白分比” 单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外 还对以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像 与周围元索在水平方向的间距，以象索为单位；垂玄间距指图像与周围元索在垂直方向的间 距。 怎样编辑网页中的图像 在Dreamweaver cs3中,可以使用图片”工具栏中的各种工具对网页中的图像进行编辑, 编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。 另外，为了使图片更符合要求，我们还在photoshop cs3