网页设计与制作案例教程-电子教案第21单元.ppt

《网页设计与制作案例教程-电子教案第21单元.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程-电子教案第21单元.ppt（40页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1111章章HTMLHTML语言语言 前面各章都是通前面各章都是通过过DreamweaverDreamweaver 8 8提供的提供的可可视视化化设计环设计环境来境来创创建和建和编辑编辑网网页页的，但是的，但是对对于一个希望深入掌握网于一个希望深入掌握网页页制作、制作、对对代代码严码严格控制的网格控制的网页设计页设计人人员员来来讲讲，了解和掌握，了解和掌握HTMLHTML语语言是非常必要的。言是非常必要的。l 课程引导课程引导 DreamweaverDreamweaver 8 8是一种非常是一种非常优优秀的可秀的可视视化化网网页页制作制作软软件，它也提供了丰富的源代件，它也提供了丰富的源代

2、码码控控件功能，可以件功能，可以让让网网页页制作者随制作者随时查时查看、看、编辑编辑HTMLHTML源代源代码码，DreamweaverDreamweaver 8 8的快速的快速标签编辑标签编辑器很好地器很好地协调协调了可了可视视化操作和化操作和HTMLHTML源代源代码编码编写二者之写二者之间间的关系。的关系。l 知识技能目标知识技能目标 （1 1）掌握）掌握DreamweaverDreamweaver 8 8的的HTMLHTML源代源代码编码编辑辑功能。掌握快速功能。掌握快速标签编辑标签编辑器、器、标签选择标签选择器器和和标签编辑标签编辑器的使用方法。器的使用方法。（2 2）掌握常用的）掌

3、握常用的HTMLHTML标记标记的含的含义义及其及其应应用。用。（3 3）学会手工修改）学会手工修改HTMLHTML代代码码。l 网页浏览效果展示网页浏览效果展示 采用手工采用手工编编写写HTMLHTML代代码码制作的网制作的网页浏览页浏览效果如效果如图图11-111-1所示。所示。图图11-1手工手工编编写写HTML代代码码所制作的网所制作的网页预览页预览效果效果l 本章操作任务本章操作任务 制作一个表制作一个表单单网网页页，该该表表单单网网页页中包括中包括表表单单域、文本域、文本区域、域、文本域、文本区域、单选单选按按钮钮、复、复选选框、列表框、列表/菜菜单单等表等表单单元素。元素。11.

4、111.1H HT TMML L简简介介11.211.2D Dr re ea ammwwe ea av ve er r 8 8的的H HT TMML L源源代代码码编编辑辑功功能能11.311.3H HT TMML L标标记记1 11 1.1.1HTMLHTML简介简介 HTMLHTML语语言用来描述言用来描述WebWeb页页面文档的面文档的语语言，言，它不是一种它不是一种编编程程语语言，而是一种言，而是一种页页面描述性面描述性标记语标记语言。通言。通过过各种各种标记标记描述不同的内容，描述不同的内容，说说明明标题标题、段落、字体、段落、字体、图图像等网像等网页页元素在元素在浏览浏览器中的器中

5、的显显示效果，示效果，浏览浏览网网页时页时，将根据，将根据HTMLHTML标记显标记显示其内容。示其内容。11.1.111.1.1HTMLHTML语言的特点语言的特点一个最基本网一个最基本网页页的的HTMLHTML代代码码格式如下：格式如下：11.1.211.1.2HTMLHTML语言的语法结构语言的语法结构1 1HTMLHTML基本结构基本结构 网网页标题页标题 网网页页主体内容主体内容 在在HTMLHTML网网页页文档的基本文档的基本结结构中主要包含构中主要包含以下几种以下几种标记标记：（1 1）HTMLHTML标记标记 （2 2）HEADHEAD头头部部标记标记 （3 3）BODYBOD

6、Y主体主体标记标记 一个完整的一个完整的HTMLHTML文档由各种网文档由各种网页页元素与元素与HTMLHTML标记组标记组成的，网成的，网页页元素指元素指标题标题、段落、段落、图图像、表格、像、表格、层层等各种等各种对对象，象，标记标记的功能是的功能是逻辑逻辑性地描述网性地描述网页页的的结结构。构。HTMLHTML文档文档应应遵循以下遵循以下语语法法规则规则。2 2HTMLHTML语言的语法规则语言的语法规则 （1 1）HTMLHTML文档以文档以纯纯文本形式存放，文本形式存放，扩扩展展名名为为“.html.html”或或“.htmhtm”。（2 2）HTMLHTML文档中文档中标记标记采用

