Web页面制作基础.ppt

第2章 Web页面制作基础,2.1 HTML语言概述 2.2 文档的格式与风格 2.3 加入多媒体与超级链接 2.4 制作表格 2.5 制作表单 2.6 框架结构 2.7 CSS基础,2.1 HTML语言概述,WWW（World Wide Web，万维网）拉进了人们彼此间的距离，使得人与人之间的信息交流变得更加简便和快捷。WWW上的信息，大部分是通过HTML语言发布的。,本章首页,2.1 HTML语言概述,2.1.1 HTML概述 HTML是（Hyper Text Markup Language，超文本标记语言）的缩写，最早源于SGML语言。 HTML用来表示网上信息的符号标记语言。在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文档标记 格式： 功能：标志文档开始和结尾的标记。 2HTML文件头标记 格式： 功能：用于包含文件的基本信息。 3HTML文件主体标记 格式： 功能：文件主体标记。,2.1 HTML语言概述,2.1.4 常用HTML编辑工具 任何一个文档编辑器都是HTML编辑器。 为了减少网页设计师的工作，使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。 所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时显示的效果基本一致。,2.2 文档的格式与风格,在大多数网页中，文档是核心的内容，只有设置适当的文档格式，才能得到绚丽多彩的网页。设置文档的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。,本章首页,2.2 文档的格式与风格,2.2.1 设置的属性,2.2 文档的格式与风格,2.2.2 段落格式化 1标题标记 格式：， 功能：设置各种大小不同标题的标记。 2段落标记 格式： 功能：设置段落标记。 3注释标记 格式： 功能：注释标记。,2.2 文档的格式与风格,4分区显示标记 格式： 功能：分区显示标记。 5换行标记 格式： 功能：强制换行。 6水平线标记 格式： 功能：插入水平线标记。,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自定义列表 格式： 定义列表；定义列表项，项目会自动换行并左对齐，但项目间没有空行；用来定义语句。,2.2 文档的格式与风格,2.2.4 字符的格式化 1字体设置标记 格式： 功能：设置字体格式标记。,2.2 文档的格式与风格,2.2.4 字符的格式化 2其他标记,2.3 加入多媒体与超级链接,图像的出现为本来单调乏味的网络世界增添了一道亮丽的风景线。图像在网页设计中是必不可少的，所以用户应该掌握在网页中操作图像的方法。,本章首页,2.3 加入多媒体与超级链接,插入多媒体的一般形式： 格式： 功能：在网页中加入图像、视频、动画等。,2.3 加入多媒体与超级链接,1插入图像,2.3 加入多媒体与超级链接,2插入视频,2.3 加入多媒体与超级链接,2.3.2 加入超级链接 格式： 功能：在当前页和其他页间建立超链接。 如：超级链接 如：超级链接,超级链接,超级链接可以指向E-mail地址 如：指向E-mail地址的超级链接 超级链接可以指向页面内部链接（锚点链接） 指向本页面锚点aa的超级链接,2.4 制作表格,表格可以把文字和图片等内容按照行和列排列起来，可以用来建立主页的框架，使得整个网页更加清晰和条理化，有利于信息的表达。,本章首页,2.4 制作表格,2.4.1 建立表格 格式：,2.4 制作表格,2.4.2 定制表格 格式：。功能：定义表格的一行。 格式：。功能：定义单元格。,2.5 制作表单,表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以完成用户和计算机或服务器之间进行的信息交换。,本章首页,2.5 制作表单,Method属性的两个方法： GET方法：将表单数据附加在Action属性指定的URL地址之后，并在URL地址与表单数据间加上一个“？”分割符，表单的各个数据项间用“&”分割符。 http:/localhost/test.asp?txtid=012&txtusename=ucau GET方式一次最多只能提交256个字符； POST方式是将表单数据作为一个独立的数据块在后台直接发送给服务器。,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）button类型 8）hidden类型。,1）文本框 ? 文本框的名字 * text,password,hidden * 默认值 * 长度 ? 最大输入字符数,常用标记 表单对象标记,2）单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。 男 女 各个选项的name必须一样，而value不一样才能达到预期效果,常用标记 表单对象标记,3 ）复选框(Checkbox) 在一个表单里的所有多选框可以有一个或多个被选中。 ,常用标记 表单对象标记,2.5 制作表单,（2）多行输入域。 格式为： 功能：定义多行文本输入域。,2.5 制作表单,2按钮 格式： 功能：定义按钮。,4 ）按钮 包括普通按钮、重置按钮和提交按钮 ,常用标记 表单对象标记,2.5 制作表单,3选择域 格式： 选项一 选项二 功能：定义选择栏。,属性：,属性：,5）下拉列表 基本语法 硕士以上 大学本科 大专 中专以下 ,3、常用标记 表单对象标记,综合练习（*） 试在当前页面中设计一名为userinfo的表单，用以收集用户的资料，并将其提交给userlogin.asp页面处理。界面如下：,3、常用标记 表单对象标记,2.6 框架结构,2.6.1 框架结构的文件格式 ,本章首页