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

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 制作网页时插入的图片可以是不在站点下的文件 吗?

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

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

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


相关文章:
网页设计与制作 电子教案
(2)制作网页时常用软件有哪些? (3)如何启动和退出 Dreamweaver CS3? (4)如何打开 Flash 文件? (5)如何退出 Photoshop? 思考题及 作业 电子教案课程: 第 2 ...
网页制作作业_图文
网页制作作业_互联网_IT/计算机_专业资料。2013华师的作业 谈谈网站建设中需要...第 14 题网页三剑侠 CS3 版(Flash、Fireworks、Dreamweaver) ,是哪一个公司的...
网页制作(CS3版)
计算机技能考核之网页制作 山东协和学院 计算机学院 王晓燕 制 网页制作综合复习 (选择)Dreamweaver CS3 工作界面 创建站点 创建站点 选择“站点→新建站点”命令 ...
Dreamweaver制作框架
图 1 网页中的多个框架 二、制作框架网页 Dreamweaver CS3 提供了多种创建框架的方法,用户可以使用 Dreamweaver CS3 提供的预置框架集,也可以自己通过手写 HTML ...
浅谈Dreamweaver设计与制作网页
浅谈Dreamweaver设计与制作网页_经济/市场_经管营销_专业资料。浅谈Dreamweaver设计与...目前,Dreamweaver CS3 是一个业界领先的网页开发工具之一,具有很强的使用户 ...
制作表单网页
制作表单网页 制作表单网页说课稿尊敬的各位评委、专家:大家好!今天我说课的内容是《制作表单网页》 。 一、教材分析与处理本课是《Dreamweaver CS3 网页制作案例...
Dreamweaver cs3网页设计
Dreamweaver CS3 网页设计 第三章 网页中的文本和图像 3.1 在网页中插入文本从...制作两幅尺寸一致,外观相似的图像,然后单击插入栏“常用”分类的“图像: 鼠标...
网页制作与网站开发从入门到精通
Dreamweaver 构建 HTML 结构 20.1 可视化网页编辑工作流 20.2 HTML 代码编辑...cs3简单制作动态搞笑图片68份文档 新市场营销法则 助推企业成长 999感冒灵市场营销...
dreamweaver cs3网页制作 第七章
网页制作Dreamweaver CS... 5页 免费 Dreamweaver CS3网页制作... 17页 2下载...(2) 单击按钮或,打开“美国免费空间”网页,单击“注册”按钮,打开注册页面,...
《Dreamweaver网页设计与制作》课程标准
六、教材使用建议 《Dreamweaver CS3 网页制作案例应用》 高等教育出版社 《网页制作基础教程(Dreamweaver CS3 版) 》 电子工业出版社 《网页制作教程》 人民邮电...
更多相关标签:
dreamweaver网页制作 | dreamweaver8制作网页 | dreamweaver cs3 | dreamweaver cs3下载 | dreamweavercs3 | dreamweavercs3下载 | dreamweaver cs3教程 | dreamweaver cs3 64位 |