前端（交互）

美工（设计） 前端（交互）后台（服务器）

前端（交互）

前端（交互） HTML(XHTML,HTML5) CSS(CSS3) JavaScript(Ajax)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <blockquote cite=“http://www.w3school.com.cn”> <h1>为 HTML5 建立的一些规则：</h1> <ul> <li>新特性应该基于HTML、CSS、DOM以及JavaScript。</li> <li>减少对外部插件的需求（比如 Flash）</li> <li>更优秀的错误处理</li> <li>更多取代脚本的标记</li> <li>HTML5 应该独立于设备</li> <li>开发进程应对公众透明</li> </ul> </blockquote> </body> </html> <body> <blockquote cite=“http://www.w3school.com.cn”> <h1>HTML5 中的一些新特性：</h1> <ul> <li>用于绘画的 canvas 元素</li> <li>用于媒介回放的 video 和 audio 元素</li> <li>对本地离线存储的更好的支持</li> <li>新的特殊内容元素，如 article、footer、header、nav、section</li> <li>新的表单控件，如 calendar、date、time、email、url、search</li> <li>。。。</li> </ul> </blockquote> </body> </html>

CSS（Cascading Style Sheets，叠层样式表） Example: <p>Some Text</p> P{ padding:15px 10px; background:#4f81bd; border:#FFF soild 1px; } P{ padding:15px 10px; background:#4f81bd; border:#FFF soild 1px; border-radius:5px; box-shadow:10px 10px 5px #888; } Some Text

JavaScript :弱类型、轻量级、最流行的编程语言 Example: <p>Some Text</p> varobj = document.getElementByTagName(“p”); obj.onclick = function(){ this.style.display = “hidden”; } Some Text

Ajax:AsynchronousJavaScript and XML (异步的 JavaScript 和 XML) • AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 • AJAX 是在不重新加载整个页面的情况下，与服务器交换数据 • 并更新部分网页的艺术，。

前端（交互） 开发工具 · Dreamweaver ·VIM ·Editeplus ·notepad ·zen coding 调试工具 · Firebug ·Webkit调试工具·IE Web Developer ·IE Test ·JSLint·JSBeautifier·JSCompress

书籍推荐

书籍推荐 • 《javascript精粹》 • 《css设计指南（第三版）》 • 《javascript权威指南》

THX！

前端（交互）

前端（交互）

Presentation Transcript