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
860
网页制作基础
LOO2K@网页制作基础
luke
May 13, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.3k
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
180
Postman v10リリース後を振り返る
nagix
0
170
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
4
4.7k
MapLibreとAmazon Location Service
dayjournal
1
150
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
130
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
230
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
150
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
430
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
610
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Featured
See All Featured
Making Projects Easy
brettharned
108
5.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Web development in the modern age
philhawksworth
202
10k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
4 Signs Your Business is Dying
shpigford
175
21k
Being A Developer After 40
akosma
57
580k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
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 ☺