Upgrade to Pro — share decks privately, control downloads, hide ads and more …

网页制作基础

98279b936923035c92fab5c096c1378f?s=47 luke
May 13, 2012

 网页制作基础

LOO2K@网页制作基础

98279b936923035c92fab5c096c1378f?s=128

luke

May 13, 2012
Tweet

Transcript

  1. 网页制作基础 LOO2K@创想灵动 http://loo2k.com/

  2. 预告 notice 1. 网页制作基础知识; 2. 网页代码的编写; 3. 网站制作案例分享;

  3. 预告 notice 1. 不会教你如何使用 Dreamweaver; 2. 不会手把手教你怎么制作网页; 3. 不会有任何复杂的技术;

  4. 为什么不用DW 1. 臃肿,速度慢,过时; 2. 生成垃圾代码; 3. 普通用户的玩具; 4. 有更靠谱的工具;

  5. 不手把手教网页 1. 网页是如何工作的? 2. 需要学习哪些东西? 3. 该如何学习网页制作? 那要教什么?

  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: Internet Explorer 6: Internet Explorer 6: Internet

    Explorer 6: 微软2000年推出的一款浏览器, 至今已历史悠久。 现代浏览器 现代浏览器 现代浏览器 现代浏览器: : : : 推荐使用性能优越的 「谷歌浏览器」
  12. 网页在浏览器里工作 在浏览器里 访问一个网站网址 网站所在 的服务器 返回代码 给浏览器 浏览器 显示

  13. 编辑网页 edit 1. 网页是一个 html 文件; 2. 如何编辑网页; 3. 编辑工具

    记事本;
  14. 网页是个 HTML 文件

  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> <p id="para">段落</p> </body> 元素 元素 元素

    元素 ( ( ( (标记 标记 标记 标记) ) ) ): : : : h1~h6, 标题 p, 段落 ul, 列表 …… 属性: 属性: 属性: 属性: 属性名=“属性值” 例子中,id的属性值为para 元素结束标记: 元素结束标记: 元素结束标记: 元素结束标记: 多为</元素名>
  21. HTML 超文本标记语言 <body> <h1>标题</h1> <p id="para">段落</p> <a href="http://loo2k.com">链接</a> </body> A

    A A A元素 元素 元素 元素 : : : : 代表的是一个超链接 href href href href属性 属性 属性 属性 : : : : 链接指向的地址 链接文字 链接文字 链接文字 链接文字 : : : : 标签包含的文字
  22. HTML 超文本标记语言

  23. HTML 超文本标记语言 <body> <h1>标题</h1> <p id="para">段落</p> <img src="http://loo2k.com/avatar.png" alt="pic" />

    </body> IMG IMG IMG IMG元素 元素 元素 元素 : : : : 代表的是一个图片 src src src src属性 属性 属性 属性 : : : : 指向图片的地址 自结束标签 自结束标签 自结束标签 自结束标签 : : : : 直接在标签内结束
  24. HTML 超文本标记语言

  25. 如何学习 HTML 1. 了解 HTML 的历史 (wikipedia); 2. 多翻几遍文档 (w3school.com.cn);

    3. 了解常用的 HTML 元素; 4. 用!
  26. CSS 层叠样式表 <head> <style type="text/css"> #para { font-weight: bold; font-size:

    18px; color: red; } </style> </head> 选择 id 属性值 为para的元素 1. 字体为粗体; 2. 字体大小18px; 3. 字体颜色为红; style元素
  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 { background-color: grey; text-align:

    center; border: 1px solid black; } </style> </head> 选择标签为 h1 的元素 1. 背景颜色为灰色; 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"> alert('网页制作第一课'); </script> script元素 在网页中弹出一个窗口,并显 示“网页制作第一课 网页制作第一课

    网页制作第一课 网页制作第一课”
  33. JavaScript 脚本语言

  34. JavaScript 脚本语言

  35. 如何学习 JavaScript 1. 了解 JavaScript 的历史 (wikipedia); 2. 多翻几遍文档 (w3school.com.cn);

    3. 了解基本的编程概念; 4. 用!
  36. 只有这么多么? NO!

  37. None
  38. 放心 be ease 初学者只要掌握好 HTML&CSS 就能做出 普通的网页了。

  39. 案例分享 case share 嘉应学院名师讲坛专题网 http://210.38.160.89/msjt

  40. None
  41. 网页制作流程 process 确认网站主题,确认风格 画草图&分镜表 绘图工具制作效果图

  42. 网页制作流程 process 调试&除错 上传到服务器发布 编写HTML结构,CSS实现样式,JS实现效果

  43. 确认主题风格 BLUE 蓝色 蓝色 蓝色 蓝色: : : : 蓝色属于冷色调,让人联想到

    海洋,天空。代表着沉稳、冷 静、稳重以及智慧。能凸显名 师讲坛的主题。
  44. 画草图&线框图 画草图和线框图是为了让自 己确认网页的大致效果; 而且先画草图的成本比你一 上来就开始做PS效果图或者 敲网页代码低;

  45. PS 绘制效果图

  46. 编写代码

  47. 调试&除错

  48. 上传到服务器发布

  49. 提问时间 Q&A

  50. 联系 Contact � 邮箱:loo2km@gmail.com � 博客:loo2k.com � 微博:@LOO2K � Twitter:

    @LOO2K
  51. Thanks ☺