第三章上HTML标记.ppt

第三章HTML标记功能详述 本章要点 文本格式标记文本修饰标记 字体标记 列表标记超链接标记图像和多媒体标记 HTML标记基础 2 什么是标记 标记是网页文档中的一些有特定意义的符号 这些符号指明如何显示文档中的内容 标记可以具有相应属性即各种参数 如size color text width和noshade等 例如 文本格式标记 网页中添加文本的方法 网页中添加文本的方法 文本格式标记是网页中定义文本格式的标记1 直接写文本 2 用段落标记 格式化文本 各段落文本将分行显示 3 用标题标记 格式化文本 作用 定义第n号标题字体 n 1 6 n值越大 字越小 文本将变为粗体显示 可看成特殊的段落标记 4 用预格式化标记 格式化文本 标记内的文本将按原来的格式显示 保留文本中的所有空格 换行和定位符 直接写文本 电子商务专业学习网页设计课程概述电子商务专业学习网页设计的意义电子商务顾名思义就是在internet上做生意 商品展示 广告宣传 发布 用段落标记 格式化文本 电子商务顾名思义就是在internet上做生意 商品展示 广告宣传 发布供求信息等活动实现的途径就是网页 因此学习网页设计技术是从事电子商务活动的基石 用标题标记 格式化文本 第1号标题字体第3号标题字体第4号标题字体第5号标题字体 居中 用预格式化标记 格式文本 网页设计师这一职业在今后来说还是有需求的 因为随着网络越来越普及 像我国的房地产市场 文本的强制换行 电子商务顾名思义就是在internet上做生意 商品展示 广告宣传 发布供求信息等活动实现的途径就是网页 强制不换行标记 常用于一串数字 文本中的空格 标记 除外 内字符前的空格浏览器将全部忽略 字符与字符间的空格浏览器将只保留一个空格显示 回车视为一个空格 块级元素之间忽略所有空格 如果要输入多个空格或需要在字符之前输入空格需在源代码中插入 表示一个半角空格 行内元素可看成一个字符 文本中的转义字符 在HTML源代码中 有些字符有特别的含义 比如小于号 符号在DW的设计视图中输入这些特殊字符 DW会自动在代码视图添加它们对应的转义字符 DW中插入HTML文本元素的快捷键 Enter插入 综合实例 分段换行与预格式以下是直接写文本的情况 星期一 星期二 星期三 星期四 星期五 星期六 星期日 以下是使用了三个换行标记的情况 星期一 星期二 星期三 星期四 星期五 星期六 星期日 以下使用分段标记 分为两段 星期一 星期二 星期三 星期四 星期五 星期六 星期日 以下使用预格式 星期一 星期二 星期三 星期四 星期五 星期六 星期日 跑马灯标记 一个特殊的文本标记 能使其中的文本在浏览器屏幕上不断滚动 示例其中behavior alternate 设置滚动方式为来回滚动 设置为scroll表示循环滚动 设置为slide表示滚动到目的地就停止 direction属性用于控制滚动的方向 可以上下滚动或左右滚动 loop设置滚动的次数 loop为0表示不断滚动 scrollamount属性设置滚动的速度 scrolldelay属性设置两次滚动间的间隔时间 示例 测试 网页设计与制作学习 可以将swf文件下载下来用flash播放器全屏播放以达到最好效果 也可以在IE浏览器中按F11键达到全屏效果 水平线标记 标记是在HTML文档中加入一条水平线 它可以直接使用 具有size color width和noshade属性 size是设置水平线的厚度 而width是设定水平线的宽度 默认单位是像素 noshade属性用来加入一条没有阴影的水平线 文本修饰标记 字体标记 文本修饰标记 文本修饰标记是对文本的外观进行修饰的标记 如让文字变色 加大 变粗体 添加下划线等 1 font标记 定义文字的各种属性 例 注意 文本修饰标记没有align属性 说明 加粗 倾斜与下划线标记 2 加粗 倾斜与下划线的定义标记 b i u 使用加粗 倾斜与下划线标记 b i u 的组合 可对文本文字进一步修饰 如 此处以红色五号字粗体显示 上标 sup 和下标 sub 标记 用于书写数学公式或分子式 如 H2OX2由于字体标记属于对文本外观进行修饰的标记 是由于当时CSS语言尚未出现时html定义的表现的范畴 随着CSS的出现 这些表现功能均可以由CSS完成 所以不含有语义的字体标记慢慢过时了 列表标记 列表标记 为了合理地组织文本 网页中常常要用到列表 在HTML中可以使用的列表标记有无序列表 有序列表和定义列表三种 无序列表 UnorderedList 有序列表 OrderedList 定义列表 DefinedList 嵌套的无序列表示例 文章CSS教程DOM教程XML教程参考XHTMLXMLCSS 有序列表 OrderedList 文章CSS教程DOM教程XML教程Flash教程 定义列表 DefinedList 湖南城市长沙衡阳常德湖北城市武汉襄樊宜昌 超链接标记 超链接标记 超链接是网页的基本元素 网页正是通过超链接而相互链接组织成一个网站 并将internet上的各个网站联系在一起 浏览者通过超链接选择阅读路径 超链接是通过URL 统一资源定位器 来定位目标信息的 URL包括4部分 网络协议 域名或IP地址 路径和文件名 URL分为绝对URL和相对URL 绝对URL 绝对URL是采用完整的URL来规定文件在internet上的精确地点 包括完整的协议类型 计算机域名或IP地址 包含路径信息的文档名 书写格式为 协议 计算机域名或IP地址 文档路径 文档名 例如 相对URL 相对URL是相对于包含超链接页的地点来规定文件的地点 如链接到同一路径下的文档 直接输入文件名即可 如news htm如链接到同一路径下子文件夹的文档 则先输入子文件夹名和斜杠 再输入文件名 如yule news htm如链接到上一级路径中 要在文件名前输入 如 news htm 其中 表示上级目录 表示本级目录 相对URL示例 wgzx yule index htm oa htm pop htm news htm 1 href yule news htm 2 1 2 href oa htm 3 href pop htm 3 相对URL的优势 可以看出相对URL方式比较简便 不需输入一长串完整的URL 另外相对路径还有一个非常重要的特点是 可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录 超链接的种类 根据源对象划分 1 用文本做超链接 首页2 用图像做超链接 3 文本图像混合做链接 格力空调1型该方法在商品展示的网站上较常用 使用图像做超链接后 图像会自动增加边框 可设置边框为0去掉 超链接的种类 根据源对象划分2 4 热区链接 使用map在图像上定义一幅地图 地图上可包含多个热区 每个热区用area单标记定义 area的shape属性定义了热区的形状 coords定义了热区的坐标点 href定义了热区链接的文件 同时img标记用usemap指明用了哪幅地图 超链接的种类 根据href的取值 1 链接到其他网页或文件 jpg rar等 内部链接返回首页外部链接网易网站下载链接点击下载2 电子邮件链接给我留言 如果IE不能打开该文件 则会弹出文件下载的对话框 超链接的种类 根据href的取值2 3 锚链接 链接到页面中某一指定的位置 当网页内容很长 需要进行页内跳转链接时 就需要定义锚点和锚点链接 锚点可使用name属性或id属性定义 也可以链接到其他网页某个锚点处 4 空链接和脚本链接 超链接的打开方式 target属性的取值 在本窗口打开 self target的默认值 在新窗口打开 blank在父窗口打开 parent将链接的文件载入到父框架在整个窗口打开 top 将链接的文件载入到整个浏览器窗口中 并删除所有框架 parent top仅仅在网页被嵌入到其他网页中有效 如框架中的网页 所以这两种取值用得很少 超链接的title属性 title属性在很多标记里都有 其作用是在鼠标停留在该元素上时显示设置的说明文字如格力太阳能喜获 超链接制作的原则 1 可以使用相对链接尽量不要使用绝对链接 如 index htm而不是2 链接目标尽可能简单如 而不是 图像标记 图像标记 将图形文件嵌入到网页文档中的当前位置说明 网页中插入图像有两种方法 一是插入一个元素 二是将图像作为背景嵌入到网页中由于CSS的背景属性的功能很强大 现在更推荐将所有的图像都作为背景嵌入 如果图像是通过元素插入 则可以在浏览器上通过按住鼠标左键拖动选中图片 或者将它拖动到地址栏里 如果作为背景嵌入 则无法选中图片 图像标记 网页中支持的图像文件格式 网页中可以插入的图像文件的类型有jpg格式 gif格式和png格式 这些文件都是压缩格式的图像格式 其中jpg格式适合用于网页中较大尺寸的真彩色图片 是一种有损压缩的格式 gif格式一般用于较小尺寸的图片 是一种无损压缩的格式 只支持256色 GIF在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色 gif格式的特点是可以实现gif动画 和gif全透明的图像 png格式可以用于alpha透明效果 但IE6不能够支持 标记的常见属性 是一个行内元素 插入元素不会导致任何换行 下面是标记的常见属性 在单元格中插入图像的方法 对于表格布局的网页 所有的元素都是放置在单元格中的 图像也不例外 要在单元格中插入图像 且单元格的边框和图像之间没有间隙 那么必须将该单元格的宽和高设置为图片的宽和高 且表格中其它单元格的大小也必须固定 然后确保与之间只有标记 没有空格和换行符 否则单元格会被空格撑开 如 不能换行 插入图像的对齐方式 标记的对齐方式仍然通过align属性实现 但其取值多达9种 其中要实现图片和文本混排可使用 左对齐 或 右对齐 要实现文本和图片顶部对齐可使用 文本上方 但通常是将图片放在表格里 通过表格定位来实现文本和图像的混排 媒体元素插入标记 插入flash的两种方法 方法一 执行菜单命令 插入 媒体 flash 在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现的 以确保在IE5和Firefox中都获得应有的效果方法二 执行菜单命令 插入 媒体 插件 此方法在代码视图中仅插入了embed元素 由于IE6和Firefox都能正常显示效果 而代码更简洁 所以推荐用这种方式 在图像上添加透明flash 首先可以将一张需要放置透明flash的图片作为单元格的背景导入 然后在此单元格内插入一个透明flash文件 可以调整此flash元素的大小与单元格相一致 选中该flash文件 点击属性面板里的 参数 按钮 新建一个参数 wmode 值设置为 transparent 插入视频或音频文件 插入视频可分别使用ActiveX按钮或插件按钮实现ActiveX方式插件方式 流媒体简介 流媒体实际指的是一种新的媒体传送方式 而非一种新的媒体 流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个压缩包 由视频服务器向用户计算机连续 实时传送 在采用流式传输方式的系统中 用户不必像采用下载方式那样等到整个文件全部下载完毕常见的流媒体文件格式real公司 rm rmvb raapple公司 quicktime movmicrosoft公司 asf wmv wma 插入流媒体元素的方法 网页中插入流媒体也能向插入一般媒体一样使用embed标记 只是要在classId框中设置流媒体的类型插入RealPlayer流格式的视频文件属性面板中设置 ClassID为RealPlayer 选中Embed复选框 Src为zhaodan rm 单击 参数 按钮 设置属性 parm参数示例 参数 console属性 可以将各种不同的RealPlayer控制聚集在网页上 这样它们可以交互使用或是保持独立 而且互相不影响演示http 59 51 24 41 8000 ec youhua kclx 1 htm 假如图形文件放在网页文档所在目录的上层目录 如home 下 则相对路径就必须是准网址 即用 表示网站 后边紧跟文件在网站中的路径 例如 home是网站下的一个目录 则代码应为 例如 home是网站下的目录king下边的一个子目录 则代码应为 HTML基础 例2 6 图像标记举例图像标记示例 HTML基础 演示 若事先在网站根目录中存放一幅图像logo468 60 gif 则可以在网页中显示它 alt 网页制作 属性表示在网页中可以用文字 网页制作 代替该图像先行显示出来 2 多媒体标记A 设置音乐播放的链接在Windows中 可播放的音乐文件格式常有au mid及wav三种 若要提供音乐文件让浏览者播放 则可建立指向音乐文件的超链接 例如 甜美音乐B 设置影像播放的链接常见的影像文件有mov mpg和avi 可建立超链接到影像文件 当浏览者单击超链接时 将会调用WindowsMediaPlayer 进行影像文件播放 例如 本市交通 HTML基础 C 直接将音乐或影像嵌入网页可以用标记 即 若 播放次数 设为TRUE 则无限次播放 直到单击关闭或停止 若设为NO 默认值 则只播放一次 D 播放网页背景音乐可运用标记 即 若 次数 设为Infinite 音乐将循环播放 直到网页关闭为止 HTML基础 6 表格标记 用于制作表格或网页结构 1 创建一个表格 2 和 创建表格中的每一行和每一格 3 创建表格头 例2 7 用表格标记创建下列表格 HTML基础 表格标记示例意大利英格兰西班牙 HTML基础 cellpadding设置格子边框与其内容之间的大小 valign是垂直对齐方式 colspan设置一个格子跨占的列数 rowspan设置一个格子跨占的行数 AC米兰佛罗伦萨曼联纽卡斯尔巴塞罗那皇家社会 HTML基础 尤文图斯桑普多利亚利物浦阿申纳皇家马德里 HTML基础 拉齐奥国际米兰切尔西米德尔斯堡马德里竞技 HTML基础 演示 7 表单标记 用于制作对话框 1 表单开始和结束标记 2 输入区标记 3 列表框标记 4 多行文本框标记 分别介绍如下 1 标记用来创建一个表单 也即定义表单的开始和结束位置 在标记对之间的一切都属于表单的内容 HTML基础 标记具有action method和target属性 action的值是处理程序的程序名 例如 当用户提交表单时 服务器将执行网站 HTML基础 2 标记用来定义一个用户输入区 用户可在其中输入信息 此标记必须放在标记对之间 标记中共提供文本框 按钮 复选框 单选钮等八种类型的输入区域 例如 HTML基础 3