第2章Web页面制作基础剖析.ppt

第2章 Web页面制作基础;本章学习目标;2.1 HTML语言概述;2.1.1 HTML概述;2.1.2 HTML文档的结构;;2.1.3 HTML标记;2.1.4 常用HTML编辑工具;2.2 文档的格式与风格;2.2.1 设置BODY的属性;标记属性 ;2.2.2 段落格式化;;标题标记;;预定义格式标记 ;;水平线标记;注释标记;图2-4 三种标记的使用;2.2.3 建立列表;;例2-5： HTML HEAD TITLE列表示例/TITLE /HEAD BODY text=blue OL P计算机新书/P LIASP程序设计/LI LIHTML网页设计/LI LIFrontPage使用指南/LI /OL UL P英语新书/P LI外经贸英语/LI LI实用英语翻译/LI LI朗文英语语法/LI /UL /BODY/HTML;图2-5 有序列表与无序列表的区别;;2.2.4 字符的格式化;;例2-6： HTML HEADTITLE字符格式设置/TITLE /HEAD BODY CENTER FONT face=隶书 size=7 color=blue我是lt;fontgt;标记！/FONT H1 align=center我是lt;h1gt;标记！/H1 U我是lt;Ugt;标记！/U S我是lt;Sgt;标记！/S B我是lt;Bgt;标记！/B P I我是lt;Igt;标记！/I BLINK我是lt;BLINKgt;标记！/BLINK /BODY/HTML;图2-6 字符格式设置标记的使用;2.3 加入多媒体与超级链接;2.3.1 加入图像、视频、动画;;2.3.2 加入超级链接;2.4 制作表格;2.4.1 建立表格;标记属性;2.4.2 定制表格;;;;; /TR TRTD width=9%P align=centerHTML最新课堂/P/TD TD width=57%P align=center高级应用技术/P/TD /TR /TABLE/DIV /TD/TR TRTD width=100%P align=center多层表格嵌套示例/P/TD /TR /TABLE/CENTER /DIV/BODY/HTML;图2-7 表格的嵌套;2.5 制作表单;2.5.1 表单的结构;2.5.2 FORM中常用的标记;标记属性 ;;（2）多行输入域。 格式为：TEXTAREA…TEXTAREA 功能：定义多行文本输入域。主要属性如表2-12所示。;图2-8 输入域例题;;;;;;例2-9： HTML HEADTITLE选择域!/TITLE/HEAD BODY FORM method=post action=output2.ASP CENTERP请选择喜欢的颜色:/P SELECT name=HOBBY size=4 multiple OPTION value=红色红色/OPTION OPTION value=蓝色蓝色/OPTION OPTION value=绿色绿色/OPTION OPTION value=黑色黑色/OPTION OPTION value=白色白色/OPTION OPTION value=紫色紫色/OPTION /SELECT/P PINPUT type=submit value=确定 INPUT type=reset value=取消 /P /FORM/BODY/HTML;2.6 框架结构;2.6.1 框架结构的文件格式;2.6.2 框架结构标记的使用;2.6.3 FRAME标记;;2.6.4 TARGET属性的使用;例2-10： HTML HEADTITLEFRAMESET示例/TITLE FRAMESET cols= *,50% FRAMESET rows = 70%,30% FRAME src = biaoji.HTM FRAME src = head.HTM /FRAMESET FRAMESET rows = 25%,25%,20% FRAME src = preexa.HTM FRAME src = xuanzeyu.HTM FRAME src = shuruyu.HTM /FRAMESET /FRAMESET /HTML;图2-10 框架结构的使用;2.7 CSS基础;2.7.1 CSS样式简介;;2.7.2 CSS样式表的定义;