Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
网页制作基础
Search
luke
May 13, 2012
Technology
1
960
网页制作基础
LOO2K@网页制作基础
luke
May 13, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
AWSサービスアップデート2025年2月分
yuobayashi
2
120
Streamlitの細かい話
nishikawadaisuke
10
1.5k
Kubernetesを手元で学ぼう! 初心者向けローカル環境のススメ
nayaaaa
PRO
2
790
Amazon Bedrock Knowledge basesにLangfuse導入してみた
sonoda_mj
2
430
Scala meets WebAssembly
tanishiking
0
160
LangGraph × Bedrock による複数の Agentic Workflow を利用した Supervisor 型のマルチエージェントの実現/langgraph-bedrock-supervisor-agent
ren8k
4
560
テクスチャ画像付きのメッシュモデルを3次元点群へ変換する
kentaitakura
1
420
RF問の対策をした話
bata_24
0
130
クラウド脆弱性の傾向とShisho Cloudの活用
rvirus0817
0
110
プロダクトの一番の理解者を目指してQAが取り組んでいること 〜現場・マネジメント各視点のプラクティス〜
hacomono
PRO
0
130
組織拡大でカルチャー崩壊を防ぐためにできること
urahiroshi
0
120
neoAI_千葉講演資料_250311_配布用.pdf
iotcomjpadmin
0
220
Featured
See All Featured
Making Projects Easy
brettharned
116
6.1k
4 Signs Your Business is Dying
shpigford
183
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
For a Future-Friendly Web
brad_frost
176
9.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
290
Building Your Own Lightsaber
phodgson
104
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Optimizing for Happiness
mojombo
377
70k
Transcript
网页制作基础 LOO2K@创想灵动 http://loo2k.com/
预告 notice 1. 网页制作基础知识; 2. 网页代码的编写; 3. 网站制作案例分享;
预告 notice 1. 不会教你如何使用 Dreamweaver; 2. 不会手把手教你怎么制作网页; 3. 不会有任何复杂的技术;
为什么不用DW 1. 臃肿,速度慢,过时; 2. 生成垃圾代码; 3. 普通用户的玩具; 4. 有更靠谱的工具;
不手把手教网页 1. 网页是如何工作的? 2. 需要学习哪些东西? 3. 该如何学习网页制作? 那要教什么?
没有复杂的技术 1. 这是一节基础课; 2. 给网页制作初学者; 3. 你需要了解一些基本概念;
开始学习 begin 1. 网站服务器 server; 2. 域名 domain; 3. 浏览器
browser; 4. 编辑网页 edit; 5. 网页代码 webpage;
网站服务器 server 1. 放在机房里面的一台电脑; 2. 存放网站和网页的地方; 3. 不关机,有网络,随时随地访问; 4. 固定的访问地址
eg. 210.38.160.89;
域名 domain 1. 顶级域名 eg. loo2k.com; 2. 绑定服务器的地址,帮助记忆; 访问域名 查询域名
对应的IP地址 访问地址
浏览器 browser 1. 有哪些浏览器? 2. 网页如何在浏览器里面工作?
Internet Explorer 6: Internet Explorer 6: Internet Explorer 6: Internet
Explorer 6: 微软2000年推出的一款浏览器, 至今已历史悠久。 现代浏览器 现代浏览器 现代浏览器 现代浏览器: : : : 推荐使用性能优越的 「谷歌浏览器」
网页在浏览器里工作 在浏览器里 访问一个网站网址 网站所在 的服务器 返回代码 给浏览器 浏览器 显示
编辑网页 edit 1. 网页是一个 html 文件; 2. 如何编辑网页; 3. 编辑工具
记事本;
网页是个 HTML 文件
如何编辑网页 网页的背后是一个 HTML 文 档,编辑一个 HTML 文档就 相当于在编辑一个网页。
编辑工具 1. 创建一个记事本文件; 2. 重命名为 index.html; 3. 打开方式使用记事本;
网页代码 webpage 1. HTML (结构&内容) 2. CSS (样式) 3. JavaScript
(动作)
HTML 超文本标记语言 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>网页制作第一课</title> </head>
<body> <p>这是一个段落。</p> </body> </html> 文档声明 文档标题 文档内容
HTML 超文本标记语言 文档标题 文档内容
HTML 超文本标记语言 <body> <h1>标题</h1> <p id="para">段落</p> </body> 元素 元素 元素
元素 ( ( ( (标记 标记 标记 标记) ) ) ): : : : h1~h6, 标题 p, 段落 ul, 列表 …… 属性: 属性: 属性: 属性: 属性名=“属性值” 例子中,id的属性值为para 元素结束标记: 元素结束标记: 元素结束标记: 元素结束标记: 多为</元素名>
HTML 超文本标记语言 <body> <h1>标题</h1> <p id="para">段落</p> <a href="http://loo2k.com">链接</a> </body> A
A A A元素 元素 元素 元素 : : : : 代表的是一个超链接 href href href href属性 属性 属性 属性 : : : : 链接指向的地址 链接文字 链接文字 链接文字 链接文字 : : : : 标签包含的文字
HTML 超文本标记语言
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属性 属性 属性 属性 : : : : 指向图片的地址 自结束标签 自结束标签 自结束标签 自结束标签 : : : : 直接在标签内结束
HTML 超文本标记语言
如何学习 HTML 1. 了解 HTML 的历史 (wikipedia); 2. 多翻几遍文档 (w3school.com.cn);
3. 了解常用的 HTML 元素; 4. 用!
CSS 层叠样式表 <head> <style type="text/css"> #para { font-weight: bold; font-size:
18px; color: red; } </style> </head> 选择 id 属性值 为para的元素 1. 字体为粗体; 2. 字体大小18px; 3. 字体颜色为红; style元素
CSS 层叠样式表 1. 字体为粗体; 2. 字体大小18px; 3. 字体颜色为红;
CSS 层叠样式表 <head> <style type="text/css"> #para { font-weight: bold; font-size:
18px; color: red; } </style> </head> 元素选择器 属性 属性值
CSS 层叠样式表 <head> <style type="text/css"> h1 { background-color: grey; text-align:
center; border: 1px solid black; } </style> </head> 选择标签为 h1 的元素 1. 背景颜色为灰色; 2. 文字居中; 3. 边框为1像素的黑色;
CSS 层叠样式表 1. 背景颜色为灰色; 2. 文字居中; 3. 边框为1像素的黑色;
如何学习 CSS 1. 了解 CSS 的历史 (wikipedia); 2. 多翻几遍文档 (w3school.com.cn);
3. 了解 CSS 选择器和常用属性; 4. 用!
JavaScript 脚本语言 <script type="text/javascript"> alert('网页制作第一课'); </script> script元素 在网页中弹出一个窗口,并显 示“网页制作第一课 网页制作第一课
网页制作第一课 网页制作第一课”
JavaScript 脚本语言
JavaScript 脚本语言
如何学习 JavaScript 1. 了解 JavaScript 的历史 (wikipedia); 2. 多翻几遍文档 (w3school.com.cn);
3. 了解基本的编程概念; 4. 用!
只有这么多么? NO!
None
放心 be ease 初学者只要掌握好 HTML&CSS 就能做出 普通的网页了。
案例分享 case share 嘉应学院名师讲坛专题网 http://210.38.160.89/msjt
None
网页制作流程 process 确认网站主题,确认风格 画草图&分镜表 绘图工具制作效果图
网页制作流程 process 调试&除错 上传到服务器发布 编写HTML结构,CSS实现样式,JS实现效果
确认主题风格 BLUE 蓝色 蓝色 蓝色 蓝色: : : : 蓝色属于冷色调,让人联想到
海洋,天空。代表着沉稳、冷 静、稳重以及智慧。能凸显名 师讲坛的主题。
画草图&线框图 画草图和线框图是为了让自 己确认网页的大致效果; 而且先画草图的成本比你一 上来就开始做PS效果图或者 敲网页代码低;
PS 绘制效果图
编写代码
调试&除错
上传到服务器发布
提问时间 Q&A
联系 Contact � 邮箱:
[email protected]
� 博客:loo2k.com � 微博:@LOO2K � Twitter:
@LOO2K
Thanks ☺