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

《第三章创建基本网页优秀PPT.ppt》由会员分享，可在线阅读，更多相关《第三章创建基本网页优秀PPT.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章创建基本网页现在学习的是第1页，共32页第三章第三章 创建基本网页创建基本网页n3.1 插入文本插入文本n3.2 插入图像插入图像n3.3 轮换图像轮换图像n3.4 插入媒体插入媒体n3.5 创建链接创建链接n3.5 插入表单插入表单现在学习的是第2页，共32页3.1 3.1 插入文本插入文本n一般来说，网页中显示最多的是文本。所以对文本一般来说，网页中显示最多的是文本。所以对文本的控制，以及布局在设计网页中占了很大的比重，的控制，以及布局在设计网页中占了很大的比重，能否对各种文本控制手段运用自如，是决定网页设能否对各种文本控制手段运用自如，是决定网页设计是否美观、富有创意及提高工作效率

2、的关键。计是否美观、富有创意及提高工作效率的关键。最适合于网页正文显示的字体大小和行距为：最适合于网页正文显示的字体大小和行距为：字体大小字体大小10101212像素像素pxpx左右左右行距行距1515像素像素pxpx左右左右现在学习的是第3页，共32页DreamweaverDreamweaver插入文本插入文本n直接输入直接输入n复制和粘贴文本复制和粘贴文本n导入导入wordword文档文档:“:“文件文件”菜单菜单-“-“导入导入”word”word文档文档实例实例现在学习的是第4页，共32页注意内容注意内容l1 1、输入文本空格、输入文本空格l2 2、实现文本换行、实现文本换行l3 3、

3、插入相关文本要素、插入相关文本要素现在学习的是第5页，共32页1、输入文本空格、输入文本空格l通过键盘上的空格键可以实现输入文本空格，这是与通过键盘上的空格键可以实现输入文本空格，这是与很多文字处理软件是一样的，但是在很多文字处理软件是一样的，但是在DWDW中输入空格的中输入空格的数量在字符输入的半角状态和全角状态是不一样的。数量在字符输入的半角状态和全角状态是不一样的。l输入法切换半角状态时，按空格键只能输入一个空格，而输入法切换半角状态时，按空格键只能输入一个空格，而无法连续输入多个空格。无法连续输入多个空格。l如需输入多个连续的空格，可通过一下几种方法来实现。如需输入多个连续的空格，可通

4、过一下几种方法来实现。现在学习的是第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键换行的行距较

5、大。键换行的行距较大。l按按shift+entershift+enter键来实现正常的换行。键来实现正常的换行。现在学习的是第8页，共32页3、插入相关文本要素、插入相关文本要素l插入特殊字符插入特殊字符l制作网页时有时需要输入一些键盘上没有的字符，如制作网页时有时需要输入一些键盘上没有的字符，如注册商标符号、欧元符号等等。注册商标符号、欧元符号等等。l方法是方法是：“插入插入”菜单菜单HTMLHTML特殊字符特殊字符 现在学习的是第9页，共32页l插入文本列表插入文本列表l在网页中插入文本列表，可以使文本内容显得更加工整、在网页中插入文本列表，可以使文本内容显得更加工整、直观。直观。l方法方

6、法:“文本文本”插入工具栏插入工具栏 属性面板属性面板现在学习的是第10页，共32页3.23.2插入图像插入图像n图像是网页中最重要的元素之一，图像能够使网页变得丰富起图像是网页中最重要的元素之一，图像能够使网页变得丰富起来，令人耳目一新图像不但能美化网页，而且与文本相比更来，令人耳目一新图像不但能美化网页，而且与文本相比更能够直观地说明问题，使表达的意思一目了然，加深浏览者的能够直观地说明问题，使表达的意思一目了然，加深浏览者的印象印象n在网页中插入图像在网页中插入图像n设置图像的属性设置图像的属性现在学习的是第11页，共32页3.2.1 3.2.1 在网页中插入图像在网页中插入图像n在在D

7、reamweaverDreamweaver中，可以在中，可以在“设计设计”视图或视图或“代码代码”视图中视图中将图像插入文档。在将图像插入文档。在DreamweaverDreamweaver文档中添加图像时，可以设文档中添加图像时，可以设置或修改图像属性并直接在置或修改图像属性并直接在“文档文档”窗口中查看所做的更改。窗口中查看所做的更改。n在网页中将光标置于要插入图像的位置，执行在网页中将光标置于要插入图像的位置，执行“插入插入”菜单菜单，选择选择“图像图像”命令命令，打开，打开“选择图像源文件选择图像源文件”对话框。对话框。现在学习的是第12页，共32页“选择图像源文件选择图像源文件”对话

