跟我一起学MiniOA：第一章 网页制作基础知识(连载)

网页，大家都熟知的名词，一个 html 文件是网页，博客也由网页组成， 163 网站也由网页组成， OA 系统也是，它们都基于浏览器，统称 Web Application 。这里我们不得不提 B/S 结构和 C/S 结构， B/S 结构，即浏览器 / 服务器模式，基于浏览器的应用程序都属于 B/S 结构，最大特点是只需要在服务器上部署程序，其他用户只需要在浏览器中输入服务器地址即可使用系统； C/S 结构，即客户机 / 服务器模式，例如 QQ ，最大特点是需要在每台客户端上安装程序，每台客户端有较强的数据处理能力。我们要讲解的 MiniOA 就是 B/S 结构。
 

我从大一的时候将开始学习如何做网页，还花钱买空间做网站，大四毕业时也才会一点，学习过程堪称红军长征，时间漫长，进步却很小，甚至写个 access 数据库查询页面都感觉吃力。但是接触了 FrontPage 、 Macromedia Dreamweaver 、 PhotoShop 、 Macromedia Flash 等众多工具，好处还是很明显的。现在，做网页不再借助 FrontPage 和 Dreamweaver ，直接用记事本（ UltraEdit ），用 PhotoShop 处理个图片，也明白自己没有多少艺术细胞，做的 Flash 动画拿不出手，做个首页也是那么难看。所以还是找做自己擅长的，相比之下，还是写代码吧。


我们先从网页的后缀名讲起吧，比较常见的后缀名有 .htm,.html,.asp,.jsp,.aspx,.php ，不同的后缀名表明服务器对他们处理的方式不同。 .htm 或 .html ，或称静态网页， Web 服务器将此类网页直接输出到浏览器端。而 .asp,.jsp,.aspx,.php ，或称动态网页， Web 服务器先使用编译器将网页编译或解释成 html 形式的网页，然后再输出到浏览器端。静态网页的访问速度一般比动态网页要快。

做简单的网页，我们并不需要使用编程语言。编程语言有浏览器端编程语言和服务器端编程语言之分。浏览器端编程语言，或称脚本语言，指的是 JavaScript 和 VBScript 。服务器端编程语言，或称动态编程语言，有 ASP 、 ASP.NET 、 PHP 、 JSP 、 JSF 等，应用比较多的应该是对数据库进行增、删、改、查询等操作。
 

网页依赖于浏览器，不同的浏览器，同一浏览器不同的版本，所支持的技术并不一样，在我们制作网页的过程中，浏览器的兼容性值得考虑。


现在，我关注网页代码一块，美工设计、 Flash 动画不再深究。做个漂亮的网页其实也不难，网上下载一个漂亮的 CSS 样式模版，然后修改修改就行了。


能够灵活的利用网络资源是建立在对各种知识熟悉的基础之上的，你可以不精通，可以不用熟知每一个函数，但不能不知这些技术的使用方法。以下讲解的内容，都可以在网站 www.w3schools.com 上找到详细的教程和案例演示。


接下来，我将逐一介绍做网页应该熟知的技术。


1.1 HTML

超文本标记语言（ HyperText Markup Language ），简称 HTML ，它是一种标记语言，不是一种编程语言。我们用 HTML 标记标签来设计网页，保存为 .html 或 .htm 。

创建第一个网页 HelloWorld.html

我们在桌面上创建一个文本文件，重名为 HelloWorld.html ，用记事本打开，输入一下内容：

 ＜html＞

 ＜head＞ ＜/head＞

 ＜body＞

                    ＜p＞Hello World! ＜/p＞

 ＜/body＞

 ＜/html＞

然后用浏览器打开它。

接下来，我看看实际的网页是什么样子的。在浏览器中输入 http://news.163.com/ ，在网页上右键，选择“查看网页源代码”。大部分代码被省略，我们只做简单介绍，灰色背景标记的文字是我对下一行代码的说明。

此行告知浏览器文档使用哪种 HTML 或 XHTML 规范，一般不用改，建议制作网页时不要遗忘这行代码

 ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

