全套课件·《网页设计》1

1、网页设计与制作应用篇 网页设计与制作 HTML入门 JavaScript语言初识Dreamweaver 8页面布局设计Dreamweaver 应用基础Dreamweaver 高级应用Flash8 应用Microsoft .NET基础篇序 课程安排 教学方式 教学目标 参考资料网页设计与制作课程安排总学时：24（上课）+ 24（实践）= 48考核方式：综合实验作品（50%） 实验报告（50%）参考教材：网页设计（中国水利水电出版社）序号教学内容课堂学时实践学时实践内容课外实践学时1课程介绍、网页设计基础2 习题一2 2HTML基础2 2习题二23JavaScript语言44 习题三24初识Dre

2、amweaver 82 2 习题四25页面布局设计2 2 习题五26Dreamweaver 应用基础2 2 习题六27Dreamweaver高级应用2 2 习题七28Flash 8.0的应用4 6 习题八69Microsoft.NET *44 习题九4总计242424参 考 学 时 课堂讲授 实验室边讲边练 提倡协作学习教学方式建议：多上机实践 掌握网页设计方法 了解HTML与脚本语言 利用“网页制作三剑客”制作网页成果：个人网站设计方案和作品教学目标Dreamweaver 网页制作 科教工作室编著，清华大学出版社；Dreamweaver 8+ASP动态网站开发从基础到实践，戴一波编著，电子工

3、业出版社； 网上资源参考资料基础知识网页设计与制作网页设计与制作作业网站建设基础基础篇基础知识 概 述 网络协议 IP地址与域名管理系统 网站浏览原理网页制作全球信息网: WWW (World Wide Web，即Web ) 基于Internet的信息服务系统，向用户提供一个以超 文本技术为基础的多媒体的全图形浏览界面；所有 WWW的页面都是用HTML编写的文件。超文本标记语言: HTML Hyper Text Markup Language 其格式为ASCII码, 即纯文本文件, 是WWW用于建立 与识别超文本文档的标准语言。基础知识 概 述网页(Webpage)：在浏览器上看到的画面叫网页

4、主页(Homepage)：进入网站后所看到的第一个页面 ( index.htm )网站(Site)：是一组相关网页的集合基础知识网页文件：就是指HTML文件，网页上的所有数据全部由HTML文件控制。超链接（Hyperlink)：是WWW上的一种链接技巧，通过单击某个图标或某段文字，就可以自动连接相对应的其他文件，从一个网页跳转到另一个网页。基础知识应用层表示层会话层OSI 参考模型（7层协议）传输层网络层数据链路层物理层TCP/IP参考模型应用层传输层网络互联层网络接口层基础知识 网络协议110000001010100000000001011100111532位 IP地址的表示 IP地址的作用

5、 域名与主机名 IP地址的组成基础知识 IP地址与域名网页Homepage主页HTTP协议浏览器用HTML编写用开发工具编写如DreamweaverData基础知识 网站浏览原理网页设计与制作 网站设计原则 Web 页面设计 网页制作方法 网页设计与制作流程网页制作 主题定位制作网站首先要考虑网站的主题。好的网站不仅应该有美感、个性、创意，更要有质量。网站的内容是最重要的基本因素，空洞的网站对人没有任何吸引力。基础知识 网站设计原则 题材选择主题要小而精；题材最好是自己擅长或者喜爱的内容，题材不要太滥或者目标太高；网站名称要正气、易记、要有特色。 （体现自己的个性）网站的题材主要有：新闻、体育

6、、聊天、即时信息、 ICQ、社区、邮件列表、计算机技术、网页/网站开发、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些体现个人特色和爱好等的网站。网站的名称很重要，它在很大程度上也决定了整个网站的定位。网站的名称要有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格。例：闪客帝国、清风文苑、红果园等。 所谓CI (Corporate Identity) ，是借用的广告 术语，意思是通过视觉来统一企业的形象 。 主要包括 Logo设计、网站的色彩搭配、网站的标准字体、网站的整体风格和创意等。 定位网站CI形象网站的标志（Logo） Logo广义上是站点特色和内涵的集中体现，

7、是网站的标志，如同商标一样；是站点特色和内涵的集中体现，是网站文化的浓缩，看见logo就让大家联想起你的网站。 Logo狭义上是指用于链接本网站的图标标识，即88*31像素的小图标banner。 标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。定位你的网站CI形象 - Logo有代表性的人物、动物、花草作为设计蓝本，加以卡通化和艺术化。 例如：迪斯尼的米老鼠、搜狐的卡通狐狸等。如果网站的内容具有较强的专业性，可以本专业有代表的物品作为标志。 例如：中国银行的铜板标志、奔驰汽车的方向盘标 志、校徽等。几种设计Logo的方法标准颜色：蓝/绿色、黄/橙色、黑/灰/白等其他颜色注意

