网页设计与开发

《网页设计与开发》由会员分享，可在线阅读，更多相关《网页设计与开发（82页珍藏版）》请在金锄头文库上搜索。

1、网页设计与开发,吕智强 ,网页和网站,网站是有独立域名、独立存放空间的内容集合（即对外发布），这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，那怕只有一个页面也叫网站。 网页是网站的组成部分。有了很多网页没有独立的域名和空间也只能说是网页。例如一个程序，尽管有很多页面，功能也齐全，但没有独立域名和空间，没对外发布，但都不能叫网站。,一、概述,网页表现形式,静态网页,通常是以.htm、.html、.shtml等为后缀的，它的特点是不会“变” 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难 静态

2、网页的交互性较差，功能简单，无法实现更多的功能,网页表现形式,动态网页,通常是以.php、.aspx、.jsp等为后缀的，它的特点是会“变” 以数据库技术为基础，大大降低网站维护的工作量 可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;,什么是万维网,万维网的核心部分由统一资源定位器（URL）、超文本传输协议（HTTP）以及超文本标记语言（HTML）三个标准构成。 1统一资源定位器 统一资源定位器，又叫URL（Uniform Resource Locator）。是专为标识I

3、nternet网上资源位置而设的一种编址方式，通常所说的网页地址指的即是URL。 2超文本传输协议 HTTP是超文本转移协议，是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。 3超文本标记语言 HTML（Hyper Text Markup Language）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。,工作原理,当进入万维网上一个网页，或者其他网络资源的时候，通常你要首先在浏览器上键入想访问网页的统一资源定位器（URL），或者通过超链接方式链

4、接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个IP地址。 接下来的步骤是为所要访问的网页，向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下，HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。 网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了浏览器中所看到的“网页”。,开发工具的选择,HTML的编辑工具是比较多的，读者既可以选择最常用的基于文本的HTML编辑器（Windows自带的记事本

5、），也可以选择一套功能强大，可取代记事本编辑器的EditPlus，还可以选择所见即所得的Dreamweaver等。,网页制作的相关技术,1HTML HTML（Hyper Text Markup Language）超文本标记语言是一种嵌入式语言。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 通过定义标记标签使浏览器解析页面并进行显示。一个HTML文件的后缀名是htm或者是html。 2CSS CSS意思就是叠层样式表（Cascading Style Sheets），使用CSS的优点在于将格式从功能中分离出来。它定义了HTML元素的显示，是一种对web

6、文档添加样式的简单机制。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。,网页制作的相关技术,3JavaScript JavaScript是由 Netscape公司开发的一种脚本语言（script language），称为描述性语言， 具有面向对象的能力，可以非常自由地嵌入到HTML/XHTML 文件中，从而更便捷地开发出可交互的Web网页。 JavaScript是目前最为流行的客户端脚本语言，大大地增强了网页的交互性。JavaScript语法构

7、成与C、C+、Java类似，都包括if语句、while循环、分支选择以及运算等结构，但也仅是在语法上的相似。,网页元素单位,相对长度单位 px：像素是相对于显示器屏幕分辨率而言 em：相对于当前对象内文本的字体尺寸 绝对长度单位 cm：厘米 mm：毫米 in：英寸,HTML文档结构,HTML（Hyper Text Markup Language）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。一个HTML4.01的文档结构包括以下几部分： DOCTYPE声明定义文档类型。 HTML头元素信息。 HTML正文信息（body标签内信息）。,二、初识HTML,声明定义文档

8、类型,在HTML4.01中提供了三种DTD文档： 严格型HTML4.01DTD文档不包括那些不被推荐的元素和属性，并且不能在带有frameset的页面中出现。 过渡型HTML4.01DTD文档包含所有严密型DTD文档中所允许的内容，还可以使用那些不被推荐的元素以及属性。 框架型HTML4.01 DTD文档包含过渡型以及框架。 ,HTML头元素信息,HTML文档的head元素中包含了meta元素，meta元素用来指定有关这个文档的相关信息。 例如： 用httpequiv、content、charset描述页面的内容。 meta 元素的属性有两种：http-equiv和name 。,什么是标签 大

9、多数HTML文档的标签都是由开始标签和结束标签进行界定（开始标签和结束标签成对出现），结束标签是以斜线开头（/），例如中为结束标签。每一个标签都是由尖括号（）包围。 有单向标签和双向标签 单向标签：br、hr、img等,三、标签,标签的属性,标签可以拥有属性，属性可以为页面中的HTML元素提供附加信息。属性被放置在标签的后面，但在最终括号（）的前面，即属性应该添加在HTML元素里的起始标签中。 例如：,标签的嵌套,HTML标签经常使用嵌套的方式，所谓的嵌套是指一个HTML标签包含另外一个标签的情况。 例如： 标题 显示的内容 ,HTML基本标签,HTML基本标签包括:标题标签h1、段落标签p、

