网页制作基础

LOO2K@网页制作基础

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. 没有复杂的技术
   1. 这是一节基础课；
   2. 给网页制作初学者；
   3. 你需要了解一些基本概念；
   

   View Slide

7. 开始学习 begin
   1. 网站服务器 server；
   2. 域名 domain；
   3. 浏览器 browser；
   4. 编辑网页 edit；
   5. 网页代码 webpage；
   

   View Slide

8. 网站服务器 server
   1. 放在机房里面的一台电脑；
   2. 存放网站和网页的地方；
   3. 不关机，有网络，随时随地访问；
   4. 固定的访问地址 eg. 210.38.160.89；
   

   View Slide

9. 域名 domain
   1. 顶级域名 eg. loo2k.com；
   2. 绑定服务器的地址，帮助记忆；
   访问域名
   查询域名
   对应的IP地址
   访问地址
   

   View Slide

10. 浏览器 browser
    1. 有哪些浏览器？
    2. 网页如何在浏览器里面工作？
    

    View Slide

11. Internet Explorer 6:
    Internet Explorer 6:
    Internet Explorer 6:
    Internet Explorer 6:
    微软2000年推出的一款浏览器，
    至今已历史悠久。
    现代浏览器
    现代浏览器
    现代浏览器
    现代浏览器:
    :
    :
    :
    推荐使用性能优越的
    「谷歌浏览器」
    

    View Slide

12. 网页在浏览器里工作
    在浏览器里
    访问一个网站网址
    网站所在
    的服务器
    返回代码
    给浏览器
    浏览器
    显示
    

    View Slide

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

    View Slide

14. 网页是个 HTML 文件
    

    View Slide

15. 如何编辑网页
    网页的背后是一个 HTML 文
    档，编辑一个 HTML 文档就
    相当于在编辑一个网页。
    

    View Slide

16. 编辑工具
    1. 创建一个记事本文件；
    2. 重命名为 index.html；
    3. 打开方式使用记事本；
    

    View Slide

17. 网页代码 webpage
    1. HTML （结构&内容）
    2. CSS （样式）
    3. JavaScript （动作）
    

    View Slide

18. HTML 超文本标记语言
    
    
    
    
    网页制作第一课
    
    
    这是一个段落。
    
    
    文档声明
    文档标题
    文档内容
    

    View Slide

19. HTML 超文本标记语言
    文档标题
    文档内容
    

    View Slide

20. HTML 超文本标记语言
    
    标题
    段落
    
    元素
    元素
    元素
    元素 (
    (
    (
    (标记
    标记
    标记
    标记)
    )
    )
    )：
    ：
    ：
    ：
    h1~h6, 标题
    p, 段落
    ul, 列表
    ……
    属性：
    属性：
    属性：
    属性：
    属性名=“属性值”
    例子中，id的属性值为para
    元素结束标记：
    元素结束标记：
    元素结束标记：
    元素结束标记：
    多为元素名>
    

    View Slide

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

    View Slide

22. HTML 超文本标记语言
    

    View Slide

23. HTML 超文本标记语言
    
    标题
    段落
    
    
    IMG
    IMG
    IMG
    IMG元素
    元素
    元素
    元素 ：
    ：
    ：
    ：
    代表的是一个图片
    src
    src
    src
    src属性
    属性
    属性
    属性 ：
    ：
    ：
    ：
    指向图片的地址
    自结束标签
    自结束标签
    自结束标签
    自结束标签 ：
    ：
    ：
    ：
    直接在标签内结束
    

    View Slide

24. HTML 超文本标记语言
    

    View Slide

25. 如何学习 HTML
    1. 了解 HTML 的历史 (wikipedia)；
    2. 多翻几遍文档 (w3school.com.cn)；
    3. 了解常用的 HTML 元素；
    4. 用！
    

    View Slide

26. CSS 层叠样式表
    
    <br/>#para {<br/>font-weight: bold;<br/>font-size: 18px;<br/>color: red;<br/>}<br/>
    
    选择 id 属性值
    为para的元素
    1. 字体为粗体；
    2. 字体大小18px；
    3. 字体颜色为红；
    style元素
    

    View Slide

27. CSS 层叠样式表
    1. 字体为粗体；
    2. 字体大小18px；
    3. 字体颜色为红；
    

    View Slide

28. CSS 层叠样式表
    
    <br/>#para {<br/>font-weight: bold;<br/>font-size: 18px;<br/>color: red;<br/>}<br/>
    
    元素选择器
    属性
    属性值
    

    View Slide

29. CSS 层叠样式表
    
    <br/>h1 {<br/>background-color: grey;<br/>text-align: center;<br/>border: 1px solid black;<br/>}<br/>
    
    选择标签为 h1
    的元素
    1. 背景颜色为灰色；
    2. 文字居中；
    3. 边框为1像素的黑色；
    

    View Slide

30. CSS 层叠样式表
    1. 背景颜色为灰色；
    2. 文字居中；
    3. 边框为1像素的黑色；
    

    View Slide

31. 如何学习 CSS
    1. 了解 CSS 的历史 (wikipedia)；
    2. 多翻几遍文档 (w3school.com.cn)；
    3. 了解 CSS 选择器和常用属性；
    4. 用！
    

    View Slide

32. JavaScript 脚本语言
    <br/>alert('网页制作第一课');<br/>
    script元素
    在网页中弹出一个窗口，并显
    示“网页制作第一课
    网页制作第一课
    网页制作第一课
    网页制作第一课”
    

    View Slide

33. JavaScript 脚本语言
    

    View Slide

34. JavaScript 脚本语言
    

    View Slide

35. 如何学习 JavaScript
    1. 了解 JavaScript 的历史 (wikipedia)；
    2. 多翻几遍文档 (w3school.com.cn)；
    3. 了解基本的编程概念；
    4. 用！
    

    View Slide

36. 只有这么多么？
    NO!
    

    View Slide

37. View Slide

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

    View Slide

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

    View Slide

40. View Slide

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

    View Slide

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

    View Slide

43. 确认主题风格
    BLUE
    蓝色
    蓝色
    蓝色
    蓝色:
    :
    :
    :
    蓝色属于冷色调，让人联想到
    海洋，天空。代表着沉稳、冷
    静、稳重以及智慧。能凸显名
    师讲坛的主题。
    

    View Slide

44. 画草图&线框图
    画草图和线框图是为了让自
    己确认网页的大致效果；
    而且先画草图的成本比你一
    上来就开始做PS效果图或者
    敲网页代码低；
    

    View Slide

45. PS 绘制效果图
    

    View Slide

46. 编写代码
    

    View Slide

47. 调试&除错
    

    View Slide

48. 上传到服务器发布
    

    View Slide

49. 提问时间 Q&A
    

    View Slide

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

    View Slide

51. Thanks ☺
    

    View Slide