01周 概述_CSS样式.pptVIP

* * 注意： 加下划线为即将学到的内容。 * * * * * * * * * * * 注意： 加下划线为即将学到的内容。 * * * * * * * * * * * * * * Ajax 企业级开发 社会的现实 怎么面对 触动 -- 实践 -- 习惯 郑杰 zj@ 开场白 课程要求 课时：64 课时 分为两部分 讲课部分：32 课时，课堂教学 实践部分：32 课时，课程实验 培养目标 通过本课程的学习，掌握Ajax技术，提高动态网站开发的实际工作能力 第1章 概述 传统web应用解决方案 新的Web开发模式 — Ajax Ajax运行机制 第一个Ajax示例 传统Web应用解决方案 传统的Web应用程序结构 传统Web应用解决方案 传统的Web应用程序模型 传统Web应用解决方案 优点 编程简单 负载小时，用户体验尚可 缺点 负载较大时，用户体验差 用户只想改变网页的某一部分时，要刷新整个 网页 新的Web开发模式 —— Ajax Ajax用来描述一组技术，主要包括： 客户端脚本语言JavaScript 异步数据获取技术 XMLHTTPRequest 数据互换和操作技术XML和XSLT 动态显示和交互技术DOM 基于标准的表示技术XHTML和CSS等。 新的Web开发模式 —— Ajax Ajax 特点 通过异步模式，提升用户体验。 优化浏览器和服务器之间的数据传输，减少不必要的往返数据。 AiaX引擎在客户端运行，承担了一部分原本由服务器承担的工作，从而减少了大用户量下的服务器负载。 1.2.1 初识Ajax 新的Web开发模式 —— Ajax 2. 与传统Web应用区别 用户体验。 响应速度。 应用架构。 开发的代码量 服务器的负担 结论：Ajax技术的优势明显，但应用不当将适得其反。 1.2.1 初识Ajax 新的Web开发模式 —— Ajax 2. Ajax的应用 基于表单的简单用户交互 时时更新的页面信息 菜单导航 详细见表1-1 应用举例： google 搜索服务 1.2.1 初识Ajax 新的Web开发模式 —— Ajax XML HTTP + WebForm XML HTTP + HttpHandler Call Back Ajax 框架 1.2.2 Ajax开发模式 Ajax 运行机制 第一个 Ajax 示例 会员注册 1、需求 验证用户账号是否已经被使用 不进行刷新的情况下提示相应的信息 2、视频演示 第2章 CSS样式 CSS概述 引用CSS样式 颜色及背景 字体属性 文本属性 边框属性 定位与布局 2.1.1 CSS简介 CSS优势 样式重用 轻松增加网页效果 使元素定位更加准确 2.1.2 CSS基础语法 视频演示 1. 基本语法 select {property1:value; property1:value;……} 2. 标记选择器 h1 { color:red; font-size:25px; } 选择符组 (集体声明) P,h1 { color:red; font-size:25px; } 2.1.2 CSS基础语法 3. 类选择符 1) .red {color:red } HTML: p class=“red”红色/p h3 class=“red”红色/h 2) p.red{color:red } HTML: p class=“red”红色/p 4. ID选择符 #red{color:red } HTML: p id=“red”红色/p 2.1.2 CSS基础语法 类选择符与 ID选择符区别 网页中类选择符可以给任意数量的标记定义样式，ID选择符只能使用一次 ID选择符优先级高于类选择符 2.1.2 CSS基础语法 伪类选择符 对链接的不同状态定义不同的样式效果 a.style1:link{color:red;text-decoration:none} a.style1:visited{color:blue;text-decoration:none} a.style1:hover{color:green;text-decoration:underline} 示例 2.1.2 CSS基础语法 继承与层叠 1、外部标记样式会被保留继承到该元素所包含的其他的元素中 2、层叠：子样式中未定义的属性，继承父标记 注释 /* */ 不允许嵌套 2.1.3 CSS颜色