定义命名空间

 ＜html xmlns="http://www.w3.org/1999/xhtml"＞

网页头区域，设置网页标题，字符集、关键字、样式、脚本等等。

 ＜head＞

设置字符集为 gb2312 ，有的设置成 gbk 、 utf-8 等

 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞

设置网页标题

 ＜title＞ 网易新闻  ＜/title＞

告诉网页中的链接如果没有指定目标，就在新窗口中打开

 ＜base target="_blank" /＞

设置网页的关键字和描述，便于搜索引擎识别，网站优化必须做的工作

 ＜meta name="keywords" content=" 新闻 , 新闻中心 , 新闻频道 , 时事报道 " /＞

 ＜meta name="description" content="" /＞

微软官方解释，如果浏览器是 IE8 ，就使用按照 IE7 的方式进行渲染，其实就是兼容 IE8

 ＜meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /＞

如果浏览器是 IE6 就执行特定代码或样式

 ＜!--[if IE 6]＞

 ＜script＞ ＜/script＞

 ＜![endif]--＞

层叠样式表 CSS 定义

 ＜style＞

……

 ＜/style＞

网页头区域结束

 ＜/head＞

网页正文，或主体区域，网页中展示的内容都在这个区域内定义

 ＜body id="body"＞

注释

 ＜!-- 新闻顶部 --＞

DIV 区域定义，可设置 ID 属性，便于 CSS 和脚本控制

 ＜div id="icastid"＞ ＜/div＞

也可直接设置 style 属性

 ＜div class="NTES_nav_" style="height:30px; overflow:hidden;"＞

 ＜/div＞

class 属性，也是用来定义 CSS 的

 ＜div class="ggarea clearfix"＞

span 中并没有内容，此处用来设置指定大小的空白区域，具体设置在 blank6 样式中

           ＜span class="blank6"＞ ＜/span＞

这是一个列表，通过指定 ul 的样式属性，可以设置是横排还是竖排。

 ＜ul class="ggtext"＞

 ＜li＞ ＜a href="http://www.iclick.cn/survey/10/?fid=5"＞ 网民行为有奖调研  ＜/a＞ ＜/li＞

 ＜li＞ ＜a href="…"＞VIP126 一邮多名首发  ＜/a＞ ＜/li＞

 ＜li＞ ＜a href="…"＞ 国内首款 2D 横版网游  ＜/a＞ ＜/li＞

 ＜li＞ ＜a href="http://help.3g.163.com/"＞ 手机上网易看实时新闻  ＜/a＞ ＜/li＞

 ＜li＞ ＜a href="…"＞ 史上最温馨新年祝福  ＜/a＞ ＜/li＞

 ＜li＞ ＜a href="…"＞ 网易首款桌面邮箱软件  ＜/a＞ ＜/li＞

 ＜li＞ ＜a href="…"＞ 手机卡购点卡便捷安全  ＜/a＞ ＜/li＞

 ＜/ul＞

定义搜索区域，用 div 目的是便于布局。

 ＜div class="top_search"＞

搜索表单，结果提交给 action 属性指定的网址

 ＜form target="_blank" id="formtop" name="nisearch_top" method="get" action="http://news.yodao.com/search"＞

隐藏数据，随表单提交

 ＜input type="hidden" value="news.163" name="keyfrom"/＞

 ＜input type="hidden" value="user163" name="suser"/＞

 ＜input type="hidden" value="gbk" name="ue"/＞

文本框

 ＜input type="text" class="textBox" value=" 请输入关键词 " onfocus="this.value=''" id="searchInput_top" name="q"/＞

如果浏览器不支持脚本，就显示标记内的 元素

 ＜noscript＞

下拉框

 ＜select name="site" class="left"＞

 ＜option value=" 网易 " selected="selected"＞ 新闻  ＜/option＞

 ＜option value=""＞ 网页  ＜/option＞

 ＜/select＞

 ＜/noscript＞

