第四章创建基本网页资料.ppt

创建基本网页 文本、图像、表单 主讲人：宋耕 第四章 创建基本网页 4.1 插入文本 4.2 插入图像 4.3 轮换图像 4.4 插入媒体 4.5 插入表单 4.1 插入文本 一般来说，网页中显示最多的是文本。所以对文本的控制，以及布局在设计网页中占了很大的比重，能否对各种文本控制手段运用自如，是决定网页设计是否美观、富有创意及提高工作效率的关键。 最适合于网页正文显示的字体大小和行距为： ⑴　字体大小10～12像素px左右 ⑵　行距15像素px左右 Dreamweaver插入文本 直接输入 复制和粘贴文本 导入word文档:“文件”菜单-“导入” word文档 实　例 注意内容 1、输入文本空格 2、实现文本换行 3、插入相关文本要素 1、输入文本空格 通过键盘上的空格键可以实现输入文本空格，这是与很多文字处理软件是一样的，但是在DW中输入空格的数量在字符输入的半角状态和全角状态是不一样的。 输入法切换半角状态时，按空格键只能输入一个空格，而无法连续输入多个空格。 如需输入多个连续的空格，可通过一下几种方法来实现。 （1）将输入法切换到中文全角状态。 （2）直接按Ctrl+shift+spacebar。 （3）”插入”菜单—“HTML”命令—“特殊字符” —不换行空格。 2、实现文本换行 当输入多个文本时就需要换行，这可以通过按Enter键或shift+enter键来实现。 按Enter键换行的行距较大。 按shift+enter键来实现正常的换行。 3、插入相关文本要素 插入特殊字符 制作网页时有时需要输入一些键盘上没有的字符，如注册商标符号、欧元符号等等。 方法是：“插入”菜单—HTML—特殊字符 插入文本列表 在网页中插入文本列表，可以使文本内容显得更加工整、直观。 方法:① “文本”插入工具栏 ② 属性面板 4.2　插入图像 图像是网页中最重要的元素之一，图像能够使网页变得丰富起来，令人耳目一新．图像不但能美化网页，而且与文本相比更能够直观地说明问题，使表达的意思一目了然，加深浏览者的印象． 在网页中插入图像 设置图像的属性 4.2.1 在网页中插入图像 在Dreamweaver８中，可以在“设计”视图或“代码”视图中将图像插入文档。在Dreamweaver文档中添加图像时，可以设置或修改图像属性并直接在“文档”窗口中查看所做的更改。 在网页中将光标置于要插入图像的位置，执行“插入”菜单，选择“图像”命令，打开“选择图像源文件”对话框。 “选择图像源文件”对话框 如果插入的图像不在当前网页所在的站点 ，Dreamweaver将提示是否将该图片复制到所在站点，一般单击“是” 实　例 4.2.2 设置图像的属性 图像属性的设置主要是通过“属性”面板来完成的，在“属性”面板中可设置图像的大小、位置、名称、边框、替代文本、低解析度等内容，使图像更加符合页面设计，并使其更加美观。 实　例 方法:将光标置于文档中，执行“插入” “图像对象” “鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。 4.3 轮换图像 鼠标经过图像效果是指当访问者移动鼠标经过图像时,图像变为另一幅图像,当鼠标离开时又恢复为原来的图像. 注意:两幅图像的大小完全相同。如果这两个图像大小不同， Dreamweaver将自动调整第二个图像的大小，以匹配第一个图像的属性。 “插入鼠标经过图像”对话框 实　例 4.4 插入媒体 多媒体对象和图像一样，在网页中是一道亮丽的风景，它能使网页丰富、活跃起来，使用Dreamweaver制作网页，可以方便地插入各种多媒体对象。当需要编辑各种多媒体对象时，可以在Dreamweaver窗口中启动相应的媒体外部编辑器来编辑媒体。 插入flash动画 插入flash按钮 插入flash文本 4.4.1 插入flash动画 Flash动画是一种高质量的矢量动画，在网络中有着大量的精美动画素材。让网页活跃起来，使用Dreamweaver制作网页，可以在网页插入导出为.swf或.swt格式的Flash按钮。 方法是：将光标置于文档中，执行“插入” “媒体” “Flash”命令，打开“选择文件”对话框。 “选择文件”对话框 实　例 3.4.2 插入flash按钮 方法是：将光标置于文档中，执行“插入” “媒体” “Flash按钮”命令，打开“插入Flash按钮”对话框。 使用Dreamweaver中的Flash按钮对象，可以创建或者载入一组预设的Flash按钮，并为按钮添加文本、背景颜色以及指向其他文件的链接。 “插入Flash按钮”对话框 实　例 4.4.3 插入flash文本 方法是：将光标置于文档中，执行“插入”