第2章 HTML和网页制作（课件）-高二《网页设计与制作》同步教学（人民邮电版）

2.1 HTML标记 2.2 HTML中表单的应用 技能目标 第2章 HTML和网页制作 技能目标 l .掌握HTML中的常用标记用法 2 .能够在Dreamweaver中熟练利用HTML编写简单网页 2.1 HTML标记 HTML语言由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素又由标记构成，大多数标记是成对出现的，分为起始标记<>和结尾标记</>，始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。标记的语法是： <标记> 内 容 </ 标记> 许多标记的始标记内可以包含一些属性，各属性之间无先后次序，属性也可省略（即取默认值），其语法是： < 标记名字 属性1 属性2 属性3 … > 2.1 HTML标记 HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部用来描述浏览器所需的信息，而主体则包含所要显示的具体内容。 <HTML> <HEAD> 头 部 信 息 </HEAD> <BODY> 文 档 主 体， 正 文 部 分 </BODY> </HTML> 案例2-1 个人简历制作 利用HTML标记创建一个“个人简历”静态页面，效果如图所示。 2.1 HTML标记 案例2-1 个人简历制作 【案例分析】 一个完整的HTML文档一般由标题、段落、图像、表格等对象组成。制作HTML页面要通过添加背景标记、表格标记、文字标记、字体标记、图像标记和链接标记来完成。 2.1 HTML标记 案例2-1 个人简历制作 【操作步骤】 （1）创建文件夹，将相关图片素材拷至文件夹内。新建一个HTML文档，保存到文件夹下，并命名“index”，打开该文档，切换到代码视图。 （2）利用<title></title> 标记修改网页标题。 （3）利用“background”选项设置页面背景。 （4）通过添加代码插入表格。 （5）通过添加代码设置超级链接。 （6）添加序列代码。 （演示操作） 2.1 HTML标记 案例2-1 个人简历制作 2.1 HTML标记 案例小结： 虽然可以使用Dreamweaver的可视化操作十分便捷的输入文本、插入图像、表格布局，但是当制作复杂的页面或是功能强大的页面时，往往会发现浏览的效果和制作的初衷并不相符，而此时在设计视图下往往不容易发现错误和更正错误。在这种情况下，如果熟悉HTML，则可以切换到代码视图下进行修改。 事实上，很多较高技能的网页设计人员都是利用人工编写代码的方式制作网页的。所以，学好HTML不仅是学习网页制作的基础，更是迈向高级网页设计目标的必经之路。 课堂小练习： 将本次实例中的内容个人简介换成一本你喜欢的书的简介，然后把它推荐给你的朋友们。 对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段！ 本节以介绍常见表单及表单对象代码为主，为大家学习动态网页奠定一定基础，至于如何与数据库连接实现它们的功能等将放在第七章详细介绍。 2.2 HTML中表单的应用 案例2-2问卷调查制作——畅所欲言聊奥运 制作一个与奥运相关的问卷调查网页，收集浏览者的相关资料和留言，如图所示 。 2.2 HTML中表单的应用 案例2-2问卷调查制作——畅所欲言聊奥运 【案例分析】 在这个案例中，需要用到案例2-1中讲到的表格布局、文本、图像等内容，不同的是，因为要收集相关信息，所以要用到表单和表单对象，这里就不再赘述基本网页元素的代码添加方法了，而是在做好的基本页面的基础上通过添加表单和表单对象代码的方法实现问卷调查的功能。 2.2 HTML中表单的应用 案例2-2问卷调查制作——畅所欲言聊奥运 【操作步骤】 （1）创建文件夹，将相关图片素材拷至文件夹内。打开index文档，切换到代码视图。 （2）利用<form></form> 标记插入表单。 （3）利用表格相关标记插入嵌套表格 。 （4）通过添加代码插入文本字段。 （5）通过添加代码插入单选按钮。 （6）通过添加代码插入复选框。 （7）通过添加代码插入文本区域。 （8）通过添加代码插入提交和重置按钮。 （演示操作） 2.2 HTML中表单的应用 案例2-2问卷调查制作——畅所欲言聊奥运 2.2 HTML中表单的应用 案例小结： 表单是制作提供交互功能的动态网页的基础，掌握好相应的代码可以帮助制