软件开发协会第二课时课件.ppt

1、软件开发协会软件开发协会第二课时第二课时HTML的基本标签的基本标签软件开发协会软件开发协会网页制作整体内容网页制作整体内容 1、HTML(Hypertext Markup Language)基本标签基本标签（简单）（简单）2、表格（、表格（table）基础）基础（简单）（简单）3、框架、框架(frame)+表单表单(form)（中等）（中等）4、CSS层叠样式表层叠样式表（稍难）（稍难）5、DIV定位定位（稍难）（稍难）一般情况下一般情况下CSS与与DIV一起使用一起使用 6、JavaScript实现动态效果实现动态效果（难）（难）软件开发协会软件开发协会就业技能结构图就业技能结构图软件开发

2、协会软件开发协会本门课程目标和课程项目展示本门课程目标和课程项目展示 本门课程目标本门课程目标 学完本阶段课程后，你能够：学完本阶段课程后，你能够：课程项目展示课程项目展示演示示例演示示例1 1：课程项目展示课程项目展示 能制作界面美观大方的个人博客首页（或整个博客），不含动态脚能制作界面美观大方的个人博客首页（或整个博客），不含动态脚本功能。本功能。软件开发协会软件开发协会本课时目标本课时目标 会使用会使用HTML的基本结构创建网页的基本结构创建网页 会使用文本相关标签实现文字修饰和布局会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面会使用图像相关标签实现图文并茂的

3、页面 会使用超链接相关标签实现页面间的跳转会使用超链接相关标签实现页面间的跳转软件开发协会软件开发协会HTML文件的基本结构文件的基本结构 HTML文档的结构文档的结构我的第一个网页我的第一个网页 Hello World!HTML 网页网页头部部分头部部分主体部分主体部分标签标记标签标记 HTML 文档的开始和结束文档的开始和结束网页标题网页标题网页内容，可以是网页内容，可以是文本、图像等文本、图像等这部分包含文本、图像和链接。它包括在这部分包含文本、图像和链接。它包括在 标签内标签内这部分包括标题和其他说明信息。包括在这部分包括标题和其他说明信息。包括在 标签内标签内软件开发协会软件开发协会

4、使用记事本创建网页使用记事本创建网页演示示例演示示例2 2：演示如何在记事本里创建网页演示如何在记事本里创建网页 使用记事本创建网页的步骤：使用记事本创建网页的步骤：1、打开记事本、打开记事本2、输入、输入HTML代码代码3、保存为、保存为*.html文件，注意格式问题文件，注意格式问题4、打开网页预览效果、打开网页预览效果 使用记事本创建网页使用记事本创建网页软件开发协会软件开发协会标签标签网页标题网页标题网页页面中出现乱码，那如何消除乱码使网页页面中出现乱码，那如何消除乱码使其正常显示？其正常显示？使用使用标签标签简体中文：简体中文：gb2312繁体中文：繁体中文：big5纯英文网页：纯英

5、文网页：iso-8859-1可以避免页面可以避免页面中的乱码中的乱码软件开发协会软件开发协会页面背景色或背景图像页面背景色或背景图像 Hello World！为了使页面美丽大方，为了使页面美丽大方，网页背景要尽量地浅网页背景要尽量地浅Hello World!网页背景色彩网页背景色彩 网页背景图像网页背景图像 软件开发协会软件开发协会文本相关标签文本相关标签字体、字号字体、字号 标题标签标题标签 标签标签 特殊符号特殊符号行的控制行的控制 段落标签段落标签 换行标签换行标签使用了使用了 换段了换段了设置了字体的设置了字体的大小和颜色大小和颜色换行了换行了特殊符号特殊符号软件开发协会软件开发协会字

6、体、字号相关标签字体、字号相关标签标题标签标题标签.#=1,2,3,4,5,6 说明：说明：到到字体大小依字体大小依次递减次递减 一级标题一级标题 二级标题二级标题 三级标题三级标题 四级标题四级标题 五级标题五级标题 六级标题六级标题 H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题查看源代码查看源代码软件开发协会软件开发协会.字体、字号相关标签字体、字号相关标签 标签标签 特殊符号特殊符号特殊字符特殊字符转义码转义码空格空格 引号引号(“”)"小于小于()>版权号版权号()©字体的字体的大小值大小值字体的字体的颜色颜色字体的字体的类

