网页制作技巧.pptVIP

1. 一定要闭合标签 在以往的页面源代码里，经常看到这样的语句： liSome?text?here.?? liSome?new?text?here.?? liYou?get?the?idea 2. 声明正确的文档类型( DocType ) DOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面包含的 是HTML，XHTML，还是两者混合出现，这样浏览器才能正确的解析标记。 通常有四种文档类型可供选择： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd 3.? 不要使用嵌入式CSS样式 象这样： p?style=color:?red;Oncoding编码营/p? ?这样看起来即方便又没有问题，但是它会在你得代码中产生问题。 在你开始写代码时，最好是在内容结构完成之后再开始加入样式代码。 4. 在页面head标签中引入所有的样式表文件 在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 ? —— ySlow团队 5. 开发中随时进行标准验证 6. 下载并使用Firebug 7. 使用UL列表布局导航菜单 通常网站都会有导航菜单，你可以用这样的方式定义： p?id=nav?? ?a?href=#Home?/a?? ??a?href=#About?/a?? ??a?href=#Contact?/a?? /p? 如果你想书写优美的代码，那最好不要用这种方式， 为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的 最好这样定义： ul?id=nav?? ??lia?href=#Home/a/li?? ??lia?href=#About/a/li?? ??lia?href=#Contact/a/li?? /ul? 8. 使用一个好的代码编辑器 InType E-Text Editor Notepad++ Aptana Dreamweaver CS4  9. 为所有的图片加上Alt属性 为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。 Firefox不支持显示图像Alt属性，可以加入title属性： img?src=cornImage.jpg?alt=图片标题 title=图片标题 /?  10. 查看源代码 起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬！ 留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。 11. 学习Photoshop Photoshop是前端工程师的一个重要工具，如果你已经熟练掌握HTML和CSS，那不妨多学习一下Photshop。 花费几个小时的时间学习Photoshop的快捷键操作 12. 关于PSD切片 现在你已经掌握了HTML、CSS、Photoshop知识，那么你还需要学习如何把PSD转换为网页上的图片和背景，有两个不错的教程： Slice and Dice that PSD From PSD to HTML/CSS 13.学会熬夜 柳暗花明或豁然开朗的时刻通常都发生在深夜 *