SlideShare a Scribd company logo
网页制作基础
 LOO2K@创想灵动




   http://loo2k.com/
预告 not
     ice
1. 网页制作基础知识;

2. 网页代码的编写;

3. 网站制作案例分享;
预告 not
        ice
1. 不会教你如何使用 D reamweaver;

2. 不会手把手教你怎么制作网页;

3. 不会有任何复杂的技术;
为什么不用 D W
    1. 臃肿,速度慢,过时;

    2. 生成垃圾代码;

    3. 普通用户的玩具;

    4. 有更靠谱的工具;
不手把手教网页
那要教什么?


1. 网页是如何工作的?

2. 需要学习哪些东西?

3. 该如何学习网页制作?
没有复杂的技术
1. 这是一节基础课;

2. 给网页制作初学者;

3. 你需要了解一些基本概念;
开始学习 begin
  • 网站服务器 s
          erver;

  • 域名 domain ;

  • 浏览器 brows
            er;

  • 编辑网页 edit;

  • 网页代码 webpage;
网站服务器 s
      erver
 • 放在机房里面的一台电脑;

 • 存放网站和网页的地方;

 • 不关机,有网络,随时随地访问;

 • 固定的访问地址 eg. 210.38.160.89 ;
域名 domain
 1. 顶级域名 eg. l
             oo2k.com ;

 2. 绑定服务器的地址,帮助记忆;


           查询域名
访问域名                      访问地址
           对应的 I P 地址
浏览器 brows
        er
1. 有哪些浏览器?

2. 网页如何在浏览器里面工作?
I nternet E xplorer 6:

            微软 2000 年推出的一款浏览器,

            至今已历史悠久。




现代浏览器 :

推荐使用性能优越的

「谷歌浏览器」
网页在浏览器里工作
     在浏览器里        网站所在

     访问一个网站网址     的服务器




显示              返回代码
      浏览器
                给浏览器
编辑网页 edit
• 网页是一个 html 文件;

• 如何编辑网页;

• 编辑工具 记事本;
网页是个 HTML 文件
如何编辑网页

  网页的背后是一个 HT M L 文

  档,编辑一个 HT M L 文档就

  相当于在编辑一个网页。
编辑工具


  1. 创建一个记事本文件;

  2. 重命名为 index.html;

  3. 打开方式使用记事本;
网页代码 webpage
  • HT M L (结构 & 内容)

  • CSS (样式)

  • J va
     a Script (动作)
HTML 超文本标记语言
< !D OCT YPE HT M L>                    文档声明
< html>
< head>
           < meta cha "UT F-8">
                     rset=
           < title> 网页制作第一课 < /title>   文档标题
< /head>
< body>
           < p> 这是一个段落。 < /p>           文档内容
< /body>
< /html>
HTML 超文本标记语言



     文档内容   文档标题
HTML 超文本标记语言
< body>
                                     元素 ( 标记 ) :
           < h1 > 标题 < /h1 >
                                     h1 ~h6, 标题

           < p id= "pa "> 段落 < /p>
                      ra             p, 段落

< /body>                             ul, 列表

                                     ……
      属性:

      属性名 = “ 属性值”                   元素结束标记
      例子中, id 的属性值为 para               :

                                     多为 < /元素名 >
HTML 超文本标记语言
< body>
           < h1 > 标题 < /h1 >
           < p id= "pa "> 段落 < /p>
                      ra
           < a href= "http://loo2k.com"> 链接 < /a>
< /body>



A 元素 :                      href 属性 :               链接文字 :

代表的是一个超链接                   链接指向的地址                 标签包含的文字
HTML 超文本标记语言
HTML 超文本标记语言
   < body>
              < h1 > 标题 < /h1 >
              < p id= "pa "> 段落 < /p>
                         ra
   < img src= "http://loo2k.com/a ta
                                 va r.png" a "pic" />
                                            lt=
   < /body>



I MG 元素 :              src 属性 :                         自结束标签 :

代表的是一个图片               指向图片的地址                          直接在标签内结束
HTML 超文本标记语言
如何学习 HTML
1. 了解 HT M L 的历史 (wikipedia) ;

2. 多翻几遍文档 (w3s .com.cn) ;
             chool

3. 了解常用的 HT M L 元素;

4. 用!
CSS 层叠样式表
< head>
< style type= "text/css">        style 元素

                                 选择 id 属性值
# ra {
 pa
            font-weight: bold;   为 para的元素

            font-size: 1 8px;
            color: red;          1. 字体为粗体;

}                                2. 字体大小 1 8px ;
< /style>                        3. 字体颜色为红;
< /head>
CSS 层叠样式表


  1. 字体为粗体;

  2. 字体大小 1 8px ;

  3. 字体颜色为红;
CSS 层叠样式表
< head>
< style type= "text/css">


# ra {
 pa                              元素选择器
            font-weight: bold;
            font-size: 1 8px;
            color: red;          属性值
}
< /style>                        属性
< /head>
CSS 层叠样式表
< head>
< style type= "text/css">
                                        选择标签为 h1
