您所在位置：网站首页 > 高等教育 > 大学课件网页设计与制作项目实训教程教学课件 ppt 作者严加琼曾金发项目5

网页设计与制作项目实训教程教学课件 ppt 作者严加琼曾金发项目5

19页

卖家[上传人]：E****

文档编号：89191349

上传时间：2019-05-21

文档格式：PPT

文档大小：1.54MB

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

10 金贝

/ 19 举报版权申诉马上下载

文本预览

下载提示

常见问题

1、项目5 制作图文混排网页,项目描述,知识储备,实践向导,能力拓展,退出,项目小结,图像是网页元素中的另一重要组成部分，在网页中插入图像可以使网页更好地表现网站的主题思想，使版面变得丰富多彩，吸引更多的浏览者。图像文件的格式有很多种，但实际上在网页中常使用的图像文件格式只有GIF、JPG和PNG这三种，因为这三种图像文件都是经过压缩，因此文件比较小，利于网络上传输与观看。在网页中使用图像时，要考虑图像在页面中的整体效果。本项目制作“中国庐山”图文混排网页。,项目描述,5.2.1 插入图像 5.2.2 设置图像属性 5.2.3 插入相关图像元素,5.2 知识储备,5.2 知识储备 5.2.1 插入图像在网页中插入图像的操作步骤如下：（1）将光标定位在文档中要插入图像的位置。（2）执行下列操作，菜单方式为单击“插入”菜单，选择“图像”选项。面板快捷方式为在“插入”面板的“常用”模式下，单击“图像”按钮。,（3）弹出“选择图像源文件”对话框，单击“文件系统”单选按钮，表示从本地硬盘上选择图像文件。在该对话框中，选择需要插入的图像。,（4）单击“确定”按钮后，弹出“图像

2、标签辅助功能属性”对话框，替换文本处可以为空，单击“确定”即可。（5）切换到“代码”视图，可以看到图像对应的HTML代码。,5.2.2 设置图像属性如果插入到网页的图片大小不符合网页排版的要求，就需要在Dreamweaver CS5中对图像进行缩放操作。在属性面板中设置图像大小，在HTML文档中插入图像后，选择“设计”视图，选中要调整大小的图像，打开图像“属性”面板，在图像“属性”面板中重新输入一个“宽”和“高”的值，就可以改变图像的大小，使用鼠标可以进行更为直观的缩放操作，具体步骤如下：（1）在HTML文档中插入图像后，单击“设计”视图，然后用鼠标单击要进行缩放的图像，在图像上会出现3个控制句柄。（2）将光标放在控制句柄上，出现双箭头的形状后，拖动控制句柄，即可调整图像大小。（3）按住Shift键，拖动右下方控制句柄可以等比例放大、缩小图像。,图像“属性”面板常见选项说明如下： “图像”选项：设置图像的名称或ID，一般情况可以不输入。 “宽”和“高”选项：设置图像的宽度和高度，默认单位是像素。 “源文件”选项：显示当前图片文件的地址。 “链接”选项：指定图像的超链接地址。

3、“替换”选项：设置图像的注释文本。 “编辑”选项：启动图像编辑器并打开选定的图像。 “地图”选项：包含“地图”文本框和“热点工具”，文本框中可以输入图像地图的名称，热点工具可以在图片中插入热点区域。 “垂直边距”和“水平边距”选项：以像素为单位在图像的四周添加边距。 “目标”选项：指定打开链接网页的框架或窗口。 “边框”选项：设置图像的边框宽度。 “对齐”选项：设置图像的对齐方式。,5.2.3 插入相关图像元素 1插入“鼠标经过图像” （1）“鼠标经过图像”可以实现图像轮换特效，给页面增添动态效果。先准备好两幅大小相同的图片，将光标定位到要插入轮换图像的位置。单击“插入”菜单，选择“图像对象”选项，在子菜单中单击“鼠标经过图像”命令。或者单击“插入”面板，选择“常用”项，单击“鼠标经过图像”按钮。（2）弹出“插入鼠标经过图像”对话框，可以重新给图像起一个名称。单击“原始图像”右侧“浏览”按钮，载入一幅原始图像。单击“鼠标经过图像”右侧“浏览”按钮，载入一幅要进行轮换的图像。,如果选中“预载鼠标经过图像”复选框，在下载页面时，轮换的图像也同时会被下载到缓存中。如果输入“替换文本”，则当

4、在轮换图像上暂停鼠标时，会出现该文本。“按下时，前往的URL”右侧文本框中，如果输入网页的URL地址，单击图像时，会进入到链接的页面。单击“确定”按钮，即完成了动态轮换图像的设置。,2插入图像占位符图像占位符是在准备好将最终图像添加到Web 页面之前使用的图形，通过使用图像占位符，可以在真正创建图像之前确定图像在页面上的位置和大小。“插入图像占位符”对话框如图所示。,任务5-1 制作图文混排网页“中国庐山”页面。具体操作步骤如下： 1启动Dreamweaver CS5，单击菜单“文件”“新建”命令，弹出“新建文档”对话框，设置网页标题为“庐山”，然后输入文本，设置好文本格式，保存为5-1.html。,5.3 实践向导,2插入图片（1）将光标放在要插入图像的位置，选择菜单栏中“插入”“图像”命令。（2）出现“选择图像源文件”对话框后，在“查找范围”选择文件所在的位置，在列表中选择 “53.jpg” 文件名，显示效果。,3在页面中插入鼠标经过图像。（1）选中文本下方位置，点击菜单“插入”“图像对象”“鼠标经过图像”。（2）弹出“插入鼠标经过图像”对话框，分别设置“原始图像”和“鼠标经过图像”。（3）选择插入图像，在属性面板设置对齐方式为右对齐即可。具体效果如图所示。,4设置背景图像选择菜单“修改”“页面属性”，弹出“页面属性”对话框，选中“外观（CSS）”，设置背景图像，如图所示。 5单击“确定”按钮，保存页面，按【F12】显示最终效果图。,制作“万里长城”网页，通过制作该网页，可以掌握文本设置、图像加载、移动、复制、删除和属性设置等基本操作。“万里长城”网页的显示效果如图所示。,5.4 能力拓展,无论是个人网站还是企业网站，图文并茂的网页会为网页增色不少，通过图像美化后的网页能吸引更多浏览者，恰当的图片、文字能让页面充满美感。本项目学习插入图像的方法、设置图像的属性、设置鼠标经过图像等内容，通过案例操作掌握图像与文本混合编排的方法。,5.5 项目小结,

《网页设计与制作项目实训教程教学课件 ppt 作者严加琼曾金发项目5》由会员E****分享，可在线阅读，更多相关《网页设计与制作项目实训教程教学课件 ppt 作者严加琼曾金发项目5》请在金锄头文库上搜索。

点击阅读更多内容

TA的资源