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

* * 第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.1 HTML简介 11.2 Dreamweaver 8的HTML源代码编辑功能 11.3 HTML标记 11.1　HTML简介 HTML语言用来描述Web页面文档的语言，它不是一种编程语言，而是一种页面描述性标记语言。通过各种标记描述不同的内容，说明标题、段落、字体、图像等网页元素在浏览器中的显示效果，浏览网页时，将根据HTML标记显示其内容。 11.1.1　HTML语言的特点 一个最基本网页的HTML代码格式如下： 11.1.2　HTML语言的语法结构 1．HTML基本结构 html head title网页标题/title /head body 网页主体内容 /body /html 在HTML网页文档的基本结构中主要包含以下几种标记： （1）HTML标记 （2）HEAD头部标记 （3）BODY主体标记 一个完整的HTML文档由各种网页元素与HTML标记组成的，网页元素指标题、段落、图像、表格、层等各种对象，标记的功能是逻辑性地描述网页的结构。 HTML文档应遵循以下语法规则。 2．HTML语言的语法规则 （1）HTML文档以纯文本形式存放，扩展名为“.html”或“.htm”。 （2）HTML文档中标记采用“”与“”作为分割字符。 （3）HTML标记及属性不区分大小写，例如HTML和html是相同的标记。 （4）大多数HTML标记可以嵌套，但不能交叉，各层标记是全包容关系。 （5）HTML文档一行可以书写多个标记，一个标记也可以分多行书写，不用任何续行符号，显示效果相同。 （6）HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的，浏览网页时，会自动忽略文档中的换行符、回车符、空格，所以在文档中输入的回车符，并不意味着在浏览器中将看到不同的段落。 （7）网页中所有的显示内容都应该受限于一个或多个标记，不能存在游离于标记之外的文字或图像等，以免产生错误。 （8）对于浏览器不能分辨的标记可以忽略，不显示其中的对象。 在查看HTML源代码或编写网页时，经常会遇到三种格式的HTML标记。 （1）不带属性的双标记：标记名称内容/标记名称 （2）带有属性的双标记：标记名称　属性名称=对应的属性值　……网页对象/标记名称 （3）单标记：标记名称 / 3．HTML标记的类型 11.2　Dreamweaver 8的HTML源代码编辑功能 Dreamweaver 8的编辑环境中提供了三种视图模式：“代码”、“拆分”、“设计”，这三种视图都可以通过单击“文档”工具栏上左边的按钮进行快速切换。 11.2.1　Dreamweaver 8的三种视图模式 （1）在站点“长沙世界之窗”下创建文件夹“12HTML语言”，在“文件”面板中单击选中刚才新建的子文件夹“12HTML语言”，单击鼠标右键，在弹出的快捷菜单中单击 【新建文件】，在子文件夹“12HTML语言”中便会创建一个默认名称为“untitled.html”的网页文档。 11.2.2　利用代码视图制作HTML网页 （2）将新建的网页重命名为“12.html”，在“文件”面板中双击该名称打开该网页。 （3）在“文档”工具栏中单击【代码】按钮，切换到代码视图的编辑窗口。 （4）在代码窗口中的标题位置输入新的网页标题：“公司部门”，并按 “Ctrl+Enter”组合键，“文档”面板中的标题文本框中的标题也