7、采用“”作作为为分割字符。分割字符。（3 3）HTMLHTML标记标记及属性不区分大小写，例及属性不区分大小写，例如如和和是相同的是相同的标记标记。（4 4）大多数）大多数HTMLHTML标记标记可以嵌套，但不能可以嵌套，但不能交叉，各交叉，各层标记层标记是全包容关系。是全包容关系。（5 5）HTMLHTML文档一行可以文档一行可以书书写多个写多个标记标记，一个一个标记标记也可以分多行也可以分多行书书写，不用任何写，不用任何续续行行符号，符号，显显示效果相同。示效果相同。（6 6）HTMLHTML源代源代码码中的中的换换行、回行、回车车符和多符和多个个连续连续空格在空格在浏览时浏览时都是无效的

8、，都是无效的，浏览浏览网网页页时时，会自，会自动动忽略文档中的忽略文档中的换换行符、回行符、回车车符、符、空格，所以在文档中空格，所以在文档中输输入的回入的回车车符，并不意符，并不意味着在味着在浏览浏览器中将看到不同的段落。器中将看到不同的段落。（7 7）网）网页页中所有的中所有的显显示内容都示内容都应该应该受限受限于一个或多个于一个或多个标记标记，不能存在游离于，不能存在游离于标记标记之之外的文字或外的文字或图图像等，以免像等，以免产产生生错误错误。（8 8）对对于于浏览浏览器不能分辨的器不能分辨的标记标记可以忽可以忽略，不略，不显显示其中的示其中的对对象。象。在在查查看看HTMLHTML源

9、代源代码码或或编编写网写网页时页时，经经常常会遇到三种格式的会遇到三种格式的HTMLHTML标记标记。（1 1）不）不带带属性的双属性的双标记标记：内内容容/（2 2）带带有属性的双有属性的双标记标记：网网页对页对象象/（3 3）单标记单标记：/3 3HTMLHTML标记的类型标记的类型11.211.2Dreamweaver 8Dreamweaver 8的的HTMLHTML源代码编辑功能源代码编辑功能 DreamweaverDreamweaver 8 8的的编辑环编辑环境中提供了三境中提供了三种种视图视图模式：模式：“代代码码”、“拆分拆分”、“设计设计”，这这三种三种视图视图都可以通都可以通

10、过单击过单击“文档文档”工具工具栏栏上左上左边边的按的按钮进钮进行快速切行快速切换换。11.2.111.2.1Dreamweaver 8Dreamweaver 8的三种视图模式的三种视图模式（1 1）在站点）在站点“长长沙世界之窗沙世界之窗”下下创创建文件建文件夹夹“12HTML12HTML语语言言”，在，在“文件文件”面板中面板中单击选单击选中中刚刚才新建的子文件才新建的子文件夹夹“12HTML12HTML语语言言”，单击单击鼠鼠标标右右键键，在，在弹弹出的快捷菜出的快捷菜单单中中单击单击 【新新建文件建文件】，在子文件，在子文件夹夹“12HTML12HTML语语言言”中便中便会会创创建一个

11、默建一个默认认名称名称为为“untitled.htmluntitled.html”的网的网页页文档。文档。11.2.211.2.2利用代码视图制作利用代码视图制作HTMLHTML网页网页 （2 2）将新建的网）将新建的网页页重命名重命名为为“12.html12.html”，在在“文件文件”面板中双面板中双击该击该名称打开名称打开该该网网页页。（3 3）在）在“文档文档”工具工具栏栏中中单击单击【代代码码】按按钮钮，切，切换换到代到代码视图码视图的的编辑编辑窗口。窗口。（4 4）在代）在代码码窗口中的窗口中的标题标题位置位置输输入新的入新的网网页标题页标题：“公司部公司部门门”，并按，并按 “C

12、trl+EnterCtrl+Enter”组组合合键键，“文档文档”面板中的面板中的标题标题文本框中的文本框中的标标题题也同步也同步变变化。化。（5 5）在代）在代码码窗口中窗口中与与之之间间输输入文字入文字“长长沙世界之窗沙世界之窗实现总经实现总经理理领导领导下下的部的部门经门经理理负责负责制，管理上采用垂直制，管理上采用垂直领导领导、分分层层管理、逐管理、逐级负责级负责。”，接着，接着输输入入“/”（6 6）回）回车换车换行，然后行，然后输输入入“height=303/”。（7 7）保存）保存该该网网页页文档，且在文档，且在浏览浏览器中器中预预览该览该网网页页。代代码视图码视图会以不同的会以

