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