7、型类型软件开发协会软件开发协会字体、字号相关标签字体、字号相关标签.手机充值、手机充值、IP卡卡/电话卡电话卡 移动移动 | 100| 联通联通| 50 Copyright©2007"淘宝网淘宝网"All rights.空格效果空格效果软件开发协会软件开发协会.淘宝集市欢迎您！淘宝集市欢迎您！淘宝网首届翠友会！淘宝网首届翠友会！行的控制相关标签行的控制相关标签段落标签段落标签 段段(Paragraph)(可以看作是空行可以看作是空行)换行标签换行标签 换行换行 换段了换段了换行了换行了软件开发协会软件开发协会图像标签图像标签

8、图像类图像类型型优点优点缺点缺点适用场合适用场合制作工具制作工具*.jpg体积小，比较清体积小，比较清晰晰有损压缩有损压缩、画面失真画面失真 网页图片网页图片Photoshop*.gif支持支持 Internet 标标准准,支持无损耗压支持无损耗压缩和透明度，很缩和透明度，很流行流行 支持有限的支持有限的透明度透明度,效效果不如别的果不如别的图像图像网页图片网页图片Photoshop*.swf体积小体积小,便于网络便于网络传输传输制作麻烦制作麻烦网页动画网页动画 Flash*.bmp支持支持 24 位颜色深位颜色深度，兼容性好度，兼容性好不支持压缩不支持压缩,容量大容量大桌面墙纸桌面墙纸pho

9、toshop软件开发协会软件开发协会图像标签图像标签图像的基本语法图像的基本语法 鼠标移到图像上，出鼠标移到图像上，出现的提示性文字现的提示性文字图像的图像的位置位置图像的图像的宽度宽度图像的图像的高度高度为图像添加的提示性文字为图像添加的提示性文字软件开发协会软件开发协会图像标签图像标签 图像与文本的对齐方式图像与文本的对齐方式 图像与文本居中对图像与文本居中对齐齐,还可以取还可以取top,bottom 值值.请点击广告进入明星专区请点击广告进入明星专区图像和文本居图像和文本居中对齐中对齐软件开发协会软件开发协会小结小结1 1字号大小为字号大小为3软件开发协会软件开发协会文字布局文字布局水平

10、分隔线水平分隔线有序列表有序列表无序列表无序列表用了预先定义用了预先定义好的格式好的格式软件开发协会软件开发协会如何使用内容分隔如何使用内容分隔标签标签 线的厚度值线的厚度值线的宽度线的宽度 标签用于在页面上绘制水平线标签用于在页面上绘制水平线 线的颜色线的颜色软件开发协会软件开发协会如何使用列表如何使用列表 无序列表语法无序列表语法 列表项内容列表项内容 有序列表语法有序列表语法 列表项内容列表项内容 注册步骤注册步骤：填写信息填写信息 收电子邮件收电子邮件 注册成功注册成功 新人上路指南新人上路指南 如何激活会员名如何激活会员名？如何注册淘宝会员如何注册淘宝会员？注册时密码设置有什么要求注

11、册时密码设置有什么要求？支付宝认证支付宝认证 软件开发协会软件开发协会预格式文本预格式文本标签标签 如何实现如下图所示的页面中如何实现如下图所示的页面中的文字效果？的文字效果？使用使用 标签可以实现标签可以实现软件开发协会软件开发协会如何使用预格式文本如何使用预格式文本标签标签 腾讯腾讯-QQ币币/QQ幻想幻想-30元卡元卡 一一 口口 价：价：26.45元元 运费：卖家承担运费运费：卖家承担运费 剩余时间：剩余时间：5天天 宝贝类型宝贝类型：全新全新 卖主声明：货到付款，可试用卖主声明：货到付款，可试用10天！天！HTML中代码格式与浏中代码格式与浏览器中显示效果一样览器中显示效果一样软件开

