《Dreamweaver ,CS3网页设计案例教程 教学课件 ppt 作者 王春红 王瑾瑜主编 模块三 HTML基础》由会员分享，可在线阅读，更多相关《Dreamweaver ,CS3网页设计案例教程 教学课件 ppt 作者 王春红 王瑾瑜主编 模块三 HTML基础（50页珍藏版）》请在金锄头文库上搜索。
1、模块三 HTML基础,任务二 HTML文档的基本结构,任务三 HTML常用标记及属性介绍,任务一 认识HTML,任务一 认识HTML,HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。,子任务
2、1 HTML简介,任务一 认识HTML,步骤1 单击【开始】【程序】【附件】【记事本】，打开记事本。输入代码如下，并将当前文件保存为lx1.html（文件名可自己定，扩展名一定为.html），如图3-1所示。,子任务2 HTML制作简单网页,3-1 HTML编辑,任务一 认识HTML,步骤2 单击【开始】【程序】【Internet Explorer】，打开网页浏览器。单击【文件】【打开】，弹出如图3-2所示对话框。,3-2 IE打开网页对话框,任务一 认识HTML,步骤3 单击浏览按钮，找到刚才建立的lx1.html文件，单击确定，网页显示如图3-3所示。,3-3 浏览器显示网页,任务二 HT
3、ML文档的基本结构,HTML文档是纯文本文档，由显示在窗口中的文字和HTML标记（TAG）组成。标记总是封装在由“”组成的一对尖括号之中。标记只改变网页的显示方式，本身不会显示在窗口中。标记有单标记和双标记。 1双标记 双标记由始标记和尾标记两部分构成，必须成对使用，如“”和“”，在始标记和尾标记之间放入要修饰或说明的内容。 始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。 双标记的语法是： 内容 其中“内容”部分就是要被这对标记施加作用的部分。,子任务1 HTML语法,任务二 HTML文档的基本结构,2单
4、标记 单标记只需单独使用就能完整地表达意思，这类标记的语法是： 最常用的单标记是，表示在一个段落未结束时，显示强制换行。 3标记属性 许多单标记和双标记的始标记内可以包含一些属性，属性在双标记的始标记内或单标记内指定。其语法是： 各属性之间无先后次序，属性也可省略（即取默认值），例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： ,任务二 HTML文档的基本结构,其中SIZE属性定义线的粗细，属性值取整数，缺省值为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右
5、对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 “ ”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是“100%”。 4注释语句 像其它计算机语言一样，HTML文件也提供注释语句。浏览器会忽略此标记中的文字而不做显示。注释语句的格式是： ,任务二 HTML文档的基本结构, . . 标签说明: 1、HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。 2、和标签表示HTML文本的头区域。在浏览器窗口中，头信息是不被
6、显示的；,子任务2 HTML文档的基本结构,任务二 HTML文档的基本结构,3、和标签之间的文本是HTML文件的标题，它被显示在浏览器的最顶端； 4、和标签之间的文本是正文，表示文件的主体信息； 5、作为HTML的开端，建议大家使用小写标签编写HTML语言，尽管HTML对规范化书写并不是要求的很严格，但是规范化书写在今后会逐渐成为一种趋势。,任务三 HTML常用标记及属性介绍,在“标记之间直接输入文字就可以显示在浏览器窗口中，但是要制作真正实用的网页，必须对输入的文字进行修饰。 划分段落 为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省
7、略的，因为下一个的开始就意味着上一个的结束。 标签还有一个属性ALIGN，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。,子任务1 页面设计与文字设计的HTML标记,任务三 HTML常用标记及属性介绍,实例3-1：应用段落标记的HTML代码及效果图 代码： 段落练习 人之初，性本善； 性相近，习相远。 苟不教，性乃迁； 教之道，贵以专。 效果：如图3-4所示,任务三 HTML常用标记及属性介绍,3-4 段落练习显示,任务三 HTML常用标记及属性介绍,标题文字 标题标签,其中n为标题的大小。HTML总共提供六个等级的标题，n越小，标题字号就越大。 实例3-2：
8、应用标题标记的代码及效果图 代码： 段落练习 人之初，性本善；（一级标题） 性相近，习相远。（二级标题） 苟不教，性乃迁；（三一级标题） 教之道，贵以专。（四级标题） 效果：如图3-5所示,任务三 HTML常用标记及属性介绍,3-5 标题练习显示,任务三 HTML常用标记及属性介绍,字号属性 （1）HTML提供了“基准字号”标记，可将网页文件内最常用的文本大小设置为基准字号，其它的的文本可以在此基础上增加大小。设置基准字号的格式为： （2）对于网页内的其它文字，可以采用下面的格式来定义： 如果在数值的前面加上“+”或“-”号，则表示相对基础字体增大或减小若干字号。,任务三 HTML常用标记及属
9、性介绍,实例3-3：应用字号标记的代码及效果图 代码： 字号练习 人之初，性本善； 性相近，习相远。 苟不教， 性乃迁； 教之道，贵以专。 效果：如图3-6所示,任务三 HTML常用标记及属性介绍,3-6 字号练习显示,任务三 HTML常用标记及属性介绍,水平线段 使用标记可以在屏幕上显示一条水平线，用以分割页面中的不同部分。 属性说明： Size：水平线的宽度。默认值为1。 Width：水平线的长，用占屏幕宽度的百分比或象素值来表示。 Align：水平线的对齐方式，有left、right、center三种。 Noshade：线段无阴影属性，为实心线段。 Color：设置水平线的颜色。,任务三
10、 HTML常用标记及属性介绍,实例3-4：应用段落标记的HTML代码及效果图 代码： 段落练习 人之初，性本善； 性相近，习相远。 苟不教，性乃迁； 教之道，贵以专。 效果：如图3-7所示,任务三 HTML常用标记及属性介绍,3-7 线段练习显示,任务三 HTML常用标记及属性介绍,文字的样式 （1）文字字体： 文字的字体通过“font”的“face”属性来设置。 语法： 说明：用户设置的字体与计算机上安装的字体有关，如果站点访问者的计算机上没有安装用户定义的字体，那么在用户计算机的屏幕上，网页上的字体就无法正常显示。Face属性还可以指定一个字体列表，如果浏览器不支持第一种字体，就会试第二种
11、、第三种、依次类推，直到能够显示为止。 （2）文字的颜色 文字的颜色通过“font”的“color”属性设计。 语法：字符串 说明：rr、gg、bb分别以16进制的形式表示红、绿、蓝色的数值，范围在00FF之间。通过红、绿、蓝三原色的任意组合，可以得到1600万种颜色。 （3）文字的修饰 对文本进行粗体、斜体、下划线、等宽体、增大、缩小和上下标等修饰操作，语法格式见表3-1。,任务三 HTML常用标记及属性介绍,表3-1 文字格式,任务三 HTML常用标记及属性介绍,实例3-5：应用文字样式的HTML代码及效果图 代码： 文字样式 人之初，性本善； 性相近，习相远。 苟不教， 性乃迁； 教之道
12、，贵以专。 效果：如图3-8所示,任务三 HTML常用标记及属性介绍,3-8 文字样式显示,任务三 HTML常用标记及属性介绍,超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。 在网页中插入图片 插入图象的标签是，其格式为： SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。,子任务2 图片的插入,任务三 HTML常用标记及属性介绍,2图片的属性 （1）图片的高度和宽度 height和width分别表示图形的高和宽。通过这两个属性，可
13、以改变图形的大小，如果没有设置，图形按真实大小显示。 （2）空白大小 hspace表示图片左右的空间，vspace表示图片上的空间。 （3）边框厚度 Border用于设定图片的边框厚度。厚度值为099的数字。 （4）图文混排对齐方式 Align用于调整图片旁边文字的位置，可以控制文字出现在图片的上方、中间、底部、左右等。可选值为：top、middle、bottom、left、right，默认值为bottom。 （5）替换文字 Alt用于设定替换文字。用户为了加快浏览网页的速度，可在浏览器中关闭图片显示，原来放置图片的位置会显示一个方框。设定替换文字后，在方框中会显示替换文字，使用户知道此图片的
14、内容。当把鼠标移动到图上时，无论图片是否显示，替换文字都都可以显示出来（见实例3-6），利用这个特性，替换文字也可以是图片的注释。,任务三 HTML常用标记及属性介绍,实例3-6：图片插入的HTML代码及效果图 代码： 图片插入 刚出生时，人的本性是善良的。每个人的本性都一样，只是因为后天的环境不同，性格就出现差异了。如果从小不对孩子好好进行教育，他们善良的本性就会变化；教育的关键在于专业。 效果：如图3-9所示,任务三 HTML常用标记及属性介绍,3-9 图片插入显示,任务三 HTML常用标记及属性介绍,1无序号列表 无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示： 第一项
15、第二项 第三项 ,子任务3 列表的插入,任务三 HTML常用标记及属性介绍,2序号列表 序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示： 第一项 第二项 第三项 ,任务三 HTML常用标记及属性介绍,3定义性列表 定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示（用标记定义的说明文字自动向右缩进）。在定义性列表中，还有一个属性是compact,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示： 第一项 叙述第一项的定
16、义 第二项 叙述第二项的定义 第三项 叙述第三项的定义 ,任务三 HTML常用标记及属性介绍,实例3-7：插入列表的HTML代码及效果图 代码： 列表插入 1无序号列表 玉不琢，不成器； 人不学，不知义。 为人子，方少时， 亲师友，习礼仪。 ,任务三 HTML常用标记及属性介绍,2序号列表 玉不琢，不成器； 人不学，不知义。 为人子，方少时， 亲师友，习礼仪。 ,任务三 HTML常用标记及属性介绍,3定义列表 玉不琢，不成器； 玉不经过雕琢就不能成为精美的玉器； 人不学，不知义。 人如果不学习也不会懂得礼仪。 为人子，方少时， 做子女的从小 亲师友，习礼仪。 就知道亲近老师和朋友，从他们那里学习礼仪知识。 效果：如图3-10所示,任务三 HTML常用标记及属性介绍,3-10 插入列表练习显示,任务三 HTML常用标记及属性介绍,1表格的基本结构 . 定义表
