网页设计与制作讲.ppt

第3章 HTML 简介教学内容:HTMLHTML概述概述 HTML HTML的文本格式标记的文本格式标记 HTMLHTML的表格标记的表格标记 HTMLHTML的图像与多媒体标记的图像与多媒体标记 HTMLHTML的超级链接标记的超级链接标记 HTMLHTML的表单标记的表单标记 HTMLHTML的框架标记的框架标记 HTML HTML的综合实例的综合实例 1HTML语言的基本概念和基本结构HTML的全称是hypertext makeup language,中文意思是超文本标记语言。HTML是网页制作最基础的语言，是将纯文本和格式化指令混合在一起的一种标记性语言。HTML语言只描述文档的结构，而不能描述实际的表现形式。它以标签标示及排列各对象，标签内的内容称为元素。2HTML文件的基本结构HTMLHTML文件开始文件开始HTMLHTML文件结束文件结束HTMLHTML文件文件的头部区段的头部区段HTMLHTML文件文件文件文件的主体区段的主体区段的主体区段的主体区段HTMLHTML文件的基本结构文件的基本结构.html.html3HTML文件的编写方法 手工直接编写用用“记事本记事本”编编制网页源代码文制网页源代码文件件用“浏览器”软件显示其网页效果4用记事本编写的HTML文档的例子注意：文件存盘时一定要加上文件的扩展名 .HTMLHTML5HTML文件的编写方法 使用可视化软件编写使用使用使用使用FrontPageFrontPage6HTML文件的编写方法 使用可视化软件编写使用使用使用使用DreamweaverDreamweaver7HTML语言基本语法HTMLHTML文件由标签组成，绝大多数标签都成对出现。文件由标签组成，绝大多数标签都成对出现。在起始标签和结束标签的中间部分是网页的内容。在起始标签和结束标签的中间部分是网页的内容。HTML标签有下列三种表示方法：1、文件或超文本 2、文件或超文本 3、8HTML文档中的基本结构标记 网页的开始和结束标记 网页的头部标记 网页的标题标记 网页的主体标记9HTML文档中的主体标记 主体标记中放置了页面中的所有内容，如文字、图片、表格、表单、链接等；设置的属性可定义页面文字的颜色、背景的颜色、背景的图象等。BODY元素的属性：元素的属性：Text Text 设定页面文字的颜色设定页面文字的颜色Bgcolor Bgcolor 设定页面的背景颜色设定页面的背景颜色 Background Background 设定页面的背景图象设定页面的背景图象参考教材参考教材参考教材参考教材P55P55101.设置页面文字颜色 2.设置页面背景颜色3.利用平铺图像作背景HTML文档中的主体标记页面背景与文字颜色页面背景与文字颜色.html.html11#FF0000 红色#FF00FF 紫色#00FF00 绿色#00FFFF 青色#0000FF 兰色#FFFF00 黄色注：每两位的取值是从00-FF，前两位为红色的深浅，中间两位是绿色的深浅，最后两位是蓝色的深浅。HTML文档中的颜色色彩意象表色彩意象表色彩意象表色彩意象表.html.html12输入普通文字,输入注释语句 标题标记 n的取值16 字体标记HTML的文本格式标记这些标记放在主体区段中13 主体区段中的标题字显示效果 网页中的文字标题字H1-H6 网页制作与发布 网页制作与发布 网页制作与发布 网页制作与发布 网页制作与发布 网页制作与发布 网页中的文字标题格式标记标题格式标记.html.html14文字修饰标记 B 粗体字粗体字 I 斜体字斜体字 TT 仿古形式仿古形式 U 加下划线加下划线 BIG 大字体大字体 SMALL 小字体小字体 S 加贯穿线加贯穿线 ADDRESS/ADDRESS 地址文字标记地址文字标记HTML文档中的文字修饰参考教材参考教材参考教材参考教材P59P5915定义字符大小文本内容N的取值为17 1号字最小，7号字最大定义字体颜色文本内容HTML文档中的文字修饰定义字体文本内容文字格式与修饰文字格式与修饰.html.html16滚动字的属性：方向：方式：循环：速度：n值越大速度越快延时：HTML文档中的滚动字17HTML文档中的滚动字示例左右滚动显示字左右滚动显示字.html.html18上下滚动显示字上下滚动显示字.html.html19 段落标记 预格式化标记 断行标记 插入水平线标记 文本对中标记HTML文档中的段落标记20在HTML文档中输入文字文学天地 诗的汁液 把死亡当作梦境，把落日看成凄迷的黄金，这就是诗不朽而又贫困。诗就象旭日和夕阳的循环。htmlhtml的段落格式的段落格式的段落格式的段落格式.html.html21 Size:横线的宽度Width:横线占屏幕的宽度Align定义横线的位置，其值取：LEFT RIGHR CENTER 缺省HTML文档中的段落标记22在网页中加入列表在网页中加入列表可更清晰地表达出重点，列表在设计Home Page时是常用的技巧。Home Page的列表分成许多种类，每一种列表可以独立使用，也可以混合使用。有序列表与无序列表有序列表与无序列表23在网页中加入列表有序列表标记有序列表标记 .无序列表标记.列表项前加上标记 .有序列表有序列表 列表项列表项1 1 列表项列表项2 2 列表项列表项3 3 无序列表无序列表 列表项列表项1 1 列表项列表项2 2 列表项列表项3 3 24有序列表的类型属性和起始属性 .数字形式 type=1大写字母形式 type=A小写字母形式 type=a大写罗马数字 type=I小写罗马数字 type=i起始数字 start=#号为要开始记数的数字 列表项列表项1 1 列表项列表项2 2 列表项列表项3 3 列表项列表项4 425 .Type=#更换标点#disc 实心圆点#circle 空心圆点#square 实心方块 列表项1 列表项2 列表项3 列表项4无序列表的类型属性26例：HTML列表源文档有序列表与无序列表.html27定义式列表28 名词一 解释一 名词二 解释二 定义式列表的标记29定义式列表的HTML源文件定义式列表.html定义式列表标记定义式列表标记DLDL 定义式列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包括项目符号。菜单列表标记菜单列表标记MENUMENU菜单列表用于显示菜单内容，设计单列的菜单，在Internet Explorer 浏览器中显示和无序列表是一样的。30HTML的表格标记表格是网页排版的灵魂。无论是使用HTML语言编辑的网页，还是具备动态网站功能的网页，都要借助表格进行排版。浏览网站，会发现几乎所有的网页都要或多或少地采用表格。我们可以使用表格来做报表、网页排版、拼接图片等。输入密码输入密码*输入输入E-mailE-mailLL31表格标记与属性 表格的开始标记表格的结束标记行标记表头列标记表格数据列标记表的标题32 html使用表格使用表格 title 用户名用户名/th   密码密码/th   表格应用示例33BORDER-用来设置边框的立体高度,缺省值为1，显示或隐藏表格线。Cellspacing-设置表格线的宽度。Cellpadding-分隔数据与上下左右线条之间的距离。Width-自动调整表格宽度。（以点或%）align-调整表格水平位置（left center right)表格属性表格属性参考教材参考教材参考教材参考教材P66P6634Border属性示例 table table border=1 table border=2 table border=4 table border=635定义每一行的数据定义每一行的数据 一个表格使用了多少，就会出现多少行36定义每一列的数据定义每一列的数据.在与之间，每出现一对就表示一列的数据定义数据的名称定义数据的名称.一般作为数据项的名称放在表格的最上一行或最左一列，与.用法相同，只是包含文字加粗。参考教材参考教材参考教材参考教材P67P6737定义表格的标题表的标题设计表格时最好定义一个标题，.可以放在表格的任意位置，但为了清晰，最好是紧接在指令之后。属性 align-定义标题位置 align=top 标题放在表格之前 align=bottom 标题放在表格之后38表格示例表格示例不规则栏表格示例不规则栏.HTML.HTML39使用表格编排网页版面 表格内的单元格不仅能放数据，还可以将网页上所有的对象都放入表格内。将图形、超级链接以及交互式文件放入表格，是设计网页版面的一种有效的方法。利用表格的特性安排图形、文字等，网页会更加引人注目。40 回到首页 我的像册我的像册 我的文集我的文集 使用表格排版使用表格排版使用表格排版使用表格排版.html.html4142使用表格拼图43html使用表格编排网页版面使用表格编排网页版面/titletable width=30%align=center 使用表格拼图使用表格拼图.html.html44