8、：背景颜色和前文的对比一定要大，为了突 出主要文字，背景绝对不能选择花纹繁杂 的图案；色彩要控制在三种颜色以内。网站的色彩搭配网站的标准字体网页默认的字体：中文为“宋体” 9磅字 英文为“Times New Roman”网站的整体风格和创意网站风格： 建立在有价值的内容的基础之上 必须保证内容的质量和价值 明确自己网站想留给人什么样的印象创意思考的过程： 准备期/孵化期/启示期/验证期/形成期 明确制作网页的目的 确定网页的内容和风格 （有价值、高质量和有创意） Web页面设计基础知识 网页类型 网页制作方法 网页制作方法基础知识基于客户端： 静态网页（htm） 动态页面（DHTML、 Jav

9、aScript ）网页的类型基于服务器端： 动态页面（ASP、PHP、JSP等） Deamweaver是网页编辑软件 Fireworks是图形/图像处理软件 Flash是矢量动画编辑软件编程基础何谓动态网页？ 动态网页，重点在“态”，即状态上。同一个网页文件在这一状态显示这个内容，而在另一状态则显示完全不同的内容了，即随着请求的不同，产生不同的网页。 （实现网页的动态更新与发布） 动态网页技术的出现使得网页从单纯的展示平台变成了网络交互平台，如用户的注册和登录、在线留言、论坛、网上调查等 。？ 直接编写HTML源代码 利用制作工具 利用任何文本编辑软件 保存为纯文本文件即可 （htm 或 ht

10、ml ） 通过编辑窗口编辑网页(不需要html 源代码) 如: FrontPage、Dreamweaver JavaScript、Java、ASP、CGI、PHP、JSP Fireworks 、Flash网页制作方法 草案 粗略布局 定案 确定网页的功能模块 设计网页的版面 处理技术上的细节网页设计网页版面布局首页制作 页面属性 页面设计（表格、框架） 填写内容 添加链接和交互 版权信息等其他页面设计 和首页保持相同的风格 要有返回首页的链接 目录结构不要超过四层 什么是网络三剑客？ Dreamweaver Fireworks Flash 是Macromedia公司网页设计“三剑客”之“火焰”

11、，它以处理网页图片为特长，并可以轻松创作GIF动画。 是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。 是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。 Macromedia与Adobe 需求分析 页面设计（风格、标志） 素材整理（脚本编写） 制作素材（动画、图片等） 制作网页 构建网站（上传文件并发布） 网页设计与制作流程网站建设基础 创建站点 发布站点 Windows XP下的IIS设置网页制作创建本地工作文件夹创建站点与本地文件夹关联网站建设基础 创建站点“站点/管理

12、站点/新建/站点”命令根据提示按“下一步”按钮 直到完成 申请主页空间 发布网页 设置服务器 上传文件 浏览网站网站建设基础 发布站点 在服务器上申请空间： 登录网站 注册登记 上传网页设置个人服务器： PWS（Personal Web Server）即个人网页服务器 IIS的安装 设置Internet 信息服务IIS 创建虚拟目录 设置虚拟目录属性 访问浏览 Windows XP 下的IIS设置网站建设基础教学实践： 学习安装网页制作三剑客软件 利用Dreamweaver创建站点 熟悉Dreamweaver基本操作 习题一作 业46HTML入门HTML入门HTML文件结构页面属性标记常用页面

13、元素标记常用页面布局标记基础篇表单和滚动字幕标记作业472.1 HTML入门 HTML概述 HTML的作用 HTML的编辑环境 HTML文件的组成48超文本：是指它所编写的对象不仅包含普通的文字字符元素，还有声音、图形甚至多媒体等其他“超越”普通文字字符的对象元素。 HTML：用于网页制作的排版语言，是Web最基本的构成元素。利用一些指令符号，来标记表示出各种文件效果。由浏览器来解读HTML的指令符号，将文件格式效果展现出来。纯文本文件。图形、声音等文件必须用其他软件制作，再用HTML的标记编排在网页的原始文件里。 HTML概述HTML入门49 格式化文本 建立超链接 创建列表 插入图像 建立

14、表格 插入多媒体 建立交互式表单 HTML的作用HTML入门50 Dreamweaver Frontpage Editplus 记事本 HTML的编辑环境HTML入门51 HTML文件的组成 标记 单一标记：只要一个标记就能完成所需表示的功能 如、 成对标记：需要两个标记组合才能完成所需功能 如和、和 文字与图像 统一资源定位器URL HTML入门522.2 HTML文件结构 标记及属性 HTML文件结构 53文件结构 标记及属性标记：为了使所要显示的内容达到一定的效果，在内容中加入的特定标识。 每个标记都用“”（大于号）围住。注意：“”与标记之间不能留有空格或其他非标记字符 在标记前加 “/

