《ASP程序设计及应用（第二版）-电子教案及源代码-张景峰 第2章 Web页面制作基础》由会员分享，可在线阅读，更多相关《ASP程序设计及应用（第二版）-电子教案及源代码-张景峰 第2章 Web页面制作基础（45页珍藏版）》请在金锄头文库上搜索。
1、第2章 Web页面制作基础,2.1 HTML语言概述 2.2 文档的格式与风格 2.3 加入多媒体与超级链接 2.4 制作表格 2.5 制作表单 2.6 框架结构 2.7 CSS基础 2.8 XML基础,2.1 HTML语言概述,WWW（World Wide Web，万维网）拉进了人们彼此间的距离，使得人与人之间的信息交流变得更加简便和快捷。WWW上的信息，大部分是通过HTML语言发布的。,本章首页,2.1 HTML语言概述,2.1.1 HTML概述 HTML是（Hyper Text Markup Language，超文本标记语言）的缩写，最早源于SGML语言。 HTML用来表示网上信息的符号
2、标记语言。在WWW上，发布信息通常使用HTML，它是Web页面的基础，任何一个Web页面都离不开HTML，而且HTML也是Web应用开发的基础。 HTML语言是大多数浏览器都能识别的语言，使用HTML语法规则建立的文本可以运行在不同的操作系统平台上，而且能被大多数用户所接受。,2.1 HTML语言概述,2.1.2 文档的结构 头部信息 正文部分 ,文件开头和结尾由和来标记。 和标记头部，用来包含文件的基本信息；和标记正文部分，是整个文件的主体部分。,2.1 HTML语言概述, 这是标题部分。 你好，这是正文部分！ ,2.1 HTML语言概述,2.1.3 HTML标记 1HTML文档标记 格式：
3、 功能：标志文档开始和结尾的标记。 2HTML文件头标记 格式： 功能：用于包含文件的基本信息。 3HTML文件主体标记 格式： 功能：文件主体标记。,2.1 HTML语言概述,2.1.4 常用HTML编辑工具 任何一个文档编辑器都是HTML编辑器。 为了减少网页设计师的工作，使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。 所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时显示的效果基本一致。,2.2 文档的格式
4、与风格,在大多数网页中，文档是核心的内容，只有设置适当的文档格式，才能得到绚丽多彩的网页。设置文档的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。,本章首页,2.2 文档的格式与风格,2.2.1 设置的属性,2.2 文档的格式与风格,2.2.2 段落格式化 1标题标记 格式：， 功能：设置各种大小不同标题的标记。 2段落标记 格式： 功能：设置段落标记。 3预定义格式标记 格式：,2.2 文档的格式与风格,4分区显示标记 格式： 功能：分区显示标记。 5换行标记 格式： 功能：强制换行。 6水平线标记 格式： 功能：插入水平线标记。,7注释标记 格式： 功能：注释标记
5、。,2.2 文档的格式与风格,标记的使用 三种标记的使用！ 我在中间！ 中间 我在左边！左边 我在右边！右边 ,2.2 文档的格式与风格,2.2.3 建立列表 1有序列表 格式： type属性：数字（1，2，）、大写英文字母（A，B，）、小写英文字母（a，b，）、大写罗马字母（I，II，）和小写罗马字母（i，ii，），默认的序号是数字。,2.2 文档的格式与风格,2.2.3 建立列表 2无序列表 格式： type属性：可以为disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图片，默认为实心圆点。,2.2 文档的格式与风格,2.2.3 建立列表 3自定义列表 格式： 定
6、义列表；定义列表项，项目会自动换行并左对齐，但项目间没有空行；用来定义语句。,2.2 文档的格式与风格,2.2.4 字符的格式化 1字体设置标记 格式： 功能：设置字体格式标记。,2.2 文档的格式与风格,2.2.4 字符的格式化 2其他标记,2.3 加入多媒体与超级链接,图像的出现为本来单调乏味的网络世界增添了一道亮丽的风景线。图像在网页设计中是必不可少的，所以用户应该掌握在网页中操作图像的方法。,本章首页,2.3 加入多媒体与超级链接,插入多媒体的一般形式： 格式： 功能：在网页中加入图像、视频、动画等。,2.3 加入多媒体与超级链接,1插入图像,2.3 加入多媒体与超级链接,2插入视频,
7、2.3 加入多媒体与超级链接,2.3.2 加入超级链接 格式： 功能：在当前页和其他页间建立超链接。,2.4 制作表格,表格可以把文字和图片等内容按照行和列排列起来，可以用来建立主页的框架，使得整个网页更加清晰和条理化，有利于信息的表达。,本章首页,2.4 制作表格,2.4.1 建立表格 格式：,2.4 制作表格,2.4.2 定制表格 格式：。功能：定义表格的一行。 格式：。功能：定义单元格。,2.4 制作表格,2.4.2 定制表格 格式： 功能：定义表格标题，可以通过align属性设置标题的对齐方式。,2.5 制作表单,表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通
8、过表单可以完成用户和计算机或服务器之间进行的信息交换。,本章首页,2.5 制作表单,2.5.1 表单的结构 格式： 功能：定义表单。,2.5 制作表单,2.5.2 FORM中常用的标记 1输入域 （1）单行输入域。格式：。,2.5 制作表单,1）text类型。 2）password类型。 3）radio类型。 4）checkbox类型。 5）submit类型。 6）reset类型。 7）hidden类型。,2.5 制作表单,（2）多行输入域。 格式为： 功能：定义多行文本输入域。,2.5 制作表单,2按钮 格式： 功能：定义按钮。,2.5 制作表单,3选择域 格式： 选项一 选项二 功能：定义
9、选择栏。,属性：,属性：,2.6 框架结构,2.6.1 框架结构的文件格式 ,本章首页,注意：含有框架结构的网页其HTML的形式和一般的HTML文件相似，只是在文档中，若使用了，就不应该有标记。在老版本的浏览器可能不支持框架结构。,2.6 框架结构,2.6.2 框架结构标记的使用 格式： 功能：定义一个框架容器。,2.6 框架结构,2.6.3 FRAME标记 格式： 功能：在网页中定义框架。,2.6 框架结构,2.6.4 TARGET属性的使用 1用于A标记 2用于BASE标记 3用于FORM标记,本章首页,2.7 CSS基础,2.7.1 CSS样式简介 CSS（Cascading Style
10、 Sheets，层叠样式表），又称格式页，是近几年才发展起来的新技术。它提供了很多的样式定义方式来辅助HTML。,本章首页,2.7 CSS基础,CSS样式 CSS样式文本！arial，12pt，normal，blue！ ,本章首页,2.7 CSS基础,2.7.2 CSS样式表的定义 1通过HTML标记定义 定义任何一个HTML标记，定义时在属性和属性值之间用“：”隔开，当有多重属性时，使用“；”进行分隔。 2用id属性定义样式表 id以（#）开头，把标准的属性和属性值写入大括号内。 id属性的作用是：在调用JavaScript语言时，作为一个独立的名称来识别网页中的一个元素，如果不是因为要在网
11、页中使用JavaScript语言，这种标记应尽量少用，因为它具有一定的局限性。 3使用class定义样式表 使用class的方法和id的方法基本相同，class以“.”开头，然后再把标准的属性和属性值写入大括号内。,本章首页,2.7 CSS基础,2.7.3 在HTML中加入CSS的方法 1嵌入式样式表 2内联式样式表 3外联式样式表 4输入式样式表,本章首页,2.8 XML基础,XML（Extensible Markup Language，可扩展标记语言）类似于HTML，是一种纯文本标记语言，可以被任何纯文本处理器编辑。 XML通常用于简化Web开发中的数据存储和交换。,2.8 XML基础,2
12、.8.2 XML文档的结构 XML文档的结构是典型的树型结构，这棵“树”从根部开始，并扩展到树的最底端。其基本结构如下： . ,2.8 XML基础,2.8.3 XML语法规则 XML文档标记对大小写敏感 元素的开始标记和结束标记必须成对出现 标记名称可以包含字母、数字以及其他字符，但是不能以数字或者标点符号开头，也不能以特殊保留字符（如“xml”）开头，并尽量避免使用“-”、“.”、“:”等容易产生歧义的字符，名称中也不能包含空格。,2.8 XML基础,XML的元素可以包含多个属性，但是过多的使用元素属性，会影响XML文档对数据的描述，无法生成精确的树形结构，而且属性还存在无法包含多个值、不易扩展以及难以阅读和维护等问题。 在XML文档中应尽量使用元素来描述数据，仅使用属性来提供与数据无关的信息。,