12、发协会软件开发协会页面链接页面链接标签标签 链接到其他页面链接到其他页面 免费注免费注册册链接内容链接内容链接的地址链接的地址链接到其他页面链接到其他页面 免费注册免费注册 登录登录 单击单击”免费注册免费注册”之后链接到的页面之后链接到的页面软件开发协会软件开发协会页面链接页面链接标签标签 链接到其他页面链接到其他页面 相对路径相对路径指定从根目录到文件的完整路径。指定从根目录到文件的完整路径。绝对路径绝对路径指定相对于当前文件的文件位置。指定相对于当前文件的文件位置。在同一个文件夹下有两个在同一个文件夹下有两个html文件，文件，从一个文件超链接到另一个文件的路从一个文件超链接到另一个文件

13、的路径有几种方式？径有几种方式？两种方式：相对路径和绝对路径两种方式：相对路径和绝对路径软件开发协会软件开发协会页面链接页面链接标签标签要链接到同一目录要链接到同一目录(C:HTML)下的页面，可编写下的页面，可编写 或或 相对路径名相对路径名绝对路径名绝对路径名软件开发协会软件开发协会页面链接页面链接标签标签 要实现如下图所示的超链接效果，要实现如下图所示的超链接效果，怎么办？怎么办？演示示例演示示例3 3：演示锚链接的例子演示锚链接的例子 使用锚记标签使用锚记标签软件开发协会软件开发协会页面链接页面链接标签标签 链接到本页面链接到本页面 锚记标签用于使用户锚记标签用于使用户“跳跳”到文档的

14、某个部分到文档的某个部分 HTML 的的 NAME 属性用于创建锚标记属性用于创建锚标记 主题名称主题名称 为达到这种跳转效果，请在为达到这种跳转效果，请在 HREF 参数中使用参数中使用该标记该标记主题名称主题名称演示示例演示示例4 4：演示锚链接的例子演示锚链接的例子 链接到其他页面链接到其他页面新人上路新人上路新人上路指南新人上路指南1、定义锚标记、定义锚标记2、链接到锚标记所在位置、链接到锚标记所在位置软件开发协会软件开发协会页面链接页面链接标签标签 电子邮件链接电子邮件链接 要链接电子邮件，可在链接标签中插要链接电子邮件，可在链接标签中插入入”mailto:邮箱地址邮箱地址”站站长信

15、箱长信箱演示示例演示示例5 5：演示电子邮件链接演示电子邮件链接 电子邮件链接电子邮件链接 站长信箱站长信箱单击单击”站长信箱站长信箱”链接后的输出结果链接后的输出结果任何正确的电子邮任何正确的电子邮箱地址均可箱地址均可软件开发协会软件开发协会滚动滚动标签标签 滚动文字或图像滚动文字或图像滚动延迟滚动延迟时间时间滚动对象的滚动对象的方向方向 说明：说明：scrolldelay：表示滚动延迟时间，默认值为表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向表示滚动的方向，默认为从右向左。左。软件开发协会软件开发协会滚动滚动标签标签 水平滚动水平滚动 垂直滚动垂直滚动

16、Avon化妆品化妆品 雅诗兰黛雅诗兰黛 水平向水平向左移动左移动垂直向垂直向上移动上移动图片和文字同时图片和文字同时垂直向上移动垂直向上移动声明滚动声明滚动文字结束文字结束声明滚动文字声明滚动文字“水平滚水平滚动动”开始，并且将会以开始，并且将会以默认方式从右向左滚动默认方式从右向左滚动软件开发协会软件开发协会小结小结2 2有序列表有序列表OL无序列表无序列表UL编写如下图所示效果对应的编写如下图所示效果对应的html代码代码软件开发协会软件开发协会总结总结l哪个标签中的哪个属性可以改变字体哪个标签中的哪个属性可以改变字体颜色和字号？颜色和字号？l图像与文本的对齐方式有哪几种？图像与文本的对齐方式有哪几种？l项目列表和编号有何区别？分别适用项目列表和编号有何区别？分别适用什么场合？什么场合？l链接到其他页面时，路径的表示方法链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两有两种：相对路径和绝对路径，这两种路径有何区别和联系？种路径有何区别和联系？