h1 {
         ba ckground-color: grey;      的元素
         text-align: center;
         border: 1 px solid black;
}
< /style>                            1. 背景颜色为灰色;
< /head>                             2. 文字居中;

                                     3. 边框为 1 像素的黑色;
CSS 层叠样式表



  1. 背景颜色为灰色;

  2. 文字居中;

  3. 边框为 1 像素的黑色;
如何学习 CSS
1. 了解 CSS 的历史 (wikipedia) ;

2. 多翻几遍文档 (w3s .com.cn) ;
             chool

3. 了解 CSS 选择器和常用属性;

4. 用!
JavaScript 脚本语言
< script type= "text/j va
                     a script">              script元素


             alert(' 网页制作第一课 ' );


< /script>



                                  在网页中弹出一个窗口,并显

                                    示“网页制作第一课”
JavaScript 脚本语言
JavaScript 脚本语言
如何学习 JavaScript
 1. 了解 J va
        a Script 的历史 (wikipedia) ;

 2. 多翻几遍文档 (w3s .com.cn) ;
              chool

 3. 了解基本的编程概念;

 4. 用!
只有这么多么?


    NO!
放心 be ease

初学者只要掌握好

HT M L&CSS 就能做出

普通的网页了。
案例分享 case share

       嘉应学院名师讲坛专题网

       htp://210.38.160.89/mst
         t                  j
网页制作流程 process
   确认网站主题,确认风格



     画草图 &分镜表



    绘图工具制作效果图
网页制作流程 process
 编写 HT M L 结构, CSS 实现样式, J 实现效果
                          S




            调试 &除错



          上传到服务器发布
确认主题风格
        蓝色 :

        蓝色属于冷色调,让人联想到

        海洋,天空。代表着沉稳、冷
B LUE
        静、稳重以及智慧。能凸显名

        师讲坛的主题。
画草图 & 线框图
    画草图和线框图是为了让自

    己确认网页的大致效果;

    而且先画草图的成本比你一

    上来就开始做 PS 效果图或

     者

    敲网页代码低;
PS 绘制效果图
编写代码
调试 & 除错
上传到服务器发布
提问时间 Q&A
联系 Contact
 邮箱: loo2km@ il.com
             gma

 博客: loo2k.com

 微博: @LOO2K

 T witter: @LOO2K
Thanks 

More Related Content

Viewers also liked

Educationfunnies
EducationfunniesEducationfunnies
Educationfunnies
Shannon Loretto
 
Design Yo' Self : Why should designers care about Open Source Software?
Design Yo' Self : Why should designers care about Open Source Software?Design Yo' Self : Why should designers care about Open Source Software?
Design Yo' Self : Why should designers care about Open Source Software?
celinecelines semaan vernon
 
Puerto Colombia
Puerto ColombiaPuerto Colombia
Puerto Colombia
Nayib1
 
Ampower Corporate Presentation
Ampower Corporate PresentationAmpower Corporate Presentation
Ampower Corporate Presentation
Ampower Outsourcing
 
Peserta MSG Batch 1 2010
Peserta MSG Batch 1 2010Peserta MSG Batch 1 2010
Peserta MSG Batch 1 2010
bramanian
 
ヒーロー島で起きた悲劇
ヒーロー島で起きた悲劇ヒーロー島で起きた悲劇
ヒーロー島で起きた悲劇
mokudai masayuki
 
Apresentação ORCID Jornadas FCCN 2014 Évora
Apresentação ORCID Jornadas FCCN 2014 ÉvoraApresentação ORCID Jornadas FCCN 2014 Évora
Apresentação ORCID Jornadas FCCN 2014 Évora
euroCRIS - Current Research Information Systems
 
Partner Training: Fundraising
Partner Training: FundraisingPartner Training: Fundraising
Partner Training: Fundraising
Grace Dunlap
 
Course outline
Course outlineCourse outline
Course outline
cocolatto
 
Midkiff Horse Training Demonstration
Midkiff Horse Training DemonstrationMidkiff Horse Training Demonstration
Midkiff Horse Training Demonstration
strawberrywine
 
1. ip touch introduction 1
1. ip touch introduction 11. ip touch introduction 1
1. ip touch introduction 1
IPTouch AMCP
 
What's Your Nonprofit's 501c3 Status
What's Your Nonprofit's 501c3 StatusWhat's Your Nonprofit's 501c3 Status
What's Your Nonprofit's 501c3 Status
Grace Dunlap
 
Presentation1 (Introduction)
Presentation1 (Introduction)Presentation1 (Introduction)
Presentation1 (Introduction)
cocolatto
 
自宅ラック勉強会 11 lt lync onlineのセットアップ
自宅ラック勉強会 11 lt lync onlineのセットアップ自宅ラック勉強会 11 lt lync onlineのセットアップ
自宅ラック勉強会 11 lt lync onlineのセットアップmokudai masayuki
 
Cms Samples
Cms SamplesCms Samples
Cms Samples
dpgchris
 
