第四章创建基本网页

1、创建基本网页创建基本网页文本、图像、表单文本、图像、表单主讲人：宋耕主讲人：宋耕第四章第四章 创建基本网页创建基本网页n4.1 插入文本插入文本n4.2 插入图像插入图像n4.3 轮换图像轮换图像n4.4 插入媒体插入媒体n4.5 插入表单插入表单4.1 4.1 插入文本插入文本n一般来说，网页中显示最多的是文本。所以对一般来说，网页中显示最多的是文本。所以对文本的控制，以及布局在设计网页中占了很大文本的控制，以及布局在设计网页中占了很大的比重，能否对各种文本控制手段运用自如，的比重，能否对各种文本控制手段运用自如，是决定网页设计是否美观、富有创意及提高工是决定网页设计是否美观、富有创意及提高

2、工作效率的关键。作效率的关键。最适合于网页正文显示的字体大小和行距为：最适合于网页正文显示的字体大小和行距为：字体大小字体大小10101212像素像素pxpx左右左右行距行距1515像素像素pxpx左右左右DreamweaverDreamweaver插入文本插入文本n直接输入直接输入n复制和粘贴文本复制和粘贴文本n导入导入wordword文档文档: :“文件文件”菜单菜单- -“导入导入” wordword文档文档实例实例注意内容注意内容l1 1、输入文本空格、输入文本空格l2 2、实现文本换行、实现文本换行l3 3、插入相关文本要素、插入相关文本要素1、输入文本空格、输入文本空格l通过键盘上

3、的空格键可以实现输入文本空格，这是通过键盘上的空格键可以实现输入文本空格，这是与很多文字处理软件是一样的，但是在与很多文字处理软件是一样的，但是在DWDW中输入空中输入空格的数量在字符输入的半角状态和全角状态是不一格的数量在字符输入的半角状态和全角状态是不一样的。样的。l输入法切换半角状态时，按空格键只能输入一个空输入法切换半角状态时，按空格键只能输入一个空格，而无法连续输入多个空格。格，而无法连续输入多个空格。l如需输入多个连续的空格，可通过一下几种方法来如需输入多个连续的空格，可通过一下几种方法来实现。实现。 （1 1）将输入法切换到中文全角状态。）将输入法切换到中文全角状态。 （2 2）

4、直接按）直接按Ctrl+shift+spacebarCtrl+shift+spacebar。 （3 3）”插入插入”菜单菜单“HTMLHTML”命令命令“特殊字符特殊字符” 不换行空格。不换行空格。2、实现文本换行、实现文本换行l当输入多个文本时就需要换行，这可以通过按当输入多个文本时就需要换行，这可以通过按EnterEnter键或键或shift+entershift+enter键来实现。键来实现。l按按EnterEnter键换行的行距较大。键换行的行距较大。l按按shift+entershift+enter键来实现正常的换行。键来实现正常的换行。3、插入相关文本要素、插入相关文本要素l插入特

5、殊字符插入特殊字符l制作网页时有时需要输入一些键盘上没有的字制作网页时有时需要输入一些键盘上没有的字符，如注册商标符号、欧元符号等等。符，如注册商标符号、欧元符号等等。l方法是方法是：“插入插入”菜单菜单HTMLHTML特殊字符特殊字符 l插入文本列表插入文本列表l在网页中插入文本列表，可以使文本内容显得更加在网页中插入文本列表，可以使文本内容显得更加工整、直观。工整、直观。l方法方法: : “文本文本”插入工具栏插入工具栏 属性面板属性面板4.24.2插入图像插入图像n图像是网页中最重要的元素之一，图像能够使网页变图像是网页中最重要的元素之一，图像能够使网页变得丰富起来，令人耳目一新图像不但

6、能美化网页，得丰富起来，令人耳目一新图像不但能美化网页，而且与文本相比更能够直观地说明问题，使表达的意而且与文本相比更能够直观地说明问题，使表达的意思一目了然，加深浏览者的印象思一目了然，加深浏览者的印象n在网页中插入图像在网页中插入图像n设置图像的属性设置图像的属性4.2.1 4.2.1 在网页中插入图像在网页中插入图像n在在DreamweaverDreamweaver中，可以在中，可以在“设计设计”视图或视图或“代码代码”视图中将图像插入文档。在视图中将图像插入文档。在DreamweaverDreamweaver文档中添加文档中添加图像时，可以设置或修改图像属性并直接在图像时，可以设置或修

7、改图像属性并直接在“文档文档”窗口中查看所做的更改。窗口中查看所做的更改。n在网页中将光标置于要插入图像的位置，执行在网页中将光标置于要插入图像的位置，执行“插入插入”菜单菜单，选择，选择“图像图像”命令命令，打开，打开“选择图像源文件选择图像源文件”对话框。对话框。“选择图像源文件选择图像源文件”对话框对话框如果插入的图如果插入的图像不在当前网像不在当前网页所在的站点页所在的站点 ，DreamweaverDreamweaver将将提示是否将该提示是否将该图片复制到所图片复制到所在站点，一般在站点，一般单击单击“是是”实例实例4.2.2 4.2.2 设置图像的属性设置图像的属性n图像属性的设置