13、不同的颜颜色色显显示示HTMLHTML源代源代码码，以帮助用，以帮助用户户区分各种区分各种标签标签，同，同时时用用户户也也可以自己指定可以自己指定标签标签或代或代码码的的显显示示颜颜色。色。利用利用“编码编码”工具工具栏栏可以可以实现实现以下操作：以下操作：11.2.311.2.3Dreamweaver 8Dreamweaver 8的代码编辑工具的代码编辑工具1 1代码视图代码视图 （1 1）代）代码码的折叠的折叠 对对于代于代码码非常非常长长的网的网页页，可以，可以对对部分代部分代码码折叠起来。先折叠起来。先选择选择多行代多行代码码，然后，然后单击单击所所选选代代码码左左侧侧的折叠按的折叠按

14、钮钮或者或者单击单击“编码编码”工具工具栏栏中的中的【折叠所折叠所选选】按按钮钮即可。如果按住即可。如果按住“AltAlt”键键的同的同时时，单击单击【折叠所折叠所选选】按按钮钮，则则折叠没有折叠没有选选中的代中的代码码。利用利用“编码编码”工具工具栏栏上的上的【折叠整个折叠整个标签标签】按按钮钮可以可以对对某一个某一个标签标签首尾首尾对应对应的区域的区域进进行折叠，且无需行折叠，且无需选择选择代代码码。方法是：将光。方法是：将光标标定位在需要折叠的定位在需要折叠的标签标签中，然后中，然后单击单击【折叠折叠整个整个标签标签】按按钮钮，那么光，那么光标标所所处处位置的位置的标签标签区域被折叠。区

15、域被折叠。如果按住如果按住“AltAlt”键键的同的同时时，单击单击【折叠整折叠整个个标签标签】按按钮钮，则则会折叠外部的会折叠外部的标签标签。打开部分已折叠的代打开部分已折叠的代码码，只要，只要单击单击列左列左侧侧的的展开按展开按钮钮即可。如果要全部展开所有被折叠即可。如果要全部展开所有被折叠的代的代码码，单击单击“编码编码”工具工具栏栏中的中的【扩扩展全部展全部】按按钮钮即可。即可。（2 2）选择选择父父标签标签 代代码标签码标签之之间间一般都存在着嵌套关系，一般都存在着嵌套关系，如何快速如何快速查查找某代找某代码标签码标签是属于另外哪一个是属于另外哪一个代代码标签码标签呢？可以直接将光呢

16、？可以直接将光标标置于置于该标签该标签代代码码中，然后中，然后单击单击【选择选择父父标签标签】按按钮钮即可。即可。可以可以单击单击多次依次多次依次选择选择父父标签标签。（3 3）代）代码码的注的注释释 先先选择选择需要注需要注释释的代的代码码行，然后行，然后单击单击“编码编码”工具工具栏栏中的中的【应应用注用注释释】按按钮钮，再在，再在弹弹出菜出菜单单中中选择选择一种注一种注释释方法即可。方法即可。要取消注要取消注释释，先，先选择选择要取消注要取消注释释的代的代码码行，行，然后然后单击单击“编码编码”工具工具栏栏中的中的【删删除注除注释释】按按钮钮即可。即可。（4 4）环绕标签环绕标签 环绕标

17、签环绕标签的主要功能是防止写的主要功能是防止写标签时标签时忽忽略略结结束束标签标签。其操作方法是：先。其操作方法是：先选择选择内容，内容，然后然后单击单击【环绕标签环绕标签】按按钮钮，从下拉列表框，从下拉列表框中中选择选择或者直接或者直接输输入相入相应应代代码码，在，在选择选择内容内容外外围围会自会自动动添加完整的开始和添加完整的开始和结结束束标签标签。（5 5）代）代码码的的缩进缩进与凸出与凸出 先先选择选择一段代一段代码码，然后按，然后按“TabTab”键键或或单单击击“编码编码”工具工具栏栏中的中的【缩进缩进代代码码】按按钮钮，即，即可可实现实现代代码码的的缩进缩进。对对于已于已缩进缩进

18、的代的代码码，如，如果想要凸出，可按果想要凸出，可按“Shift+TabShift+Tab”组组合合键键或者或者单单击击“编码编码”工具工具栏栏中的中的【凸出代凸出代码码】按按钮实现钮实现代代码码的凸出。的凸出。（6 6）显显示示/隐隐藏行号藏行号 在代在代码视图码视图窗口中窗口中对对每个每个HTMLHTML语语句句显显示示其行号，以便于定位。操作方法是：在代其行号，以便于定位。操作方法是：在代码码视图视图窗口窗口单击单击“编码编码”工具工具栏栏中的中的【行号行号】按按钮钮，或者在，或者在“文档文档”工具工具栏栏中中单击单击【视图选项视图选项】按按钮钮，然后在，然后在弹弹出的下拉菜出的下拉菜单

