当前位置:首页 >> 其它课程 >>

Dreamweaver CS3 网页制作


Dreamweaver CS3 网页制作

制作者:08级计科师范班 34号黄由之

学习提要
?了解目前因特网上的图像格式 ?学习插入图像 ?设置图像属性 ?了解其他图像元素的插入
打开看看 这节课你必须掌握的:能自己制作一个简单的图像页面,插入图像 并根据需要改变图像属性,能掌握图像占位符的使用和鼠标经过图 像的使

用。

图像格式
? GIF:采用LZW无损压缩算法。最多只能包含256种颜色、支持透明的 背景色、支持动画格式。GIF格式擅长表现一些徽标、文字图像或卡 通形象等。GIF图片支持动画,其动画的显示不需要特定的插件,较 之FLASH动画有一些不可取代的优势。

? JPEG:采用有损压缩算法。JPEG图像不支持24色真彩色也不支持透明 的背景色。善于表现色彩丰富、物质形状结构复杂的图像。JPEG格式 的图像会有高、中、低质量的选择。对于Web浏览器而言,选用中、 低质量的JPEG图像就可以了。
? PNG:PNG图像虽然收到了W3C组织的推荐,在网络上已经逐渐开始被 使用,但依然不广泛。其原因之一是只有较高版本的浏览器才支持这 种图像格式,而且也不是对PNG文件的所有特性都能很好地支持。

插入图像
? Step1 单击 图标 打开“选择图像源文件”的对话框

? Step2选择所需插入的图像,单击确定,弹出“图像标签辅助功能属 性”

PS:可以输入图像的替换文本内容以及详细说明。一般情况下不需要 添加辅助功能属性,可以在“编辑”——“首选参数”中更改辅助功 能。

需要注意的是,如果图像在站点外部,则会弹出 对话框提醒用户是否将图片保存在站点内部,一 般我们单击“是”按钮,然后选择本地站点的路 径,即可将图像保存。将所需要的图片、FLASH等 多媒体文件保存在站点内部,便于日后网站的修 改和管理。

设置图像属性
? 属性面板的打开 1.窗口——属性 2.快捷键Ctrl+F3,可以方便的隐藏或打开属性面板 ? 下面简单介绍一下图像属性面板中常用的一些属性的作用。

? 1.图像:用来设置图像的ID,为图像定义名称,主要是为了在脚本语 言中便于引用,一般可不填写。 ? 2.宽与高:分别用来设置图像的宽度和高度,可以填入数值,单位为 像素。 ? 3.源文件:用来设置这个图像的路径。 ? 4.连接:用来设置这个图像的超链接 ? 5.垂直边距:用来设置图像顶部与其上方的其他页面元素及图像底部 与其下方的其他页面元素的距离。 水平边距:用来设置图像左侧与其左侧方的其他页面元素及图像 右侧与其右方的其他页面元素的距离。 ? 6.边框:该文本框右侧的三个按钮只要控制图像在浏览器中成左对齐、 居中与右对齐。

插入其他图像元素
其他图像元素有图像占位符、鼠标经过图像、Fireworks HTML、导 航条、绘制矩形热点、绘制椭圆热点、绘制多边形热点。单击“插 入”工具栏的“常用”选项卡中的“图像”按钮旁的小三角形,可 以看见可插入网页的除了“图像外”还有以上的这些选项

下面我们介绍图像占位符和鼠标 经过图像这两种图像元素的使用 方法。

? 图像占位符:有时因为布局的需要,要在网页中插入一幅图像。此时 可以先不制作图片,而使用占位符来代替图片的位置。

与图像一样,可以通过属性面板修改属性。 点击这里观看效果

? 鼠标经过图像:鼠标经过图像是制作在页面中当鼠标经过图像时所产 生的效果,它可以解决网页中的图像在页面中静态的单调,从而为页 面增添生动活泼的气息。

? 点击这里查看网页效果

学习效果测试
? GIF图像的优点有() A 支持动画格式 C 无损伤方式压缩

B 支持透明背景 D 支持24位真彩色

? 下面有关JPGE格式图像的说法错误的是() A 是一种有损压缩格式 B 使用专门的JPGE压缩工具,压缩程度可达到180:1 C 使用JPGE格式不会对图像产生不可恢复的损失 D 在备份重要图像时最好不要使用JPGE格式,而应采用TIF等无损 的压缩格式

? 用Dreamweaver CS3 制作网页时插入的图片可以是不在站点下的文件 吗?

实战演练
? 在你之前所做的网页表格中插入图片,并根据表格大小改变图像的大 小。

? 制作图片网页,该图片用图像占位符表现

? 制作一个简单的图片网页,网页中有图像在鼠标经过时会切换成另一 张图


相关文章:
Dreamweaver CS3网页制作基础教程第13章习题答案
Dreamweaver CS3网页制作基础教程第13章习题答案_理学_高等教育_教育专区。本书共15章,主要介绍如何在网页中插入文本、图像、媒体、超级链接、表单等网页元素并设置其...
网页设计Dreamweaver CS3 教案(华东师范大学出版社)
网页设计Dreamweaver CS3 教案(华东师范大学出版社)_中职中专_职业教育_教育专区...(六)、制作框架页面 1、选择菜单栏>窗口>框架,打开框架面板,选中整个框架集,...
网页制作(CS3版)
计算机技能考核之网页制作 山东协和学院 计算机学院 王晓燕 制 网页制作综合复习 (选择)Dreamweaver CS3 工作界面 创建站点 创建站点 选择“站点→新建站点”命令 ...
dreamweaver cs3网页制作 第一章
dreamweaver cs3网页制作 ... 8页 2财富值如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 ...
dreamweaver cs3网页制作 第六章
Dreamweaver CS3网页制作... 33页 2下载券 Dreamweaver CS3 网页制... 14页 免费 Dreamweaver_CS3网页制作... 19页 免费 网页制作Dreamweaver CS... 5页 免费...
dreamweaver cs3网页制作 第三章
8页 2财富值 dreamweaver cs3网页制作 ... 暂无评价 8页 2财富值如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 ...
Dreamweaver CS3 网页制作(杨杰 段欣)课后习题电子版
Dreamweaver CS3 网页制作(杨杰 段欣)课后习题电子版_IT/计算机_专业资料。第1章 网页制作基础知识 一、填空题 1.WWW 在服务器上采用的是 站必须放到 2.网页一...
网页制作Dreamweaver CS3
网页制作 Dreamweaver CS3》目录 基础篇第一章 网页制作基础知识和 Dreamweaver 软件基础 活动一:初识网页 活动二:认识 HTML 活动三:制作“我的第一章网页” 本...
dreamweaver cs3网页制作 第七章
网页制作Dreamweaver CS... 5页 免费 Dreamweaver CS3网页制作... 17页 2下载...(2) 单击按钮或,打开“美国免费空间”网页,单击“注册”按钮,打开注册页面,...
《网页制作DreamweaverCS3》授课计划
版本 拟需外出参观地点 商务网站制作教学大纲 《Dreamweaver CS3 网页制作 实 用教程》 Dreamweaver 网页设计与制作案 例教程 无 需要增加的 硬件: 硬件:计算机 ...
更多相关标签:
dreamweaver网页制作 | dreamweaver8网页制作 | dreamweaver cs3 | dreamweavercs3 | dreamweaver cs3下载 | dreamweaver cs3 64位 | dreamweaver cs3教程 | dreamweavercs3下载 |