网页设计与制作——Dreamweaver 8 教学课件 作者 马书群 第2章_HTML和网页制作.ppt

《网页设计与制作——Dreamweaver 8 教学课件 作者 马书群 第2章_HTML和网页制作.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、2.1HTML标记2.2HTML中表单的应用技能目标第2章HTML和网页制作技能目标l.掌握HTML中的常用标记用法2.能够在Dreamweaver中熟练利用HTML编写简单网页2.1HTML标记HTML语言由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素又由标记构成，大多数标记是成对出现的，分为起始标记<>和结尾标记，始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。标记的语法是：<标记>内容许多标记的始标记内可以包含一些属性，各属性之间无先后次序，属性也可省略（即

2、取默认值），其语法是：<标记名字属性1属性2属性3…>2.1HTML标记HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部用来描述浏览器所需的信息，而主体则包含所要显示的具体内容。头部信息文档主体，正文部分案例2-1个人简历制作利用HTML标记创建一个“个人简历”静态页面，效果如图所示。2.1HTML标记案例2-1个人简历制作【案例分析】一个完整的HTML文档一般由标题、段落、图像、表格等对象组成。制作HTML页面要通过添加背景标记、表格标记、文字

3、标记、字体标记、图像标记和链接标记来完成。2.1HTML标记案例2-1个人简历制作【操作步骤】（1）创建文件夹，将相关图片素材拷至文件夹内。新建一个HTML文档，保存到文件夹下，并命名“index”，打开该文档，切换到代码视图。（2）利用标记修改网页标题。（3）利用“background”选项设置页面背景。（4）通过添加代码插入表格。（5）通过添加代码设置超级链接。（6）添加序列代码。（演示操作）2.1HTML标记案例2-1个人简历制作2.1HTML标记案例小结：虽然可以使用Dreamweaver的可视化操作十分便

4、捷的输入文本、插入图像、表格布局，但是当制作复杂的页面或是功能强大的页面时，往往会发现浏览的效果和制作的初衷并不相符，而此时在设计视图下往往不容易发现错误和更正错误。在这种情况下，如果熟悉HTML，则可以切换到代码视图下进行修改。事实上，很多较高技能的网页设计人员都是利用人工编写代码的方式制作网页的。所以，学好HTML不仅是学习网页制作的基础，更是迈向高级网页设计目标的必经之路。课堂小练习：将本次实例中的内容个人简介换成一本你喜欢的书的简介，然后把它推荐给你的朋友们。对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CG

5、I、JAVAScript程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段！本节以介绍常见表单及表单对象代码为主，为大家学习动态网页奠定一定基础，至于如何与数据库连接实现它们的功能等将放在第七章详细介绍。2.2HTML中表单的应用案例2-2问卷调查制作——畅所欲言聊奥运制作一个与奥运相关的问卷调查网页，收集浏览者的相关资料和留言，如图所示。2.2HTML中表单的应用案例2-2问卷调查制作——畅所欲言聊奥运【案例分析】在这个案例中，需要用到案例2-1中

6、讲到的表格布局、文本、图像等内容，不同的是，因为要收集相关信息，所以要用到表单和表单对象，这里就不再赘述基本网页元素的代码添加方法了，而是在做好的基本页面的基础上通过添加表单和表单对象代码的方法实现问卷调查的功能。2.2HTML中表单的应用案例2-2问卷调查制作——畅所欲言聊奥运【操作步骤】（1）创建文件夹，将相关图片素材拷至文件夹内。打开index文档，切换到代码视图。（2）利用

7、框。（7）通过添加代码插入文本区域。（8）通过添加代码插入提交和重置按钮。（演示操作）2.2HTML中表单的应用案例2-2问卷调查制作——畅所欲言聊奥运2.2HTML中表单的应用案例小结：表单是制作提供交互功能的动态网页的基础，掌握好相应的代码可以帮助制作出更多功能强大的动态网页。但是仅仅制作表单还不足以实现真正的交互功能，还要进行数据库连接等方面的工作，另外表单对象也不止本案例中所涉及的内容，具体的深入学习表单及其实现过程请参看本书的第7章。实训第2章HTML和网页制作用HTML手工编写代码制作一个公司简介网站。实训目的1．了解不同标记对应的

8、代码。2．掌握编写代码制作网页的方法。实训内容与步骤网站规划。建立网站文件夹，搜集相应素材，创建站点。新建网页文件并对内容进行合理布局。通过编写代码添