搜索按钮，点击后提交表单

 ＜input type="submit" class="btn" value=" 搜索 " name="Submit"/＞

 ＜/form＞

 ＜/div＞

网页 body 中任何时候都可以方式脚本代码，一般来说放在 head 区域中比较好

 ＜script type="text/javascript"＞

 ＜/script＞

 ＜/body＞

 ＜/html＞

 

编写网页时，编码一定要规范，该关闭的标记一定要标记，虽然标记不区分大小写，但是要统一，培养良好的编码风格，考虑不同浏览器的兼容性。注意字符集设置，网页文件默认存储的是 ASCII 编码格式，有时我们需要保存为 utf-8 编码格式。会使用 ASCII 码代替符号的输入，例如   表示空格， ' 表示单引号。


HTMl 和 XML

XML 指可扩展标记语言（ EXtensible Markup Language ） , 是一种标记语言，很类似 HTML ，它的设计宗旨是传输数据，而非显示数据，它标签没有被预定义，需要自行定义标签。它被设计为具有自我描述性。 XML 不是 HTML 的替代，两者设计目的不同， XML 被设计为结构化、传输和存储数据，其焦点是数据的内容。 HTML 被设计用来显示数据，其焦点是数据的外观。 HTML 旨在显示信息，而 XML 旨在传输信息。

HTMl 和 XHTMl

XHTML 指可扩展超文本标签语言（ EXtensible HyperText Markup Language ），它的目标是取代 HTML ，它与 HTML 4.01 几乎是相同的，是更严格更纯净的 HTML 版本，它是作为一种 XML 应用被重新定义的 HTML 。我们将来开发 MiniOA 的网页文件将都是 xhtml 格式的。

HTML 和 DHTML

DHTML 是 Dynamic HTML 的简称，就是动态的 html ，是相对传统的静态的 html 而言的一种制作网页的概念。 DHTML 不是一种技术、标准或规范，只是一种各种技术的整合运用。这些技术包括 Javascript 、 VBScript 、 Document Object Model （文件目标模块）简称 DOM 、 Layers 和 Cascading Style Sheets （ CSS ）等。


CSS 层叠样式表

CSS 指层叠样式表 (Cascading Style Sheets) ，用于设置网页布局、背景设置、字体颜色、字体大小、对齐方式、行间距、边框样式、定位等，控制网页风格样式的必备技术。


JavaScript 脚本

JavaScript 是可在浏览器中执行的编程语言，可以用来改进设计、验证表单、检测浏览器、创建 cookies ，以及更多的应用。 JavaScript 是因特网上最流行的脚本语言，相比 VBScript ，我比较喜欢使用它，两者脚本语言各有所长，建议在掌握 JavaScript 的前提下，也应该掌握 VBScript 。 JavaScript 是一门语言，内容丰富，需要花时间学习。在实际工作中，我经常会用到以下两个函数 getElementById() 和 getElementsByName() ，例如要获取 id 为 username 的文本框的值，就可以在脚本中使用 document.getElementById(' username ').value 取值。通常我们使用 jQuery 来简化 JavaScript 编程， jQuery 是用 JavaScript 编写的组件库，当然还有其它优秀的 JavaScript 组件库。

Ajax 技术

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX ，可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象， JavaScript 可在不重载页面的情况与 Web 服务器交换数据。在浏览器与 Web 服务器之间使用异步数据传输（ HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。使用 Ajax 可使因特网应用程序更小、更快，更友好。


VBScript 脚本

VBScript 是微软的编程语言 Visual Basic 的轻量级的版本。


PhotoShop 图片处理

使用 PhotoShop 制作 jpg 或 gif 图片，至少会修改图片大小，转换图片格式。做网页少不了使用各种图标，建议可以在网上直接下载。


Flash 动画制作

我以前下定决心要认真学习 Flash 制作，但终究还是因为没有艺术细胞放弃了。碰到一些 Flash 应用，例如 Flash banner 和 Flash 菜单，我都使用 Flash Banner Creator 之类的工具制作。


关于动态网页制作，我们将重点讲解 jsf 和 javabean 技术。