《网页设计与制作案例教程-电子教案第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）掌握常用的）掌握常用的HTMLHTML标记的含的含义及其及其应用。用。 （3 3）学会手工修改）学会手工修改HTMLHTML代
3、代码。l 网页浏览效果展示网页浏览效果展示 采用手工采用手工编写写HTMLHTML代代码制作的网制作的网页浏览效果如效果如图11-111-1所示。所示。图11-1手工手工编写写HTML代代码所制作的网所制作的网页预览效果效果l 本章操作任务本章操作任务 制作一个表制作一个表单网网页，该表表单网网页中包括中包括表表单域、文本域、文本区域、域、文本域、文本区域、单选按按钮、复、复选框、列表框、列表/ /菜菜单等表等表单元素。元素。11.111.1H H T T M ML L简简介介11.211.2D D r re ea am m w w e ea av ve er r 8 8的的H HT TM M
4、L L源源代代码码编编辑辑功功能能11.311.3H HT TM ML L标标记记1 11 1.1.1HTMLHTML简介简介 HTMLHTML语言用来描述言用来描述WebWeb页面文档的面文档的语言，言，它不是一种它不是一种编程程语言，而是一种言，而是一种页面描述性面描述性标记语言。通言。通过各种各种标记描述不同的内容，描述不同的内容，说明明标题、段落、字体、段落、字体、图像等网像等网页元素在元素在浏览器中的器中的显示效果，示效果，浏览网网页时，将根据，将根据HTMLHTML标记显示其内容。示其内容。 11.1.111.1.1HTMLHTML语言的特点语言的特点一个最基本网一个最基本网页的的
5、HTMLHTML代代码格式如下：格式如下： 11.1.211.1.2HTMLHTML语言的语法结构语言的语法结构1 1HTMLHTML基本结构基本结构 网网页标题 网网页主体内容主体内容 在在HTMLHTML网网页文档的基本文档的基本结构中主要包含构中主要包含以下几种以下几种标记： （1 1）HTMLHTML标记 （2 2）HEADHEAD头部部标记 （3 3）BODYBODY主体主体标记 一个完整的一个完整的HTMLHTML文档由各种网文档由各种网页元素与元素与HTMLHTML标记组成的，网成的，网页元素指元素指标题、段落、段落、图像、表格、像、表格、层等各种等各种对象，象，标记的功能是的功
6、能是逻辑性地描述网性地描述网页的的结构。构。HTMLHTML文档文档应遵循以下遵循以下语法法规则。 2 2HTMLHTML语言的语法规则语言的语法规则 （1 1）HTMLHTML文档以文档以纯文本形式存放，文本形式存放，扩展展名名为“.html.html”或或“. .htmhtm”。 （2 2）HTMLHTML文档中文档中标记采用采用“ ”作作为分割字符。分割字符。 （3 3）HTMLHTML标记及属性不区分大小写，例及属性不区分大小写，例如如和和是相同的是相同的标记。 （4 4）大多数）大多数HTMLHTML标记可以嵌套，但不能可以嵌套，但不能交叉，各交叉，各层标记是全包容关系。是全包容关系
7、。 （5 5）HTMLHTML文档一行可以文档一行可以书写多个写多个标记，一个一个标记也可以分多行也可以分多行书写，不用任何写，不用任何续行行符号，符号，显示效果相同。示效果相同。 （6 6）HTMLHTML源代源代码中的中的换行、回行、回车符和多符和多个个连续空格在空格在浏览时都是无效的，都是无效的，浏览网网页时，会自，会自动忽略文档中的忽略文档中的换行符、回行符、回车符、符、空格，所以在文档中空格，所以在文档中输入的回入的回车符，并不意符，并不意味着在味着在浏览器中将看到不同的段落。器中将看到不同的段落。 （7 7）网）网页中所有的中所有的显示内容都示内容都应该受限受限于一个或多个于一个或
8、多个标记，不能存在游离于，不能存在游离于标记之之外的文字或外的文字或图像等，以免像等，以免产生生错误。 （8 8）对于于浏览器不能分辨的器不能分辨的标记可以忽可以忽略，不略，不显示其中的示其中的对象。象。 在在查看看HTMLHTML源代源代码或或编写网写网页时，经常常会遇到三种格式的会遇到三种格式的HTMLHTML标记。 （1 1）不）不带属性的双属性的双标记： 内内容容/ （2 2）带有属性的双有属性的双标记： 网网页对象象/ （3 3）单标记： /3 3HTMLHTML标记的类型标记的类型11.211.2Dreamweaver 8Dreamweaver 8的的HTMLHTML源代码编辑功源
9、代码编辑功能能 DreamweaverDreamweaver 8 8的的编辑环境中提供了三境中提供了三种种视图模式：模式：“代代码”、“拆分拆分”、“设计”，这三种三种视图都可以通都可以通过单击“文档文档”工具工具栏上左上左边的按的按钮进行快速切行快速切换。11.2.111.2.1Dreamweaver 8Dreamweaver 8的三种视图模式的三种视图模式（1 1）在站点）在站点“长沙世界之窗沙世界之窗”下下创建文件建文件夹“12HTML12HTML语言言”，在，在“文件文件”面板中面板中单击选中中刚才新建的子文件才新建的子文件夹“12HTML12HTML语言言”，单击鼠鼠标右右键，在，在
10、弹出的快捷菜出的快捷菜单中中单击 【新新建文件建文件】，在子文件，在子文件夹“12HTML12HTML语言言”中便中便会会创建一个默建一个默认名称名称为“untitled.htmluntitled.html”的网的网页文档。文档。11.2.211.2.2利用代码视图制作利用代码视图制作HTMLHTML网页网页 （2 2）将新建的网）将新建的网页重命名重命名为“12.html12.html”，在在“文件文件”面板中双面板中双击该名称打开名称打开该网网页。 （3 3）在）在“文档文档”工具工具栏中中单击【代代码】按按钮，切，切换到代到代码视图的的编辑窗口。窗口。 （4 4）在代）在代码窗口中的窗口
11、中的标题位置位置输入新的入新的网网页标题：“公司部公司部门”，并按，并按 “Ctrl+EnterCtrl+Enter”组合合键，“文档文档”面板中的面板中的标题文本框中的文本框中的标题也同步也同步变化。化。 （5 5）在代）在代码窗口中窗口中与与之之间输入文字入文字“长沙世界之窗沙世界之窗实现总经理理领导下下的部的部门经理理负责制，管理上采用垂直制，管理上采用垂直领导、分分层管理、逐管理、逐级负责。”，接着，接着输入入“ /” （6 6）回）回车换行，然后行，然后输入入“ height=303 /”。 （7 7）保存）保存该网网页文档，且在文档，且在浏览器中器中预览该网网页。 代代码视图会以不
12、同的会以不同的颜色色显示示HTMLHTML源代源代码，以帮助用，以帮助用户区分各种区分各种标签，同，同时用用户也也可以自己指定可以自己指定标签或代或代码的的显示示颜色。色。利用利用“编码”工具工具栏可以可以实现以下操作：以下操作：11.2.311.2.3Dreamweaver 8Dreamweaver 8的代码编辑工的代码编辑工具具1 1代码视图代码视图 （1 1）代）代码的折叠的折叠 对于代于代码非常非常长的网的网页，可以，可以对部分代部分代码折叠起来。先折叠起来。先选择多行代多行代码，然后，然后单击所所选代代码左左侧的折叠按的折叠按钮或者或者单击“编码”工具工具栏中的中的【折叠所折叠所选】
13、按按钮即可。如果按住即可。如果按住“AltAlt”键的同的同时，单击【折叠所折叠所选】按按钮，则折叠没有折叠没有选中的代中的代码。 利用利用“编码”工具工具栏上的上的【折叠整个折叠整个标签】按按钮可以可以对某一个某一个标签首尾首尾对应的区域的区域进行折叠，且无需行折叠，且无需选择代代码。方法是：将光。方法是：将光标定位在需要折叠的定位在需要折叠的标签中，然后中，然后单击【折叠折叠整个整个标签】按按钮，那么光，那么光标所所处位置的位置的标签区域被折叠。区域被折叠。 如果按住如果按住“AltAlt”键的同的同时，单击【折叠整折叠整个个标签】按按钮，则会折叠外部的会折叠外部的标签。打开部分已折叠的代
14、打开部分已折叠的代码，只要，只要单击列左列左侧的的展开按展开按钮即可。如果要全部展开所有被折叠即可。如果要全部展开所有被折叠的代的代码，单击“编码”工具工具栏中的中的【扩展全部展全部】按按钮即可。即可。 （2 2）选择父父标签 代代码标签之之间一般都存在着嵌套关系，一般都存在着嵌套关系，如何快速如何快速查找某代找某代码标签是属于另外哪一个是属于另外哪一个代代码标签呢？可以直接将光呢？可以直接将光标置于置于该标签代代码中，然后中，然后单击【选择父父标签】按按钮即可。即可。可以可以单击多次依次多次依次选择父父标签。 （3 3）代）代码的注的注释 先先选择需要注需要注释的代的代码行，然后行，然后单击
15、“编码”工具工具栏中的中的【应用注用注释】按按钮，再在，再在弹出菜出菜单中中选择一种注一种注释方法即可。方法即可。要取消注要取消注释，先，先选择要取消注要取消注释的代的代码行，行，然后然后单击“编码”工具工具栏中的中的【删除注除注释】按按钮即可。即可。 （4 4）环绕标签 环绕标签的主要功能是防止写的主要功能是防止写标签时忽忽略略结束束标签。其操作方法是：先。其操作方法是：先选择内容，内容，然后然后单击【环绕标签】按按钮，从下拉列表框，从下拉列表框中中选择或者直接或者直接输入相入相应代代码，在，在选择内容内容外外围会自会自动添加完整的开始和添加完整的开始和结束束标签。 （5 5）代）代码的的缩
16、进与凸出与凸出 先先选择一段代一段代码，然后按，然后按“TabTab”键或或单击“编码”工具工具栏中的中的【缩进代代码】按按钮，即，即可可实现代代码的的缩进。对于已于已缩进的代的代码，如，如果想要凸出，可按果想要凸出，可按“Shift+TabShift+Tab”组合合键或者或者单击“编码”工具工具栏中的中的【凸出代凸出代码】按按钮实现代代码的凸出。的凸出。 （6 6）显示示/ /隐藏行号藏行号 在代在代码视图窗口中窗口中对每个每个HTMLHTML语句句显示示其行号，以便于定位。操作方法是：在代其行号，以便于定位。操作方法是：在代码视图窗口窗口单击“编码”工具工具栏中的中的【行号行号】按按钮，或
17、者在，或者在“文档文档”工具工具栏中中单击【视图选项】按按钮，然后在，然后在弹出的下拉菜出的下拉菜单中中单击【行行数数】命令即可命令即可显示或示或隐藏藏“行号行号”。 （7 7）自）自动换行行 在代在代码视图窗口中窗口中编辑代代码时，常常会，常常会发现一行代一行代码过长需要自需要自动换行，操作方法行，操作方法是：是：单击“文档文档”工具工具栏中的中的【视图选项】按按钮，然后在，然后在弹出的下拉菜出的下拉菜单中中单击【自自动换行行】命令。命令。 快速快速标签编辑器的作用是器的作用是让用用户在文档在文档窗口中直接窗口中直接对HTMLHTML标签进行行编写，无需使用写，无需使用代代码视图，就可以，就
18、可以编辑单独的独的HTMLHTML标签2 2快速标签编辑器快速标签编辑器 快速快速标签编辑器有插入器有插入HTMLHTML、编辑标签和和环绕标签三种状三种状态，打开，打开编辑器后，可以器后，可以通通过按按“Ctrl+TCtrl+T”组合合键进行状行状态切切换，如，如图11-1111-11为编辑标签状状态，如，如图11-1211-12为插入模插入模式的快速式的快速标签编辑器。器。 为了方便手工了方便手工编码，可以使用，可以使用标签选择器和器和标签编辑器。使用器。使用标签选择器，可以在器，可以在网网页代代码中插入新的中插入新的标签；使用；使用标签编辑器，器，可以可以对网网页代代码中的中的标签进行添
19、加行添加标签的属的属性或修改属性性或修改属性值。 3 3使用标签选择器和标签编辑器使用标签选择器和标签编辑器 （1 1）使用）使用标签选择器器 （2 2）使用）使用标签编辑器器 打开打开“文件文件”面板面板组，然后切，然后切换到到“代代码片片断断”选项卡即可卡即可进入代入代码片断子面板。利用片断子面板。利用代代码片断面可以减少代片断面可以减少代码编辑的工作量，在的工作量，在该面板中可以存面板中可以存储HTMLHTML、JavaScriptJavaScript的代的代码片断，片断，这样当需要重复使用当需要重复使用这些代些代码时，就，就可以很方便地重用可以很方便地重用这些代些代码，或者，或者创建并
20、存建并存储新的代新的代码片断。片断。4 4代码片断代码片断 （1 1）插入代）插入代码片断片断 在代在代码片断子面板中片断子面板中选择需要插入的代需要插入的代码片断，例如片断，例如“将将竖线用作分隔用作分隔线”，然后直，然后直接接单击面板上的面板上的【插入插入】按按钮，即可将代，即可将代码片断插入至片断插入至页面。面。 （2 2）自定）自定义代代码片断片断 如果自己如果自己编写一段代写一段代码，希望在其他，希望在其他页面中重复使用面中重复使用这一段代一段代码，这时就可以使用就可以使用代代码片断子面板自定片断子面板自定义代代码片断，片断，轻松松实现代代码的重用。的重用。 在在Dreamweave
21、rDreamweaver 8 8中打开代中打开代码视图窗口，窗口，然后然后单击【命令命令】【清理清理HTML/XHTMLHTML/XHTML】命命令，令，这时会出会出现如如图11-1811-18所示的所示的“清理清理HTML/XHTMLHTML/XHTML”对话框，在其中可以框，在其中可以选择优化化方式。方式。5 5代码优化代码优化 然后然后单击【确定确定】按按钮，DreamweaverDreamweaver 8 8会花一段会花一段时间进行行优化化处理。如果理。如果选择了了“完成后完成后显示示记录”复复选框，框，则处理理结束束时会会弹出一个提示出一个提示对话框，其中列出了修改的内框，其中列出了修改的内容。容。