15、”是结束标记标记字母不区分大小写 对同一段要标记的内容，可以使用多个标记来共同作用，各 个标记间的顺序是任意的。 受标记影响的内容 54属性：标记通过属性来精确控制信息，以便制作出各种效果。并不是每个标记都有属性。可以根据需要使用标记的所有属性或几个属性，属性之间没有顺序。 属性和标记一样，也不区分大小写。 内容文件结构55 HTML文件结构以开头，以结尾。 包括头部（Head）和主体（Body）两大部分。 ：网页的题头，说明文件命名与文件本身的相关信息。 ：网页标题，在浏览器的标题栏显示。 ：网页的正文。 网页的标题 网页的内容 文件结构562.3 页面属性标记 meta标记 页面属性标记5

16、7页面属性标记 meta 标记主要属性有： HTTP-EQUIV：类似于HTTP的头部协议，回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用类型有：expires（期限）：设定网页的过期时间Pragma（cache模式）：禁止浏览器从本地机的缓存中调阅页面Refresh（刷新）：将网页定时自动链接到其它网页上 Content-Type（字符集设定）58NAME ：描述网页信息的，便于搜索引擎查找和分类。常用类型有：Keywords（关键字）：设定页面的关键字 description（简介）：告诉搜索引擎网页的主要内容 robots（机器人向导）：告诉搜索引擎哪些页面需要索 引，

17、哪些页面不需要索引。 author（作者）：标注网页的作者 页面属性标记59 页面属性标记主要属性有： bgcolor：设置页面背景色background：设置网页的背景图像text：设置网页中文字的颜色link：设置还没有被访问的超文本链接的颜色vlink：设置已经被访问过的超文本链接的颜色alink：设置超文本链接正在被访问时候的颜色页面内容页面属性标记602.4 常用页面元素标记 段落标记 文字标记 超链接标记 列表标记 图像和多媒体标记61页面元素标记 段落标记 Hn： 表示标题文字的大小， n从1到6， H1最大，H6最小。 align：标题文字的水平对齐方式，取值有：Left：左对

18、齐Center：居中对齐Right：右对齐 标题 标题文字标记62 align：标题文字的水平对齐方式，取值有：Left：左对齐Center：居中对齐Right：右对齐 本行文字下一行文字强制换行标记上一段落文字下一段落文字 段落文字 强制换段标记63 align：分区的水平对齐方式，取值有：Left：左对齐Center：居中对齐Right：右对齐 已经排好格式的段落文字显示预排格式标记多个段落文字或图像 分区显示标记64 align：设定对齐方式，可以为left、center或right size：设定水平线粗细，以像素为单位 width：设定水平线长度绝对长度：像素数相对长度：水平线占浏览

19、器窗口宽度的百分比 noshade：取消线条的阴影显示 color：设定线条颜色。可以用英文单词或以“”引导的一个十六进制代码。常用的颜色代码如下： 水平线标记65常用颜色代码表颜色名颜色英文名16进制代码颜色名颜色英文名16进制代码黑色Black#000000粉红色Pink#FFC0CB蓝色Blue#0000FF红色Red#FF0000棕色Brown#A52A2A白色White#FFFFFF青色Cyan#00FFFF黄色Yellow#FFFF00灰色Grey#808080深红色Crimson#CD061F绿色Green#008000黄绿色Greenyellow#00FFFF乳白色Ivory#

20、FFFFF0水蓝色Dodgerblue#0B6EFF桔黄色orange#FFA500淡紫色lavender#DBDBF866 文字标记 size：文字的大小，取值范围为17，1最小，7最大。 face：文字的字体 color：文字的颜色 文字 字体字号标记页面元素标记67字型标记格式标记字体效果受影响的文字加粗受影响的文字斜体受影响的文字带下划线受影响的文字标准打印机字体受影响的文字带删除线受影响的文字下标受影响的文字上标受影响的文字大字体文字受影响的文字小字体文字68 设定整个网页的文本的缺省颜色标记的text属性:文字文字颜色标记 标记的color属性 : 文字 将网页中不同的文字段设置为

21、不同的颜色标记的优先级比标记要高 69特殊标记特殊字符标记表示的字符空格&%"“70 超链接标记从根目录开始描述目录或文件UNIX以“/”开始，Windows以“c:”开始。标识Internet上文件的全部信息，包含协议、主机名、文件夹名和文件名称。 绝对路径以当前目录为参考来说明文件的位置 相对路径绝对路径清楚明确的指出文件和文件夹的位置 相对路径则根据当前目录不同，可能同样的文件名指向不同的文件。页面元素标记71href：目标资源的具体地址。可以是绝对路径，也可以是相对路径。 name：设定一个较长的HTML文档的跳转位置点，相当于书签。 target：控制超链接内容打开方式，即链

22、接内容出现的位置。 titile：超链接中的链接说明。注意：name属性和href属性不能同时使用。 热点 锚点标记72链接到同一目录内的网页文件： 热点链接到下一级目录中的网页文件： 热点链接到上一级目录中的网页文件： 热点链接到同级目录中的网页文件： 热点创建指向其他页面的链接73建立超级链接的标记：热点文本建立锚点的标记：跳转目标文本创建指向本页的链接热点文本创建指向其他页面某处的链接 热点 创建指向下载文件的链接 热点 创建指向电子邮件的链接74 列表标记 LI：项目标记，单标记。 Type属性：项目符号的样式，取值有：Disc：实心圆点Circle：空心圆点Square：实心方块的t

