网页设计ppt课件

课题目标 解释什么是HTMLHTML特点解释HTML文档结构HTML文档中各标记的使用网页页面的背景色超链接字体样式有序 无序列表图像表格 初识HTML HTML是使用SGML 标准通用标记语言 定义的 它提供了一种将文本 图象 声音 动画结合在一个称为网页的文档中的方法 HTML HypertextMarkupLanguage 超文本标记语言HTML基于两个概念 超文本 它提供了一种将同一文档不同部分或不同文档之间的信息联系起来的机制 标记语言 标记指的是HTML文档中的一些特殊的标记 这些标记 标识符 用于控制网页出版的文档格式 字符格式 段落格式等 还包括为达到网页交互效果而对脚本语言 java小程序等的支持和调用 HTML的特点 HTML是一个简单但功能强大的语言 它的简单性使得任何人都可以利用它来创建自己的网页通过超链接和URL 一个网页可以和其它网页相互连接起来 这样 使用者只要单击相应的超链接就可以访问其它网页中的相关信息利用URL HTML甚至可以通过Telnet WAIS Gopher FTP Usernet或Email链接到其它文档HTML允许在HTML文档中结合多媒体文件 如果浏览器可以播放音频或视频文件 那么使用者可以通过单击来欣赏它们可以使用任何一个文本编辑器进行编写 动态HTML DHTML 动态HTML是一种概念 是一种通过各种技术的综合发展而得以实现的概念 动态HTML包括3部分内容 HTML规范 Script语言 javaScript和VBScript 其中javaScript使用更为广泛 和CSS CascadingStyleSheets层叠样式表 HTML文档的结构 HTML文档的结构 一个HTML文档由一系列标识符组成 这些标识符均包含在尖括号中 而且成对出现 一个HTML文档总是由标识符开始 结束 当中包含两大部份头部 主体 HTML文件示例 文件源代码如下 我的第一个HTML文件文件头HTML还是很好学的我的第一个网页例2 1 HTML语言语法 每个标记都括在一对尖括号内标记都有一个开始标记和一个结束标记 有些标记不需要结束标记 如标记名不区分大小写 但是通常用大写以和普通正文区分标记可以有属性的取值如有时需要在一对标记内嵌入其它的标记对以取得所需的显示效果在HTML文档中进行注释 使用在脚本代码中使用 文档头部分使用的标识符 1 指示文档的标题 2 有两个属性 name和http equivname属性用于描述网页http equiv属性相当于http文件头 可以直接影响网页的传输例 说明生成工具关键词对主页进行描述所用文字及语言等补 网页的页面属性 背景色 背景图片 网页文字颜色 链接颜色属性值 bgcolor 背景色text 非可链接文字的颜色link 可链接文字的颜色alink 正被单击的可链接文字的颜色vlink 已经单击 访问 过的可链接文字的颜色 代表颜色 用16进制的 红 绿 蓝 来表示如link 0000ff蓝色ff0000红00ff00绿redgreenblueyellowwhiteblackgrayteal青蓝色aqua浅蓝色lime浅绿色olive橄榄色maroon栗色fuchsia紫红色purple紫色 链接 跳转到不同网页 跳转到同一网页不同位置 要使用链接的地方 在链接到的地方链接标识符有3个属性 如下 href 链接所指向的文件的地址name 引用锚点的名称target 打开链接的目标窗口 字体样式 1 标题字体 大字号 2 字号 字形 颜色Size 1 7Face 楷体 隶书 黑体 Arial等Color 16进制颜色值3 特殊字体粗体上标斜体下标下划线删除线 网页布局 1 设置标尺线 设置标尺线的粗细 单位为像素 设置宽度 单位为像素或者窗口的百分比 设置对齐方式 left right center2 行的控制换行段落强制一行文字不换行文字的分区显示 网页布局 3 对齐方式 值 left right center 4 列表无序列表有序列表 网页布局 无序列表 第一列 实心园点 第二列 空心圆圈 第三列 实心方块 网页布局 有序列表 大写字母A B小写罗马数字i ii 大写罗马数字I II小写字母a b阿拉伯数字1 2从5开始从D开始 图像 HTML文档支持的图像文件类型目前有3种 bmp文件存储空间大 传输不够快 不常用 jpg文件常用gif文件常用 具有256色显示 存储空间小 支持动画效果 背景色可透明src 图像的URLalt 在不支持图像的浏览器中显示的文字串align 图像的对齐方式width height 图像显示的宽度和高度border 图像的边框宽度 表格 基本语法 开始表格 表格标题定义表行 定义表头 可省 定义表元 表格外观 1 边框尺寸border取值设置边框 默认值是0 没有有边框2 表格尺寸设置属性值的单位为像素或者百分比3 表元间隙 表元内部空白设置各个单元格之间的间隔距离单元格边框和单元内容的间隔单位为像素 表格的标题 表格表题align属性表示表格标题与表格的水平对齐方式left 左对齐center 居中对齐right 右对齐valign属性表示表格标题与表格的纵向对齐方式top 标题在上 默认值 bottom 标题在下 表格的背景颜色和背景图像 或或或 表格边框的颜色 表格边框颜色的亮度基本语法 取值都是16进制RGB颜色数码 表格边框的显示状态 显示全部边框只显示上边框只显示下边框只显示上下边框只显示左边框只显示右边框只显示左右边框全部边框都不显示 表格中分隔线的显示 显示所有分隔线只显示行与行的分隔线只显示列与列的分隔线所有分隔线都不显示 跨多行多列的表格 定义跨多列的表格语法 或n为要跨的列数定义跨多行的表格 语法 或 控制表格内文字的布局 水平对齐leftcenterright纵向对齐topmiddlebottom表格在网页中的布局 总结 什么是HTMLHTML的特点HTML语言的结构和特点HTML语言中的各标记符网页页面的背景色超链接字体样式有序 无序列表图像表格 第二章 多窗口结构和表单 课题目标 多窗口结构表单文本框提交和重置按钮下拉选择框复选框单选按钮 多窗口结构 使用框架 frame 可以实现多窗口结构基本语法如下 和 标识框架 指出框架中显示的文件的地址和 用于不支持框架结构的浏览器 设置各窗口的尺寸 纵向排列多个窗口的基本语法 横向排列多个窗口的基本语法 赋值方式 以像素为单位如50 50 50以占浏览窗口的百分比为单位如 30 20 倍数关系如 1 1 2其中 表示取剩余值 框架各窗口之间的关系 框架结构的每一个窗口都可以有一个名字 每个窗口中的链接都可以在框架结构中的任何一个窗口中打开 这利用链接的target属性实现 特殊值 Target blank链接目标网页在新窗口中打开Target self链接目标网页在本窗口中打开Target parent链接目标网页在父窗口中打开Target top链接目标网页在整个浏览器窗口中打开 设置边框的外观 1 各窗口边框的有无 yesno或者10默认是有 yes或1 2 各窗口间空白区域大小3 边框颜色4 滚动条的有无yesnoauto 默认值 案例 表单Form 表单是一个网页上表单域的一个集合 表单可以使网页具有交互性 表单有一个表单处理程序 它是从表单收集信息的方法 一旦用户提交了表单 表单处理程序就开始运作 表单处理程序是表单上数据的脚本 它可以 存储用户在表单域中提交的数据使用用户提交的数据更新数据库将数据传递到站点上的一个Web页 Form的基本结构 Form都是以标识符开始 以标识符结束可以将多个form元素放在同一对标识符和中 不必加一个元素就放一对标识符 有4种基本的标识符 产生收集简单信息的form形式 radio check产生下拉菜单的form形式给出每个菜单选项产生用于多行文本输入的form形式 Form的基本结构 form的基本结构如下 其中 的取值有text password checkbox radio image hidden submit reset 的取值用于脚本进行相应处理时的识别名称 即表单处理程序中用的 表单元素 下拉菜单 内容1内容2 Size value multiple text selectedIndex options 表单元素 复选框 MakecoffeeSpillcoffeeOutlawsmiling StartrumorsaboutKristinTalkaboutMartwithMattLookover 表单元素 单选按钮 香蕉苹果桔子可以用checked属性设置单选按钮中默认的被选取选项 表单元素 按钮 普通按钮Submit可以直接向服务器传送信息reset可以重新设置图像化按钮align center top bottom 图像与文本的当前行的对齐方式 表单元素 文本输入 文字输入的基本语法 密码输入的基本语法 value可省设置输入框的宽度的基本语法 设置输入内容的最大输入宽度基本语法 表单元素 文本输入 Form的元素可以设置为隐藏 基本语法如下 Hereisahiddenelement 表单元素 文本输入 设置较大的文本输入区域基本语法为 rows属性值为行数 cols属性值为列数可以设置对输入文本是否进行换行 默认值是不换行 软换行 硬换行 设置移动的文字 Marquee 基本语法 设置文字移动的方向 direction属性 left right up down设置文字移动的方式 behavior属性 scroll slide alternate设置文字的循环次数 loop属性 数值 若未指定或取值为infinite则循环不止 设置移动的文字 Marquee 设置文字移动的速度 Scrollamount属性 数值 象素 设置文字的移动延时 Scrolldelay属性 单位毫秒设置移动文字的外观 bgcolor属性 16进制数表示的RGB的颜色值设置移动文字的宽度 高度height width属性 单位象素或者百分比hspace vspace属性 文字周围的空白区域 标识符用来定义Script脚本代码 所有脚本代码都要放入到和标识符中标识符用来引用外部的JavaApplet小程序 标识符用来定义样式表代码 样式表简介 什么是样式表用于描述文档如何在屏幕上显示W3C推荐的样式表标准包括CSS和XSLCSS主要用于HTMLXSL主要用于XMLCSS是一种用来装饰HTML的标记集合 是对HTML标记的一种扩展 可以进一步美化HTML页面 样式表形式 嵌入式样式表内联样式 使用style属性 级联样式 使用style标记 外部样式表 将样式表作为文件 样式表规则 用法 RuleSelector property value property value 规则选择器 声明 属性 属性值 样式表中的选择器 简单选择器 仅描述元素 而不考虑该元素在文档结构中的位置 HTML选择器 选择器是HTML标记的名称类选择器 使用HTML元素的CLASS属性ID选择器 使用HTML元素的ID属性上下文选择器 引用元素的上下文 HTML选择器示例 P font style italic font weight bold color limegreen 这些选择器使用HTML元素的名称唯一的区别是删除了尖括号 类选择器示例 water color blue danger color red 测试水测试危险无样式斜体 ID选择器示例 ID选择器 control color red 这是火焰的颜色本段没有应用样式 上下文选择器示例 上下文选择器BODY color blue background lavender font family Arial UL color red 芒果桔子苹果芒果桔子苹果 链接外部样式表 使用Link元素使用 import import css 在HTML中引用样式表 Style元素Style属性Link元素 总结 多窗口结构表单文本框提交和重置按钮下拉选择框复选框单选按钮移动文字特殊标识符 第二部分 JavaScript脚本语言 第一章 JavaScript概述 课题目标 JavaScript简介JavaScript脚本语言中的基本数据类型 表达式 算术运算符JavaScript脚本语言的基本框架结构JavaScript脚本语言的内部函数 什么是JavaScript JavaScript是一种基于对象 Object 和事件驱动 EventDriven 并具有安全性能的脚本语言 使用它的目的是与HTML超文本标记语言 Java脚本语言 Java小程序 一起实现在一个Web页面中链接多个对象 与Web客户交互作用 从而可以开发客户端的应用程序等 它是通过嵌入或调入在标准的HTML语言中实现的 JavaScrip语言特点 1 是一种脚本编写语言它采用小程序段的方式实现编程2 基于对象的语言它能运用自己已经创建的对象 许多功能可以来自于脚本环境中对象的方法与脚本的相互作用 3 简单性首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计 从而对于学习Java是一种非常好的过渡 JavaScrip语言特点 4 安全性它不允许访问本地的硬盘 不能将数据存入到服务器上 不允许对网络文档进行修改和删除 只能通过浏览器实现信息浏览或动态交互 5 动态性它可以直接对用户或客户输入做出响应 无须经过Web服务程序6 跨平台性JavaScript是依赖于浏览器本身 与操作环境无关 只要能运行浏览器的计算机 并支持JavaScript的浏览器就可正确执行 JavaScript的作用和基本语法规则 使用JavaScript的各种功能 可以增强站点的动态性和交互性 提供用户交互动态更改内容验证数据与其他任何语言一样 JavaScript也遵循一些基本的语法规则 如 区分大小写使用成对的符号使用注释 多行 哪些浏览器支持JavaScript Netscape在他的第二版浏览器中首次介绍了JavaScript 紧接着微软Microsoft也在他的浏览器IE3 0 InternetExplorerversion3 中提供了JavaScript的支持 如此这般 其它的浏览器也陆陆续续的开始支持JavaScript了 随着新版本的浏览器不断的扩展HTML JavaScript也在不断地升级以适应HTML的扩展 JavaScript作为客户端程序嵌入网页 使用Script标记使用外部文件在事件处理程序中使用JavaScript 编写第一个JavaScript程序 使用外部文件示例 祝学有所成 document write 嗨 你好吗 test js 在事件处理程序中使用JavaScript示例 JavaScript示例 JavaScript语言说明 1 脚本代码2 注释部分 脚本代码中的注释3 脚本代码放置的位置之间之间4 脚本语言JavaScript对变量名区分大小写Numbernumber是两个变量 使用Alert Confirm Write方法 使用窗口的Alert方法 可以生成一个对话框使用窗口的Confirm方法 可以生成一个确认对话框使用document的Write方法可以创建页面内容 变量 变量是一种引用内存位置的容器 用于保存在执行脚本时可以更改的值变量的命令约定变量名必须以字母或下划线 开头变量名可以包含数字由于JavaScript区分大小写 所以可用的字母包括A到Z 大写 和a到z 小写 的字符 声明变量 varnew amount varanswer null varold cost 12 50 varresult Unknownresult vara b c result true 变量的作用域 数据类型 在JavaScript中有四种基本的数据类型基本类型属于弱类型 运算符 算术运算符比较运算符逻辑运算符字符串运算符求值运算符 算术运算符 比较运算符 逻辑运算符 字符串运算符 x yellow y green z x y white 则z为yellowgreenwhitew y 9 则w为green9 求值运算符 通常这些运算符包括 条件运算符 condition trueVal falseValtypeof运算符typeof运算符返回字符串 该字符串代表操作数的类型 varx 5 document write typeof x status age 18 adult minor 表达式 表达式用于在不同上下文中操作和计算变量 表达式是任意一组有效的文字 变量和运算符 其计算结果为一个值 表达式类型算术 计算结果为一个数字逻辑 计算结果为一个布尔值字符串 计算结果为一个字符串表达式通过运算符组合变量和文字 数组 数组用于存储具有相同数据类型的一组值 使用下标 索引 来区分各个值 在JavaScript中 数组的下标以零开始 JavaScript没有明确的数组数据类型 但却有内置的数组对象 要在程序中使用数组 必须使用数组对象及其相关联的方法 创建数组 语法 arrayObjectName newArray element0 element1 elementN 初始化1 将指定的值作为其元素2 使用arrayName newArray N 对象名 元素值列表 数组赋值 在创建数组时将元素的值直接赋给数组 对数组的元素赋值 访问数组元素 指定元素名指定元素的索引号 emp RyanDias emp 0 数组对象的元素和方法 length属性sort方法join方法reverse方法 多维数组 条件语句 if else语句switch语句 if condition statements else statements2 switch expression casevalue1 statements break casevalue2 statements break default statements 循环语句 fordo whilewhilebreakcontinue 函数 预定义函数eval函数isNaN函数用户自定义函数创建用户定义的函数调用函数return语句 functionfuncName argument1 argument2 etc statements 对象 对象中包含定义对象自身的属性 变量 及用于处理数据的方法 函数 要访问对象属性 必须指定对象名及属性 objectName propertyName要访问对象方法 必须指定对象名及需要的方法 objectName method 使用对象 创建网页时 可以插入 浏览器对象内置脚本语言对象 根据使用的脚本语言的不同而不同 HTML元素也可以创建自已的对象 并在程序中使用 对象操作语句 JavaScript是一种基于对象 Object Based 的语言 而不是面对对象 object oriented 的语言 JavaScript中的对象操作语句 this语句for in语句with语句new语句 this语句 this语句的值指示当前对象 并且可以拥有标准属性 如名称 长度以及相应的值 只能用在函数作用域或其调用引用内 用法 this 属性名 functiondispname name alert 欢迎进入JavaScript世界 name 输入您的名字 for in语句 for in语句用于在对象的各个属性 或数组的各个元素之间循环用法 for variableinobject statements color newArray 红色 蓝色 绿色 for varpropincolor varrecord color record prop color prop document write record new语句 new操作符用于新建对象类型实例 用法objectName newobjectType param1 param2 paramN functionemployee name code designation this name namethis code codethis designation designation newemp newemployee JohnDias A001 职员 document write 雇员姓名 newemp name document write 雇员代号 newemp code document write 头衔 newemp designation with语句 with语句用于执行一组语句 所有这些语句都假定引用指定的对象 用法with object statements vara b c varr 10 with Math a PI r r b r cos PI c r sin PI 2 document write a document write b document write c 字符串对象 字符串对象用于操纵和处理文本字符串 用法stringName propertyNamestringName methodName创建字符串的方法使用var语句 并对为其赋值 可选 使用赋值运算符 及变量名使用string 构造函数 字符串对象的属性和方法 属性length方法BigindexOf ch start Blinksubstring start end BoldtoLowerCase FontcolortoUpperCase Italicssubstr start length SmalllastIndexOf string start 字符串对象示例 varbstr 大号 varsstr 小号 varblstr 粗体 varblkstr 闪烁 varucase 大写 varlcase 小写 document write 这是 bstr big 文本 document write 这是 sstr small 文本 document write 这是 blstr bold 文本 document write 这是 blkstr blink 文本 document write 这是 ucase toUpperCase 文本 document write 这是 lcase toLowerCase 文本 math对象 Math对象拥有可用于表示复杂数学运算的属性和方法属性PILN10E方法abs number sin number cos number math对象示例 functiondoCalc x vara a Math PI x x alert 半径为 x 的圆的面积为 a 输入圆的半径 Date对象 Date是内置对象 包含日期和时间信息 Date对象无属性 但有许多方法可以用来设置 获取和操作日期用法 DateObject newDate parameters Date对象方法 set方法组get方法组to方法组parse和UTC方法组getYear 返回年getMonth 返回月0 11getDate 返回日getDay 返回星期数0日 6六getHours 返回小时0 23getMintes 返回分钟0 59getSecdonds 返回秒数getTime 返回毫秒数 Date对象示例 2003年的圣诞节是星期 dayname thedate getDay thedate setYear 2004 document write 2004年的圣诞节是星期 dayname thedate getDay 事件对象概念 事件可以由用户生成 也可以由系统生成每个事件都有与之相关联的Event对象Event对象提供下列信息 事件类型事件发生时光标的位置Event对象可以用作事件处理程序的一部分 事件的生命周期 事件的生命周期通常包含下列阶段 与发生的事件相关联的用户操作或条件立即更新Event对象以反映事件的状态触发事件调用相关联的事件处理程序事件处理程序执行其操作并返回 JavaScript事件 onClickonChangeonFocusonBluronMouseOveronMouseOutonLoadonSubmitonMouseDownonMouseUp onClick事件示例 请输入表达式 结果 onChange事件示例 functioncheckNum num if num alert 请输入一个数字值 returnfalse if isNaN num alert 请输入一个数字值 returnfalse elsealert 谢谢 请输入一个数字 onFocus onBlur事件示例 onMouseOver onMouseOut事件示例 varnum 0 functionshowLink num if num 1 document forms 0 elements 0 value 您选择了Aptech if num 2 document forms 0 elements 0 value 您选择了Asset if num 3 document forms 0 elements 0 value 您选择了Arena AptechAssetArena onLoad事件示例 您好functionhello alert 您好 onMouseDown onMouseUp事件示例 onResize事件示例 window onresize notify functionnotify alert 窗口大小调整完毕 请调整窗口的大小 处理事件 为响应事件而执行的JavaSc