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