23、ype属性比的type属性的优先级高 项目1 项目2无序列表标记页面元素标记75lh：分类标题，标题前没有项目符号。 标记不会自动换行 分类标题1 分类1之项目1 分类1之项目2 分类标题2 分类2之项目1 分类2之项目2 选单列表标记76 项目1 项目2 有序列表标记Type的属性值含 义1序号为阿拉伯数字，1、2、3。a序号为小写英文字母，a、b、c。A序号为大写英文字母，A、B、C。i序号为小写罗马字母，、。I序号为大写罗马字母，、。77不同可以互相嵌套，相互组合以达到很好的显示效果。 上层项目说明 下层项目说明下层项目说明 说明式列表标记78 图像和多媒体标记 src：插入的图像的ur

24、l地址，即含路径的图像文件名 alt：表示图像的信息文字。当没有完全装载图像时，在图像的位置显示的信息。当图片完全显示时，将鼠标移动到图像上，看到的信息文字 width：设定图像的宽度 height：设定图像的高度 图像标记页面元素标记79 border：设定图像的边框 hspace：图像左右边缘空白，在图文混排时候使用 vspace：设定图像上下边缘空白大小 align：图像的对齐方式。取值有：Top：上对齐Middle：中间对齐Bottom：下对齐Left：左对齐Right：右对齐80src：要播放的声音文件 loop：声音文件的播放次数。Infinite表示循环播放auotstart：是

25、否自动播放True：是False：否 标记 ：加入背景音乐 多媒体标记注意：只支持IE浏览器 81 src：要播放的媒体文件 controls：设定播放媒体文件的控制面板的类型 Console：一般正常的面板Smallconsole：较小的面板Playbutton：只显示播放按钮Pausebutton：只显示暂停按钮Stopbutton：只显示停止按钮Volumelever：只显示音量调整钮 标记：插入多媒体文件 82 height：设定播放区域的高度 width：设定播放区域的宽度 hidden：是否隐藏控制画面。取值有true或false loop：设定播放次数。取值有true、false

26、或播放次数 autostart：设定是否自动播放。取值有true或false例插入背景音乐： 插入多媒体链接： 链接入口 832.5 常用页面布局标记 表格标记 框架标记84页面布局标记 表格标记 align：表格相对于页面的位置，取值有：Left/Center/right：页面的左侧/中间/右侧表格标题 分类名称1分类名称2分类名称n表项1表项2表项n表项1表项2表项n(表格)标记的属性85 border：表格边框的宽度。 width：表格的宽度，可以是像素的值，也可以是相对于页面大小的百分比。 height：设定表格的高度。 cellspacing：表项和表项之间的间隔。 cellpadd

27、ing：表项边框和表项内部文字之间的间隔。 frame：表格边框的属性。frame属性值含 义 void没有边框above只有上边框below只有下边框hsides只有水平边框，没有左右边框vsides只有垂直边框，没有上下边框lhs 只有左边框rhs只有右边框86 rules：设定表格内部线的属性。取值如下:rules属性值含 义none没有内部线rows只有内部行线（水平线）cols只有内部列线（垂直线）groups只有不同分组之间有分界线all所有表项周边都有边线 dir：表示表项的排列方向，缺省的为从左到右排列 bgcolor：设定表格的背景颜色 (标题)标记的属性align：标题和表

28、格的对齐方式，取值为left、center或right。 valign：标题在表格的上方或者下方，取值为：top或bottom。87 bgcolor：单元格的背景颜色 rowspan：设定跨行的表项，表示从当前行开始合并的行数。 colspan：设定跨列的表项，表示从当前列开始合并的列数。 align：文字左、中、右对齐或者左右均匀调整，对应的值为： left、center、right或者justify。 valign：文字垂直上、中、下对齐或者按基准线对齐，对应的值为：top、bottom、middle或者baseline。：表格的一行：分类名称，值会用黑体显示：具体的表项值 单元格标记的属

29、性88页面布局标记 框架标记框架可以将一个浏览器窗口分割成数个不同的小窗口，每个小窗口能够显示不同的HTML文件； 不同的框架之间可以互相关联，可以通过在一个框架中的操作影响到其它框架的内容；使用和标记，建立一个主调用HTML文件，用来声明框架的定义，以及如何进行框架的划分； 标记用来划分框架，并定义框架组的属性 ；标记用来给各个框架指定页面内容，将框架与在框架中显示的HTML文件联系起来。 89 Row：横向分隔的框架数目，用逗号分隔，取值可以是像素、百分比或”*”。“*”表示将剩余的窗口平均分配。 Col：纵向分隔的框架数目 Border：整个框架组各个边框的宽度 Bordercolor：

