网页设计与制作讲PPT课件.ppt

第3章HTML简介 教学内容 HTML概述HTML的文本格式标记HTML的表格标记HTML的图像与多媒体标记HTML的超级链接标记HTML的表单标记HTML的框架标记HTML的综合实例 1 HTML语言的基本概念和基本结构 HTML的全称是hypertextmakeuplanguage 中文意思是超文本标记语言 HTML是网页制作最基础的语言 是将纯文本和格式化指令混合在一起的一种标记性语言 HTML语言只描述文档的结构 而不能描述实际的表现形式 它以标签标示及排列各对象 标签内的内容称为元素 2 HTML文件的基本结构 HTML文件开始 HTML文件结束 HTML文件的头部区段 HTML文件的主体区段 HTML文件的基本结构 html 3 HTML文件的编写方法 手工直接编写 用 记事本 编制网页源代码文件 用 浏览器 软件显示其网页效果 4 用记事本编写的HTML文档的例子 注意 文件存盘时一定要加上文件的扩展名 HTML 5 HTML文件的编写方法 使用可视化软件编写 使用FrontPage 6 HTML文件的编写方法 使用可视化软件编写 使用Dreamweaver 7 HTML语言基本语法 HTML文件由标签组成 绝大多数标签都成对出现 在起始标签和结束标签的中间部分是网页的内容 HTML标签有下列三种表示方法 1 文件或超文本2 文件或超文本3 8 HTML文档中的基本结构标记 网页的开始和结束标记网页的头部标记网页的标题标记网页的主体标记 9 HTML文档中的主体标记 主体标记中放置了页面中的所有内容 如文字 图片 表格 表单 链接等 设置的属性可定义页面文字的颜色 背景的颜色 背景的图象等 元素的属性 Text设定页面文字的颜色Bgcolor设定页面的背景颜色Background设定页面的背景图象 参考教材P55 10 设置页面文字颜色2 设置页面背景颜色3 利用平铺图像作背景 HTML文档中的主体标记 页面背景与文字颜色 html 11 FF0000红色 FF00FF紫色 00FF00绿色 00FFFF青色 0000FF兰色 FFFF00黄色注 每两位的取值是从00 FF 前两位为红色的深浅 中间两位是绿色的深浅 最后两位是蓝色的深浅 HTML文档中的颜色 色彩意象表 html 12 输入普通文字 输入注释语句标题标记n的取值1 6字体标记 HTML的文本格式标记 这些标记放在主体区段中 13 主体区段中的标题字显示效果网页中的文字标题字H1 H6网页制作与发布网页制作与发布网页制作与发布网页制作与发布网页制作与发布网页制作与发布 网页中的文字 标题格式标记 html 14 文字修饰标记粗体字斜体字仿古形式加下划线大字体小字体加贯穿线地址文字标记 HTML文档中的文字修饰 参考教材P59 15 定义字符大小 文本内容 N的取值为1 71号字最小 7号字最大 定义字体颜色 文本内容 HTML文档中的文字修饰 定义字体 文本内容 文字格式与修饰 html 16 滚动字 的属性 方向 方式 循环 速度 n值越大速度越快延时 HTML文档中的滚动字 17 HTML文档中的滚动字示例 左右滚动显示字 html 18 上下滚动显示字 html 19 段落标记预格式化标记断行标记插入水平线标记文本对中标记 HTML文档中的段落标记 20 在HTML文档中输入文字 文学天地诗的汁液把死亡当作梦境 把落日看成凄迷的黄金 这就是诗 不朽而又贫困 诗就象旭日和夕阳的循环 html的段落格式 html 21 Size 横线的宽度Width 横线占屏幕的宽度Align定义横线的位置 其值取 LEFTRIGHRCENTER缺省 HTML文档中的段落标记 22 在网页中加入列表 在网页中加入列表可更清晰地表达出重点 列表在设计HomePage时是常用的技巧 HomePage的列表分成许多种类 每一种列表可以独立使用 也可以混合使用 有序列表与无序列表 23 在网页中加入列表 有序列表标记 无序列表标记 列表项前加上标记 有序列表列表项1列表项2列表项3 无序列表列表项1列表项2列表项3 24 有序列表的类型属性和起始属性 数字形式type 1大写字母形式type A小写字母形式type a大写罗马数字type I小写罗马数字type i起始数字start 号为要开始记数的数字 列表项1列表项2列表项3列表项4 25 Type 更换标点 disc实心圆点 circle空心圆点 square实心方块 列表项1列表项2列表项3列表项4 无序列表的类型属性 26 例 HTML列表源文档 有序列表与无序列表 html 27 定义式列表 28 名词一 解释一 名词二 解释二 定义式列表的标记 29 定义式列表的HTML源文件 定义式列表 html 定义式列表标记 DL 定义式列表是一种两个层次的列表 用于解释名词的定义 名词为第一层次 解释为第二层次 并且不包括项目符号 菜单列表标记 MENU 菜单列表用于显示菜单内容 设计单列的菜单 在InternetExplorer浏览器中显示和无序列表是一样的 30 HTML的表格标记 表格是网页排版的灵魂 无论是使用HTML语言编辑的网页 还是具备动态网站功能的网页 都要借助表格进行排版 浏览网站 会发现几乎所有的网页都要或多或少地采用表格 我们可以使用表格来做报表 网页排版 拼接图片等 31 表格标记与属性 表格的开始标记 表格的结束标记 行标记表头列标记表格数据列标记表的标题 32 使用表格用户名 nbsp密码 nbsp 表格应用示例 33 BORDER 用来设置边框的立体高度 缺省值为1 显示或隐藏表格线 Cellspacing 设置表格线的宽度 Cellpadding 分隔数据与上下左右线条之间的距离 Width 自动调整表格宽度 以点或 align 调整表格水平位置 leftcenterright 表格属性 参考教材P66 34 Border属性示例 35 定义每一行的数据 一个表格使用了多少 就会出现多少行 36 定义每一列的数据 在与之间 每出现一对 就表示一列的数据 定义数据的名称 一般作为数据项的名称放在表格的最上一行或最左一列 与 用法相同 只是包含文字加粗 参考教材P67 37 定义表格的标题 表的标题 设计表格时最好定义一个标题 可以放在表格的任意位置 但为了清晰 最好是紧接在指令之后 属性align 定义标题位置align top标题放在表格之前align bottom标题放在表格之后 38 表格示例 表格示例不规则栏 HTML 39 使用表格编排网页版面 表格内的单元格不仅能放数据 还可以将网页