Dreamweaver之网页制作报告 联系客服

发布时间 : 星期六 文章Dreamweaver之网页制作报告更新完毕开始阅读86048803eefdc8d376ee3252

直观,人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度;二是能更清楚地表达细节内容。正是由于这些优点,所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画,浏览者一定会流连忘返(如果图片很大,效果会适得其反)。 图像文件的格式有几十种,如GIF、JPEG、BMP等,我们这里用的格式是JPG。

3.2.1在网页中插入图像

利用Dreamweaver cs6可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单,一般有两种方法:一是通过插入>图像>设置>确定>只要选中,可在底部进行修改;另一种是直接通过对代码的编写,如下:

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

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

(2)设置图像缩放比例:网页设计的一个重要原则就是网页的兼容性,对于不同的浏览器或者不同的分辨率,不管是800×600的窗口,还是1024×768的窗口,网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化,与浏览器的大小成一固定比例,这样在不同大小的浏览器窗口里图像都能正常的显示外观。

设置图像缩放比例的步骤如下:

1.选中网页中的图像,单击鼠标右键,在弹出的快捷菜单里,选择“图像

属性”菜单项,弹出一个“图像属性”对话框.

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

3.2.3怎样编辑网页中的图像

在Dreamweaver cs6中,可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑,编辑功能主要有:图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。

另外,为了使图片更符合要求,我还利用了photoshop cs5、美图秀秀对图片进行了处理,使得图片看起来更加精细美观,符合我们的主题要求。 3.3插入视频音乐

关于视频音乐的插入,使用 Dreamweaver 中的“插入”命令,选择媒体,在选择插件,选中你要的视频音乐,确定即可。当然,通过编码来说可以做到更加精细准确,比如大小,播放方式,循环与否等,代码如下: 1、视频:

2、音乐:

3.4设置图片循环滚动

要实现图片循环向左滚动,鼠标指向即停,图片上建立链接(每个图片均有一个链接)。主要原理如下:

把连续图片再复制一份接到尾部,待第一张图片滚完之后被复制的接着滚动。所示:

主要代码如下:

3.5设置链接

(1)建立单链接,选中图片或者文字,在下面的链接属性中输入所要连接到的地址,同时,下方的目标属性被激活,输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面,同时也连接了外网,使得大家访问页面时能够查询更多详细的信息,方便用户查询。

(2)建立多链接,即单图多链接,主要方法是通过热点来实现的。

上图中,左下角有三个几何图形,用于确定热点的区域大小,形状。要对其属性进行编辑,如:链接、目标。选取多个热点即可建立多个链接。

3.6做个外网搜索栏

以百度为搜索引擎,点击按钮即显示搜索结果,设置搜索框大小,背景颜色,搜索按钮表述等处理,详情见代码,如下:

3.7常用的显示-时间天气

时间来说,同步电脑的系统时间,不需要联网;而天气,则需联网随时更新,从天气网站获取天气数据,并显示,代码如下:

scrollDelay=30 onmouseover=stop() onmouseout=start() direction=up width=\