8、框对话框如果插入的图像如果插入的图像不在当前网页所不在当前网页所在的站点在的站点 ，DreamweaverDreamweaver将提将提示是否将该图片示是否将该图片复制到所在站点，复制到所在站点，一般单击一般单击“是是”实例实例现在学习的是第13页，共32页3.2.2 3.2.2 设置图像的属性设置图像的属性n图像属性的设置主要是通过图像属性的设置主要是通过“属性属性”面板来完成的，在面板来完成的，在“属属性性”面板中可设置图像的大小、位置、名称、边框、替代文面板中可设置图像的大小、位置、名称、边框、替代文本、低解析度等内容，使图像更加符合页面设计，并使其更本、低解析度等内容，使图像更加符合页

9、面设计，并使其更加美观。加美观。实例实例现在学习的是第14页，共32页n方法方法:将光标置于文档中，执行将光标置于文档中，执行“插入插入”“”“图像对象图像对象”“鼠标经过图像鼠标经过图像”命令，打开命令，打开“插入鼠标经过图像插入鼠标经过图像”对话框对话框。3.3 3.3 轮换图像轮换图像n鼠标经过图像效果是指当访问者移动鼠标经过图像时鼠标经过图像效果是指当访问者移动鼠标经过图像时,图像变图像变为另一幅图像为另一幅图像,当鼠标离开时又恢复为原来的图像当鼠标离开时又恢复为原来的图像.n注意注意:两幅图像的大小完全相同。如果这两个图像大小不同，两幅图像的大小完全相同。如果这两个图像大小不同，Dr

10、eamweaverDreamweaver将自动调整第二个图像的大小，以匹配第一个图像的将自动调整第二个图像的大小，以匹配第一个图像的属性。属性。现在学习的是第15页，共32页“插入鼠标经过图像插入鼠标经过图像”对话框对话框实例实例现在学习的是第16页，共32页3.4 3.4 插入媒体插入媒体n多媒体对象和图像一样，在网页中是一道亮丽的风景，它能使网多媒体对象和图像一样，在网页中是一道亮丽的风景，它能使网页丰富、活跃起来，使用页丰富、活跃起来，使用DreamweaverDreamweaver制作网页，可以方便地插入制作网页，可以方便地插入各种多媒体对象。当需要编辑各种多媒体对象时，可以在各种多媒

11、体对象。当需要编辑各种多媒体对象时，可以在DreamweaverDreamweaver窗口中启动相应的媒体外部编辑器来编辑媒体。窗口中启动相应的媒体外部编辑器来编辑媒体。n插入插入flashflash动画动画n插入插入flashflash按钮按钮n插入插入flashflash文本文本现在学习的是第17页，共32页3.4.1 3.4.1 插入插入flashflash动画动画nFlashFlash动画是一种高质量的矢量动画，在网络中有着大量的动画是一种高质量的矢量动画，在网络中有着大量的精美动画素材。让网页活跃起来，使用精美动画素材。让网页活跃起来，使用DreamweaverDreamweaver

12、制作网制作网页，可以在网页插入导出为页，可以在网页插入导出为.swf.swf或或.swt.swt格式的格式的FlashFlash按钮。按钮。n方法是：将光标置于文档中，执行方法是：将光标置于文档中，执行“插入插入”“”“媒体媒体”“Flash”“Flash”命令命令，打开，打开“选择文件选择文件”对话框。对话框。现在学习的是第18页，共32页“选择文件选择文件”对话框对话框实例实例现在学习的是第19页，共32页3.4.23.4.2 插入插入flashflash按钮按钮n方法是：将光标置于文档中，执行方法是：将光标置于文档中，执行“插入插入”“”“媒体媒体”“Flash“Flash按钮按钮”命令

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

14、“插入插入”“”“媒体媒体”“Flash“Flash文本文本”命令命令，打开，打开“插入插入FlashFlash文本文本”对话框。对话框。实例实例现在学习的是第22页，共32页3.5 3.5 创建链接创建链接n创建文件创建文件链接链接n创建图像创建图像链接链接n创建图像热点创建图像热点链接链接n创建电子邮件创建电子邮件链接链接n创建锚点创建锚点链接链接现在学习的是第23页，共32页3.5.1 3.5.1 创建文件创建文件/图像链接图像链接n在一般情况下，创建文件链接都是在在一般情况下，创建文件链接都是在“属性属性”面板中的面板中的“链接链接”文本框中完成的。使用文本框中完成的。使用“属性属性”