30、整个框架组各个边框的颜色 Frameborder：设定有/无边框 Framespacing：设定各窗口间的空白的属性 90src：表示该框架对应的文件名 name：指定框架名 marginwidth：设置框架内容与左右边框的空白 marginheight：设置框架内容与上下边框的空白 scrolling：设置是否加入滚动条或根据内容自动加入滚动条 noresize：不允许改变各窗口大小的属性注意：标记的个数应该等于标记中定义的框架数如果标记的个数小于 框架中定义的框架数量，则多余框架为空。按照先行后列的顺序对框架进行初始化。框架可以嵌套。91热点文字 框架间的链接target属性值含 义框架名

31、链接的目标文件将被载入到指定的框架中_blank链接的目标文件将被载入到一个新的浏览器窗口_self链接的目标文件将被载入到当前的框架窗口，替换当前正在显示的文件。_top目标文件将被载入到当前的整个浏览器窗口。_parent当框架嵌套时，目标文件将被载入到父框架中，否则被载入到整个浏览器窗口。922.6 表单和滚动字幕标记 表单标记 滚动字幕标记93表单和滚动字幕标记 表单标记 表单是Web页面和用户进行信息交互的途径 ：标记表单的开始和结束：设定表单以何种形式和用户交互 94 action：表单处理的方式通过E-MAIL将信息发出 将信息输入到数据库 将信息发布到新闻组或者页面 根据输入内

32、容搜索数据库并返回结果给访问者 method：表单数据的传送方向 Get：当按下提交按钮，form输入框内容附在action指明的URL的“?”之后立即传给服务器，get执行效率比较高，但传送的信息量有限，大约2k。 Post：当按下提交按钮后，需要等待服务器来读取参数信息，在传送信息量上没有限制。 的属性95type：指定项目的类型，取值为text，password，radio，checkbox，image，submit，reset，hidden和file等。 name：项目的控制名称。 size：如果type是password或者text，则size指初始字节长度，其他的指控制组件的初始大

33、小（像素值）。 maxlength：用户可以输入的最大字符数，对type为text或者password有效。 src：当type为image时，指明图像文件的具体位置。 checked：当type为radio或者checkbox时，表明初始选中该项目。的属性96文本框的type属性为text，输入的文本正常显示。密码框的type属性为password，输入的文本以”*”或者其他字符显示。单行文本和密码框name：项目的控制名cols：不用滚动条就可以看到的行数 rows：不用滚动条就可以看到的列数，即每行的字符数。多行文本框97value：单选按钮控制值，告诉处理程序用户的选择结果。 chec

34、ked：表示默认选中。 单选钮 选项1选项2选项n注意：选项互斥，每次只能有一个被选中。同一组单选钮的控制名一样，但控制值不同。 98value：选中时的控制值。当没有选中时，控制值为空。 checked：表示默认选中 复选框 选择栏 选项1 选项2 99的属性size：选择栏中一次可以显示的项目数size=1：下拉式选择栏，项目不可多选。size1：列表框式选择栏，用multiple属性设定是否允许多选。 checked：表示默认选中 multiple：表示选择栏是否可以允许多选 的属性：value：表示这个项目的值，传递给处理程序用。 selected：表示这个项目默认被选中。 隐藏控件

35、100表单和滚动字幕标记 滚动字幕标记滚动字幕 101height：字幕的高度，用像素或可视页面的百分比表示。width：字幕的宽度，用像素或可视页面的百分比表示。direction：字幕滚动的方向。 bgcolor：字幕的背景颜色。 hspace：字幕左右的空白空间, 用像素表示。 vspace：字幕上下的空白空间, 用像素表示。 scrollamount：每个连续滚动字幕的间隔, 用像素表示。scrolldelay：两次滚动之间的间隔时间, 用毫秒表示。loop：字幕的滚动次数。当值为“INFINITE” 是“-1”时，字幕无限制地滚动。 ONMOUSEOUT=this.start()：鼠

36、标移出该区域时继续滚动。 ONMOUSEOVER=this.stop()：鼠标移入该区域时停止滚动。 align：设定字幕的对齐方式 behavior：设定浏览器处理字幕的方法 Scroll：文本单项滚动Slide：文本到达边界停止：Alternate：滚动文本到达边界后反向滚动 102注意：标记只适用于IE3以上版本的浏览器表示虽是一个滚动字幕标记，但允许在其中加入图象。例如： 103教学实践： 初步掌握HTML应用 熟悉各种标记的基本操作 利用HTML制作简单网页 习题二作 业104JavaScript概述 基本数据结构 程序构成 基于对象的JavaScript 浏览器对象系统 基础篇Ja

37、vaScript语言作业1053.1 JavaScript概述 JavaScript的特点 JavaScript的运行环境 JavaScript的引入 JavaScript注释106由Netscape公司开发并推出 一种基于客户端浏览器的语言脚本编写语言 基于对象的语言简单性 安全性 动态性 跨平台性 节省交互时间 JavaScipt的特点主要特点有：概 述107Navigator2.0以上版本的浏览器Internet Explorer 3.0以上版本的浏览器 JavaScript的运行环境概 述108分布于标记和标记之中用和标识括起来 JavaScript的引入把JavaScript程序保存

