日期:2014-02-17  浏览次数:21164 次

网页制造aiyiweb文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。由于Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。

Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。由于Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。

Firefox默认安装包只要8M(Linux版)和5M(Win版),安装后功用较少。为了能制造网页,我们需求安装Web Developer插件。下面我就引见一下我使用使用Firefox + Web Developer插件制造网页的简单过程。

1. 设计好你的页面的粗略内容,结构化它们

你可能是在心里设计,也可能是在纸上设计,也可能在电脑里用PhotoShop设计。我强调,先有内容,再有表现。但是不是先有所有的内容然后再来设计表现,我认为内容由于占主导地位。将内容分类,也就是结构化。

2. 把内容的文本输入HTML文件中,设计和收集将要使用的图像

使用带有语法着色功用的文本编辑器输入文本,利用段落来结构化你的文本。

3. 用HTML/XHTML标签括住内容的文本

由于你曾经将文本结构化好了,那么轻易就可以用标签将它们括住---次要使用div标签,列表内容使用列表标签。为重要的标签(到底哪一些标签是重要的,你在结构化的时候曾经想好)分配id属性和class属性。创建一个空白的CSS文件,并在网页中援用它。

4. 用Firefox浏览器打开HTML文件浏览器

如今,你曾经写好了一个纯HTML的网页。即便这样,它在浏览器下也应该具有良好的显示。否则说明你的结构化过程不够成功,查看代码,找出能否有需求改进的地方。

5. 使用Web Developer插件来设计完整的CSS款式表,使用网页的显示愈加完好

用鼠标右键单击网页,选择菜单Web Developer-->CSS-->Edit Css,打开可编辑CSS的侧栏。在里面输入CSS代码,你的代码将立即作用于网页。所以,这也是另一种意义上的可视化网页制造方式。在调试定位的时候, 你可以为对象加上不同颜色的边框,这样可以使用对象间的位置关系愈加显然。

为了防止代码丢失,经常把你的CSS代码保存在你所创建的CSS文件中。

6. 收尾

当你对页面的显示曾经绝对满意的时候,在IE,Opera和其它你所能弄到的浏览器里查看你的网页的显示效果。如果有差异,以Firefox为准,并利用hack消弭在IE中的差异。

7. 结语

这里只不过给出了步骤性的教程,一个网页能否显示良好,更次要的是你的艺术感觉和你的经验。