多一个斜杠,其用法见其上 2、标记拥有自己的属性 < font face=”宋体”size=4 color=”HFF0000”>安徽工业职业技术学院<font> 3、HIML标记可嵌套使用,不能交叉: <b><div align=center><font color=# FFoo> Active sever page</font></di 4、少数标记是单独使用如:<BR>、<HR> 3、常用标记(图像、超链接和表格) < font face=”宋体”size=4 color=”#FF0000”安徽工业职业技术学院<font> <img src="images/flower. jpg "border="1"> <ahref=htp/www.ahip.com,>安徽工业职业技术学院<a> <ahre="超星阅读exe">单击此处文件下载<a>( chapter2/ section3/ download.asp <table border=0 bordercolor=#FF0000>(chapterO2section 4/myform. asp <tr> < td col span="2" class="td1">用户注册</td /tr> <tr> < td width="289″ class=="td2">用户名:</td <td width=295 class="td2" Xinput name="username type="text d=" username"></td〉 ctable> 4、HTML的表单( chapterl2/ section4/ myform. asp) <form action="userlogin. asp"method="post"name="login"> </form 两种表单数据的传递方法:GET和POST方法 GET方法:将表单数据附加在 Action属性指定的URL地址之后,并在URL地址与表 单数据间加上一个“?”分割符,表单的各个数据项间用“&”分割符 http://localhost/test.asp?txtid=012&txtusename=ucau 方式一次最多只能提交256个字符 POST方式是将表单数据作为一个独立的数据块直接发送给服务器 表单中的界面对象 单行文本域 <input name="username"type="text"id=user ername"> 隐藏域 <input name="username"type="hidden"id"username"> 口令域 <input name="userkey I"type="password"id="userkey 1"> 单选按钮 <input name="sex"type="radio"value="radiobutton"checked>g <input type="radio"name="sex"value="radiobutton">3r 列表框 <select namesedu"sizes"id=edu"> < option value="硕士以上">硕士以上< option> < option value="大学本科">大学本科< option>
多一个斜杠,其用法见其上; 2、标记拥有自己的属性; <font face=”宋体” size=4 color=”#FF0000”>安徽工业职业技术学院</font> 3、HTML 标记可嵌套使用,不能交叉; <b><div align=center><font color=#FF00>Active sever page</font></div></b> 4、少数标记是单独使用如:<BR>、<HR> 3、常用标记(图像、超链接和表格) <font face=”宋体” size=4 color=”#FF0000”>安徽工业职业技术学院</font> <img src=”images/flower.jpg” border=”1”> <a href=”http://www.ahip.com”>安徽工业职业技术学院</a> <a href="超星阅读.exe">单击此处文件下载</a> (chapter02/section3/download.asp) <table border="0" bordercolor="#FF0000" >(chapter02/section4/myform.asp) <tr> <td colspan="2" class="td1">用户注册</td> </tr> <tr> <td width="289" class="td2">用户名:</td> <td width="295" class="td2"><input name="username" type="text" id="username"></td> </tr> </table> 4、HTML 的表单(chapter02/section4/myform.asp) <form action="userlogin.asp" method="post" name="login"> </form> 两种表单数据的传递方法:GET 和 POST 方法 GET 方法:将表单数据附加在 Action 属性指定的 URL 地址之后,并在 URL 地址与表 单数据间加上一个“?”分割符,表单的各个数据项间用“&”分割符。 http://localhost/test.asp?txtid=012&txtusename=ucau GET 方式一次最多只能提交 256 个字符; POST 方式是将表单数据作为一个独立的数据块直接发送给服务器; 表单中的界面对象 单行文本域 <input name="username" type="text" id="username"> 隐藏域 <input name="username" type="hidden" id="username"> 口令域 <input name="userkey1" type="password" id="userkey1"> 单选按钮 <input name="sex" type="radio" value="radiobutton" checked>男 <input type="radio" name="sex" value="radiobutton">女 列表框 <select name="edu" size="1" id="edu"> <option value="硕士以上">硕士以上</option> <option value="大学本科">大学本科</option>
< option value="大专">大专< option> < option value="中专以下">中专以下< option> 按钮 <input type="button"name="Submit"value=WATE"> <input type="submit"name="Submit"value="iE Hti"> < cinput type=" reset""name=" Submit2" value="全部重写"> 5、HML的其他常用标记;( chapter02 sectionS/duomeiti asp、 moveleft. asp 多媒体 <img dynsrc=clock. avi"start="mouseover"> < marquee dirction= up behavior="' scroll scrollamount==滚动速度 scrolldelay=滚动延迟时间 bgcolor=背景颜色>滚动的内容< marquee 6层叠样式表CSs( chapterl02/ / section6 myform. asp) 层叠样式表( Cascading Style Sheet)是一系列格式设置规则,它们控制Web页面内容 的外观。术语 cascading表示向同一个元素应用多种样式的能力。例如,可以创建一个CSS 规则来应用颜色,创建另一个CSS规则来应用边距,然后将两者应用于页面上的同一个文 本。所定义的样式向下“层叠”到您的Web页面上的元素,并最终创建您想要的设计 优点1:使用CSS可以非常灵活并更好地控制具体的页面外观,从精确的布局定位到 特定的字体和样式。CSS允许您控制HIML无法独自控制的许多属性。例如,可以为选 定的文本指定不同的字体大小和单位(像素、磅值等)。通过使用CSS以像素为单位设置 字体大小,还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格 式外,还可以使用CSS控制web页面中块级别元素的格式和定位。例如,可以设置块级 元素的边距和边框、其他文本周围的浮动文本等 优点2:它提供了便利的更新功能;更新一处的CSs规则时,使用该已定义样式的所 有文档的格式都会自动更新为新样式 CSS格式设置规则由两部分组成:选择器和声明。选择器是标识格式元素的术语(如P H、类名或ID),声明用于定义元素样式。在下面的示例中,H1是选择器,介于括号({) 之间的所有内容都是声明 HI font-size: 16 pixels font-family: Helvetica font-weight: bold 声明由两部分组成:属性(如 font-family)和值(如 Helvetica)。上面的CSS规则为Hl 标签创建了一个特定的样式:链接到此样式的所有H1标签的文本都将是16个像素大小、 Helvetica字体和粗体。 在 Dreamweaver中可以定义以下样式类型 自定义CSS规则(也称为类样式)使您可以将样式属性应用于任何文本范围或文 本块。(请参见应用类样式。) <style type="text/css"> mystyle i font-family:"新宋体
<option value="大专">大专</option> <option value="中专以下">中专以下</option> </select> 按钮 <input type="button" name="Submit" value="确定"> <input type="submit" name="Submit" value="登陆"> <input type="reset" name="Submit2" value="全部重写"> 5、HML 的其他常用标记;(chapter02/section5/duomeiti.asp、moveleft.asp) 多媒体 <img dynsrc="clock.avi" start="mouseover"> <bgsound src=”bg.mid loop=3> <marquee dirction=up behavior=”scroll scrollamount=滚动速度 scrolldelay=滚动延迟时间 bgcolor=背景颜色>滚动的内容</marquee> 6 层叠样式表 CSS(chapter02/section6/myform.asp) 层叠样式表 (Cascading Style Sheet) 是一系列格式设置规则,它们控制 Web 页面内容 的外观。术语 cascading 表示向同一个元素应用多种样式的能力。例如,可以创建一个 CSS 规则来应用颜色,创建另一个 CSS 规则来应用边距,然后将两者应用于页面上的同一个文 本。所定义的样式向下“层叠”到您的 Web 页面上的元素,并最终创建您想要的设计。 优点 1:使用 CSS 可以非常灵活并更好地控制具体的页面外观,从精确的布局定位到 特定的字体和样式。CSS 允许您控制 HTML 无法独自控制的许多属性。例如,可以为选 定的文本指定不同的字体大小和单位(像素、磅值等)。通过使用 CSS 以像素为单位设置 字体大小,还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格 式外,还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。例如,可以设置块级 元素的边距和边框、其他文本周围的浮动文本等。 优点 2:它提供了便利的更新功能;更新一处的 CSS 规则时,使用该已定义样式的所 有文档的格式都会自动更新为新样式。 CSS 格式设置规则由两部分组成:选择器和声明。选择器是标识格式元素的术语(如 P、 H1、类名或 ID),声明用于定义元素样式。在下面的示例中,H1 是选择器,介于括号 ({}) 之间的所有内容都是声明: H1 { font-size:16 pixels; font-family:Helvetica; font-weight:bold; } 声明由两部分组成:属性(如 font-family)和值(如 Helvetica)。上面的 CSS 规则为 H1 标签创建了一个特定的样式:链接到此样式的所有 H1 标签的文本都将是 16 个像素大小、 Helvetica 字体和粗体。 在 Dreamweaver 中可以定义以下样式类型: ⚫ 自定义 CSS 规则(也称为类样式)使您可以将样式属性应用于任何文本范围或文 本块。(请参见应用类样式。) <style type="text/css"> .mystyle { font-family: "新宋体";
font-size: 24px ht:30 color: #FF0000 HIML标签样式重定义特定标签(如h)的格式。创建或更改Hl标签的CSS样 式时,所有用H1标签设置了格式的文本都会立即更新 font-size: 16 pixels font-family: Helvetica; font-weight: bold ●CSS选择器样式(高级样式)重新定义特定元素组合的格式设置,或重新定义CSS 允许的其他选择器表单的格式设置(例如,每当h2标题出现在表格单元格内时都 应用选择器tdh2)。高级样式还可以重新定义包含特定id属性的标签的格式设置 例如,# my Style定义的样式可应用于包含属性值对id=" myStyle"的所有标签) <style type="text/css"> td h2 i font-family:"宋体 font-size: X-large font-weight: 500 color:#000099, #mystyle i font-family:"宋体" color: #FF0000 <form id="forml"name="form I"method="post"action="t"> <label> <input type="text"name="textfield"id="mystyle"> </label> </form> CSS规则可以位于以下3个位置: 内部(或嵌入式)CSS样式表是一系列包含在HIML文档文件头部分的 style标 签内的CSS规则。 <style type="text/css"> margin: auto
font-size: 24px; font-weight: 300; color: #FF0000; } </style> ⚫ HTML 标签样式重定义特定标签(如 h1)的格式。创建或更改 H1 标签的 CSS 样 式时,所有用 H1 标签设置了格式的文本都会立即更新。 H1 { font-size:16 pixels; font-family:Helvetica; font-weight:bold; } ⚫ CSS 选择器样式(高级样式)重新定义特定元素组合的格式设置,或重新定义 CSS 允许的其他选择器表单的格式设置(例如,每当 h2 标题出现在表格单元格内时都 应用选择器 td h2)。高级样式还可以重新定义包含特定 id 属性的标签的格式设置 (例如,#myStyle 定义的样式可应用于包含属性值对 id="myStyle" 的所有标签)。 <style type="text/css"> <!-- td h2 { font-family: "宋体"; font-size: x-large; font-weight: 500; color: #000099; } #mystyle { font-family: "宋体"; font-size: 36px; color: #FF0000; } --> </style> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="textfield" id="mystyle"/> </label> </form> CSS 规则可以位于以下 3 个位置: ⚫ 内部(或嵌入式)CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标 签内的 CSS 规则。 <style type="text/css"> body { margin: auto;
padding-left: Opx background-color: #FFCCFF 外部CSS样式表是一系列存储在一个单独的外部CSS(cs)文件(并非HIML 文件)中的CSS规则。利用文档文件头部分中的链接,该文件被链接到Web站 点中的一个或多个页面 <link href="mystyle. css"rel="stylesheet" type="text/css"> 内联样式是在标签的特定实例中在整个HIML文档内定义的 p styles="line- height:14.5pt; color red">这是直接在标记符号中应用的样式的方法<p 注意:手动设置的HIML格式设置会覆盖通过CSS应用的格式设置。要使CSS规 则能够控制段落格式,必须删除所有手动设置的HIML格式。 CSS样式设置 1.定义CSS类型属性 2.定义CSS样式背景属性 3.定义CSS样式区块属性 4.定义CSS样式方框属性 5.定义CSS样式边框属性 6.定义CSS样式列表属性 7.定义CSS样式定位属性 8.定义CSS样式扩展属性 课后问题 1、请访问“安徽工业职业技术学院”的首页,查看源代码,在这个页面中使用了哪些 HIML标记语言,使用了哪些CSS样式; 2、总结描述所有的CSS样式的应用,对于课堂上没有提到的CSS样式请查阅 Dreamweaver的帮助信息 3、自己制作一个“用户信息注册界面”的表单,运用CSS样式编排其字体、色彩、格 式等元素,并给其他同学浏览,至少五位同学表示赞赏表示成功
padding-top: 100px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: #FFCCFF; } </style> ⚫ 外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件(并非 HTML 文件)中的 CSS 规则。利用文档文件头部分中的链接,该文件被链接到 Web 站 点中的一个或多个页面。 <link href="mystyle.css" rel="stylesheet" type="text/css"> ⚫ 内联样式是在标签的特定实例中在整个 HTML 文档内定义的。 <p style="line-height:14.5pt;color:red">这是直接在标记符号中应用的样式的方法</p> 注意:手动设置的 HTML 格式设置会覆盖通过 CSS 应用的格式设置。要使 CSS 规 则能够控制段落格式,必须删除所有手动设置的 HTML 格式。 CSS 样式设置 1. 定义 CSS 类型属性 2. 定义 CSS 样式背景属性 3. 定义 CSS 样式区块属性 4. 定义 CSS 样式方框属性 5. 定义 CSS 样式边框属性 6. 定义 CSS 样式列表属性 7. 定义 CSS 样式定位属性 8. 定义 CSS 样式扩展属性 课后问题: 1、请访问“安徽工业职业技术学院”的首页,查看源代码,在这个页面中使用了哪些 HTML 标记语言,使用了哪些 CSS 样式; 2、总结描述所有的 CSS 样式的应用,对于课堂上没有提到的 CSS 样式请查阅 Dreamweaver 的帮助信息; 3、自己制作一个“用户信息注册界面”的表单,运用 CSS 样式编排其字体、色彩、格 式等元素,并给其他同学浏览,至少五位同学表示赞赏表示成功;
第三讲 Javascript 教学重点: 1、 JavaScript的语法特点,函数的定义、调用,变量的作用域 2、条件控制语句、循环控制语句; 3、 JavaScript中几个常用对象的应用 教学要求: 1、回顾和复习以前C语言的基本语法知识:进一步加深理解 Javascript语法知识 2、深刻理解有关函数中变量的作用域和各类控制语句的功能 3、理解和灵活运用 JavaScript中常用的几个对象的属性和方法; 教学内容 什么是 Javascript? JavaScript是 Netscape公司推出的一种嵌入HIML文档的,基于对象的脚本描述语言。 利用它可以进一步的增强网页的交互性、方便操作和控制各种浏览器对象,实现控制浏览器 外观、状态和运行方式的目的。利用它还可以实现对用户所输入的数据进行有效性检验,从 而减轻服务器的负担。其语法与C语言很相似 2、在网页中使用 JavaScript <Script language="javascript"> window. alert("欢迎进入") </script> 如果一段 Javascript应用到多个网页,可以将其放入到扩展名称为:Js文本文件 在需要使用" JavaScript"的页面中插入方法:( chapter3/ section l/javaexample,asp <Script Language="JavaScript"src=java/java. js"></script> 3、 JavaScript语法基础 1、 JavaScript的数据类型 JavaScript提供四种基本的数据类型,分别为数值型、逻辑型、字符串型和 undefined 类型 2、常量、变量( chapter3/ section2/ mathexpression.asp) <script language="javascript"> var nun=24id="36′ Enum+id Number(id)结果为60 window alert("x的值为:"+x); ∥显示的结果为“2436” 通过上例需要注意的问题 Javascript语句区分大小写,语句以分号作为结束符号 用∥来注释语句 变量需要用var定义可以给多个变量赋初值 ●变量的类型转换,数值型转换成字符型进行连接运算;需要用类型转换函数。 3、表达式 条件表达式(条件)?A:B( chapter3/ / section2 logicexpression,asp <script language="javascript"> man=age>=18)? "adult". "minor
第三讲 JavaScript 教学重点: 1、JavaScript 的语法特点,函数的定义、调用,变量的作用域; 2、条件控制语句、循环控制语句; 3、JavaScript 中几个常用对象的应用; 教学要求: 1、回顾和复习以前 C 语言的基本语法知识;进一步加深理解 Javascript 语法知识; 2、深刻理解有关函数中变量的作用域和各类控制语句的功能; 3、理解和灵活运用 JavaScript 中常用的几个对象的属性和方法; 教学内容: 1、什么是 JavaScript? JavaScript 是 Netscape 公司推出的一种嵌入 HTML 文档的,基于对象的脚本描述语言。 利用它可以进一步的增强网页的交互性、方便操作和控制各种浏览器对象,实现控制浏览器 外观、状态和运行方式的目的。利用它还可以实现对用户所输入的数据进行有效性检验,从 而减轻服务器的负担。其语法与 C 语言很相似。 2、在网页中使用 JavaScript <Script language="javascript"> window.alert("欢迎进入"); </script> 如果一段 javascript 应用到多个网页,可以将其放入到扩展名称为:Js 文本文件。 在需要使用"JavaScript"的页面中插入方法:(chapter03/section1/javaexample.asp) <Script Language="JavaScript" src="java/java.js"></script> 3、JavaScript 语法基础 1、JavaScript 的数据类型 JavaScript 提供四种基本的数据类型,分别为数值型、逻辑型、字符串型和 undefined 类型 2、常量、变量(chapter03/section2/mathexpression.asp) <script language="javascript"> var num=24,id="36"; x=num+id; //Number(id) 结果为 60 window.alert("x 的值为:"+x); //显示的结果为“2436” </script> 通过上例需要注意的问题: ⚫ Javascript 语句区分大小写,语句以分号作为结束符号; ⚫ 用//来注释语句 ⚫ 变量需要用 var 定义可以给多个变量赋初值; ⚫ 变量的类型转换,数值型转换成字符型进行连接运算;需要用类型转换函数。 3、表达式 ⚫ 条件表达式 (条件)?A:B(chapter03/section2/logicexpression.asp) <script language="javascript"> age=20; man=(age>=18)?"adult":"minor";