38、在一个以.js为扩展名的文件中，如function.js 用标记进行说明 SRC属性值可以是被嵌入文件的绝对路径，也可是相对路径。 实现功能的函数保存到一个单独的文件中然后使用标记的SRC属性，将该文件嵌入到页面中概 述109插入注释语句以增加程序的可读性概 述单行注释 / 单行注释多行注释 /* 多行注释 多行注释 */ JavaScript 注释1103.2 基本数据结构 基本数据类型 常量 变量 表达式和运算符111 基本数据类型string类型：用单引号“”或双引号“”来说明的。number类型：支持整数和浮点数整数可以为正整数、0或负整数； 浮点数可以包含小数点或一个“e”或二者都包

39、括。 Boolean类型：true或falseObject对象类型null值：没有任何值，什么都不表示。undefined值：变量被创建后，但未给变量赋值以前的值。数据类型112 常 量整型常量：可以使用十六进制、八进制和十进制表示。 如可以用42，052（八进制）和0 x2A（十六进制）表示42。 实型常量：由整数部分和小数部分，或使用科学或标准方法表示。 布尔型常量：只有两种状态true或false，用来说明或代表一种状态或标志。 字符型常量：使用单引号或双引号括起来的一个或几个字符。空值：表示什么也没有。特殊字符：以反斜杠（）开头的不可显示的特殊字符，通常称为控制字符。数据类型113a：

40、警报符，发出一声蜂鸣声；b：退格符，光标回移一个字符；f：进纸符，在打印机上指明新的一页；n：换行符，在文本中指明新的一行；r：回车符，把光标移至新的段落；t：水平制表符，把光标移至下一个制表符的位置；转义字符：实现在字符串中使用引号和反斜杠。例如：document.write(“Jane said: “How are you!” ”); document.write(“the directory is c:tempaaa”);常见的特殊字符如下：114 变 量变量名称的长度是任意的，但要区分大、小写； 第一个字符必须是字母、下划线“_”或“$”符号； 后续字符可以是字母、数字、下划线和“$”

41、符号； 不能使用JavaScript关键字做变量名； 在对变量命名时，最好把名称与变量的意义对应起来。变量的命名变量的声明var 变量名称=初始值 数据类型115JavaScript是宽松型类型检查语言，不必声明每一个变量的类型； 使用时根据变量中保存的数据类型来确定变量的类型。变量的类型变量的作用域按作用范围不同，变量可分为：全局变量：定义在所有函数体之外，作用范围是整个函数。局部变量：定义在函数体中，只对该函数可见，对其他函数是不可见的。一个函数中用关键字var声明的变量是函数的局部变量。函数外声明的变量，或在函数内部不用关键字var声明的变量是全局变量。 116 表达式和运算符单目运算符

42、：只需一个操作数，运算符可前可后。 例如：i+、-i 双目运算符：由两个操作数和一个运算符组成。格式为：操作数1 运算符 操作数2。 例如：2+1，This+is 三目运算符：操作数?结果1:结果2。例如：status=(temp)?confirm:true:confirm:false;运算符格式 数据类型117算术运算符：+、-、*、/、%（取模）、|（按位或）、&(按位与)、（右移）、（右移，零填充）、-（取反）、（取补）、+（递加1）和-（递减1）。字符串运算符： +（合并运算符） 比较运算符：、=、=（等于）、!=（不等于）。 布尔运算符：!（取反）、&=（与之后赋值）、 &（逻辑与）

43、、 |=（或之后赋值）、|（逻辑或）、=（异或之后赋值）、（逻辑异或）、&（与）、|（或）、=（等于）、|=（不等于）。位逻辑运算符：&（位与）、|（位或）、（位异或）、-（位取反）和（位取补）。位移动运算符：（右移）和（右移，左边补零）运算符类型 118优先级由高到低排列为： 算术运算符：+、-、*、/、%、+、- 字符串运算符：+ 位移动运算符：、 位逻辑运算符：&、|、-、 比较运算符：、=、=、!= 布尔运算符：!、&、|运算符的优先级 1193.3 程序结构 程序控制流程 函数 事件驱动及事件处理120程序结构 程序流程控制条件为true，则执行语句段1，否则执行语句段2。如果语句段

44、有多行，则必须使用“”和“”将其括起来。 if（条件） 语句段；else 语句段 ifelse语句 121条件语句比较复杂，而且条件有互相嵌套的关系。 每一级的布尔表述式都会被计算，若为真，则执行相应的语句，否则执行else后的语句。 if（布尔值）语句；else if（布尔值）语句；else if（布尔值）语句；else 语句； 嵌套的ifelse语句 122根据变量的不同取值，采取不同的处理方法。 条件的取值与程序中提供的任何一条语句都不匹配，将执行default中的语句。 在每个语句段后应加一个break语句，保证程序按规定的流程执行。switch（条件） case label1:语句段

