Enviar búsqueda
Cargar
网页制作基础
•
1 recomendación
•
271 vistas
L
loo2k
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 51
Descargar ahora
Descargar para leer sin conexión
Recomendados
网页制作基础
网页制作基础
loo2k
Html and css
Html and css
maosongppt
Browser Object Model
Browser Object Model
jay li
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
蘇姵欣 PeiSu
教網部落格模版設計
教網部落格模版設計
rainlan
CSS 菜鳥救星
CSS 菜鳥救星
Ying-Hsiang Liao
Joomla Programming Basic concepts
Joomla Programming Basic concepts
Alan Submarine
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
Recomendados
网页制作基础
网页制作基础
loo2k
Html and css
Html and css
maosongppt
Browser Object Model
Browser Object Model
jay li
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
蘇姵欣 PeiSu
教網部落格模版設計
教網部落格模版設計
rainlan
CSS 菜鳥救星
CSS 菜鳥救星
Ying-Hsiang Liao
Joomla Programming Basic concepts
Joomla Programming Basic concepts
Alan Submarine
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
网页设计及制作(Div+css)
网页设计及制作(Div+css)
lrk3
6. CSS
6. CSS
riomusi
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
Hipfox
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
知世‧安索帕 台北 (使用經驗設計中心)
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
Web教程2
Web教程2
tamamadesu
2314 365737
2314 365737
open
Html
Html
TaiShunHuang
Capturas quandary (slideshare)
Capturas quandary (slideshare)
galevama
Partner Training: Company Foundations
Partner Training: Company Foundations
Grace Dunlap
Rekapitulasi 2010 06 28
Rekapitulasi 2010 06 28
bramanian
Who Are You? Branding Your Nonprofit
Who Are You? Branding Your Nonprofit
Grace Dunlap
Re Engaging The Disengaged March 2010
Re Engaging The Disengaged March 2010
davidhfox
Caesar's quotes
Caesar's quotes
kathrynvalentine
CRISs, IRs and their interoperability: an updated picture [with some focus on...
CRISs, IRs and their interoperability: an updated picture [with some focus on...
euroCRIS - Current Research Information Systems
เผยความลับทุกเดือนสร้างเงินล้านออนไลน์ ฉบับสมบูรณ์
เผยความลับทุกเดือนสร้างเงินล้านออนไลน์ ฉบับสมบูรณ์
vr2g8er
Presentation2
Presentation2
cocolatto
Experience
Experience
Jonathan
Our approach
Our approach
Funkyduck
The House at Royal Oak
The House at Royal Oak
Black Dog and Leventhal Publishers, Inc.
Más contenido relacionado
La actualidad más candente
网页设计及制作(Div+css)
网页设计及制作(Div+css)
lrk3
6. CSS
6. CSS
riomusi
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
Hipfox
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
知世‧安索帕 台北 (使用經驗設計中心)
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
Web教程2
Web教程2
tamamadesu
2314 365737
2314 365737
open
Html
Html
TaiShunHuang
La actualidad más candente
(10)
网页设计及制作(Div+css)
网页设计及制作(Div+css)
6. CSS
6. CSS
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
Web教程2
Web教程2
2314 365737
2314 365737
Html
Html
Destacado
Capturas quandary (slideshare)
Capturas quandary (slideshare)
galevama
Partner Training: Company Foundations
Partner Training: Company Foundations
Grace Dunlap
Rekapitulasi 2010 06 28
Rekapitulasi 2010 06 28
bramanian
Who Are You? Branding Your Nonprofit
Who Are You? Branding Your Nonprofit
Grace Dunlap
Re Engaging The Disengaged March 2010
Re Engaging The Disengaged March 2010
davidhfox
Caesar's quotes
Caesar's quotes
kathrynvalentine
CRISs, IRs and their interoperability: an updated picture [with some focus on...
CRISs, IRs and their interoperability: an updated picture [with some focus on...
euroCRIS - Current Research Information Systems
เผยความลับทุกเดือนสร้างเงินล้านออนไลน์ ฉบับสมบูรณ์
เผยความลับทุกเดือนสร้างเงินล้านออนไลน์ ฉบับสมบูรณ์
vr2g8er
Presentation2
Presentation2
cocolatto
Experience
Experience
Jonathan
Our approach
Our approach
Funkyduck
The House at Royal Oak
The House at Royal Oak
Black Dog and Leventhal Publishers, Inc.
Using LuaJIT in mid-load web-projects
Using LuaJIT in mid-load web-projects
Alexander Gladysh
The Elements by Theo Gray
The Elements by Theo Gray
Black Dog and Leventhal Publishers, Inc.
Weather 1
Weather 1
rocioglezgro
Protocolo ttemperatura
Protocolo ttemperatura
Itsa 02 SOLEDAD
Architect
Architect
Black Dog and Leventhal Publishers, Inc.
Marshall Intro09
Marshall Intro09
Mike Marshall
Meet Christian Farioli
Meet Christian Farioli
Christian Farioli
Peserta MSG Batch 1 2010
Peserta MSG Batch 1 2010
bramanian
Destacado
(20)
Capturas quandary (slideshare)
Capturas quandary (slideshare)
Partner Training: Company Foundations
Partner Training: Company Foundations
Rekapitulasi 2010 06 28
Rekapitulasi 2010 06 28
Who Are You? Branding Your Nonprofit
Who Are You? Branding Your Nonprofit
Re Engaging The Disengaged March 2010
Re Engaging The Disengaged March 2010
Caesar's quotes
Caesar's quotes
CRISs, IRs and their interoperability: an updated picture [with some focus on...
CRISs, IRs and their interoperability: an updated picture [with some focus on...
เผยความลับทุกเดือนสร้างเงินล้านออนไลน์ ฉบับสมบูรณ์
เผยความลับทุกเดือนสร้างเงินล้านออนไลน์ ฉบับสมบูรณ์
Presentation2
Presentation2
Experience
Experience
Our approach
Our approach
The House at Royal Oak
The House at Royal Oak
Using LuaJIT in mid-load web-projects
Using LuaJIT in mid-load web-projects
The Elements by Theo Gray
The Elements by Theo Gray
Weather 1
Weather 1
Protocolo ttemperatura
Protocolo ttemperatura
Architect
Architect
Marshall Intro09
Marshall Intro09
Meet Christian Farioli
Meet Christian Farioli
Peserta MSG Batch 1 2010
Peserta MSG Batch 1 2010
Similar a 网页制作基础
Html&css基础
Html&css基础
KenerLinfeng
Css
Css
fzuhua
Inside the-browser
Inside the-browser
jy03845581
Inside the-browser
Inside the-browser
jy03845581
深入剖析浏览器
深入剖析浏览器
jay li
Html&css培训 舒克
Html&css培训 舒克
jay li
高效率的、可维护的Css
高效率的、可维护的Css
simaopig
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
日新培训
日新培训
pan quanjin
HTML 語法教學
HTML 語法教學
Shengyou Fan
Div+css布局
Div+css布局
flyxiang228
HTML & JavaScript
HTML & JavaScript
Sanji Zhang
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Duran Hsieh
Inside the browser
Inside the browser
otakustay
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
Html5和css3入门
Html5和css3入门
Xiujun Ma
解读html
解读html
cssrain
Div+css培训
Div+css培训
pan quanjin
Similar a 网页制作基础
(20)
Html&css基础
Html&css基础
Css
Css
Inside the-browser
Inside the-browser
Inside the-browser
Inside the-browser
深入剖析浏览器
深入剖析浏览器
Html&css培训 舒克
Html&css培训 舒克
高效率的、可维护的Css
高效率的、可维护的Css
[2008]网站重构 -who am i
[2008]网站重构 -who am i
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
日新培训
日新培训
HTML 語法教學
HTML 語法教學
Div+css布局
Div+css布局
HTML & JavaScript
HTML & JavaScript
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Inside the browser
Inside the browser
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
Html5和css3入门
Html5和css3入门
解读html
解读html
Div+css培训
Div+css培训
网页制作基础
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:
微软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> 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.
HTML 超文本标记语言
23.
HTML 超文本标记语言
<body> <h1>标题</h1> <p id="para">段落</p> <img src="http://loo2k.com/avatar.png" alt="pic" /> </body> IMG元素 : IMG元素 src属性 : src属性 自结束标签 : 代表的是一个图片 指向图片的地址 直接在标签内结束
24.
HTML 超文本标记语言
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.
JavaScript 脚本语言
34.
JavaScript 脚本语言
35.
如何学习 JavaScript 1.
了解 JavaScript 的历史 (wikipedia); 2. 多翻几遍文档 (w3school.com.cn); 3. 了解基本的编程概念; 4. 用!
36.
只有这么多么?
NO!
37.
38.
放心 be ease 初学者只要掌握好 HTML&CSS
就能做出 普通的网页了。
39.
案例分享 case share
嘉应学院名师讲坛专题网 http://210.38.160.89/msjt
40.
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 ☺
Descargar ahora