网页设计与制作项目教程(项目二 -任务01)

《网页设计与制作项目教程(项目二 -任务01)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第11章HTML语言前面各章都是通过Dreamweaver8提供的可视化设计环境来创建和编辑网页的，但是对于一个希望深入掌握网页制作、对代码严格控制的网页设计人员来讲，了解和掌握HTML语言是非常必要的。课程引导Dreamweaver8是一种非常优秀的可视化网页制作软件，它也提供了丰富的源代码控件功能，可以让网页制作者随时查看、编辑HTML源代码，Dreamweaver8的快速标签编辑器很好地协调了可视化操作和HTML源代码编写二者之间的关系。知识技能目标（1）掌握Dreamweaver8的HTML源代码编辑功能。掌握快速标签编辑器、标

2、签选择器和标签编辑器的使用方法。（2）掌握常用的HTML标记的含义及其应用。（3）学会手工修改HTML代码。网页浏览效果展示采用手工编写HTML代码制作的网页浏览效果如图11-1所示。图11-1手工编写HTML代码所制作的网页预览效果本章操作任务制作一个表单网页，该表单网页中包括表单域、文本域、文本区域、单选按钮、复选框、列表/菜单等表单元素。11.1HTML简介11.2Dreamweaver8的HTML源代码编辑功能11.3HTML标记11.1　HTML简介HTML语言用来描述Web页面文档的语言，它不是一种编程语言，而是一种页面描述

3、性标记语言。通过各种标记描述不同的内容，说明标题、段落、字体、图像等网页元素在浏览器中的显示效果，浏览网页时，将根据HTML标记显示其内容。11.1.1　HTML语言的特点一个最基本网页的HTML代码格式如下：11.1.2　HTML语言的语法结构1．HTML基本结构网页主体内容在HTML网页文档的基本结构中主要包含以下几种标记：（1）HTML标记（2）HEAD头部标记（3）BODY主体标记一个完整的HTML文档由各种网页元

4、素与HTML标记组成的，网页元素指标题、段落、图像、表格、层等各种对象，标记的功能是逻辑性地描述网页的结构。HTML文档应遵循以下语法规则。2．HTML语言的语法规则（1）HTML文档以纯文本形式存放，扩展名为“.html”或“.htm”。（2）HTML文档中标记采用“<”与“>”作为分割字符。（3）HTML标记及属性不区分大小写，例如和是相同的标记。（4）大多数HTML标记可以嵌套，但不能交叉，各层标记是全包容关系。（5）HTML文档一行可以书写多个标记，一个标记也可以分多行书写，不用任何续行符号，显示效果相同

5、。（6）HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的，浏览网页时，会自动忽略文档中的换行符、回车符、空格，所以在文档中输入的回车符，并不意味着在浏览器中将看到不同的段落。（7）网页中所有的显示内容都应该受限于一个或多个标记，不能存在游离于标记之外的文字或图像等，以免产生错误。（8）对于浏览器不能分辨的标记可以忽略，不显示其中的对象。在查看HTML源代码或编写网页时，经常会遇到三种格式的HTML标记。（1）不带属性的双标记：<标记名称>内容（2）带有属性的双标记：<标记名称　属性名称=对应的属性值……>网页

6、对象（3）单标记：<标记名称/>3．HTML标记的类型11.2　Dreamweaver8的HTML源代码编辑功能Dreamweaver8的编辑环境中提供了三种视图模式：“代码”、“拆分”、“设计”，这三种视图都可以通过单击“文档”工具栏上左边的按钮进行快速切换。11.2.1　Dreamweaver8的三种视图模式（1）在站点“长沙世界之窗”下创建文件夹“12HTML语言”，在“文件”面板中单击选中刚才新建的子文件夹“12HTML语言”，单击鼠标右键，在弹出的快捷菜单中单击【新建文件】，在子文件夹“12HTML语言”中便会创

7、建一个默认名称为“untitled.html”的网页文档。11.2.2　利用代码视图制作HTML网页（2）将新建的网页重命名为“12.html”，在“文件”面板中双击该名称打开该网页。（3）在“文档”工具栏中单击【代码】按钮，切换到代码视图的编辑窗口。（4）在代码窗口中的标题位置输入新的网页标题：“公司部门”，并按“Ctrl+Enter”组合键，“文档”面板中的标题文本框中的标题也同步变化。（5）在代码窗口中与之间输入文字“长沙世界之窗实现总经理领导下的部门经理负责制，管理上采用垂直领导、分层管理、逐级负责。”

8、，接着输入“
”（6）回车换行，然后输入“”。（7）保存该网页文档，且在浏览器中预览该网页。代码