45、1; case label2:语句段2; default:语句段3;switch语句 123初始化参数指定循环的开始位置，即赋予循环控制变量初始值。 条件用于判别循环停止的条件，若条件满足，则执行循环体，否则跳出。 增量定义了循环控制变量在每次循环时按什么方式变化。 三个语句之间必须使用分号分隔。 for（初始化；条件；增量） 语句集； For循环语句 124当条件为真时，重复循环，否则退出循环。while（条件） 语句集； while语句 break语句 用于循环中，能实现立即从循环中跳出来，并继续执行循环后的第一条语句。 continue语句 跳过循环的其余部分，继续执行下一次循环。 12

46、5函数名是自己定义的名字，对大小写敏感，体现出函数的功能。 参数表是传递给函数使用或操作的值，可以是常量、变量或其它表达式。 注意：空的参数列表( )定义一个不需要任何参数的函数 function 函数名(参数1，参数2，) 语句段； return 表达式； 函数的声明 函 数程序结构126函数可以有返回值，return语句将函数值返回给调用该函数的语句。但不是所有函数都有返回值。 函数可以放在HTML文档的任意位置，但最合适的地方是标记中。 函数的调用 函数调用：引用函数名并将参数传递给它值 函数调用必须放在文档的正文部分，以显示执行结果。有返回值的函数，调用方法有两种：将返回值存储在一个变

47、量中直接使用返回值127事件：鼠标或热键的动作事件驱动：由鼠标或热键引发的一连串程序的动作事件处理程序：对事件进行处理的程序或函数事件驱动 事件驱动及事件处理 单击事件onClick 改变事件onChange 选中事件onSelect 获得焦点事件onFocus 失去焦点onBlur 载入文件onLoad 卸载文件onUnload 鼠标悬停事件onMouseover 程序结构128自己编写的函数 JavaScript内部的函数 直接使用JavaScript的代码 事件处理程序新闻动态 function doit() window.status=欢迎访问本站; return true; 新闻动态

48、1293.4 基于对象的JavaScript 对象的基础知识 常用内部对象 定义对象和方法130对 象 对象的基础知识对象：变量的集合体，提供了对数据的一致的组织手段，描述了一类事务的共同属性。 JavaScript中对象的构成： 属性：与变量相关联，指对象的背景色、长度、名称等特征。 方法：与特定的函数相关联，对属性进行的操作。对象在被引用之前必须存在。获取对象的方式为：引用JavaScript内部对象引用浏览器环境提供的对象创建新对象 对象的基本结构131属性可以是数字、字符串，甚至是其他对象。每个属性都有一个与之相连的名字。 对象属性引用的方式：使用点“.”运算符 通过对象的下标实现引用

49、 通过字符串的形式实现引用 对象属性的引用对象方法的引用ObjectName.methods() 方法实质上是对象中的一个函数 132操作对象的语句for.in语句 for（对象属性名 in 已知对象名） 语句段; 对已知对象的所有属性进行操作的控制循环语将一个已知对象的所有属性反复赋给一个变量 无需知道对象中属性的个数即可进行操作 with语句 with(object) 语句段; 在该语句体内，没有指明对象的属性都是with指明的对象的属性。 133this关键字避免多层次、多方位对象引用造成的混乱。 this将对象指定当前对象。new运算符 newobject=new Object(Par

50、ameters table); 创建一个对象实例134 常用内部对象Array对象 String对象 Date对象 Math对象 静态对象：在引用该对象的属性或方法时不需要创建实例动态对象：在引用属性或方法时必须创建一个实例对 象135存储的是编号变量，定义了一个数组。 动态对象，使用前必须使用new运算符创建一个实例。 例如：student=new Array(30); 通过数组下标来使用数组元素，数组下标从0开始。Array对象属性：length：表示数组元素的个数 方法：join()：连接数组所有元素，返回一个字符串。元素之间用“,”或其他指定的分隔符隔开。reverse()：返回一个翻

51、转的数组，原来的最后一个元素变成第一个，而第一个则变成了最后一个。 sort()：返回一个排序数组，缺省按字母表顺序排序。 136静态对象String对象属性：length：表示字符串中的字符个数 字符串转换方法：toUpperCase()：把字符串中所有字符转换为大写 toLowerCase()：把字符串中所有字符转换为小写处理子串方法：substring()：返回夹在原字符串两个下标变量之间的子串。charAt()：只需一个下标并返回一个字符。 split()：根据指定的分隔符把一个字符串划分成一个字符串数组。 137搜索字符串的方法：indexOf()：在字符串中搜索另一个字符串，返回值

52、为字符串的下标。 lastIndexOf()：从最后一个字符开始向前搜索，寻找字符串最后一次出现的位置。big()使用标记将文本以大字体显示blink()使用标记将文本闪烁显示bold()将文本以粗体字显示fixed()将文本以固定高度的字体显示fontcolor()以特定的颜色显示字符串fontsize()设定字体的大小italics()使用标记以斜体显示字符串small()使用标记以小字体显示字符串strike()使用标记以加删除线字体显示字符串sub()与标记等价，显示下标文本sup()与标记等价，显示上标文本改变字符串外观的方法138处理日期和时间 动态对象birthday=new D

