第1章 web应用基础ppt课件

《第1章 web应用基础ppt课件》由会员分享，可在线阅读，更多相关《第1章 web应用基础ppt课件（49页珍藏版）》请在金锄头文库上搜索。

1、软件开发技术,王忠华 15337153196 ,教 材,第1章 Web应用基础 第2章 ASP.NET开发入门 第3章 C#语言基础 第4、5章 ASP.NET基本控件、高级控件 第6、7章 应用ADO.NET编程、Web数据访问 第9章 实用编程技巧 第10章 “畅想网络学院”,.Web应用开发技术,高屹 齐元东 李雷 编著,清华大学出版社,2008.7. 28元,参 考 书,1.ASP.NET从入门到精通,张跃廷 顾彦玲 编著,清华大学出版社,2008.9. 78元。 2.ASP.NET第一步-基于C#和ASP.NET2.0，朱晔著 清华大学出版社，2007.7. 69元。 3.精通ASP

2、.NET 2.0网络应用系统开发,马军 编著,人民邮电出版社,2006年6月，64元。 4. ASP.NET 从入门到精通，郑耀东 等编著 清华大学出版社，2009年9月，62元。,第1章 Web应用基础,1.1 HTML标记语言 1.2 CSS层叠样式表 1.3 JavaScript语言,1.1 HTML标记语言,1.1.1 HTML的基本概念 1.1.2 HTML元素,1.1.1 HTML的基本概念,Web（World Wide Web或WWW、万维网）是一种基于超链接（HyperLink）技术的超媒体（Hypermedia）系统。 在Web系统中，信息的表示和传送一般使用HTML（Hyp

3、er Text Markup Language，超文本标记语言）格式。 Web系统还具有极强的超级链接能力。,1.1.1 HTML的基本概念,客户/服务器工作方式Client/Server Web系统由Web客户机和Web服务器组成，它们之间使用HTTP（Hypertext Transfer Protocol，超文本传输协议）传输数据。 Web的这种资源访问机制又被称为B/S（Browser/Server，浏览器/服务器）模式。,Web客户机,Web服务器,1.1.1 HTML的基本概念,静态网页及其执行过程 静态网页是标准的HTML文件，其文件扩展名为.htm或.html，它可以包含文本、H

4、TML标记、客户机脚本以及客户机Activex控件等。,1.1.1 HTML的基本概念,静态网页及其执行过程 当用户在浏览器的地址栏中键入要访问的URL地址并回车或单击Web页上的某个超级链接时，浏览器向Web服务器发送一个页面请求。 Web服务器接收到这些请求，根据扩展名.htm或.html判断出请求的是HTML文件，然后服务器从当前硬盘或内存中读取正确的HTML文件，将它送回用户浏览器。 用户的浏览器解释HTML文件并将结果显示出来。,1.1.1 HTML的基本概念,静态网页及其执行过程 静态网页的内容是固定的，不论何时，任何用户访问该页面都会得到相同的显示效果。,Web客户机,Web服务

5、器,1.接受请求 2.找到静态网页 3.发送静态网页,1.1.2 HTML元素,HTML标签用来组成HTML元素，是一些由两个尖括号 “”括起来的预定义标记。 HTML标签通常成对出现，如和，分别称为开始标签和结束标签，开始标签和结束标签再加上它们之间所包含的内容，就构成了一个HTML元素。 HTML标签可以带有属性。 内容 ,1.1.2 HTML元素,一般来说，HTML文档以标签开始，以标签结束。整个文档可分为文档头和文档体两部分。 文档头是位于标签与之间的内容，它被浏览器解释为窗口的标题。 标签和之间的内容就是文档的主体，也就是浏览网页所看见的内容，包括文字、图片、表格、表单、多媒体信息等

6、。,最简单的HTML文档： 我的第一个网页 这是html文档的主体部分，也就是网页的内容。 ,例：first.htm,1.1.2 HTML元素,文字基本标签 标题文字标签, 标题示例 最大的标题 使用h3的标题 最小的标题 ,例：biaoti.htm,1.1.2 HTML元素,文字基本标签 文字的字体、大小和颜色标签, 粗体文字示例 斜体文字示例 下划线文字示例 ,例：yangshi.htm,1.1.2 HTML元素,页面布局标签 换行标签,换行标签是个单标签，也叫空标签，不包含任何内容，在HTML文件中的任何位置只要使用了标签，当文件显示在浏览器中时，该标签之后的内容将从下一行显示。例如上面

7、的文件就使用了标签。,1.1.2 HTML元素,页面布局标签 分段标签,由和标签所标识的文字，代表同一个段落的文字。分段标签的一般格式为： 段落内容 其中，align是标签的属性，属性值可以是left、center和right之一，它们分别用来设置段落文字的左对齐、居中对齐和右对齐。,例：duanluo.htm,1.1.2 HTML元素,插入图像标签,HTML支持的图像文件格式有gif、jpeg等，在HTML文档中插入图像文件要使用标签，其具体使用格式为： 其中src是source的英文缩写，“图像文件名”是图像文件的URL地址；,1.1.2 HTML元素,插入图像标签, 插入图像文件示例 ,

