《web开发案例ch04.ppt》由会员分享，可在线阅读，更多相关《web开发案例ch04.ppt（62页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1/2/2023第4章 HTML高级应用及编辑工具 教学目标教学目标教学重点教学重点教学过程教学过程教学目标l 掌握掌握HTML的高级应用的高级应用l 掌握常见的掌握常见的HTML编著工具编著工具 2教学重点lHTML的高级应用的高级应用lHTML应用实例应用实例3教学过程 span的使用的使用 div的使用的使用框架框架的使用的使用表单表单的使用的使用 HTML头部信息头部信息43.3 XHTML的基本语法的基本语法（常用标签）（常用标签）span的使用的使用使用使用 来组合来组合行内行内元素，可元素，可以通过样式以通过样式style来格式化它们。来格式化它们。53.3 XHTML的基本语法
2、的基本语法（常用标签）（常用标签）lGlololgllle63.3 XHTML的基本语法的基本语法（常用标签）（常用标签）层层 l层层称为定位标签，其作用主要是在布局中称为定位标签，其作用主要是在布局中确定某一确定某一块块的位置，像一个的位置，像一个容器容器。73.3 XHTML的基本语法的基本语法（常用标签）（常用标签）用法：用法：ll 定位定位 margin:20px 0 0 50px;l 其中的数值顺序是：上右下左。其中的数值顺序是：上右下左。l 属性：属性：lpadding 内边距内边距lmargin 外边距外边距83.3 XHTML的基本语法的基本语法（常用标签）（常用标签）l层的浮
3、动属性：层的浮动属性：float即使块状元素即使块状元素div的宽度不是的宽度不是100%，它也不，它也不允许其他元素和他允许其他元素和他同在一行同在一行 93.3 XHTML的基本语法的基本语法（常用标签）（常用标签）llll .redbox border:2px solid red;width:200px;height:100px;margin:5px;l .bluebox border:2px solid blue;width:200px;height:100px;float:left;margin:5px;llll Block1l Block2l Block3l Block1,floa
4、t:leftl Block2,float:leftl Block3ll 103.3 XHTML的基本语法的基本语法（常用标签）（常用标签）l使用层布局页面使用层布局页面113.3 XHTML的基本语法的基本语法（常用标签）（常用标签）l使用层布局页面使用层布局页面 llllogoll sidebarl mainllfooterll123.3 XHTML的基本语法的基本语法（常用标签）（常用标签）#logo border:1px solid blue;background-image:url(images/banner.png);width:900px;height:150px;padding:
5、10 133.3 XHTML的基本语法的基本语法（常用标签）（常用标签）#content width:900px;height:400px143.3 XHTML的基本语法的基本语法（常用标签）（常用标签）#sidebar background:#66FFFF;width:200px;height:400px;float:left;padding:10153.3 XHTML的基本语法的基本语法（常用标签）（常用标签）#main background-image:url(images/bg2.jpg);width:700px;height:400px;float:left;padding:1016
6、3.3 XHTML的基本语法的基本语法（常用标签）（常用标签）#footer background:#996600;width:900px;height:50px;padding:10l l 17第4章 HTML高级应用l框架框架l;l 184.1 HTML高级应用lll ll l llll ll194.1 HTML高级应用框架的主要作用是在一个浏览窗口内显示几框架的主要作用是在一个浏览窗口内显示几个页面个页面 l1、划分框架标记、划分框架标记l rows:水平划分，可按百分比或像素取值水平划分，可按百分比或像素取值.l cols:垂直划分窗口垂直划分窗口l 2、划分后每个小窗口的定义、划分后
7、每个小窗口的定义l src属性：在此窗口内显示的网页文档存放路径属性：在此窗口内显示的网页文档存放路径l name属性：定义小窗口的名称属性：定义小窗口的名称l target属性：打开方式（属性：打开方式（_blank,_self等等）等等）例如（例如（frameset.html）。）。204.1 HTML高级应用l内联框架内联框架 iframe214.1 HTML高级应用lll第一页第一页l第二页第二页l第三页第三页lmainFrame窗口窗口lll224.1 HTML高级应用表单表单 234.1 HTML高级应用l表单由标签表单由标签开始，由开始，由结结束，之间包含构成完整表单的元素。束，
8、之间包含构成完整表单的元素。属性：属性：action 处理表单内容的文件名（包含路径）。处理表单内容的文件名（包含路径）。Method 传送数据的方法传送数据的方法 post 或或 getenctype 表单数据的编码方式表单数据的编码方式（有上传文件元素时用）（有上传文件元素时用）244.1 HTML高级应用l表单元素表单元素、textare(文本域文本域)、select(下拉列表框下拉列表框)。一、一、元素元素定义要在表单中显示的控件类型和外观。定义要在表单中显示的控件类型和外观。通用属性主要有：通用属性主要有：type、id、name、value、disabled、visible。254
9、.1 HTML高级应用1 button(普通按钮普通按钮)2 submit(提交按钮提交按钮)3 reset(重置按钮重置按钮)264.1 HTML高级应用用图片改变按钮样式：用图片改变按钮样式：lstyle=background:url(images/submit.gif);border-style:none;width:58px;height:24px;background-repeat:no-repeat;lborder-style:lnone:无边框无边框lsolid:实线边框实线边框 274.1 HTML高级应用4 radion(单选按钮单选按钮)男男 女女284.1 HTML高级应
10、用5 checkbox(复选框复选框)音乐音乐体育体育电影电影动漫动漫294.1 HTML高级应用6 text(文本框文本框)304.1 HTML高级应用7 password(密码框密码框)314.1 HTML高级应用8 file(文件文件)324.1 HTML高级应用9 hidden(隐藏域隐藏域)334.1 HTML高级应用二、二、(文本域文本域)创建与单行文本相对的多行文本输入框。创建与单行文本相对的多行文本输入框。344.1 HTML高级应用三、三、select(下拉列表框下拉列表框)用于显示可供用户选择的下拉列表。用于显示可供用户选择的下拉列表。请选择请选择 北京北京 上海上海 广州
11、广州 济南济南354.1 HTML高级应用l使用使用table 设计表单设计表单364.1 HTML高级应用ll l 登录表单登录表单l l 用户名用户名:l l (最多字符数不能超过最多字符数不能超过10个个)l l l 密码密码:l l l 374.1 HTML高级应用ll 网址网址:l l l l email:l l l l 个人信息个人信息:l 请在这里留下个请在这里留下个人信息人信息l l 384.1 HTML高级应用ll 个人爱好个人爱好:l l l 电脑电脑l l 电影电影l l 游戏游戏l l 动漫动漫l l 394.1 HTML高级应用ll 性别性别:l l 女女l 男男l
12、l l 城市城市:l l l 请选择请选择l 北京北京l 上海上海l 广州广州l l l 404.1 HTML高级应用ll l l l l l414.1 HTML高级应用l使用使用DIV 设计表单设计表单424.1 HTML高级应用lll用户名：用户名：ll *lll密码：密码：ll *区分大小写区分大小写(限制为限制为820个字符个字符)lll确认密码：确认密码：ll*ll 434.1 HTML高级应用ll性别：性别：ll男男ll女女lll爱好：爱好：ll 音乐音乐ll 体育体育ll 电影电影lll 444.1 HTML高级应用ll所在城市：所在城市：ll请选择请选择l北京北京l上
13、海上海l广州广州l济南济南llll建议：建议：lll 454.1 HTML高级应用ll照片照片:lllllll464.1 HTML高级应用 HTML头部信息头部信息 lHTML头部信息头部信息(head)里包含关于网页的信息。里包含关于网页的信息。头部信息头部信息(head)里的内容，主要是被浏览器所用，里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。不会显示在网页的正文内容里。l另外，搜索引擎如另外，搜索引擎如google,yahoo,baidu等主要查等主要查网页中的网页中的head信息。信息。474.1 HTML高级应用标题标题 标题标题(title)是最常用的是最常用的hea
14、d信息。它不显信息。它不显示在示在HTML网页正文里，显示在浏览器窗口网页正文里，显示在浏览器窗口的标题栏里。示例代码如下：的标题栏里。示例代码如下：lHTML头部信息头部信息484.1 HTML高级应用链接链接l用链接用链接(link)可以建立和外部文件的链接。可以建立和外部文件的链接。常用的是对常用的是对CSS外部样式表：外部样式表：l494.1 HTML高级应用l标签为页面上的所有链接规定默认地址或默标签为页面上的所有链接规定默认地址或默认目标。认目标。504.1 HTML高级应用l样式样式 用样式用样式(style)可以设值网页的内部样式表可以设值网页的内部样式表 body backg
15、round-color:#F0E68C;color:black;h2 color:red514.1 HTML高级应用l脚本脚本 编写编写javascript代码，在页面中直接执行代码，在页面中直接执行 document.write(Hello World!)524.1 HTML高级应用l关于网页信息关于网页信息(meta)/all表示表示 文件将被检索，且页面上的链接可以被查询；文件将被检索，且页面上的链接可以被查询；534.1 HTML高级应用 /页面跳转页面跳转544.1 HTML高级应用HTML头部信息的例子头部信息的例子llHTML头部信息头部信息(head)llll body bac
16、kground-color:#F0E68C;color:black;l h2 color:redlll document.write(Hello World!)l554.1 HTML高级应用lllllllll564.1 HTML高级应用l作业（写在作业本上）作业（写在作业本上）设计一个企业客户的注册表单页面，要求包设计一个企业客户的注册表单页面，要求包括文本框，密码框，文本域，单选按钮，括文本框，密码框，文本域，单选按钮，复选框，下拉列表框和按钮。复选框，下拉列表框和按钮。57584.1 HTML高级应用动态效果和多媒体l滚动字幕滚动字幕通过通过标签标签实现实现 滚动字幕滚动字幕 图片和文字都
17、可以动！图片和文字都可以动！我往左跑我往左跑 我往右跑我往右跑 594.1 HTML高级应用l网页中加入音频和视频网页中加入音频和视频 通过通过标签标签实现实现背景音乐背景音乐通过通过标签的标签的dynsrc属性可以向网页中属性可以向网页中加入视频加入视频 l页面自动刷新：在页面打开停留几秒钟后，页面自动刷新：在页面打开停留几秒钟后，自动转向其它网页自动转向其它网页604.1.5 可执行对象可执行对象lFlash 具有交互性具有交互性 采用矢量作图技术采用矢量作图技术 采用流控制技术采用流控制技术 支持过渡变形技术，包括移动变形和形状变支持过渡变形技术，包括移动变形和形状变形等形等使用使用对象
18、，并对其进行必要的设置对象，并对其进行必要的设置即可嵌入网页即可嵌入网页 614.2 常用网页编辑工具简介常用网页编辑工具简介 l编辑网页通常有两种方式编辑网页通常有两种方式文本编辑方式，如：文本编辑方式，如：EditPlus，UltraEdit，甚至于，甚至于Windows的记事本等的记事本等所见即所得所见即所得方式，如：方式，如：FrontPage，Dreamweaver 等等l建议：读者学习建议：读者学习HTML编写时，初学时编写时，初学时使用文本编辑方式，这样能加快熟悉使用文本编辑方式，这样能加快熟悉HTML标签和相关用法；之后转入使用标签和相关用法；之后转入使用高级工具，加快编写效率高级工具，加快编写效率62