网页设计与制作项目实训教程 项目5
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图像“属性”面板中重新输入一个“宽”和“高”的值，就
可以改变图像的大小，使用鼠标可以进行更为直观的缩放操 作，具体步骤如下：
（1）在HTML文档中插入图像后，单击“设计”视图，然 后用鼠标单击要进行缩放的图像，在图像上会出现3个控制 句柄。
（2）将光标放在控制句柄上，出现双箭头的形状后，拖动 控制句柄，即可调整图像大小。
“替换”选项：设置图像的注释文本。 “编辑”选项：启动图像 编辑器并打开选定的图像。
“地图”选项：包含“地图”文本框和“热点工具”，文本框中 可以输入图像地图的名称，热点工具可以在图片中插入热点区域。
“垂直边距”和“水平边距”选项：以像素为单位在图像的四周 添加边距。
“目标”选项：指定打开链接网页的框架或பைடு நூலகம்口。
（2）执行下列操作，菜单方式 为单击“插入”菜单，选择“图 像”选项。面板快捷方式为在 “插入”面板的“常用”模式下， 单击“图像”按钮。
返回
（3）弹出“选择图像源文件”对话框，单击“文 件系统”单选按钮，表示从本地硬盘上选择图像 文件。在该对话框中，选择需要插入的图像。
返回
（4）单击“确定”按钮后，弹出“图像标签辅助功能属性” 对话框，替换文本处可以为空，单击“确定”即可。
项目5 制作图文混排网页
项目描述
知识储备 实践向导
项目小结
能力拓展
退出
项目描述
图像是网页元素中的另一重要组成部分，在网页中插 入图像可以使网页更好地表现网站的主题思想，使版面变 得丰富多彩，吸引更多的浏览者。
图像文件的格式有很多种，但实际上在网页中常使用 的图像文件格式只有GIF、JPG和PNG这三种，因为这三 种图像文件都是经过压缩，因此文件比较小，利于网络上 传输与观看。
在网页中使用图像时，要考虑图像在页面中的整体效 果。本项目制作“中国庐山”图文混排网页。
返回
返回
5.2 知识储备
5.2.1 插入图像 5.2.2 设置图像属性 5.2.3 插入相关图像元素
返回
5.2 知识储备
5.2.1 插入图像
在网页中插入图像的操作步骤如 下：
（1）将光标定位在文档中要插 入图像的位置。
（3）按住Shift键，拖动右下方控制句柄可以等比例放大、
缩小图像。
返回
图像“属性”面板常见选项说明如下：
“图像”选项：设置图像的名称或ID，一般情况可以不输入。
“宽”和“高”选项：设置图像的宽度和高度，默认单位是像素。
“源文件”选项：显示当前图片文件的地址。
“链接”选项：指定图像的超链接地址。
返回
3．在页面中插入鼠标经过图像。 （1）选中文本下方位置，点击菜单“插入”→“图像对
象”→“鼠标经过图像”。 （2）弹出“插入鼠标经过图像”对话框，分别设置“原始
图像”和“鼠标经过图像”。 （3）选择插入图像，在属性面板设置对齐方式为右对齐即
可。具体效果如图所示。
返回
4．设置背景图像 选择菜单“修改”→“页面属性”，弹出“页面属性”
返回
2．插入图像占位符 图像占位符是在准备好将最终图像添加到Web 页
面之前使用的图形，通过使用图像占位符，可以在 真正创建图像之前确定图像在页面上的位置和大小。 “插入图像占位符”对话框如图所示。
返回
5.3 实践向导
任务5-1 制作图文混排网页“中国庐山”页面。 具体操作步骤如下： 1．启动Dreamweaver CS5，单击菜单“文件”→“新建”
（2）弹出“插入鼠标经过图像”对话框，可以重新给 图像起一个名称。单击“原始图像”右侧“浏览”按钮， 载入一幅原始图像。单击“鼠标经过图像”右侧“浏览” 按钮，载入一幅要进行轮换的图像。
返回
如果选中“预载鼠标经过图像”复选框，在下载页面时，轮换 的图像也同时会被下载到缓存中。如果输入“替换文本”，则 当在轮换图像上暂停鼠标时，会出现该文本。“按下时，前往 的URL”右侧文本框中，如果输入网页的URL地址，单击图像时， 会进入到链接的页面。单击“确定”按钮，即完成了动态轮换 图像的设置。
“边框”选项：设置图像的边框宽度。
“对齐”选项：设置图像的对齐方式。
返回
5.2.3 插入相关图像元素
1．插入“鼠标经过图像”
（1）“鼠标经过图像”可以实现图像轮换特效，给页 面增添动态效果。先准备好两幅大小相同的图片，将光 标定位到要插入轮换图像的位置。单击“插入”菜单， 选择“图像对象”选项，在子菜单中单击“鼠标经过图 像”命令。或者单击“插入”面板，选择“常用”项， 单击“鼠标经过图像”按钮。
5.5 项目小结
无论是个人网站还是企业网站，图文并茂的网页 会为网页增色不少，通过图像美化后的网页能吸引 更多浏览者，恰当的图片、文字能让页面充满美感。 本项目学习插入图像的方法、设置图像的属性、设 置鼠标经过图像等内容，通过案例操作掌握图像与 文本混合编排的方法。
返回
（5）切换到“代码”视图，可以看到图像对应的HTML代码。
返回
5.2.2 设置图像属性
如果插入到网页的图片大小不符合网页排版的要求，就需要 在Dreamweaver CS5中对图像进行缩放操作。在属性面板 中设置图像大小，在HTML文档中插入图像后，选择“设计” 视图，选中要调整大小的图像，打开图像“属性”面板，在
对话框，选中“外观（CSS）”，设置背景图像，如图 所示。 5．单击“确定”按钮，保存页面，按【F12】显示最终 效果图。
返回
5.4 能力拓展
制作“万里长城”网页，通过制作该网页，可以掌握文本 设置、图像加载、移动、复制、删除和属性设置等基本操 作。“万里长城”网页的显示效果如图所示。
返回
命令，弹出“新建文档”对话框，设置网页标题为“庐 山”，然后输入文本，设置好文本格式，保存为5-1.html。
返回
2．插入图片 （1）将光标放在要插入图像的位置，选择菜单栏中“插
入”→“图像”命令。 （2）出现“选择图像源文件”对话框后，在“查找范围”
选择文件所在的位置，在列表中选择 “53.jpg” 文件名， 显示效果。
可以改变图像的大小，使用鼠标可以进行更为直观的缩放操 作，具体步骤如下：
（1）在HTML文档中插入图像后，单击“设计”视图，然 后用鼠标单击要进行缩放的图像，在图像上会出现3个控制 句柄。
（2）将光标放在控制句柄上，出现双箭头的形状后，拖动 控制句柄，即可调整图像大小。
“替换”选项：设置图像的注释文本。 “编辑”选项：启动图像 编辑器并打开选定的图像。
“地图”选项：包含“地图”文本框和“热点工具”，文本框中 可以输入图像地图的名称，热点工具可以在图片中插入热点区域。
“垂直边距”和“水平边距”选项：以像素为单位在图像的四周 添加边距。
“目标”选项：指定打开链接网页的框架或பைடு நூலகம்口。
（2）执行下列操作，菜单方式 为单击“插入”菜单，选择“图 像”选项。面板快捷方式为在 “插入”面板的“常用”模式下， 单击“图像”按钮。
返回
（3）弹出“选择图像源文件”对话框，单击“文 件系统”单选按钮，表示从本地硬盘上选择图像 文件。在该对话框中，选择需要插入的图像。
返回
（4）单击“确定”按钮后，弹出“图像标签辅助功能属性” 对话框，替换文本处可以为空，单击“确定”即可。
项目5 制作图文混排网页
项目描述
知识储备 实践向导
项目小结
能力拓展
退出
项目描述
图像是网页元素中的另一重要组成部分，在网页中插 入图像可以使网页更好地表现网站的主题思想，使版面变 得丰富多彩，吸引更多的浏览者。
图像文件的格式有很多种，但实际上在网页中常使用 的图像文件格式只有GIF、JPG和PNG这三种，因为这三 种图像文件都是经过压缩，因此文件比较小，利于网络上 传输与观看。
在网页中使用图像时，要考虑图像在页面中的整体效 果。本项目制作“中国庐山”图文混排网页。
返回
返回
5.2 知识储备
5.2.1 插入图像 5.2.2 设置图像属性 5.2.3 插入相关图像元素
返回
5.2 知识储备
5.2.1 插入图像
在网页中插入图像的操作步骤如 下：
（1）将光标定位在文档中要插 入图像的位置。
（3）按住Shift键，拖动右下方控制句柄可以等比例放大、
缩小图像。
返回
图像“属性”面板常见选项说明如下：
“图像”选项：设置图像的名称或ID，一般情况可以不输入。
“宽”和“高”选项：设置图像的宽度和高度，默认单位是像素。
“源文件”选项：显示当前图片文件的地址。
“链接”选项：指定图像的超链接地址。
返回
3．在页面中插入鼠标经过图像。 （1）选中文本下方位置，点击菜单“插入”→“图像对
象”→“鼠标经过图像”。 （2）弹出“插入鼠标经过图像”对话框，分别设置“原始
图像”和“鼠标经过图像”。 （3）选择插入图像，在属性面板设置对齐方式为右对齐即
可。具体效果如图所示。
返回
4．设置背景图像 选择菜单“修改”→“页面属性”，弹出“页面属性”
返回
2．插入图像占位符 图像占位符是在准备好将最终图像添加到Web 页
面之前使用的图形，通过使用图像占位符，可以在 真正创建图像之前确定图像在页面上的位置和大小。 “插入图像占位符”对话框如图所示。
返回
5.3 实践向导
任务5-1 制作图文混排网页“中国庐山”页面。 具体操作步骤如下： 1．启动Dreamweaver CS5，单击菜单“文件”→“新建”
（2）弹出“插入鼠标经过图像”对话框，可以重新给 图像起一个名称。单击“原始图像”右侧“浏览”按钮， 载入一幅原始图像。单击“鼠标经过图像”右侧“浏览” 按钮，载入一幅要进行轮换的图像。
返回
如果选中“预载鼠标经过图像”复选框，在下载页面时，轮换 的图像也同时会被下载到缓存中。如果输入“替换文本”，则 当在轮换图像上暂停鼠标时，会出现该文本。“按下时，前往 的URL”右侧文本框中，如果输入网页的URL地址，单击图像时， 会进入到链接的页面。单击“确定”按钮，即完成了动态轮换 图像的设置。
“边框”选项：设置图像的边框宽度。
“对齐”选项：设置图像的对齐方式。
返回
5.2.3 插入相关图像元素
1．插入“鼠标经过图像”
（1）“鼠标经过图像”可以实现图像轮换特效，给页 面增添动态效果。先准备好两幅大小相同的图片，将光 标定位到要插入轮换图像的位置。单击“插入”菜单， 选择“图像对象”选项，在子菜单中单击“鼠标经过图 像”命令。或者单击“插入”面板，选择“常用”项， 单击“鼠标经过图像”按钮。
5.5 项目小结
无论是个人网站还是企业网站，图文并茂的网页 会为网页增色不少，通过图像美化后的网页能吸引 更多浏览者，恰当的图片、文字能让页面充满美感。 本项目学习插入图像的方法、设置图像的属性、设 置鼠标经过图像等内容，通过案例操作掌握图像与 文本混合编排的方法。
返回
（5）切换到“代码”视图，可以看到图像对应的HTML代码。
返回
5.2.2 设置图像属性
如果插入到网页的图片大小不符合网页排版的要求，就需要 在Dreamweaver CS5中对图像进行缩放操作。在属性面板 中设置图像大小，在HTML文档中插入图像后，选择“设计” 视图，选中要调整大小的图像，打开图像“属性”面板，在
对话框，选中“外观（CSS）”，设置背景图像，如图 所示。 5．单击“确定”按钮，保存页面，按【F12】显示最终 效果图。
返回
5.4 能力拓展
制作“万里长城”网页，通过制作该网页，可以掌握文本 设置、图像加载、移动、复制、删除和属性设置等基本操 作。“万里长城”网页的显示效果如图所示。
返回
命令，弹出“新建文档”对话框，设置网页标题为“庐 山”，然后输入文本，设置好文本格式，保存为5-1.html。
返回
2．插入图片 （1）将光标放在要插入图像的位置，选择菜单栏中“插
入”→“图像”命令。 （2）出现“选择图像源文件”对话框后，在“查找范围”
选择文件所在的位置，在列表中选择 “53.jpg” 文件名， 显示效果。