网页设计的方法

第一章

基础教程

开始学习

在这第一课中，我们简要介绍制作网站所需的工具。

需要哪些工具？

十之八九，你已经拥有所需的全部工具了。“浏览器（

browser

）”你有了，它是用于浏览

网站的程序。你现在就是通过浏览器在观看本页面的。

游览器有很多可供选择，

最普及的浏览器当属微软

Microsoft

公司的 Internet Explorer

（俗称“IE”）

，

其他的一些浏览器包括

Opera Mozilla Firefox

（俗称“火狐狸”或“火

狐”）等。这些浏览器的基本功能都是浏览网页，因此具体使用哪个浏览器是无所谓的。

也许你听说过、甚至用过一些

网页制作

工具，比如

Microsoft FrontPage

、

Macromedia 

Dreamweaver

、

Microsoft 

Word

等。现在可以忘掉这些程序了！它们对你学习

网页制作

没有

什么帮助。

相反，

你需要的是一个简易的文本编辑器。

如果你正在使用

Windows

（微软视窗）

操作系统的话，你可以使用它自带的记事本（

Notepad

）程序。你可以依次点击“开始菜单

→程序→附件”找到该程序。

常德网站建设-万讯互动

我爱CSS 
float属性用以定义元素的漂浮方式：靠左还是靠右。下例展示了该属性的用法： 例4：   
该例在浏览器中将显示如下： 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat... 
In the example, one element (the image) floats to the left and the other element (the text) fills the hole. 
With the property position, you can place an element exactly where you want it in your page: 例5： 
常德网站建设，常德网站设计，万讯互动img src=http://www.cdwanxun.com"bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" /> 显示示例  在该例中，图像被放置在浏览器中位于距底端50象素、距右边界10象素的位置。这里只是一个例子，实际上你可以把它放在你所期望的任何位置上。试一试吧！挺容易，而且很酷，是吧？ 
确实很酷。 但不容易吧？ 
当然，你不可能在十分钟内学会CSS。正如前面所提到的，这一课只对CSS作简要的介绍。以后，你可以从我们提供的CSS教程中学到更多CSS知识。 现在，让我们先把精力集中于HTML，继续学习下一课，在那里你将学到如何在因特网上发布自己的网站，让全世界都能看到你的网站。   
常德网站建设，常德网站设计，万讯互动img src=http://www.cdwanxun.com"bill.jpg" alt="Bill Gates" style= "float:left;" /> 常德网站建设，常德网站设计，万讯互动p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,   sed diam nonummy nibh euismod tincidunt ut laoreet dolore  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,  

常德网站建设-万讯互动

 quis nostrud exerci tation ullamcorper suscipit   lobortis nisl ut aliquip ex ea commodo consequat...常德网站建设，常德网站设计，万讯互动/p>   
第十一章 
基础教程:上传网页 
到目前为止，只有你自己能够欣赏到你的网页。现在该让世界上其他人看看你的杰作了。 
客观条件具备了吗？ 
客观条件均已具备——很快你也将准备完毕。只要你有一些服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。 
如果你已开通上网业务，因特网服务提供商（ISP）可能会赠送免费的网页空间，比如它可能具有类似这样的网址：http://home.provider.com/~usernumber。不过，有可能你需要先将它激活。请从因特网服务提供商（ISP）处获得有关如何激活和使用该空间的信息。 
如果因特网服务提供商（ISP）不提供免费网页空间，那么另外一种选择是自己上网获取免费网页空间。就像可以在Hotmail上申请免费e-mail信箱一样，你也可以在网上申请免费的网页空间。有一些公司提供这样的服务，比如 

常德网站建设-万讯互动

你先在左侧（"Local site"里）找到你要上传的HTML文档及图像，然后双击它们，将它们传到服务器（"Remote site"）上。现在全世界的人都可以看到你的网站啦！（比如，通过类似这样的网址http://www.dushuwu.net/folk/htmlnet/page1.htm来浏览）。 
如果你将一个网页文件命名为"index.htm"（或者"index.html"），那么它将自动成为站点的首页。也就是说，当你在浏览器中输入网址http://www.dushuwu.net/folk/htmlnet（未指定文件名）时，实际上打开的将是网页http://www.dushuwu.net/folk/htmlnet/index.htm。 
从长远来看，你最好购买自己的域名（www.dushuwu.net），而不是使用由因特网服务提供商（ISP）或者网页空间提供商免费提供的冗长而难记的网址。   
第十二章 
基础教程:Web标准及验证 
在这一课，你将了解一些有关html的偏理论的知识。 关于HTML，还有什么要了解的？ 
你可以以多种不同的方式来编写HTML；同时，浏览器也可以以多种不同的方式来理解HTML。你可以认为HTML有很多种方言。这就是为什么某些网站会在不同的浏览器上显示出不同效果的原因。 
为了解决这一问题，HTML发明人Tim Berners-Lee先生创办了万维网联盟（World Wide Web Consortium，W3C）来致力于制订通用的HTML标准。但这是一条漫长而艰难的路程。 
过去，在浏览器都要收费的年代里，Netscape曾是占据统治地位的浏览器。那时的HTML标准是2.0和3.2。但是，作为市场份额达90%以上的Netscape，它不必、同时也没有太在意通用标准。相反地，Netscape创造了自己特有的元素，这些元素在其它浏览器上将不起作用。 
在很长一段时间内，微软几乎完全忽略了因特网。但不久之后，微软开始与Netscape竞争，并推出了IE浏览器。尽管IE浏览器（Internet Explorer）的早期版本在支持HTML标准方面比不上Netscape，但由于它是免费提供的（免费总是很受欢迎的），所以IE很快便成为最流行的浏览器。 

