第三章创建基本网页PPT讲稿.ppt
第三章创建基本网页第1页，共32页，编辑于2022年，星期二第三章第三章 创建基本网页创建基本网页n3.1 插入文本插入文本n3.2 插入图像插入图像n3.3 轮换图像轮换图像n3.4 插入媒体插入媒体n3.5 创建链接创建链接n3.5 插入表单插入表单第2页，共32页，编辑于2022年，星期二3.1 3.1 插入文本插入文本n一般来说，网页中显示最多的是文本。所以对文一般来说，网页中显示最多的是文本。所以对文本的控制，以及布局在设计网页中占了很大的比本的控制，以及布局在设计网页中占了很大的比重，能否对各种文本控制手段运用自如，是决定重，能否对各种文本控制手段运用自如，是决定网页设计是否美观、富有创意及提高工作效率的网页设计是否美观、富有创意及提高工作效率的关键。关键。最适合于网页正文显示的字体大小和行距为：最适合于网页正文显示的字体大小和行距为：字体大小字体大小10101212像素像素pxpx左右左右行距行距1515像素像素pxpx左右左右第3页，共32页，编辑于2022年，星期二DreamweaverDreamweaver插入文本插入文本n直接输入直接输入n复制和粘贴文本复制和粘贴文本n导入导入wordword文档文档:“:“文件文件”菜单菜单-“-“导入导入”word”word文档文档实例实例第4页，共32页，编辑于2022年，星期二注意内容注意内容l1 1、输入文本空格、输入文本空格l2 2、实现文本换行、实现文本换行l3 3、插入相关文本要素、插入相关文本要素第5页，共32页，编辑于2022年，星期二1、输入文本空格、输入文本空格l通过键盘上的空格键可以实现输入文本空格，这是与很通过键盘上的空格键可以实现输入文本空格，这是与很多文字处理软件是一样的，但是在多文字处理软件是一样的，但是在DWDW中输入空格的数量中输入空格的数量在字符输入的半角状态和全角状态是不一样的。在字符输入的半角状态和全角状态是不一样的。l输入法切换半角状态时，按空格键只能输入一个空格，输入法切换半角状态时，按空格键只能输入一个空格，而无法连续输入多个空格。而无法连续输入多个空格。l如需输入多个连续的空格，可通过一下几种方法来实现。如需输入多个连续的空格，可通过一下几种方法来实现。第6页，共32页，编辑于2022年，星期二 （1 1）将输入法切换到中文全角状态。）将输入法切换到中文全角状态。（2 2）直接按）直接按Ctrl+shift+spacebarCtrl+shift+spacebar。（3 3）”插入插入”菜单菜单“HTML”“HTML”命令命令“特殊字符特殊字符”不换不换行空格。行空格。第7页，共32页，编辑于2022年，星期二2、实现文本换行、实现文本换行l当输入多个文本时就需要换行，这可以通过按当输入多个文本时就需要换行，这可以通过按EnterEnter键键或或shift+entershift+enter键来实现。键来实现。l按按EnterEnter键换行的行距较大。键换行的行距较大。l按按shift+entershift+enter键来实现正常的换行。键来实现正常的换行。第8页，共32页，编辑于2022年，星期二3、插入相关文本要素、插入相关文本要素l插入特殊字符插入特殊字符l制作网页时有时需要输入一些键盘上没有的字符，制作网页时有时需要输入一些键盘上没有的字符，如注册商标符号、欧元符号等等。如注册商标符号、欧元符号等等。l方法是方法是：“插入插入”菜单菜单HTMLHTML特殊字符特殊字符 第9页，共32页，编辑于2022年，星期二l插入文本列表插入文本列表l在网页中插入文本列表，可以使文本内容显得更加工整、在网页中插入文本列表，可以使文本内容显得更加工整、直观。直观。l方法方法:“文本文本”插入工具栏插入工具栏 属性面板属性面板第10页，共32页，编辑于2022年，星期二3.23.2插入图像插入图像n图像是网页中最重要的元素之一，图像能够使网页变得丰富起图像是网页中最重要的元素之一，图像能够使网页变得丰富起来，令人耳目一新图像不但能美化网页，而且与文本相比更来，令人耳目一新图像不但能美化网页，而且与文本相比更能够直观地说明问题，使表达的意思一目了然，加深浏览者的能够直观地说明问题，使表达的意思一目了然，加深浏览者的印象印象n在网页中插入图像在网页中插入图像n设置图像的属性设置图像的属性第11页，共32页，编辑于2022年，星期二3.2.1 3.2.1 在网页中插入图像在网页中插入图像n在在DreamweaverDreamweaver中，可以在中，可以在“设计设计”视图或视图或“代码代码”视图视图中将图像插入文档。在中将图像插入文档。在DreamweaverDreamweaver文档中添加图像时，可文档中添加图像时，可以设置或修改图像属性并直接在以设置或修改图像属性并直接在“文档文档”窗口中查看所做的窗口中查看所做的更改。更改。n在网页中将光标置于要插入图像的位置，执行在网页中将光标置于要插入图像的位置，执行“插入插入”菜菜单单，选择，选择“图像图像”命令命令，打开，打开“选择图像源文件选择图像源文件”对话框。对话框。第12页，共32页，编辑于2022年，星期二“选择图像源文件选择图像源文件”对话框对话框如果插入的图像如果插入的图像不在当前网页所不在当前网页所在的站点在的站点 ，DreamweaverDreamweaver将将提示是否将该图提示是否将该图片复制到所在站片复制到所在站点，一般单击点，一般单击“是是”实例实例第13页，共32页，编辑于2022年，星期二3.2.2 3.2.2 设置图像的属性设置图像的属性n图像属性的设置主要是通过图像属性的设置主要是通过“属性属性”面板来完成的，在面板来完成的，在“属属性性”面板中可设置图像的大小、位置、名称、边框、替代文面板中可设置图像的大小、位置、名称、边框、替代文本、低解析度等内容，使图像更加符合页面设计，并使其更本、低解析度等内容，使图像更加符合页面设计，并使其更加美观。加美观。实例实例第14页，共32页，编辑于2022年，星期二n方法方法:将光标置于文档中，执行将光标置于文档中，执行“插入插入”“”“图像对象图像对象”“”“鼠标经过图像鼠标经过图像”命令，打开命令，打开“插入鼠标经过图像插入鼠标经过图像”对话框对话框。3.3 3.3 轮换图像轮换图像n鼠标经过图像效果是指当访问者移动鼠标经过图像时鼠标经过图像效果是指当访问者移动鼠标经过图像时,图像变为另一图像变为另一幅图像幅图像,当鼠标离开时又恢复为原来的图像当鼠标离开时又恢复为原来的图像.n注意注意:两幅图像的大小完全相同。如果这两个图像大小不同，两幅图像的大小完全相同。如果这两个图像大小不同，DreamweaverDreamweaver将自动调整第二个图像的大小，以匹配第一个图像的属将自动调整第二个图像的大小，以匹配第一个图像的属性。性。第15页，共32页，编辑于2022年，星期二“插入鼠标经过图像插入鼠标经过图像”对话框对话框实例实例第16页，共32页，编辑于2022年，星期二3.4 3.4 插入媒体插入媒体n多媒体对象和图像一样，在网页中是一道亮丽的风景，它能多媒体对象和图像一样，在网页中是一道亮丽的风景，它能使网页丰富、活跃起来，使用使网页丰富、活跃起来，使用DreamweaverDreamweaver制作网页，可以制作网页，可以方便地插入各种多媒体对象。当需要编辑各种多媒体对象时，方便地插入各种多媒体对象。当需要编辑各种多媒体对象时，可以在可以在DreamweaverDreamweaver窗口中启动相应的媒体外部编辑器来编窗口中启动相应的媒体外部编辑器来编辑媒体。辑媒体。n插入插入flashflash动画动画n插入插入flashflash按钮按钮n插入插入flashflash文本文本第17页，共32页，编辑于2022年，星期二3.4.1 3.4.1 插入插入flashflash动画动画nFlashFlash动画是一种高质量的矢量动画，在网络中有着大量的精美动动画是一种高质量的矢量动画，在网络中有着大量的精美动画素材。让网页活跃起来，使用画素材。让网页活跃起来，使用DreamweaverDreamweaver制作网页，可以在网制作网页，可以在网页插入导出为页插入导出为.swf.swf或或.swt.swt格式的格式的FlashFlash按钮。按钮。n方法是：将光标置于文档中，执行方法是：将光标置于文档中，执行“插入插入”“”“媒体媒体”“Flash”“Flash”命令命令，打开，打开“选择文件选择文件”对话框。对话框。第18页，共32页，编辑于2022年，星期二“选择文件选择文件”对话框对话框实例实例第19页，共32页，编辑于2022年，星期二3.4.23.4.2 插入插入flashflash按钮按钮n方法是：将光标置于文档中，执行方法是：将光标置于文档中，执行“插入插入”“”“媒体媒体”“Flash“Flash按钮按钮”命令命令，打开，打开“插入插入FlashFlash按钮按钮”对话框。对话框。n使用使用DreamweaverDreamweaver中的中的FlashFlash按钮对象，可以创建或者载入按钮对象，可以创建或者载入一组预设的一组预设的FlashFlash按钮，并为按钮添加文本、背景颜色以按钮，并为按钮添加文本、背景颜色以及指向其他文件的链接。及指向其他文件的链接。第20页，共32页，编辑于2022年，星期二“插入插入FlashFlash按钮按钮”对话框对话框实例实例第21页，共32页，编辑于2022年，星期二3.4.3 3.4.3 插入插入flashflash文本文本n方法是：将光标置于文档中，执行方法是：将光标置于文档中，执行“插入插入”“”“媒体媒体”“Flash“Flash文本文本”命令命令，打开，打开“插入插入FlashFlash文本文本”对话框。对话框。实例实例第22页，共32页，编辑于2022年，星期二3.5 3.5 创建链接创建链接n创建文件创建文件链接链接n创建图像创建图像链接链接n创建图像热点创建图像热点链接链接n创建电子邮件创建电子邮件链接链接n创建锚点创建锚点链接链接第23页，共32页，编辑于2022年，星期二3.5.1 3.5.1 创建文件创建文件/图像链接图像链接n在一般情况下，创建文件链接都是在在一般情况下，创建文件链接都是在“属性属性”面板中的面板中的“链接链接”文本框中完成的。使用文本框中完成的。使用“属性属性”面板可以给当前文档中的面板可以给当前文档中的文文本本或者或者图像图像添加链接。添加链接。“目标目标”下来列表中的下来列表中的4 4个选项：个选项：_blank:_blank:将被链接文档加载到新的未命名浏览器窗口中。将被链接文档加载到新的未命名浏览器窗口中。_parent:_parent:将被链接文档加载到父框架集或包含该链接的框架窗口中。将被链接文档加载到父框架集或包含该链接的框架窗口中。_self:_self:将被链接文档加载到与该链接文字相同的框架或窗口中。将被链接文档加载到与该链接文字相同的框架或窗口中。_top:_top:将被链接文档加载到整个浏览器窗口并删除所有框架。将被链接文档加载到整个浏览器窗口并删除所有框架。实例实例第24页，共32页，编辑于2022年，星期二3.5.3 3.5.3 创建图像热点链接创建图像热点链接n图像热点链接可以将一幅图像分割为若干个区域，并将这些图像热点链接可以将一幅图像分割为若干个区域，并将这些区域设置成热点区域。可以将这些不同热点区域链接到不同区域设置成热点区域。可以将这些不同热点区域链接到不同页面，当浏览者单击图像上不同的热点区域时，就可以跳转页面，当浏览者单击图像上不同的热点区域时，就可以跳转到不同的页面。到不同的页面。热点工具：热点工具：“矩形热点矩形热点”工具、工具、“椭圆热点椭圆热点”工具、工具、“多边形热点多边形热点”工工具具第25页，共32页，编辑于2022年，星期二n方法：方法：选中图像，单击选中图像，单击“属性属性”面板中的面板中的“热点工具热点工具”按钮，绘制按钮，绘制一个矩形热点，在一个矩形热点，在“属性属性”面板中设置面板中设置“链接链接”。实例实例第26页，共32页，编辑于2022年，星期二3.5.4 3.5.4 创建电子邮件链接创建电子邮件链接n通过电子邮件链接通过电子邮件链接,可以方便浏览者反馈信息可以方便浏览者反馈信息,并将信息传送并将信息传送到对应的信件中。如此一来到对应的信件中。如此一来,可方便用户与网站管理者或服可方便用户与网站管理者或服务商之间互相沟通务商之间互相沟通.例如例如,用户可通过电子邮件链接提供意见用户可通过电子邮件链接提供意见给网站管理者。同时一些网站可以让消费者通过电子邮件链给网站管理者。同时一些网站可以让消费者通过电子邮件链接得到其所提供的各种信息与帮助。接得到其所提供的各种信息与帮助。n在网页中选种要实现电子邮件链接的文字，执行在网页中选种要实现电子邮件链接的文字，执行“插入插入”菜单，选择菜单，选择“电子邮件链接电子邮件链接”命令，打开命令，打开“电子邮件链接电子邮件链接”对话框。对话框。第27页，共32页，编辑于2022年，星期二“电子邮件链接电子邮件链接”对话框对话框实例实例第28页，共32页，编辑于2022年，星期二3.5.5 3.5.5 创建锚点链接创建锚点链接n在制作网页时，有些页面内容较多，页面就可能变长。在制作网页时，有些页面内容较多，页面就可能变长。为了方便浏览，可以在页面中创建锚点链接。为了方便浏览，可以在页面中创建锚点链接。n在网页中将光标置于要插入在网页中将光标置于要插入锚点链接锚点链接的位置，执行的位置，执行“插插入入”菜单，选择菜单，选择“命名命名锚记锚记”命令，打开命令，打开“命名命名锚记锚记”对对话框。话框。第29页，共32页，编辑于2022年，星期二“命名锚记命名锚记”对话框对话框实例实例第30页，共32页，编辑于2022年，星期二3.6 3.6 插入表单插入表单n使用表单可以与站点的访问者进行交互并从用户那里收集信息。使用表单可以与站点的访问者进行交互并从用户那里收集信息。表单从用户那里收集信息后，将这些信息提交给服务器进行处表单从用户那里收集信息后，将这些信息提交给服务器进行处理。理。n目前表单主要用来进行意见调查、在线查询、网上购物、在目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：线申请等。在表单中经常出现的字段有：单行文本框单行文本框、多多行滚动文本框行滚动文本框、单选框单选框、复选框复选框、下拉列表框和按钮下拉列表框和按钮。第31页，共32页，编辑于2022年，星期二创建表单对象创建表单对象n在创建表单对象之前，首先必须在页面中插入表单。在创建表单对象之前，首先必须在页面中插入表单。表单对象表单对象n 单行文本框单行文本框n 多行滚动文本框多行滚动文本框n 单选框单选框n 复选框复选框n 下拉列表框下拉列表框n 按钮按钮 插入表单之后，可以插入表单之后，可以看到有个看到有个红色的虚线红色的虚线框框就表示表单的范围，就表示表单的范围，如果需要插入表单对象如果需要插入表单对象则应该在该区域之内插则应该在该区域之内插入。入。实例实例第32页，共32页，编辑于2022年，星期二
