繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 简单介绍Web Developer插件制作网页
- CSS样式表
- css 简单区别ie6,ie7,firefox的写法
- 解决在IE6下文字溢出（多出一行字）的解决方法小结
- 纯css 鼠标移上查看大图的效果
- css 完美清除浮动的两种解决方案
- css 透明度的设置兼容所有浏览器
- pre 自动换行的问题
- CSS 图片定位的几种方式
- div+css学习笔记(IE与fox好多不兼容的问题)
- 让你的页面对 IE6 显示出黑白色(多浏览器)
- li 自适应宽度
- 样式表达式实现交替显示table行颜色
- css 控制图片大小 小于固定值 控制大小
- CSS 各种滤镜代码解释 用法案例
- 针对firefox ie6 ie7 ie8的css样式hack
- CSS 样式 层裁剪图片
- 十个非常实用的CSS属性(IE不支持)
- CSS渲染速度改善的十个方法与建议
- css z-index 最大值
- css z-index 在IE中的迷惑
- IE与Firefox中兼容的html设计中使用CSS改变鼠标为手形
CSS样式表 中的 简单介绍Web Developer插件制作网页
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 57 ::
收藏到网摘: n/a
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. 结语
这里只不过给出了步骤性的教程，一个网页是否显示良好，更主要的是你的艺术感觉和你的经验。
Firefox浏览器插件的中文网址是 http://addons.mozine.org/
Web Developer插件的下载地址是 http://addons.mozine.org/addon.php?id=32
使用带有语法着色功能的文本编辑器输入文本，利用段落来结构化你的文本。
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. 结语
这里只不过给出了步骤性的教程，一个网页是否显示良好，更主要的是你的艺术感觉和你的经验。
Firefox浏览器插件的中文网址是 http://addons.mozine.org/
Web Developer插件的下载地址是 http://addons.mozine.org/addon.php?id=32
现在，你已经写好了一个纯HTML的网页。即使这样，它在浏览器下也应该具有良好的显示。否则说明你的结构化过程不够成功，查看代码，找出是否有需要改进的地方。
5. 应用Web Developer插件来设计完整的CSS样式表，使用网页的显示更加完好
用鼠标右键单击网页，选择菜单Web Developer-->CSS-->Edit Css，打开可编辑CSS的侧栏。在里面输入CSS代码，你的代码将立即作用于网页。所以，这也是另一种意义上的可视化网页制作方式。在调试定位的时候， 你可以为对象加上不同颜色的边框，这样可以使用对象间的位置关系更加显然。
为了防止代码丢失，经常把你的CSS代码保存在你所创建的CSS文件中。
6. 收尾
当你对页面的显示已经相对满意的时候，在IE，Opera和其它你所能弄到的浏览器里查看你的网页的显示效果。如果有差异，以Firefox为准，并利用hack消除在IE中的差异。
7. 结语
这里只不过给出了步骤性的教程，一个网页是否显示良好，更主要的是你的艺术感觉和你的经验。
Firefox浏览器插件的中文网址是 http://addons.mozine.org/
Web Developer插件的下载地址是 http://addons.mozine.org/addon.php?id=32
当你对页面的显示已经相对满意的时候，在IE，Opera和其它你所能弄到的浏览器里查看你的网页的显示效果。如果有差异，以Firefox为准，并利用hack消除在IE中的差异。
7. 结语
这里只不过给出了步骤性的教程，一个网页是否显示良好，更主要的是你的艺术感觉和你的经验。
Firefox浏览器插件的中文网址是 http://addons.mozine.org/
Web Developer插件的下载地址是 http://addons.mozine.org/addon.php?id=32
评论 (0) All
