17.网页制作技巧.pptVIP

网页设计 在以往的页面源代码里，经常看到这样的语句： liSome?text?here.?? liSome?new?text?here.?? liYou?get?the?idea DOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面用的是哪种DTD 类型，分别为严格版本、过渡版本以及基于框架的 HTML 文档。只有指定了DOCTYPE，浏览器才能正确的解析标记。 象这样： p?style=color:?red;Oncoding编码营/p? ?这样看起来即方便又没有问题，但是它会在你得代码中产生问题。 在你开始写代码时，最好是在内容结构完成之后再开始加入样式代码。 在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 ? —— ySlow团队 W3C CSS验证服务是由W3C制作的一个免费软件，用于帮助Web设计者检查层叠样式表(CSS)。你可以在W3C提供的免费在线服务中使用，也可以下载后作为一个Java程序或者Servlet运行在自己的机器上。 / 5. 开发中随时进行标准验证 如下载并使用Firebug Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等，但FireBug最吸引我的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能还很强大，比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。 通常网站都会有导航菜单，你可以用这样的方式定义： 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? Dreamweaver InType E-Text Editor Notepad++ Aptana 为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。 Firefox不支持显示图像Alt属性，可以加入title属性： img?src=cornImage.jpg?alt=图片标题 title=图片标题 /?  起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬！ 留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。 Photoshop是前端工程师的一个重要工具，如果你已经熟练掌握HTML和CSS，那不妨多学习一下Photshop。 花费几个小时的时间学习Photoshop的快捷键操作 现在你已经掌握了HTML、CSS、Photoshop知识，那么你还需要学习如何把PSD转换为网页上的图片和背景。 DIV+CSS是目前流行的技术，也是最灵和的网页制作技术 百度永远是我们最好的老师 柳暗花明或豁然开朗的时刻通常都发生在深夜 写在最后 * * 第十二章 网页设计成功要诀 曾君 hhjxzj@163.com 1. 一定要闭合标签 2. 声明正确的文档类型( DocType )  3.? 不要使用嵌入式CSS样式 4. 在页面head标签中引入所有的样式表文件  5. 开发中随时进行标准验证 6. 随时关注并下载使用好的开发调试工具 7. 使用UL列表布局导航菜单 8. 使用一个好的代码编辑器 9. 为所有的图片加上Alt属性 10. 查看源代码 11. 学习Photoshop 12. 关于PSD切片 13.习惯用DIV+CSS 14.找最好的老师 15.学会熬夜