10、换行标签br、水平分割标签hr、部分标签div、注释标签、字体标签font。 部分标签最早在HTML3.2标准中定义，可以将文档分割成独立的、不同的部分。在标签中定义的文本内容，实际上与没有在标签中定义的没有什么区别，但要是引入了align属性，标签就变的十分有用了（用来设置段落或标题的对齐方式）。 和其他编程语言一样，HTML也提供了代码注释的方式（，作为一个程序员应该养成对代码注释的习惯，这样可以保持清晰的思路。浏览器不显示注释的部分。,文字格式化,常见的文字格式化标签如下表。,字体设置,在HTML中，字体标签（font）通过其属性来设置文本字体、字体大小和字体颜色。字体标签的属性如下表。

11、,color,color,color,color,无序列表,所谓无序列表就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈、方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰，更合理。 当创建一个无序列表时，主要使用用HTML的标签和标签来标记。其中标签标识一个无序列表的开始；标签标识一个无序列表项。 基本语法结构为： 项目名称 项目名称 项目名称 项目名称 ,四、列表,有序列表,有序列表与前面介绍的无序列表正好相反，所谓有序列表就是列表项的前导符号是有序的符号标识的列表。有序的符号标识包括：阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数

12、字。 基本语法结构为： 项目名称 项目名称 项目名称 标签的type属性用来定义一个有序列表的前导字符，如果省略了type属性，浏览器会默认显示为“1”前导字符。 type取值为 1（阿拉伯数字）、a（小写英文字母）、A（大写英文字母）、i（小写罗马数字）、I（大写罗马数字）,图片的使用,HTML和XHTML的一个重要特性就是可以在文本中加入图片，既可以把图片作为文档的内在对象加入，又可以通过超级链接的方式加入，同时还可以将图片作为背景加入到文档中。在文档中合理地使用图片会使浏览器显示的网页更活泼、引人入胜。,五、图片,在页面中插入图片,在HTML中，用标签在网页中添加图片。图片是以嵌入的方式

13、添加到网页中的。网页开发者可以通过多种方式获取网页设计中用到的图片，可以将现有的图片扫描到计算机内、从Internet上的Web站点获取以及通过制图软件自己动手制作。如果是“引用”的图片，一定要得到图片版权拥有者的同意才可使用。 在页面中插入图片的语法： ,替换文本说明,有时，由于网络过忙或者用户在图片还没有下载完全就点击了浏览器的停止键，用户不能在浏览器中看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息 。 例如： ,调整图片大小,在HTML中，通过img标签的属性width和height来调

14、整图片大小，其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置width和height属性，浏览器就要等到图片下载完毕才显示网页，因此延缓了其它页面元素的显示。 例如：,设置背景图片,背景属性将背景设置为图片。属性值为图片的URL。如果图片尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。 例如： ,添加背景颜色,使用body标签的bgcolor属性可以给HTML页面指明背景颜色。其值可以是16进制数、RGB值或者是颜色的名称。 例如： ,HTML使用标签来建立一个链接，通常标签又称为锚。一个超级链接可以指向任意一个Web上的资源（一个HTML页面，一张图片，一段声音文件，一

15、部电影等）。 创建超级链接的基本语法格式： 这是要链接的站点(文字、图片) 在和标签之间的文本文字，用户可以单击该文字来实现网页的浏览访问。,六、超级链接,同一页面内的书签链接,当网页的页面较长，且该页面是由几个部分组成时，不得不拖动浏览器的滑动条查看信息，这样既麻烦又费时。HTML恰好提供了跳转功能，能够非常方便、快捷地实现从网页当前的部分跳转到同一网页的另一部分。 建立书签语法： 链接内容 创建书签链接语法： 链接标题,不同页面间的书签链接,书签链接还可以在不同页面间进行链接。当单击书签链接标题，页面会根据链接中的href属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。 建立

16、书签语法： 链接内容 创建书签链接语法： 链接标题,超级链接路径,超级链接标签的属性“href”定义了当前链接所指的目标地址，也就是超级链接路径。在HTML中，主要提供了2种路径：绝对路径和相对路径。,绝对路径,绝对路径就是主页上的文件或目录在硬盘上真正的路径（URL和物理路径）。例如，C:xyzindex.html代表了index.html文件的物理绝对路径；http:/ 1同一级目录的文件链接 假设1.html路径是：c:Inetpubwwwrootsites admin1.html 假设2.html路径是：c:Inetpubwwwrootsites admin2.html 1.html文件和2.html文件在同一个文件夹， 1.html文件链接到2.html文件，可以在