15、面板可以给当前文面板可以给当前文档中的档中的文本文本或者或者图像图像添加链接。添加链接。“目标目标”下来列表中的下来列表中的4 4个选项：个选项：_blank:_blank:将被链接文档加载到新的未命名浏览器窗口中。将被链接文档加载到新的未命名浏览器窗口中。_parent:_parent:将被链接文档加载到父框架集或包含该链接的框架窗口中。将被链接文档加载到父框架集或包含该链接的框架窗口中。_self:_self:将被链接文档加载到与该链接文字相同的框架或窗口中。将被链接文档加载到与该链接文字相同的框架或窗口中。_top:_top:将被链接文档加载到整个浏览器窗口并删除所有框架。将被链接文档加

16、载到整个浏览器窗口并删除所有框架。实例实例现在学习的是第24页，共32页3.5.3 3.5.3 创建图像热点链接创建图像热点链接n图像热点链接可以将一幅图像分割为若干个区域，并将这些区域图像热点链接可以将一幅图像分割为若干个区域，并将这些区域设置成热点区域。可以将这些不同热点区域链接到不同页面，当设置成热点区域。可以将这些不同热点区域链接到不同页面，当浏览者单击图像上不同的热点区域时，就可以跳转到不同的页面。浏览者单击图像上不同的热点区域时，就可以跳转到不同的页面。热点工具：热点工具：“矩形热点矩形热点”工具、工具、“椭圆热点椭圆热点”工具、工具、“多边形热点多边形热点”工具工具现在学习的是第

17、25页，共32页n方法：方法：选中图像，单击选中图像，单击“属性属性”面板中的面板中的“热点工具热点工具”按钮，绘制按钮，绘制一个矩形热点，在一个矩形热点，在“属性属性”面板中设置面板中设置“链接链接”。实例实例现在学习的是第26页，共32页3.5.4 3.5.4 创建电子邮件链接创建电子邮件链接n通过电子邮件链接通过电子邮件链接,可以方便浏览者反馈信息可以方便浏览者反馈信息,并将信息传送并将信息传送到对应的信件中。如此一来到对应的信件中。如此一来,可方便用户与网站管理者或服可方便用户与网站管理者或服务商之间互相沟通务商之间互相沟通.例如例如,用户可通过电子邮件链接提供意见用户可通过电子邮件链

18、接提供意见给网站管理者。同时一些网站可以让消费者通过电子邮件链给网站管理者。同时一些网站可以让消费者通过电子邮件链接得到其所提供的各种信息与帮助。接得到其所提供的各种信息与帮助。n在网页中选种要实现电子邮件链接的文字，执行在网页中选种要实现电子邮件链接的文字，执行“插入插入”菜菜单，选择单，选择“电子邮件链接电子邮件链接”命令，打开命令，打开“电子邮件链接电子邮件链接”对话框。对话框。现在学习的是第27页，共32页“电子邮件链接电子邮件链接”对话框对话框实例实例现在学习的是第28页，共32页3.5.5 3.5.5 创建锚点链接创建锚点链接n在制作网页时，有些页面内容较多，页面就可能变长。为了在

19、制作网页时，有些页面内容较多，页面就可能变长。为了方便浏览，可以在页面中创建锚点链接。方便浏览，可以在页面中创建锚点链接。n在网页中将光标置于要插入在网页中将光标置于要插入锚点链接锚点链接的位置，执行的位置，执行“插插入入”菜单，选择菜单，选择“命名命名锚记锚记”命令，打开命令，打开“命名命名锚记锚记”对对话框。话框。现在学习的是第29页，共32页“命名锚记命名锚记”对话框对话框实例实例现在学习的是第30页，共32页3.6 3.6 插入表单插入表单n使用表单可以与站点的访问者进行交互并从用户那里收集使用表单可以与站点的访问者进行交互并从用户那里收集信息。表单从用户那里收集信息后，将这些信息提交

20、给服信息。表单从用户那里收集信息后，将这些信息提交给服务器进行处理。务器进行处理。n目前表单主要用来进行意见调查、在线查询、网上购物、在目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：线申请等。在表单中经常出现的字段有：单行文本框单行文本框、多行多行滚动文本框滚动文本框、单选框单选框、复选框复选框、下拉列表框和按钮下拉列表框和按钮。现在学习的是第31页，共32页创建表单对象创建表单对象n在创建表单对象之前，首先必须在页面中插入表单。在创建表单对象之前，首先必须在页面中插入表单。表单对象表单对象n 单行文本框单行文本框n 多行滚动文本框多行滚动文本框n 单选框单选框n 复选框复选框n 下拉列表框下拉列表框n 按钮按钮 插入表单之后，可以插入表单之后，可以看到有个看到有个红色的虚线红色的虚线框框就表示表单的范围，就表示表单的范围，如果需要插入表单对如果需要插入表单对象则应该在该区域之象则应该在该区域之内插入。内插入。实例实例现在学习的是第32页，共32页