Download as PDF, PPTX
![[译]Efficient, maintainable CSS](https://cdn.slidesharecdn.com/ss_thumbnails/efficient-091215042328-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
网页制作基础
- 1. 网页制作基础 LOO2K@创想灵动 http://loo2k.com/
- 2. 预告 notice 1.网页制作基础知识； 2. 网页代码的编写； 3. 网站制作案例分享；
- 3. 预告 notice 1. 不会教你如何使用Dreamweaver； 2. 不会手把手教你怎么制作网页； 3. 不会有任何复杂的技术；
- 4. 为什么不用DW 1. 臃肿，速度慢，过时； 2. 生成垃圾代码； 3. 普通用户的玩具； 4. 有更靠谱的工具；
- 5.
- 6. 没有复杂的技术 1. 这是一节基础课； 2. 给网页制作初学者； 3.你需要了解一些基本概念；
- 7. 开始学习 begin 1. 网站服务器 server； 2. 域名 domain； 3. 浏览器 browser； 4. 编辑网页 edit； 5. 网页代码 webpage；
- 8. 网站服务器 server 1.放在机房里面的一台电脑； 2. 存放网站和网页的地方； 3. 不关机，有网络，随时随地访问； 4. 固定的访问地址 eg. 210.38.160.89 ；
- 9. 域名 domain 1.顶级域名 eg. loo2k.com； 2. 绑定服务器的地址，帮助记忆； 查询域名 访问域名 访问地址 对应的IP地址
- 10. 浏览器 browser 1. 有哪些浏览器？ 2.网页如何在浏览器里面工作？
- 11. Internet Explorer 6: 微软2000年推出的一款浏览器， 至今已历史悠久。 现代浏览器: 现代浏览器: 推荐使用性能优越的 「谷歌浏览器」
- 12. 网页在浏览器里工作 在浏览器里 网站所在 访问一个网站网址 的服务器 显示 返回代码 浏览器 给浏览器
- 13. 编辑网页 edit 1.网页是一个 html 文件； 2. 如何编辑网页； 3. 编辑工具 记事本；
- 14.
- 15. 如何编辑网页 网页的背后是一个HTML 文 档，编辑一个 HTML 文档就 相当于在编辑一个网页。
- 16. 编辑工具 1.创建一个记事本文件； 2. 重命名为 index.html； 3. 打开方式使用记事本；
- 17. 网页代码 webpage 1. HTML （结构&内容） 2. CSS （样式） 3. JavaScript （动作）
- 18. HTML 超文本标记语言 <!DOCTYPE HTML> 文档声明 <html> <head> <meta charset="UTF-8"> <title>网页制作第一课</title> 文档标题 </head> <body> <p>这是一个段落。</p> 文档内容 </body> </html>
- 19. HTML 超文本标记语言 文档内容 文档标题
- 20. HTML 超文本标记语言 <body> 元素 (标记)： 标记) <h1>标题</h1> h1~h6, 标题 <p id="para">段落</p> p, 段落 </body> ul, 列表 …… 属性： 属性名=“属性值” 元素结束标记： 例子中，id的属性值为para 多为</元素名>
- 21. HTML 超文本标记语言 <body> <h1>标题</h1> <p id="para">段落</p> <a href="http://loo2k.com">链接</a> </body> A元素 ： href属性 ： href属性 链接文字 ： 代表的是一个超链接 链接指向的地址 标签包含的文字
- 22.
- 23. HTML 超文本标记语言 <body> <h1>标题</h1> <p id="para">段落</p> <img src="http://loo2k.com/avatar.png" alt="pic" /> </body> IMG元素 ： IMG元素 src属性 ： src属性 自结束标签 ： 代表的是一个图片 指向图片的地址 直接在标签内结束
- 24.
- 25. 如何学习 HTML 1. 了解HTML 的历史 (wikipedia)； 2. 多翻几遍文档 (w3school.com.cn)； 3. 了解常用的 HTML 元素； 4. 用！
- 26. CSS 层叠样式表 <head> <style type="text/css"> style元素 选择 id 属性值 #para { 为para的元素 font-weight: bold; font-size: 18px; color: red; 1. 字体为粗体； } 2. 字体大小18px； </style> 3. 字体颜色为红； </head>
- 27. CSS 层叠样式表 1. 字体为粗体； 2. 字体大小18px； 3. 字体颜色为红；
- 28. CSS 层叠样式表 <head> <style type="text/css"> #para{ 元素选择器 font-weight: bold; font-size: 18px; color: red; 属性值 } </style> 属性 </head>
- 29. CSS 层叠样式表 <head> <style type="text/css"> 选择标签为 h1 h1 { background-color: grey; 的元素 text-align: center; border: 1px solid black; } </style> 1. 背景颜色为灰色； </head> 2. 文字居中； 3. 边框为1像素的黑色；
- 30. CSS 层叠样式表 1. 背景颜色为灰色； 2. 文字居中； 3. 边框为1像素的黑色；
- 31. 如何学习 CSS 1. 了解CSS 的历史 (wikipedia)； 2. 多翻几遍文档 (w3school.com.cn)； 3. 了解 CSS 选择器和常用属性； 4. 用！
- 32. JavaScript 脚本语言 <script type="text/javascript"> script元素 alert('网页制作第一课'); </script> 在网页中弹出一个窗口，并显 网页制作第一课 示“网页制作第一课 网页制作第一课”
- 33.
- 34.
- 35. 如何学习 JavaScript 1.了解 JavaScript 的历史 (wikipedia)； 2. 多翻几遍文档 (w3school.com.cn)； 3. 了解基本的编程概念； 4. 用！
- 36. 只有这么多么？ NO!
- 38. 放心 be ease 初学者只要掌握好 HTML&CSS就能做出 普通的网页了。
- 39. 案例分享 case share 嘉应学院名师讲坛专题网 http://210.38.160.89/msjt
- 41. 网页制作流程 process 确认网站主题，确认风格 画草图&分镜表 绘图工具制作效果图
- 42. 网页制作流程 process 编写HTML结构，CSS实现样式，JS实现效果 调试&除错 上传到服务器发布
- 43. 确认主题风格 蓝色: 蓝色: 蓝色属于冷色调，让人联想到 海洋，天空。代表着沉稳、冷 BLUE 静、稳重以及智慧。能凸显名 师讲坛的主题。
- 44. 画草图&线框图 画草图和线框图是为了让自 己确认网页的大致效果； 而且先画草图的成本比你一 上来就开始做PS效果图或者 敲网页代码低；
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. 联系 Contact � 邮箱：loo2km@gmail.com �博客：loo2k.com � 微博：@LOO2K � Twitter: @LOO2K
- 51.