JavaScript程序设计案例教程（第2版）第1章HTML+JavaScript+CSS概述.ppt

JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 Web标准目前流行的设计方式就是采用HTML+CSS＋JavaScript将网页的内容、表现形式和动态效果分离，从而大大减少页面代码、提高网速，便于代码重用。HTML、CSS、JavaScript都是跨平台、与操作系统无关，其代码易于维护，并能移植到其他新的Web程序中。 知识目标 认识HTML语言 认识JavaScript语言 认识CSS 能力目标 了解CSS的概念 了解JavaScript的概念、作用和特点 了解CSS的概念和特点 了解网页编写的基本元素 4 案例陈述 1 2 3 案例实施 知识准备 本章小结 课后习题 5 本网站实现JavaScript学习平台的主要功能，网站主要包括“首页”、“课程介绍”、“课程学习”、“教务管理”、“在线测试”等导航栏目，“首页”链接指向网页“index.html”，“课程学习”的子栏目“理论知识”和“脚本调试”分别链接指向网页“Case13-3.html”和“Case11-1.html”，“教务管理”的子栏目“成绩登入”和“学生选课”分别链接指向网页“Case5.html”和“Case8.html”，“在线测试”链接指向网页“Case15.html”，导航栏布局见表1-1。 表1-1导航菜单栏布局 一级菜单 首页 课程介绍 课程学习 教务管理 在线测试 二级菜单 课程性质 理论知识 成绩登入 课程标准 脚本调试 学生选课 考核方式 网站目录设置为C:\JS02-web，网站目录结构如图1.7所示。 图1.7 目录结构 css文件夹用来存放CSS样式表。 images文件夹用来存放网站中所用到的图片。 js文件夹用来存放网站中的JS文件或jQuery插件。 知识点1 HTML简述 HTML为超文本标记语言(Hyper Text Markup Language)，是用于描述Web页面的格式设计的符号标记语言。通过浏览器识别由HTML标记按照某些规则构成的HTML程序文件，并将HMTL文件翻译成可以识别的信息，即Web网页。 知识点2 JavaScript语言概况 1）JavaScript的主要特点 ①解释性。②简单性。③基于对象。④事件驱动。⑤安全性。⑥跨平台。 2）JavaScript与Java的不同 ①两种语言是两个公司开发的不同的两个产品。②JavaScript是基于对象的，而Java是面向对象的。③两种语言在其浏览器中所执行的方式不一样。④两种语言所采取的变量是不一样的。⑤代码格式不一样。 知识点3 CSS概述 CSS（Cascading Style Sheets）即层叠样式表，亦称为级联样式表单。它是由W3C组织制定的一种非常实用的网页元素定义规则，能有效地定制网页、改善网页的显示效果，并能产生滤镜、图像淡化、网页淡入淡出的渐变效果。 采用CSS布局相对于传统的TABLE网页布局具有以下3个显著优势。 ①表现和内容相分离。②提高页面浏览速度。 ③易于维护和改版。 本章节主要介绍本书网站的案例分配和相应效果，介绍了HTML、JavaScript、CSS的基本概况，包括HTML定义、JavaScript的主要特点、与Java语言的不同点、CSS布局页面的优势等。通过本章的学习，读者可以了解网站中的基本元素。 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计