web程序设计1.ppt

1、Web程序设计,Chapter 1 Html语言内容 Html的基础知识 页面(Page) 字体(Font) 文字布局(Text Style) 链接 图象(Image) 表格(Table) 表单(Form) 多窗口页面(Frames) 会移动的文字(Marquee) 多媒体页面(Alternative Inline Elements),超文本 Html是一种类似于排版用途的标记性语言 站点网页总体规划,Html的基础知识:,超文本 : 所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 可以表现出丰富多彩的设计风格 可以实现

2、页面之间的跳转 可以展现多媒体的效果 Html是一种类似于排版用途的标记性语言 站点网页总体规划,超文本文档分文档头和文档体两部分 头 部 信 息 文 档 主 体， 正 文 部 分 ,Index.htm,1.中国文化经典 （classics.html) 2.当代哲学专著 （cwork.html) 3.唐诗 （cpoens.html,1.易经（yijing.html) 2.道德（daod.html) 3.心经（xinj.html) 4.三字经（szj.html),HTML 文件结构(Document Structures),一个简单的HTML示例 欢迎光临我的主页这是我第一次做主页，无论怎么样，

3、我都会努力做好！ ,文件头 文件体,（1）HTML标记符 这两个标记符是HTML文档的标记符。处于文档的最前端，表示文档的开始，即浏览器从开始解释。而则位于文件的最后一行，这样的结果表示这一整份的文档都是HTML语法的文档。,（2）HEAD标记符 是HTML文件头标记符，用来描述HTML首部的内容，说明文档的整体信息。所有首部信息并不会出现在利用WWW浏览器所看到的窗体中。 通常与某些标记符一起使用，如 标记符。,Isindex 表明可以对文档进行检索 Base 显示文档的原始URL Nextid 显示唯一的文档标志 META 任何附加信息, meta 标签用于网页的与中，meta 标签的用处

4、很多。meta 的属性有两种：name和属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。,META 任何附加信息,name 属性 1、用以说明生成工具（如Microsoft FrontPage 4.0）等； 2、向搜索引擎说明你的网页的关键词； 3、告诉搜索引擎你的站点的主要内容； 4、告诉搜索引擎你的站点的制作的作者； 5、

5、, 大长今下载 ,1、 和 用以说明主页制作所使用的文字以及语言； 又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集； 2、定时让网页在指定的时间n内，跳转到页面http:/yourlink； 3、和设定进入和离开页面时的特殊效果,指定网页 页面定时刷新 页面定时转向新的地址 40秒后将自动载入所在的网页,渐隐的特效 将下面的代码复制到里: / 进入时渐隐 / 退出时渐隐,（3）TITLE标记符 指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于WWW浏览器而言，标题所在的位置虽然依照浏

6、览器的不同而不同，但是大部分都位于浏览器的最上方。,（4）BODY标记符 指的是定义出一个HTML文档的体部，位于首部下面。在标记符内的文字，所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中。,背景色彩和文字色彩, bgcolor - 背景色彩 text - 非可链接文字的色彩 link - 可链接文字的色彩 alink - 正被点击的可链接文字的色彩 vlink - 已经点击(访问)过的可链接文字的色彩 #=rrggbb 色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,

7、e,f. 背景图象 Non Scrolling Background ,页面空白(Margin),页面左边的空白 页面上方的空白(天头) #=margin amount,标题字体(Header), . #=1, 2, 3, 4, 5, 6 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ - 这些标记显示黑体字。 - 这些标记自动插入一个空行，不必用 标记再加空行。因此在一行中无法使用不同大小的字体。,标尺线, #=left, right #=rrggb

8、b 16 进制 RGB 数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua ,字体大小, . #=1, 2, 3, 4, 5, 6, 7 or +#, -# #=1, 2, 3, 4, 5, 6, 7 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好

9、！ 今天天气真好！,物理字体(Physical Style),今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！,逻辑字体(Logical Style),今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今

10、天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！,指定“字体大小”的标记和“指定字体”的标记的组合使用, 今天 天气 真好！ 今天 天气 真好！,字体颜色,指定颜色 . #=rrggbb 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua White & White White & White,客户端字体(Font Face), . #=客户端可获得的字体 Hell

11、ow World! Hellow World!,字符实体(Entities), ,行的控制,段(Paragraph) (可以看作是空行) 你好吗？很好。 你好吗？ 很好。 换行 你好吗？很好。 你好吗？很好。 不换行 请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！ 请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！,文字的对齐(Alignment),. . #=left, center, right HelloHello Hello Hello . Hello Hello,文字的分区(Division)显示, . Can you feel happi