53、ate(); birthday=new Date(“June 20,1996 08:00:00”); birthday=new Date(6,20,96); birthday=new Date(6,20,96,8,0,0); Date对象setDate()设定一个月中的日期setMonth()设定月份（JavaScript中月份从0到11，一月对应月份为0）setYear()设定年份setTime()通过指定距1770年1月1日的毫秒来设定时间setHours()设定小时setMinutes()设定分钟setSeconds()设定秒没有属性，只有获取和设置日期和时间的方法：139提供除加、减、

54、乘、除以外的运算，如对数，平方根。 常用方法有： Math对象abs() 绝对值sin(),cos() 正弦余弦值asin(), acos() 反正弦反余弦值tan(),atan() 正切反正切sqrt() 平方根round() 四舍五入ceil()向上完整到上一个整数。floor()向下完整到下一个整数，即舍去小数部分。Random()不需要任何参数，返回0和1之间的随机小数。140 定义对象和方法 定义对象function Object(参数) p1=prop1; p2=prop2; this.meth1=FunctionName1; this.meth2=FunctionName2; 对

55、 象141对象方法的实质就是一个实现对象意图的函数方法不需要参数定义方法定义对象，就是创建一个用于创建新对象的函数，即对象的定义或构造函数。 构造函数接受参数来初始化一个新对象，并把参数赋予相应的属性。 1423.5 浏览器对象系统 对象系统简介 window对象 location对象 history对象 document对象 form对象 表单元素对象143浏览器对象系统 对象系统简介窗口对象（window）：提供处理浏览器窗口的方法和属性位置对象（location）：提供操作当前打开的URL的方法和属性，是一个静态的对象。历史对象（history）：提供与浏览过的页面有关的信息文档对象（d

56、ocument）：对象包含了文档元素对象144 window对象window/self：引用当前的window对象。 top：引用最上层（通常指第一个）浏览器窗口。 parent：用于框架中，表示当前框架的父框架。 opener：用于创建的窗口，指打开当前窗口的窗口。 常用术语name：当前窗口的名字 status：控制浏览器窗口状态栏的显示属性浏览器对象系统145URL：加载到新的窗口的URLWindowName：窗口名，即WindowName变量。Feature List：浏览器窗口的特征参数，参数之间用逗号隔开。window.open()：打开一个新的浏览器窗口。格式为：WindowNa

57、me=window.open(“URL”,“WindowName”,“Feature List”);参 数设定值含 义toolbaryes/no 显示或不显示标准工具条locationyes/no 位置输入字段directoriesyes/no 标准目录按钮statusyes/no 状态栏menubaryes/no 菜单条scrollbarsyes/no 滚动条resizableyes/no能够改变窗口大小width数值窗口宽度height数值窗口高度方法： 146window.close()：关闭窗口alert()：显示一个警告框，给用户一条消息。confirm()：显示一个确认对话框，显示

58、出一条消息和一个“确定”按钮、一个“取消”按钮。 prompt()方法：显示一条消息并提示用户进行输入，返回用户键入的文本。 setTimeout()：开始一个定时器，参数有：参数1：一条或一组语句，用引号括起来。 参数2：等待时间，以毫秒为单位。 clearTimeout()：在定时器超时之前，停止定时器。 scroll()：水平或竖直滚动窗口。 focus()：激活一个浏览器窗口，把它置于最顶层。 blur()：使指定的浏览器窗口失去激活状态，把它置为背景。 147onload事件：当窗口中文档装载完成时发生。onUnload事件：当另一个文档开始加载取代当前文档时或关闭浏览器窗口时发生。

59、onFocus事件：当窗口被激活时发生。onBlur事件：当窗口失去激活状态时发生。onError事件：当窗口中文档加载失败时发生。事件148 location对象name：当前窗口的名字 status：控制浏览器窗口状态栏的显示protocol：使用的协议或方法，包括冒号，如http:。hostname：资源所在的主机port：主机的通信端口号host：将主机名与端口连在一起pathname：页面所在的路径以及文件名hash：页面中锚点的名字target：指定了用于到达当前页面的链接的target属性query：查询字符串，通常是程序的参数。href：整个URL，包括以上列出的所有部分。 属

60、性浏览器对象系统149assign()方法将页面导航到另一页面后，可以“后退”回当前页面；用replace()方法实现的用另一页面取代当前页面，不能“后退”回当前页面。方法location.reload()：重载当前的文档，与浏览器的“刷新”按钮一样。 location.replace()：用新的location代替当前的location。location.assign()：与location.replace()类似，浏览器窗口被导航到另一个页面。 150 history对象length：用户访问过的页面的数量，即历史记录的长度。属性方法history.back()：返回前一个页面，与浏览器的