Presentazione Istituto Pantheon
Presentazione Istituto PantheonPresentazione Istituto Pantheon
Presentazione Istituto Pantheon
Istituto Pantheon
 
Congregacion general xxxii
Congregacion general xxxiiCongregacion general xxxii
Congregacion general xxxii
adazar
 
Наш подход
Наш подходНаш подход
Наш подход
Funkyduck
 
Our approach
Our approachOur approach
Our approach
Funkyduck
 
Sonex deposit meeting_ws_20110301
Sonex deposit meeting_ws_20110301Sonex deposit meeting_ws_20110301
Sonex deposit meeting_ws_20110301
euroCRIS - Current Research Information Systems
 

Viewers also liked (20)

Educationfunnies
EducationfunniesEducationfunnies
Educationfunnies
 
Design Yo' Self : Why should designers care about Open Source Software?
Design Yo' Self : Why should designers care about Open Source Software?Design Yo' Self : Why should designers care about Open Source Software?
Design Yo' Self : Why should designers care about Open Source Software?
 
Puerto Colombia
Puerto ColombiaPuerto Colombia
Puerto Colombia
 
Ampower Corporate Presentation
Ampower Corporate PresentationAmpower Corporate Presentation
Ampower Corporate Presentation
 
Peserta MSG Batch 1 2010
Peserta MSG Batch 1 2010Peserta MSG Batch 1 2010
Peserta MSG Batch 1 2010
 
ヒーロー島で起きた悲劇
ヒーロー島で起きた悲劇ヒーロー島で起きた悲劇
ヒーロー島で起きた悲劇
 
Apresentação ORCID Jornadas FCCN 2014 Évora
Apresentação ORCID Jornadas FCCN 2014 ÉvoraApresentação ORCID Jornadas FCCN 2014 Évora
Apresentação ORCID Jornadas FCCN 2014 Évora
 
Partner Training: Fundraising
Partner Training: FundraisingPartner Training: Fundraising
Partner Training: Fundraising
 
Course outline
Course outlineCourse outline
Course outline
 
Midkiff Horse Training Demonstration
Midkiff Horse Training DemonstrationMidkiff Horse Training Demonstration
Midkiff Horse Training Demonstration
 
1. ip touch introduction 1
1. ip touch introduction 11. ip touch introduction 1
1. ip touch introduction 1
 
What's Your Nonprofit's 501c3 Status
What's Your Nonprofit's 501c3 StatusWhat's Your Nonprofit's 501c3 Status
What's Your Nonprofit's 501c3 Status
 
Presentation1 (Introduction)
Presentation1 (Introduction)Presentation1 (Introduction)
Presentation1 (Introduction)
 
自宅ラック勉強会 11 lt lync onlineのセットアップ
自宅ラック勉強会 11 lt lync onlineのセットアップ自宅ラック勉強会 11 lt lync onlineのセットアップ
自宅ラック勉強会 11 lt lync onlineのセットアップ
 
Cms Samples
Cms SamplesCms Samples
Cms Samples
 
Presentazione Istituto Pantheon
Presentazione Istituto PantheonPresentazione Istituto Pantheon
Presentazione Istituto Pantheon
 
Congregacion general xxxii
Congregacion general xxxiiCongregacion general xxxii
Congregacion general xxxii
 
Наш подход
Наш подходНаш подход
Наш подход
 
Our approach
Our approachOur approach
Our approach
 
Sonex deposit meeting_ws_20110301
Sonex deposit meeting_ws_20110301Sonex deposit meeting_ws_20110301
Sonex deposit meeting_ws_20110301
 

Similar to 网页制作基础

Html&css基础
Html&css基础Html&css基础
Html&css基础
KenerLinfeng
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克jay li
 
Css
CssCss
Css
fzuhua
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Overview Of HTML
Overview Of HTMLOverview Of HTML
Overview Of HTML
xiaomimum
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
 
HTML 語法教學
HTML 語法教學HTML 語法教學
HTML 語法教學
Shengyou Fan
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
jay li
 
高效率的、可维护的Css
高效率的、可维护的Css高效率的、可维护的Css
高效率的、可维护的Css
simaopig
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)ziggear
 
CSS 語法教學
CSS 語法教學CSS 語法教學
CSS 語法教學
Shengyou Fan
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)
lrk3
 
big web site
big web site big web site
big web site
tanjianwei3
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训j5726
 

Similar to 网页制作基础 (20)

Html&css基础
Html&css基础Html&css基础
Html&css基础
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
Css
CssCss
Css
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Overview Of HTML
Overview Of HTMLOverview Of HTML
Overview Of HTML
 
Div+css布局
Div+css布局Div+css布局
Div+css布局
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 
HTML 語法教學
HTML 語法教學HTML 語法教學
HTML 語法教學
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
 
高效率的、可维护的Css
高效率的、可维护的Css高效率的、可维护的Css
高效率的、可维护的Css
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
 
CSS 語法教學
CSS 語法教學CSS 語法教學
CSS 語法教學
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)
 
big web site
big web site big web site
big web site
 
日新培训
日新培训日新培训
日新培训
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
 

网页制作基础