《网页设计与制作》第三章:插入网页基本元素(精品).ppt
《《网页设计与制作》第三章:插入网页基本元素(精品).ppt》由会员分享,可在线阅读,更多相关《《网页设计与制作》第三章:插入网页基本元素(精品).ppt(49页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第3章 插入网页基本元素 本章要点v插入文字v插入图像v插入表格v插入媒体元素v插入表单4/6/20231插入文字v在Dreamweaver中为网页插入文本有两种方法:v 直接输入文本v 从其他文档中复制文本4/6/20232插入特殊符号v将插入工具切换到“文本”工具组;v使用菜单“插入”“HTML”“特殊字符”。4/6/20233插入特殊符号v插入换行符使用Shift+Enter组合键 4/6/20234插入特殊符号v插入空格ctrlshift空格插入特殊符号,不换行空格v插入转义符4/6/20235设置文字属性v进行设置时使用组合键Ctrl+F3或菜单“窗口”“属性”打开属性面板。设置字体
2、大小 设置字体颜色 设置字体列表 【字体】【编辑字体列表】单击 在可用字体中选则,单击按钮4/6/20236使用样式设置文字格式v【样式】选择 重命名、再进行修改。把文字变为标题 在属性面板的格式中选择设置文本对齐 在属性面板中设置列表 在属性面板中进行设置4/6/20237 应用举例设置网页文本格式v下面为“如果”网页中的文本进行格式设置,要求文本标题样式与正文不同,正文中某些文字需突出,以达到美化网页文本的目的。4/6/20238网页效果图4/6/20239插入滚动字幕1.1.插入滚动字幕插入滚动字幕(1)单击编辑窗口上方的“拆分”按钮,将视图切换为拆分模式。(2)在下方的设计窗口中单击要
3、插入滚动字幕的位置,此时注意查看代码窗口中光标的位置。(3)将插入工具栏设置为“常规”,单击标签选择器按钮,打开标签选择器对话框。(4)在标签选择器对话框左边窗口逐级选择“HTML标签”“页元素”“浏览器特定”,然后在右边窗口中单击“marquee”,再单击下面的“插入”按钮,marquee标签被插入到代码中,按“关闭”按钮关闭对话框。(5)在代码中出现,在中间的两个尖括号“”之间输入要滚动的文字,如“欢迎访问励志学社的主页!”。4/6/202310设置滚动字幕的属性设置滚动字幕的属性 direction为滚动的目标方向,可选right、left、up、down。scrollamount 和s
4、crolldelay为滚动数量和延迟,可设置滚动速度和间隔时间。loop设置循环次数,小于1为连续循环。Bgcolor设置滚动区域的背景颜色。width 和height设置滚动区域的大小,沿垂直方向(up或down)滚动时,必须设置一定的高度值,否则看不到滚动的文字。4/6/202311 设置文本超级链接1.1.使用属性面板使用属性面板 设置超级链接设置超级链接2.2.使用工具按钮使用工具按钮(1)插入超级链接 单击工具栏上的超级链接按钮(2)插入邮件链接 链接目标是电子邮件地址时,单击工具栏上的电子邮件链接按钮 4/6/202312设置文本超级链接3、设置下载文件的超级链接4、创建外部链接
5、Http:/5、链接文字颜色的设置 通过页面属性来设置的。4/6/202313使用锚记 v设置锚记 v使用锚记 4/6/202314 插入水平线 水平线可用于页面上内容的分隔。将工具按钮切换到“HTML”,单击水平线按钮 单击该水平线,可在属性面板中设置水平线的属性,如宽度、高度、对齐方式等。水平线的颜色可以使用属性面板中的“快速标签编辑器”设置。值得注意的是水平线的颜色只能在预览时看出来。4/6/202315插入图像v图像的格式 用于网页的图像通常只有GIF、JPE和PNG 3种格式。v图像的获取方法v图像文件的保存 4/6/202316插入图像v插入图像的步骤如下:(1)把工具栏切换到“常
6、用”状态,然后单击“图像:图象”按钮(2)选择要插入的图像文件,在文件列表中单击一个图象文件时,图象预览区会显示这个图象的缩略图。(3)单击确定按钮,如果图像文件在站点文件夹中,就会直接插入到网页中,同时在编辑窗口显示出图像。4/6/202317设置图像的基本属性v改变图像大小v图文混排v垂直边距和水平边距v图像替代v图像边框4/6/202318图片超级链接和图像地图1.1.图片超级链接图片超级链接2.2.图像地图图像地图 如果想在一个图像的不同位置上点击,就跳转到相应的目标网页,就需要使用图象地图。(1)设置矩形热区(2)设置圆形热区(3)设置多边形热区4/6/202319图像占位符和轮换图
7、像1.1.图象占位符图象占位符2.2.插入鼠标经过图像插入鼠标经过图像 单击工具栏上的图像按钮旁边的小三角形,在下拉式菜单中选择图像占位符按钮 单击工具栏上的图像按钮旁边的小三角形,在下拉式菜单中选择鼠标经过图像按钮 4/6/202320设置网页图片属性最终效果图4/6/202321插入表格 v添加表格 v编辑表格 v格式化表格 v导入表格数据 4/6/202322 插入表格插入表格表格的知识 表格由数个行与列组成的,行、列交叉组成表格的单元格,可以在表格的单元格内插入各种信息,包括文本、数字、链接,甚至是图像。4/6/202323添加表格v新建表格新建表格v修改表格属性修改表格属性 v设置单
8、元格属性设置单元格属性 4/6/2023241.1.新建表格新建表格(1)将插入工具栏切换到“常用”模式,单击表格按钮(2)在表格对话框中设置表格的样式。(3)单击“确定”按钮就可以把表格插到网页中。(4)在表格的各个单元格中分别输入内容。4/6/2023252.2.修改表格属性修改表格属性v高 v背景颜色 v边框颜色 v背景图像 v对齐设置4/6/2023263.3.设置单元格属性设置单元格属性v文字(属性面板的上半部分)文字(属性面板的上半部分)v水平水平 v宽、高宽、高 v垂直垂直 v标题标题 v背景和背景颜色背景和背景颜色 v边框边框 4/6/202327 应用举例在网页中插入表格并添
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页 设计 制作 第三 插入 基本 元素 精品
限制150内