第1章网页基础
北京科技大学远程教育课件
4、HTML 的基本工作原理
HTML（超文本标记语言）是表示网页的一 种标准，它通过标记符来标记要显示网页的 各个部分。 浏览者通过浏览器访问 Web 服务器上的网 页，而网页的本质是 HTML 源代码通过在网 页中添加标记符，可以告诉浏览器如何显示 网页，即确定内容的格式。浏览器按顺序阅 读网页文件（HTML文件），然后根据内容 周围的HTML标记符解释和显示各种内容。
北京科技大学远程教育课件
演示——属性的作用
北京科技大学远程教育课件
Web页的基本结构
1. 2. 3.
一个 Web 页实际上对应于一个 HTML 文 件，HTML 文件以 .htm 或 .html 为扩展 名。 最基本的HTML文档包括： HTML标记<HTML></HTML> 首部标记<HEAD>和</HEAD> 正文标记<BODY></BODY>。
北京科技大学远程教育课件
HEAD标记符
首部标记<HEAD>和</HEAD>位于 Web 页的开头，是HTML文件头标记符，用来描 述HTML首部的内容，说明文档的整体信息 。所有首部信息并不会出现在利用WWW浏 览器所看到的窗体中。而是提供一些与 Web 页有关的特定信息。 <HEAD><／HEAD> 通常与某些标记符一起使用，如<TITLE>< ／TITLE>标记符。
北京科技大学远程教育课件
演示——设置网页背景颜色
北京科技大学远程教育课件
背景图案
使用 BODY 标记符的 background 属性可以 设置背景图案。 HTML语句为： <BODY background=“网页背景图案的地址 ”>
北京科技大学远程教育课件
演示——设置网页背景图案
北京科技大学远程教育课件
北京科技大学远程教育课件
显示特殊字符
例如，要在 Web 页中显示以下内容，则需使 用参考字符：“1<2” <BODY>1<2</BODY>
北京科技大学远程教育课件
演示——特殊字符的显示
北京科技大学远程教育课件
Part 3
网页制作工具
北京科技大学远程教育课件
网页编辑工具
常用网页编辑器
网站设计
设计页面的布局
– 页面设计草图 – 导航系统的设计
»设计原则：通过最少的点击次数得到最多的信息量。 »保持风格一致，提供页面的位置信息，提供返回上级 页面的链接
北京科技大学远程教育课件
网站设计
小节
Web
北京科技大学远程教育课件
背景颜色
在<BODY>标记符中使用bgcolor属性可以 为网页设置背景颜色， 设置正文和超链接颜色时，可以使用BODY标 记符的text、link、vlink和alink属性。其中， text属性用于设置正文的颜色；link属性用于 设置未被访问的超链接的颜色；vlink用于设 置已被访问过的超链接的颜色；alink用于设 置活动超链接（即当前选定的超链接）的颜 色。
北京科技大学远程教育课件
静态网页与动态网页
所谓动态网页，是指根据用户的请求，由服务器动 态生成的网页。例如，ASP网页，PHP网页，JSP 网页。 当 Web 服务器接收到对动态页的请求时，它将该 页传递给应用程序服务器，它读取页上的代码，根 据代码中的指令完成页，然后将代码从页上删除。 所得的结果将是一个静态页，应用程序服务器将该 页传递回 Web 服务器，然后 Web 服务器将该页 发送到请求浏览器。该过程如图所示。
学习重点
HTML语言的语法规则，网页标记符和属性。
学习难点
网页的基本原理；
北京科技大学远程教育课件
Part 1 Internet基础与 WWW
北京科技大学远程教育课件
1、Internet 与 WWW
Internet是全球最大的、开放的、由众多网 络互连而成的计算机互联网，中文译名为“ 国际互连网”或者“因特网”。简单地说， Internet就是将世界各地的计算机网络、主 机和个人计算机通过通信设施和通信协议（ 基于TCP/IP协议簇）互相连接起来所构成 的互联网络系统。
–
北京科技大学远程教育课件
素材处理与创作工具
多媒体制作工具
特效制作工具
– Anfy – Cool 3D – GIF Animator
Flash – Director – Authorware
–
北京科技大学远程教育课件
Part 4
网站开发流程
北京科技大学远程教育课件
概述
首先定义开发网站的目的；接下来对网站的 外观进行设计；然后进行实际页面的制作； 然后对所制作的网站进行测试，以确保它符 合最初设定的目标；最后是将网站发布。在 将网站发布后还需要有维护工作，以便及时 更新网站内容。
北京科技大学远程教育课件
静态网页与动态网页
应用程序服务器使用户能够使用服务器端的 资源（如数据库）。 动态页可以指示应用程序服务器从数据库中 提取数据并将其插入页的 HTML 中。 例如 ，搜索页面，电子商务网站等。
北京科技大学远程教育课件
Part 2
HTML基础
北京科技大学远程教育课件
标记符基础
北京科技大学远程教育课件
HEAD标记符
首部标记中的内容也用相应的标记符括起来 。例如，样式表（CSS）定义位于 <STYLE>和</STYLE>之间；脚本定义位 于<SCRIPT></SCRIPT>之间。
北京科技大学远程教育课件
TITLE 标记符
在首部标记符中，最基本、最常用的标记符 是标题标记<TITLE>和</TITLE>，用于定 义网页的标题。 当网页在浏览器中显示时，网页标题将在浏 览器窗口的标题栏中显示。
北京科技大学远程教育课件
HTML标记符
<HTML>和</HTML> 是Web页的第一个和最后一 个标记符， <HTML>处于文档的最前端， 表示文档的开始，即浏览器从<HTML>开始 解释。而<／HTML>则位于文件的最后一行 ， Web 页的其他所有内容都位于这两个标记 符之间。这两个标记告诉浏览器或其他阅读 该页的程序，此文件为一个Web页。
北京科技大学远程教育课件
Internet 示意图
北京科技大学远程教育课件
1、 Internet 与 WWW
Internet 提供的服务：
– – – – – – – – –
WWW信息的获取与发布服务（网上冲浪） 电子邮件服务（Email） 文件传输（FTP） 网络游戏 即时信息传递（QQ/MSN）网络电话 电子商务 远程登录（Telnet） 电子公告板 Internet的其它应用
北京科技大学远程教育课件
<HTML> <HEAD> <TITLE> </TITLE> …… 综上所述，一个不包含任何内容的基本 </HEAD> 页文件如下所示： <BODY> <HTML> …… <HEAD><TITLE></TITLE></HEAD> …… <BODY></BODY> </BODY> </HTML> </HTML>
– Macromedia Dreamweaver – Microsoft FrontPage
北京科技大学远程教育课件
素材处理与创作工具
图像浏览与处理
– ACDSee – Photoshop – Fireworks
矢量图创作工具
FreeHand – CorelDraw – Illustrator
北京科技大学远程教育课件
2、WWW 与浏览器
Web的特性 （1）Web是基于超文本语言的； （2）Web是交互的； （3）Web的可设计性； （4）Web的局限性；
北京科技大学远程教育课件
2、WWW 与浏览器
北京科技大学远程教育课件
3、网站与主页
通过超链接连接起来的一系列逻辑上可以视为一个整体一系 列页面的有机集合称为网站（Web Site或Site）。 作为一个组织或个人在 WWW（或其他Web）上开始点的 页面称为主页（Homepage）。“主页”是网站中的一个特 殊页面，它是作为一个组织或个人在 WWW 上开始的页面 ，通常也称为首页，主页中通常包括指向其他相关页面或其 他主页的超链接。 主页是进入一个网站的门户，是整个网站的第一页。通常主 页名称是固定的，例如叫做 index.htm 或 index.html 等 （.htm 或 .html 后缀表示 HTML 文档）。
北京科技大学远程教育课件
2、WWW 与浏览器
WWW是由遍布在 Internet 上的称为 Web 服务器 的计算机组成，它将不同的信息资源有机地组织到一 起，通过浏览器进行浏览。从技术角度上说，WWW 是一种软件，是Internet上那些支持WWW协议和 超文本传输协议HTTP的客户机与服务器的集合，透 过它可以存取世界各地的超媒体文件，包括文字、图 形、声音、动画、资料库及各式各样的内容。 WWW起源于1989年3月，由欧洲量子物理实验室 研究发展起来的主从结构分布式超媒体系统，1990 年底第一套软件正式投入使用。
北京科技大学远程教育课件