19、单中中单击单击【行行数数】命令即可命令即可显显示或示或隐隐藏藏“行号行号”。（7 7）自）自动换动换行行 在代在代码视图码视图窗口中窗口中编辑编辑代代码时码时，常常会，常常会发现发现一行代一行代码过长码过长需要自需要自动换动换行，操作方法行，操作方法是：是：单击单击“文档文档”工具工具栏栏中的中的【视图选项视图选项】按按钮钮，然后在，然后在弹弹出的下拉菜出的下拉菜单单中中单击单击【自自动换动换行行】命令。命令。快速快速标签编辑标签编辑器的作用是器的作用是让让用用户户在文档在文档窗口中直接窗口中直接对对HTMLHTML标签进标签进行行编编写，无需使用写，无需使用代代码视图码视图，就可以，就可以编

20、辑单编辑单独的独的HTMLHTML标签标签2 2快速标签编辑器快速标签编辑器 快速快速标签编辑标签编辑器有插入器有插入HTMLHTML、编辑标签编辑标签和和环绕标签环绕标签三种状三种状态态，打开，打开编辑编辑器后，可以器后，可以通通过过按按“Ctrl+TCtrl+T”组组合合键进键进行状行状态态切切换换，如，如图图11-1111-11为编辑标签为编辑标签状状态态，如，如图图11-1211-12为为插入模插入模式的快速式的快速标签编辑标签编辑器。器。为为了方便手工了方便手工编码编码，可以使用，可以使用标签选择标签选择器和器和标签编辑标签编辑器。使用器。使用标签选择标签选择器，可以在器，可以在网网

21、页页代代码码中插入新的中插入新的标签标签；使用；使用标签编辑标签编辑器，器，可以可以对对网网页页代代码码中的中的标签进标签进行添加行添加标签标签的属的属性或修改属性性或修改属性值值。3 3使用标签选择器和标签编辑器使用标签选择器和标签编辑器 （1 1）使用）使用标签选择标签选择器器 （2 2）使用）使用标签编辑标签编辑器器 打开打开“文件文件”面板面板组组，然后切，然后切换换到到“代代码码片片断断”选项选项卡即可卡即可进进入代入代码码片断子面板。利用片断子面板。利用代代码码片断面可以减少代片断面可以减少代码编辑码编辑的工作量，在的工作量，在该该面板中可以存面板中可以存储储HTMLHTML、Ja

22、vaScriptJavaScript的代的代码码片断，片断，这样这样当需要重复使用当需要重复使用这这些代些代码时码时，就，就可以很方便地重用可以很方便地重用这这些代些代码码，或者，或者创创建并存建并存储储新的代新的代码码片断。片断。4 4代码片断代码片断 （1 1）插入代）插入代码码片断片断 在代在代码码片断子面板中片断子面板中选择选择需要插入的代需要插入的代码码片断，例如片断，例如“将将竖线竖线用作分隔用作分隔线线”，然后直，然后直接接单击单击面板上的面板上的【插入插入】按按钮钮，即可将代，即可将代码码片断插入至片断插入至页页面。面。（2 2）自定）自定义义代代码码片断片断 如果自己如果自己

23、编编写一段代写一段代码码，希望在其他，希望在其他页页面中重复使用面中重复使用这这一段代一段代码码，这时这时就可以使用就可以使用代代码码片断子面板自定片断子面板自定义义代代码码片断，片断，轻轻松松实现实现代代码码的重用。的重用。在在DreamweaverDreamweaver 8 8中打开代中打开代码视图码视图窗口，窗口，然后然后单击单击【命令命令】【清理清理HTML/XHTMLHTML/XHTML】命命令，令，这时这时会出会出现现如如图图11-1811-18所示的所示的“清理清理HTML/XHTMLHTML/XHTML”对话对话框，在其中可以框，在其中可以选择优选择优化化方式。方式。5 5代码优化代码优化 然后然后单击单击【确定确定】按按钮钮，DreamweaverDreamweaver 8 8会花一段会花一段时间进时间进行行优优化化处处理。如果理。如果选择选择了了“完成后完成后显显示示记录记录”复复选选框，框，则处则处理理结结束束时时会会弹弹出一个提示出一个提示对话对话框，其中列出了修改的内框，其中列出了修改的内容。容。