常德网站建设-万讯互动

微软从IE的第4版和第5版开始致力于对W3C HTML标准作更多支持。而Netscape则没有设法开发新版浏览器，只是继续供应已经过时的第4版浏览器。 其余的事，大家都知道，就不必提了。今天，HMTL标准已经发展到4.01版和XHMTL。现在，占据市场90%以上的份额的是IE浏览器了。IE也有自己特有的元素，但它也支持W3C HTML标准。同样地，其它的浏览器，比如Mozilla、Opera和Netscape等，都是既有自己特有的元素，也同时支持W3C HTML标准。 
因此，只要你遵循W3C标准来编写HTML，你的网页将永远能在所有浏览器上显示出来。幸运的是，你在本教程学到的是XHTML，它是最新的、更严格、更纯正的HTML版本。 
酷 ！如何向别人透露HTML的版本信息？ 
HTML有很多不同种类，所以你需要告诉浏览器，你的HTML使用的是哪种"方言"（比如XHTML）。具体做法是采用文档类型声明。文档类型声明应写在HTML文档的开头部分： 例1：  
常德网站建设，常德网站设计，万讯互动!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

常德网站建设，常德网站设计，万讯互动html xmlns="http://www.w3.org/1999/xhtml" lang="en">  常德网站建设，常德网站设计，万讯互动head> 
常德网站建设，常德网站设计，万讯互动title>网页标题常德网站建设，常德网站设计，万讯互动/title> 常德网站建设，常德网站设计，万讯互动/head>  常德网站建设，常德网站设计，万讯互动body> 
常德网站建设，常德网站设计，万讯互动p>一些文字常德网站建设，常德网站设计，万讯互动/p> 常德网站建设，常德网站设计，万讯互动/body>  常德网站建设，常德网站设计，万讯互动/html> 

常德网站建设-万讯互动

除了要给出文档类型声明以外（上例中第一行，它告诉浏览器这个文档是XHMTL），还需要在html标签中加入一些信息，也就是添加两个属性xmlns和lang。 
xmlns是"XML-Name-Space"（XML名称空间）的缩写，其值固定为http://www.w3.org/1999/xhtml。关于名称空间，你只需了解这么多。但如果你希望作更多了解的话，可以登录W3C网站阅读有关名称空间（namespaces）的内容。 
lang属性用于指定当前文档所使用的语言，其值采用ISO 639标准中列出的世界各国语言代码。上例中，我们指定文档采用的语言为英语（对应的属性值为"en"）。 
通过HTML文档头部的文档类型声明，浏览器可以知道如何读取和显示你的HTML。今后，可以使用上例作为模板来编写你的HTML文档。 此外，文档类型声明在验证网页时也很有用。 验证？ 为什么要验证文档？如何验证呢？ 
你可以用W3C的免费验证器（validator）来检查你的HTML文档是否符合你在文档类型声明中所指定的类型。 
为了测试如何验证文档，请编写一个网页并将它上传到因特网上，现在，打开网页validator.w3.org，在网页里输入你网页的网址（URL），然后验证它。如果你的HTML没有错误，将显示成功信息。否则，你将会得到错误报告，它会详细告诉你出错的位置和原因。你可以在网页里故意制造一些错误，看看会返回什么样的结果。 
这个验证器不仅仅对找错有帮助。有些浏览器会尽量修复HTML中的错误，按照它们推测的正确结果去显示网页。使用这样的浏览器，你会忽视网页中存在的错误。而该网页在其它的浏览器上看到的效果可能会截然不同，甚至根本无法显示。所以，可以用验证器帮你找到可能被你忽视的错误。 请始终坚持验证你的网页，以确保它们能正确地显示。