12、ness without unpleasant? Please show me your smile. Can you feel happiness without unpleasant?Please show me your smile. . Can you feel happiness without unpleasant?Please show me your smile. . Can you feel happiness without unpleasant?Please show me your smile,列表,无序列表 . TodayTommorow Today Tommorow

13、 有序列表 . TodayTommorow Today Tommorow 定义列表(Definition lists) .,定制列表元素,定制表中的标记 #=disk, circle, square ONETWOTHREE ONE TWO THREE,定制列表元素,定制表中的标记 #=disk, circle, square ONETWOTHREE ONE TWO THREE,利用HTML创建超链接 1页面链接 用HTML创建超链接需要使用A标记符（结束标记符不能省略），它的最基本属性是href，用于指定超链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。另外，在和之间可以用

14、任何可单击的对象作为超链接的源，例如文字或图像。 例如： 外国的学生 target=_blank“ target=_parent“ target=_self“ target=_top,2锚点链接 用户可以对同一网页的不同部分进行链接。即建立锚点链接。 如果要设置锚点超链接，首先应为页面中需要跳转到的位置命名。命名时应使用A标记符的name属性。 例如，可以在页面开始处用以下HTML语句进行标记： 目录 对页面进行标记之后，就可以用A标记符设置指向这些标记位置的超链接。 返回目录链接的例子 这样设置之后，当用户在浏览器中单击文字“返回目录”时，将显示“目录”文字所在的页面部分。 链接到其他文件锚

15、点例子,3电子邮件链接、zip（rar)压缩文件、exe文件 如果将href属性的取值指定为“mailto:电子邮件地址”，那么就可以获得电子邮件链接的效果。例如： 作者邮箱 如果将href属性的取值指定为“浏览器不能够浏览的内容”，那么就可以获得下载的效果。例如： QQ2003下载,链入图象的基本语法, #=图象的 URL #=在浏览器尚未完全读入图象时，在图象位置显示的文字。 ,图象和文字的对齐,图象在页面中的对齐/布局(Floating Image),图片的例子,图象在页面中的对齐/布局(Floating Image),边框,1.表格的基本语法,. - 定义表格 - 定义表行 - 定义表

16、头 - 定义表元(表格的具体数据),表格标记,实例： 第一行第一列 第一行第二列 ,Table标签支持的属性：,td标签支持的属性：,示例,表格的嵌套,示例,2.表格的背景图片,Background=“” width=“” height=“”,表格标记,实例： 学生生涯 ,示例,利用HTML处理表单 利用HTML可以创建表单，创建的表单通常由两类元素构成，一是普通的页面元素，例如表格、图像、文字等，二是用于接收信息的特定页面元素，也就是所谓的表单控件。 1表单标记符 HTML中表单标记符为FORM，其主要作用是设定表单的起止位置，并指定处理表单数据程序的URL地址。 2表单输入标记符(控件）

17、INPUT是表单输入标记符，在表单创建中使用频繁，大部分表单内容需要用到此标记符。,1.表单的基本语法,. . 属性：action、method,表单标记,实例： ,示例,描述特性的字段,Type 描述输入操作的类型，主要有：text、password、chekbox、radio、image、hidden、submit和reset Name 描述响应操作的cgi变元名称 Value 赋值字段 Size 定义对话框的长度 Maxlength 允许输入的字符长度,（1）文本框和口令框 创建单行文本框的基本语法如下： （2）复选框与单选按钮 创建复选框和单选框也是使用INPUT标记符，语法分别如下：

18、 （3）按钮 创建提交按钮、重置按钮和自定义按钮的语法分别如下： ,示例,（4）多行文本框（文本区） 利用HTML创建多行文本框应使用TEXTAREA标记符，其使用格式如下： 默认多行文本 （5）选项菜单 要创建选项菜单应使用SELECT标记符，并将每个可独立选取的项用一个OPTION标记符标出来。,列表框和下拉框,实例： 办公室 市场部 技术部 ,示例,利用HTML创建网页框架 1。指定框架结构 在框架集网页中，除了基本的HTML、HEAD等标记符以外，主要包括框架集标记符FRAMESET（必须有结束标记符）和框架标记符FRAME（没有结束标记符）。 由于框架是按照行或列排列的，所以在建立框架结构时，使用FRAMESET标记符的rows属性或cols属性分别可以构造出横向分隔框架和纵向分隔框架。,示例,2框架的嵌套 如果网页设计者需要创建一些复杂的框架集，即同时包含横向和纵向的框架，此时可以使用框架嵌套。框架嵌套时只要在要使用FRAME标记时再使用FRAMESET标记一个框架集即可。 3框架的初始化 框架初始化是指为各个框架指定初始显示的页面，此时应使用FRAME标记的src属性，将该属性的值指定为要在框架中显示的页面即