8、例：tupian.htm,1.1.2 HTML元素,图像作为网页背景, 图像作为网页背景 这是html文档的主体部分，也就是网页的内容。 ,例：background.htm,1.1.2 HTML元素,插入超链接,在HTML中，简单的链接标签是。它的基本语法是： . 或 . 或 . 其中href是英文hypertext reference的写。,1.1.2 HTML元素,插入超链接, HTML超链接 HTML超链接示例 我的第一个网页 | 网易 | ,例：hyper.htm,1.1.2 HTML元素,链接声音文件或视频文件, 链接声音文件和视频文件 链接声音文件 | 链接视频文件 | ,例：du

9、omeiti.htm,1.1.2 HTML元素,嵌入声音文件或视频文件, 嵌入声音文件 ,例：qianruduomeiti.htm,1.1.2 HTML元素,嵌入背景音乐, 嵌入背景音乐 这是html文档的主体部分，也就是网页的内容。 ,例：beijingyingyue.htm,1.1.2 HTML元素,表格,一张表格有许多表元素组成，例如表的标题、表行、表列标题等。HTML为表格规定了表元素标签和属性。一般的HTML文档表格结构如下所示： 第一行第一个单元格 第一行第二个单元格 ,1.1.2 HTML元素,表格,一张表格有许多表元素组成，例如表的标题、表行、表列标题等。HTML为表格规定了表

10、元素标签和属性。一般的HTML文档表格结构如下所示： 第一行第一个单元格 第一行第二个单元格 ,例：table.htm,1.1.2 HTML元素,在页面中使用框架可以将页面窗口划分为不同的区域，在这些区域中可以同时显示多个HTML文档，其语法为： . frameset元素中可以包含多个frame，还可以再嵌套地包含内部frameset元素。标签中的文字将只出现在不支持frameset的浏览器中。,框架,1.1.2 HTML元素,例：将整个窗口分为上下两栏。下面的frameset又分为两栏。 ,1.1.2 HTML元素,框架,例：Frameset.htm,表格是HTML文档中应用非常多的一个元素

11、，除了显示需要表格化的内容外，还经常用它来规划窗口的布局。 用表格规划窗口布局与使用框架不同。使用框架需要将内容放在多个HTML文档中；而使用表格，所有的内容都在同一个文档中。 因此，当内容需要变化时，一般使用框架；如果不需要变化，一般使用表格。,1.1.2 HTML元素,框架与表格,表单是信息交流的窗口，是页面上表单域的集合。用户通过在表单中输入自己的信息，单击“提交”按钮来提交表单 。一般的HTML文档表单结构如下所示： . ,1.1.2 HTML元素,表单,在form标签中： method属性用来指明通过HTTP协议提交表单数据的方式，有两个可能的选择：post和get。get是默认方式

12、，但post更常用，因为使用get方式只能提交不超过128字节的数据。 action属性用来指明服务器端代理，当表单数据被提交到服务器端时，该代理会处理表单数据。 target属性用来指明响应页面在哪里打开。,1.1.2 HTML元素,表单, 用户名： 口令： 类型： 学生 教师 管理人员 ,例：form.htm,1.1.2 HTML元素,表单,使用注释标签可以在HTML文档中插入注释，如： 注释会被浏览器忽略。使用注释对复杂代码加以说明是一个好的编程习惯。,1.1.2 HTML元素,将网站的首页文件保存为index.htm 或index.html。 尽量采取有意义的英文名称命名网页名字。 规

13、划目录结构时应遵循的几个原则： 不要将所以文件都存在根目录下； 按站点内容栏目分别建立子目录； 每个子目录建立images子目录存放图像； 不要使用中文作为目录名或网页文件名。,1.1.2 HTML元素,HTML学习参考： ,第1章 Web应用基础,1.1 HTML标记语言 1.2 CSS层叠样式表 1.3 JavaScript语言,1.2 CSS层叠样式表,1.2.1 什么是CSS 1.2.2 CSS的使用 1.2.3 选择器,1.2.1 什么是CSS,CSS是Cascading Style Sheet的缩写，译为“层叠样式表”或“级联样式表”，是为了弥补HTML在排版样式上的不足而制订的一

14、套样式标准。可以用来： 设置页面中的字体 定义层及其在页面中的位置 修改HTML标记,1.2.1 什么是CSS,使用CSS的好处： 减少图形文件的使用 集中管理样式内容 共享样式设定 将样式分类使用,1.2.1 什么是CSS,CSS使用规则(Rule)的方式进行定义， 如: h1 color: green 一条规则包含两个部分： 选择器(Selector)：表示样式要套用的对象，如h1； 样式定义(Declaration)：设定样式的内容，用括起来的部分，如color: green。,1.2.2 CSS的使用,在HTML标签中使用行内样式： 若只需要修改HTML中某个标签的样式，可以使用标签的

15、style属性直接修改样式。它利用现有的HTML标记，把特殊的样式加入到指定的标签中，又称行内(in-line)设定，如： 这里显示红色字,1.2.2 CSS的使用,在HTML页面中嵌入一个样式表 可以直接在HTML网页的标题部分，使用标签来定义样式，用此方法定义的样式将应用于整个文档。例如： p color : red ; font-weight : bold ,1.2.2 CSS的使用,在HTML页面中链接一个外部样式表文件 一个外部定义的样式表可以作为一个样式模板应用于多个Web页面。方法为将所有样式部分组合在一起，保存到扩展名为.css的文件。 在HTML网页的和标签之间加上： ,1.2.2 CSS的使用,通过import关键字导入样式表 import是在浏览器读取HTML之初便将样式文件的内容全部导入HTML文件中。 导入的方式是将样式文件的内容添加到HTML文档中，因此，