第三章创建基本网页优秀课件.ppt

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