第2讲 WEB jichi.ppt

第2章 Web页面制作基础 2.1 HTML语言概述 2.2 文档的格式与风格 2.3 加入多媒体与超级链接 2.4 制作表格 2.5 制作表单 2.6 框架结构 2.7 CSS基础 2.1 HTML语言概述 WWW（World Wide Web，万维网）拉进了人们彼此间的距离，使得人与人之间的信息交流变得更加简便和快捷。WWW上的信息，大部分是通过HTML语言发布的。 2.1 HTML语言概述 2.1.1 HTML概述 HTML是（Hyper Text Markup Language，超文本标记语言）的缩写，最早源于SGML语言。 HTML用来表示网上信息的符号标记语言。在WWW上，发布信息通常使用HTML，它是Web页面的基础，任何一个Web页面都离不开HTML，而且HTML也是Web应用开发的基础。 HTML语言是大多数浏览器都能识别的语言，使用HTML语法规则建立的文本可以运行在不同的操作系统平台上，而且能被大多数用户所接受。 2.1 HTML语言概述 2.1.2 文档的结构 HTML HEAD 头部信息 /HEAD BODY 正文部分 /BODY /HTML 2.1 HTML语言概述 HTML HEAD TITLE这是标题部分。/TITLE /HEAD BODY P你好，这是正文部分！/P /BODY /HTML 2.1 HTML语言概述 2.1.3 HTML标记 1．HTML文档标记 格式：HTML…/HTML 功能：标志文档开始和结尾的标记。 2．HTML文件头标记 格式：HEAD…/HEAD 功能：用于包含文件的基本信息。 3．HTML文件主体标记 格式：BODY…/BODY 功能：文件主体标记。 2.1 HTML语言概述 2.1.4 常用HTML编辑工具 任何一个文档编辑器都是HTML编辑器。 为了减少网页设计师的工作，使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。 所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时显示的效果基本一致。 2.2 文档的格式与风格 在大多数网页中，文档是核心的内容，只有设置适当的文档格式，才能得到绚丽多彩的网页。设置文档的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。 2.2 文档的格式与风格 2.2.1 设置BODY的属性 2.2 文档的格式与风格 2.2.2 段落格式化 1．标题标记 格式：H1…/H1，H2…/H2…H6…/H6 功能：设置各种大小不同标题的标记。 2．段落标记 格式：P…/P 功能：设置段落标记。 3．预定义格式标记 格式：PRE…/PRE 2.2 文档的格式与风格 4．分区显示标记 格式：DIV…/DIV 功能：分区显示标记。 5．换行标记 格式：BR 功能：强制换行。 6．水平线标记 格式：HR 功能：插入水平线标记。 2.2 文档的格式与风格 HTMLHEADTITLE标记的使用/TITLE/HEAD BODY ！--注释 本程序的功能是： 制作简单网页熟悉基本标记的使用！ -- P align=center三种标记的使用！/PHR DIV align=center我在中间！ BR中间/DIVHR DIV align=left我在左边！BR左边/DIVHR DIV align=right我在右边！BR右边/DIV HR/BODY/HTML 2.2 文档的格式与风格 2.2.3 建立列表 1．有序列表 格式：OL type=符号类型 LI type=符号类型…/LI LI type=符号类型…/LI … /OL type属性：数字（1，2，…）、大写英文字母（A，B，…）、小写英文字母（a，b，…）、大写罗马字母（I，II，…）和小写罗马字母（i，ii，…），默认的序号是数字。 2.2 文档的格式与风格 2.2.3 建立列表 2．无序列表 格式：UL type=符号类型 LI type=符号类型…/LI LI type=符号类型…/LI … /UL type属性：可以为disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图片，默认为实心圆点。 2.2 文档的格式与风格 2.2.3 建立列表 3．自定义列表 格式：DL DT…/DT