8、主要是通过图像属性的设置主要是通过“属性属性”面板来完成的，面板来完成的，在在“属性属性”面板中可设置图像的大小、位置、名称、面板中可设置图像的大小、位置、名称、边框、替代文本、低解析度等内容，使图像更加符合边框、替代文本、低解析度等内容，使图像更加符合页面设计，并使其更加美观。页面设计，并使其更加美观。实例实例n方法方法: :将光标置于文档中，执行将光标置于文档中，执行“插入插入” “图像对象图像对象” “鼠标经过图像鼠标经过图像”命令，打开命令，打开“插入鼠标经过图像插入鼠标经过图像”对话对话框框。4.3 4.3 轮换图像轮换图像n鼠标经过图像效果是指当访问者移动鼠标经过图像时鼠标经过图像

9、效果是指当访问者移动鼠标经过图像时, ,图图像变为另一幅图像像变为另一幅图像, ,当鼠标离开时又恢复为原来的图像当鼠标离开时又恢复为原来的图像. .n注意注意: :两幅图像的大小完全相同。如果这两个图像大小不两幅图像的大小完全相同。如果这两个图像大小不同，同， DreamweaverDreamweaver将自动调整第二个图像的大小，以匹配将自动调整第二个图像的大小，以匹配第一个图像的属性。第一个图像的属性。“插入鼠标经过图像插入鼠标经过图像”对话框对话框实例实例4.4 4.4 插入媒体插入媒体n多媒体对象和图像一样，在网页中是一道亮丽的风景，它多媒体对象和图像一样，在网页中是一道亮丽的风景，它

10、能使网页丰富、活跃起来，使用能使网页丰富、活跃起来，使用DreamweaverDreamweaver制作网页，制作网页，可以方便地插入各种多媒体对象。当需要编辑各种多媒体可以方便地插入各种多媒体对象。当需要编辑各种多媒体对象时，可以在对象时，可以在DreamweaverDreamweaver窗口中启动相应的媒体外部窗口中启动相应的媒体外部编辑器来编辑媒体。编辑器来编辑媒体。n插入插入flashflash动画动画n插入插入flashflash按钮按钮n插入插入flashflash文本文本4.4.1 4.4.1 插入插入flashflash动画动画nFlashFlash动画是一种高质量的矢量动画，

11、在网络中有着大量动画是一种高质量的矢量动画，在网络中有着大量的精美动画素材。让网页活跃起来，使用的精美动画素材。让网页活跃起来，使用DreamweaverDreamweaver制制作网页，可以在网页插入导出为作网页，可以在网页插入导出为.swf.swf或或.swt.swt格式的格式的FlashFlash按钮。按钮。n方法是：将光标置于文档中，执行方法是：将光标置于文档中，执行“插入插入” “媒体媒体” “FlashFlash”命令命令，打开，打开“选择文件选择文件”对话框。对话框。“选择文件选择文件”对话框对话框实例实例3.4.23.4.2 插入插入flashflash按钮按钮n方法是：将光标

12、置于文档中，执行方法是：将光标置于文档中，执行“插入插入” “媒体媒体” “FlashFlash按钮按钮”命令命令，打开，打开“插入插入FlashFlash按钮按钮”对话框。对话框。n使用使用DreamweaverDreamweaver中的中的FlashFlash按钮对象，可以创建或者按钮对象，可以创建或者载入一组预设的载入一组预设的FlashFlash按钮，并为按钮添加文本、背按钮，并为按钮添加文本、背景颜色以及指向其他文件的链接。景颜色以及指向其他文件的链接。“插入插入FlashFlash按钮按钮”对话框对话框实例实例4.4.3 4.4.3 插入插入flashflash文本文本n方法是：将

13、光标置于文档中，执行方法是：将光标置于文档中，执行“插入插入” “媒体媒体” “FlashFlash文本文本”命令命令，打开，打开“插入插入FlashFlash文本文本”对话框。对话框。实例实例4.5 4.5 插入表单插入表单n使用表单可以与站点的访问者进行交互并从用户那里使用表单可以与站点的访问者进行交互并从用户那里收集信息。表单从用户那里收集信息后，将这些信息收集信息。表单从用户那里收集信息后，将这些信息提交给服务器进行处理。提交给服务器进行处理。n目前表单主要用来进行意见调查、在线查询、网上购目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：物、在线申请等。在表单中经常出现的字段有：单行单行文本框文本框、多行滚动文本框多行滚动文本框、单选框单选框、复选框复选框、下拉列下拉列表框和按钮表框和按钮。 创建表单对象创建表单对象n在创建表单对象之前，首