-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
1103 lines (932 loc) · 45.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!--
@framework Desk.js
@author 元兒～ <me@yuaner.tw>
-->
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="zh-tw"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="zh-tw"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="zh-tw"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh-tw"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>來架網站吧！！我的架站經驗談～</title>
<meta name="description" content="這是我架起一個個人網站所得到的經驗，就用這份投影片分享給大家吧！！">
<meta name="author" content="元兒～">
<meta name="keywords" content="架站經驗 架站">
<meta name="viewport" content="width=1024, user-scalable=no">
<!-- Core and extension CSS files -->
<link rel="stylesheet" href="assets/deck.js/core/deck.core.css">
<link rel="stylesheet" href="assets/deck.js/extensions/goto/deck.goto.css">
<link rel="stylesheet" href="assets/deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="assets/deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="assets/deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="assets/deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="assets/deck.js/extensions/scale/deck.scale.css">
<!-- Style theme. More available in /themes/style/ or create your own. -->
<link rel="stylesheet" href="assets/deck.js/themes/style/web-2.0.css">
<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<link rel="stylesheet" href="assets/deck.js/themes/transition/horizontal-slide.css">
<script src="assets/deck.js/modernizr.custom.js"></script>
<style>
strong {color: red;}
.text-warning {color: orange;}
h3.big-text, .p.big-text {font-size:3em; color:darkorange; text-align:center;}
</style>
</head>
<body>
<!--<header>
<nav>
<h1>dss</h1>
</nav>
</header>-->
<article class="deck-container">
<!-- Begin slides -->
<section class="slide" id="title-slide">
<h1>來架網站吧！！<br />我的架站經驗談～</h1>
</section>
<section class="slide" id="title-shorturl">
<h1>http://bit.ly/fxMKWEB</h1>
<h2>來架網站吧！！ 我的架站經驗談～</h2>
</section>
<!--<section class="slide" id="about-me">
<h2>我是元兒～</h2>
<ul>
<li>正面臨延畢危機中的大四生</li>
<li>目前是<abbr title="Mozilla 臺灣社群">MozTW</abbr>, Arch Linux社群成員</li>
<li>是位自由軟體愛好者</li>
</ul>
</section>-->
<section class="slide" id="menu">
<h2>大致上要做的事...</h2>
<ol>
<li><h3><a href="javascript:$.deck('go', 'prepare-website')">規劃、選擇採用的CMS/製作網站</a></h3></li>
<li><h3><a href="javascript:$.deck('go', 'space')">打造/挑選 網頁空間</a></h3></li>
<li><h3><a href="javascript:$.deck('go', 'domain-why')">綁上你的網址</a></h3></li>
<li><h3><a href="javascript:$.deck('go', 'maintain-title')">網站的優化</a></h3></li>
</ol>
</section>
<!-- 網站內容 -->
<section class="slide" id="prepare-website">
<h1>生出網站之前...</h1>
</section>
<section class="slide" id="website-how-to-do">
<h2>你的網站是...</h2>
<ol>
<li class="slide"><h3>我要做什麼主題？</h3></li>
<li class="slide"><h3>什麼方向？</h3></li>
<li class="slide"><h3>大概要放什麼內容？</h3></li>
<li class="slide"><h3>還是什麼服務？</h3></li>
</ol>
</section>
<!-- CMS 介紹 -->
<section class="slide" id="cms-list">
<h2>可以使用現成的CMS</h2>
<ul>
<li><h3><a href="javascript:$.deck('go', 'cms-drupal')">Drupal</a></h3></li>
<li><h3><a href="javascript:$.deck('go', 'cms-wordpress')">WordPress</a></h3></li>
<li><h3><a href="javascript:$.deck('go', 'cms-joomla')">Joomla</a></h3></li>
<li><h3><a href="javascript:$.deck('go', 'cms-xoops')">XOOPS</a></h3></li>
</ul>
</section>
<section class="slide" id="cms-drupal">
<h2><a href="http://drupaltaiwan.org/" target="_blank">Drupal</a></h2>
<img src="images/drupal_logo.png" style="float: right; max-width: 25%;">
<ul>
<li><h3>自由度特高、擴充性特強</h3>
<p>每個模組都拆得很開</p></li>
<li><h3>與其他CMS相比，上手門檻較高</h3>
<p>因為太自由，剛開始是什麼都沒有，很多都要自己DIY搭配</p></li>
</ul>
<cite>圖片來源: <a target="_blank" href="http://www.mailjet.com/plugin/drupal.htm">http://www.mailjet.com/plugin/drupal.htm</a></cite>
</section>
<section class="slide" id="cms-wordpress">
<h2><a href="http://tw.wordpress.org/" target="_blank">WordPress</a></h2>
<img src="images/wordpress_logo.png" style="float: right; max-width: 25%;">
<ul>
<li><h3>架設部落格專用的首選！！</h3>
<p>我目前的部落格就採用此系統</p></li>
<li><h3>有一堆現成的精緻版型</h3>
<p>可透過模組架電子商務網站</p></li>
</ul>
<cite>圖片來源: <a target="_blank" href="http://diywithty.com/category/videos-lessons/wordpress/">http://diywithty.com/category/videos-lessons/wordpress/</a></cite>
</section>
<section class="slide" id="cms-joomla">
<h2><a href="http://www.joomla.org.tw" target="_blank">Joomla</a></h2>
<img src="images/joomla_logo.png" style="float: right; max-width: 25%;">
<ul>
<li><h3>可快速架設網站</h3>
<p>（討論區、投票、部落格、相簿、電子商務）</p></li>
<li><h3>目前有許多精緻版型</h3>
<p>適合做公司形象網站</p></li>
</ul>
<cite>圖片來源: <a target="_blank" href="http://userxper.com/blog/archives/3566">http://userxper.com/blog/archives/3566</a></cite>
</section>
<section class="slide" id="cms-xoops">
<h2><a href="http://xoops.tnc.edu.tw/" target="_blank">XOOPS</a></h2>
<img src="images/xoops_logo.png" style="float: right; max-width: 25%;">
<ul>
<li><h3>可快速架設網站</h3>
<p>（討論區、投票、部落格、相簿、電子商務）</p></li>
<li><h3>適合做通用型的網站</h3></li>
</ul>
<cite>圖片來源: <a target="_blank" href="http://ua.convdocs.org/">ua.convdocs.org</a></cite>
</section>
<section class="slide" id="cms-summery">
<h1>以上全部都是開放原始碼！！</h1>
</section>
<section class="slide" id="cms-summery-part2">
<h1>可根據需求，自行寫這套CMS的外掛擴充</h1>
</section>
<section class="slide" id="selfmake">
<h1>如果自己也想自幹一個出來</h1>
</section>
<section class="slide" id="selfmake-resource">
<h2>還是有現成資源可以用</h2>
<ul>
<li><h3>後端動態資料</h3></li>
<ul><li><a href="http://www.codeigniter.org.tw/" target="_blank">CodeIgniter</a> (PHP Framework</li></ul>
<li><h3>前端網頁界面</h3></li>
<ul>
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> (Front-End Framework</li>
<li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font-Awesome</a> (Icon Framework</li>
<li><a href="http://foundation.zurb.com/" target="_blank">Foundation</a> (Front-End Framework</li>
</ul>
</ul>
</section>
<section class="slide" id="selfmake-Front-End-notice">
<h2>前端網頁注意</h2>
<ul>
<li class="slide"><h3>不要再用舊式寫法啦～與網頁外觀相關的請用CSS</h3></li>
<ul class="slide"><li><code><font></code>, <code><b></code>, <code><i></code>, <code><u></code>, <code><body bgcolor=””></code>......已經在HTML5標準中剔除了！</li>
<li>也請用CSS排版，不要再用表格排版</li></ul>
<li class="slide"><h3>HTML是內容，請合乎語意！</h3></li>
<ul class="slide">
<li><code><strong></code>(強調), <code><blockquote></code>(段落引用), <code><abbr></code>(縮寫), <code><article></code>(文章), <code><footer></code>(頁尾)...</li>
</ul>
<li class="slide"><h3>麻煩請標注一下這個網頁的編碼</h3></li>
<ul class="slide"><li><code><meta charset="utf-8" /></code></li></ul>
</ul>
<p class="slide text-warning">除了會影響維護容易性以外，也會影響搜尋引擎(Google)檢索</p>
</section>
<section class="slide" id="selfmake-Back-End-notice">
<h2>後端網頁注意</h2>
<ul>
<li class="slide"><h3>資料庫內的密碼請加密，不要用明文存</h3>
<p>不然如果被駭客入侵，會死得很難看～</p></li>
<li class="slide"><h3>絕對不要直接傳指令</h3>
<p>ex. http://localhost/index.php<strong>?cmd=rm%20-rf%20%2f</strong></p></li>
</ul>
<p class="slide text-warning">會攸關這個網站安全程度如何（尤其是電子商務和金錢相關的更要小心）</p>
</section>
<section class="slide" id="selfmake-Back-End-notice2">
<h2>放在網頁空間常遇到的狀況</h2>
<ul>
<li class="slide"><h3>資料庫伺服器位址要另外指定（非localhost）</h3></li>
<li class="slide"><h3>資料庫名稱，很可能前面一定要有你的帳號</h3></li>
</ul>
<p class="slide text-warning">如果是自幹系統出來的話，<strong>資料庫連接語法不能寫死啊～</strong></p>
</section>
<section class="slide" id="selfmake-Back-End-notice2-example-pdo">
<h2>範例: 採用PDO -不要寫死！！</h2>
<p>db_config.php:</p>
<pre><code><?php
<strong>$DB_SERV</strong> = "localhost"; // 資料庫伺服器名稱
<strong>$DB_USER</strong> = "yuan"; // 資料庫使用者名稱
<strong>$DB_PASS</strong> = "passwd"; // 資料庫使用者密碼
<strong>$DB_NAME</strong> = "my_db"; // 指定要使用哪個資料庫
<strong>$FORM_PREFIX</strong> = "uj_"; // 資料表的前綴字元</code></pre>
<p>connect.php:</p>
<pre><code><?php
require_once("db_config.php"); // 讀取連結資料庫資訊
// 連接資料庫
$db_connect = new PDO("mysql:dbname={<strong>$DB_NAME</strong>};host:{<strong>$DB_SERV</strong>};charset=utf8", <strong>$DB_USER</strong>, <strong>$DB_PASS</strong>);
// 查詢uj_users表格
$result = $db_connect->query("SELECT * FROM ".<strong>$FORM_PREFIX</strong>."users");</code></pre>
</section>
<section class="slide" id="selfmake-Back-End-notice2-example-tr_mysql">
<h2>範例: 採用傳統寫法 -不要寫死！！</h2>
<p>db_config.php:</p>
<pre><code><?php
<strong>$DB_SERV</strong> = "localhost"; // 資料庫伺服器名稱
<strong>$DB_USER</strong> = "yuan"; // 資料庫使用者名稱
<strong>$DB_PASS</strong> = "passwd"; // 資料庫使用者密碼
<strong>$DB_NAME</strong> = "my_db"; // 指定要使用哪個資料庫
<strong>$FORM_PREFIX</strong> = "uj_"; // 資料表的前綴字元</code></pre>
<p>connect.php:</p>
<pre><code><?php
require_once("db_config.php"); //讀取連結資料庫資訊
// 連接資料庫
$db = mysql_connect(<strong>$DB_SERV</strong>,<strong>$DB_USER</strong>,<strong>$DB_PASS</strong>) or die(mysql_error());
// 指定這個資料庫
mysql_select_db(<strong>$DB_NAME</strong>,$db);
// 查詢uj_users表格
$db_table = mysql_query("SELECT * FROM ".<strong>$FORM_PREFIX</strong>."users") or die(mysql_error());</code></pre>
</section>
<section class="slide" id="selfmake-Back-End-notice2-img">
<img src="images/db_php_config.png">
</section>
<!-- 網頁空間 -->
<section class="slide" id="space">
<h1>有了內容，但...<br /><strong>空間呢？？</strong></h1>
</section>
<section class="slide" id="space-self">
<h2>自己準備空間出來</h2>
<ul>
<li><h3>機器要24hr開機且連上網路</h3></li>
<li><h3>至於設備...</h3></li>
<ul>
<li class="slide">直接拿電腦當伺服器</li>
<li class="slide">購買NAS檔案伺服器</li>
<li class="slide">可愛的樹莓派（流量小）</li>
<li class="slide">對你的分享器”刷機” ...嘿嘿嘿</li>
</ul>
</ul>
</section>
<section class="slide" id="space-self-computer">
<h2>直接拿電腦當伺服器</h2>
<p>我個人喜歡的配置</p>
<ul>
<li>OS: <a href="http://www.debian.org/" target="_blank">Linux Debian</a> / <a href="http://www.centos.org/" target="_blank">Linux CentOS</a></li>
<li>網頁伺服器: <a href="http://httpd.apache.org/" target="_blank">Apache</a> / <a href="http://nginx.org/" target="_blank">Nginx</a></li>
<li>FTP: <a href="https://security.appspot.com/vsftpd.html" target="_blank">vsftpd</a></li>
<li>遠端連線: <a href="http://www.openssl.org/" target="_blank">OpenSSL</a>, <a href="http://www.tightvnc.com/" target="_blank">VNCServer</a></li>
</ul>
</section>
<section class="slide" id="space-self-computer-windows-pack">
<h2>直接拿電腦當伺服器 - Windows</h2>
<ul>
<li><h3><a href="http://www.apachefriends.org/zh_tw/xampp-windows.html" target="_blank">XAMPP</a></h3>
<p>功能完整！有統一介面管理！！ (也有Linux版喔)</p></li>
<li><h3><a href="http://www.appservnetwork.com/" target="_blank">APPServ</a></h3>
<p>檔案小，功能很基本</p></li>
<li><h3><a href="http://www.ampps.com/" target="_blank">AMPPS</a></h3></li>
<p>有CMS安裝腳本，省去手動下載的麻煩</p></li>
</ul>
</section>
<section class="slide" id="space-self-server">
<h2>我朋友的伺服器</h2>
<img src="images/P1010293.JPG" />
</section>
<section class="slide" id="space-self-Raspberry_Pi">
<h2>可愛的樹莓派</h2>
<img src="images/P1010504.JPG" style="float: right" />
<ul>
<li><h3>價錢: </h3></li>
<ul>
<li>單機板: A型 $25美元，B型$35美元（建議買B型）</li>
<li>臺灣官方組合價2330元/組: ModelB + 16G SD卡 + 電源組</li>
</ul>
<li><h3><strong>流量小</strong> <-這點很重要</h3></li>
<li><a href="http://www.raspberrypi.com.tw/" target="_blank">Raspberry Pi台灣樹莓派</a>官網</li>
</ul>
</section>
<section class="slide" id="space-self-route-hack">
<h2>對你的分享器”刷機”</h2>
<p>如果你的分享器有外接USB隨身碟的功能的話，可以靠刷機，當場變成伺服器</p>
<h3>知名的第三方ROM</h3>
<ul>
<li><a href="http://www.dd-wrt.com" target="_blank">DD-WRT</a></li>
<li><a href="http://www.polarcloud.com/tomato" target="_blank">Tomato</a></li>
</ul>
<h3 class="text-warning">警告！刷機有風險，有可能導致分享器報銷，請確定了解自己再做什麼以後再下手</h3>
</section>
<section class="slide" id="space-self-network">
<h2>別忘了，網路嘿啊...</h2>
<ul>
<li class="slide"><h3>網路連線速度要夠快</h3></li>
<li class="slide"><h3><a href="javascript:$.deck('go', 'space-self-network-check_ip')">必需要有對外IP</a></h3>
<p>什麼是對外IP？可參考<a href="http://briian.com/777/ip.html" target="_blank">重灌狂人的外部電腦要用什麼IP才能連到我的電腦？</a></p></li>
<ul>
<li class="slide">固定IP: 那最好也是最簡單啦～那只要把網址對到這個IP即可</li>
<li class="slide">浮動IP: <a href="javascript:$.deck('go', 'space-self-dyndns')">請使用動態IP對應的服務</a></li>
</ul>
</ul>
</section>
<section class="slide" id="space-self-network-check_ip">
<h2>你的電腦本身是不是外部IP</h2>
<h3>可用此方法檢查:</h3>
<ol>
<li>打開終端機（命令提示字元）輸入: <code>ifconfig</code>
<br />（Windows 則輸入: <code>ipconfig</code>）</li>
<li>到<a href="http://myip.easylife.tw/" target="_blank">我的IP是多少？</a>來比對是否一樣</li>
</ol>
</section>
<section class="slide" id="space-self-network-check_ip-img">
<img src="images/query-myip.png" />
</section>
<section class="slide" id="space-self-network-no_publicip">
<h2>如果你的電腦不是外部IP</h2>
<ul>
<li><h3>請對你的分享器設定</h3></li>
<li><h3>如果你是用<strong>社區網路</strong>、<strong>外面租屋</strong>（每戶共用一組IP上網）</h3>
<p>只能找社區的網管幫你開某對外的Port，否則無解～</p></li>
</ul>
</section>
<section class="slide" id="space-self-dyndns">
<h2>浮動的對外IP</h2>
<h3>如果你每一次連線時得到的IP不一樣
<br />可使用提供動態DNS對應服務: </h3>
<ul>
<li><a href="http://freedns.afraid.org/" target="_blank">FreeDNS</a></li>
<li><a href="http://dyndns.org/" target="_blank">DynDNS.org</a></li>
<li><a href="http://www.noip.com/" target="_blank">No-IP</a></li>
</ul>
</section>
<section class="slide" id="space-self-dyndns-setup">
<h2>設定浮動的對外IP</h2>
<img src="images/ddwrt-ddns.png" style="float: right; margin-left:6px;" />
<ul>
<li><h3>下載這個服務給你的軟體</h3>
<p>當你重新連線後，程式會自動抓你目前的IP，並把網址重新對應上。</p></li>
<li><h3>使用分享器提供的功能</h3>
<p>方式如上述，只不過是對分享器設定，不是電腦。</p></li>
</ul>
</section>
<section class="slide" id="space-use">
<h1>要我自己準備設備，我沒那麼多錢啊～</h1>
</section>
<section class="slide" id="space-use-how-to-choose">
<h1>那我要怎麼挑選網頁空間？？</h1>
</section>
<section class="slide" id="space-use-choose">
<h2>網頁空間的挑選</h2>
<ul>
<li class="slide"><h3><a href="javascript:$.deck('go', 'space-use-choose-mb')">存放網站的檔案容量要足夠</a></h3></li>
<li class="slide"><h3>可讓親愛的客人來訪的流量多少</h3></li>
<li class="slide"><h3><a href="javascript:$.deck('go', 'space-use-choose-url')">要能自己另外綁網址</a></h3></li>
<li class="slide"><h3><a href="javascript:$.deck('go', 'space-use-choose-upload')">上傳方式（FTP or Git）</a></h3></li>
</ul>
</section>
<section class="slide" id="space-use-choose-mb">
<h2>存放網站的檔案容量要足夠</h2>
<h3>一般來說500MB的容量應該就很夠了</h3>
<p>除非是圖片、影片很多...</p>
<h3 class="text-warning">如果有大量圖片or影片的話，建議另外找空間存放</h3>
</section>
<section class="slide" id="space-use-choose-url">
<h2>為何要能自己另外綁網址</h2>
<h3>嗯...這問題</h3>
<p class="slide big-text"><a href="javascript:$.deck('go', 'domain-why')">待會就會提到！！</a></p>
</section>
<section class="slide" id="space-use-choose-upload">
<h2>上傳方式</h2>
<ul>
<li><h3>一般來說都是用FTP上傳的</h3></li>
<li><h3>但也有採用Git push上傳的</h3>
<p>Git是什麼？版本控制系統... <a href="http://littleb.tc/slides/2012/everyone/git.html" target="_blank">詳細可點這參考</a>:P</p></li>
</ul>
<p class="text-warning">絕對不要挑到”<strong>只能透過管理網頁界面上傳</strong>”的空間</p>
</section>
<section class="slide" id="space-use-choose-part2">
<h2>網頁空間的挑選 #2</h2>
<ul>
<li class="slide">如果是動態網站: 要能跑PHP+MySQL (MariaDB)</li>
<li class="slide"><a href="javascript:$.deck('go', 'space-use-panel-CPanel')">管理界面是否得心應手</a></li>
</ul>
<h3>其他方面</h3>
<ul>
<li class="slide"><a href="javascript:$.deck('go', 'space-use-panel-edit-htaccess')">是否支援.htaccess</a></li>
<li class="slide"><a href="javascript:$.deck('go', 'space-use-panel-edit-errpages')">是否可自訂404錯誤 (笑</a></li>
<li class="slide">可以開幾個資料庫</li>
<li class="slide">FTP帳號可開多少個</li>
<li class="slide"><a href="javascript:$.deck('go', 'space-use-email')">有沒有提供Email</a></li>
<!-- <li class="slide"><a href="javascript:$.deck('go', 'space-use-email')">是否支援SSL加密</a></li> -->
</ul>
</section>
<section class="slide" id="space-use-panel-CPanel">
<h2>CPanel</h2>
<img src="images/cPanel%20X.png">
</section>
<section class="slide" id="space-use-panel-VistaPanel">
<h2>VistaPanel</h2>
<img src="images/Vista%20Control%20Panel.png">
</section>
<section class="slide" id="space-use-panel-edit-htaccess">
<h2>是否支援.htaccess</h2>
<h3>我在什麼時後會用到？</h3>
<ul>
<li class="slide"><h4><a href="http://sofree.cc/htaccess-index/" target="_blank">控制是否要讓觀眾看到資料夾有哪些檔案</a></h4></li>
<li class="slide"><h4><a href="http://readily-notes.blogspot.tw/2011/11/url-rewrite.html" target="_blank">讓網址更漂亮一點</a></h4></li>
<li class="slide"><h4><a href="http://sofree.cc/block-country/" target="_blank">控制誰可以看你的網站（阻擋部份IP）</a></h4></li>
<li class="slide"><h4><a href="http://www.vixual.net/blog/archives/247" target="_blank">自訂錯誤頁面（404, 403, 500 ...）</a></h4>
<p>不知道錯誤代碼是什麼？<a href="http://onefunnyjoke.com/%E6%83%A1%E6%90%9E/%E8%AE%93%E8%B2%93%E5%92%AA%E4%BE%86%E5%B8%B6%E4%BD%A0%E8%AA%8D%E8%AD%98http%E9%8C%AF%E8%AA%A4%E4%BB%A3%E7%A2%BC/" target="_blank">讓貓咪來帶你認識HTTP錯誤代碼</a></p></li>
<li class="slide"><h4><a href="http://vinta.ws/blog/370" target="_blank">網址轉址</a><small>（我最近用於改網址的舊網址轉址）</small></h4></li>
</ul>
<p>線上製作.htaccess - <a href="http://www.htaccesseditor.com/tc.shtml" target="_blank">.htaccess Editor</a></p>
</section>
<!-- 404錯誤圖片 -->
<section class="slide" id="space-use-panel-edit-errpages">
<h2>自訂404和其他錯誤頁面</h2>
<img src="images/edit_err_pages.png">
</section>
<section class="slide" id="404pages-view-title">
<h1>來～讓我們好好的欣賞404吧～</h1>
</section>
<section class="slide" id="404pages-view-1">
<a href="http://staff.sitcon.org/asdfg" target="_blank"><img src="images/404-SITCON.png" /></a>
</section>
<section class="slide" id="404pages-view-2">
<a href="https://mozillians.org/en-US/asefjzdkcvlxadnv" target="_blank"><img src="images/404-Mozillians.png" /></a>
</section>
<section class="slide" id="404pages-view-3">
<a href="https://support.mozilla.org/zh-TW/asdfg" target="_blank"><img src="images/404-MozillaSUMO.png" /></a>
</section>
<section class="slide" id="404pages-view-4">
<a href="https://github.com/asdfghjkl;%27" target="_blank"><img src="images/404-GitHub.png" /></a>
</section>
<section class="slide" id="space-use-email">
<h2>有沒有提供Email</h2>
<h3 class="slide">通常什麼時後會用到？？</h3>
<ol>
<li class="slide">顧客向你註冊帳號時，<strong>要寄給他電子信箱驗證信</strong></li>
<li class="slide">通知顧客已成功訂購、出貨</li>
<li class="slide"><del>定時寄送廣告郵件</del> ←做人不要這樣嘛～</li>
</ol>
<h3 class="slide">就算沒提供，是否支援用外部SMTP...其他方式寄送？？</h3>
</section>
<section class="slide" id="space-use-choose-notice">
<h2>不過...挑選空間更重要的...</h2>
<h3 class="slide text-warning big-text">請打聽評價是否夠穩...</h3>
</section>
<section class="slide" id="space-use-vps">
<h2>VPS?? 能吃嗎？</h2>
<ul>
<li>虛擬主機: 同臺主機內不同網站"共用"同資源(CPU, RAM......)</li>
<li>VPS: 類似虛擬電腦的概念，給你一個獨立的系統，完全由你DIY</li>
</ul>
<p>當然價格也比虛擬主機高一點</p>
</section>
<section class="slide" id="space-recommend-free">
<h2>推薦免費的網頁空間</h2>
<ul>
<li><h3><a href="http://coz.tw/dz6/?gid=133" target="_blank">初心者站長論壇</a></h3></li>
<li><h3><a href="http://www.000webhost.com/" target="_blank">000webhost</a></h3></li>
<li><h3><a href="http://lionfree.net/" target="_blank">獅子的免費虛擬主機</a></h3>
<p>雖然lionfree.tk那邊也能註冊，但不建議，因為最近我朋友有災情～</p></li>
<li><h3><a href="http://www.hyperphp.com/" target="_blank">hyperphp</a></h3></li>
</ul>
</section>
<section class="slide" id="space-recommend-premium-title">
<h1>既然有免費的，幹嘛還要用付費的</h1>
</section>
<section class="slide" id="space-recommend-premium-why">
<h2>付費...就是有保障</h2>
<ul>
<li class="slide"><h3>可用空間變大、可允許流量變大、可建立更多個資料庫、可綁定多個網址.....</h3></li>
<li class="slide">重點是...</li>
<ul>
<li class="slide"><h3>因為是付費，所以空間不能隨便掛點</h3></li>
<li class="slide"><h3>因為是付費，資料不能隨便消失、砍帳號</h3></li>
</ul>
</ul>
</section>
<section class="slide" id="space-recommend-premium">
<h2>可以考慮的付費空間</h2>
<ul>
<li><h3><a href="http://mousems.com/vps/" target="_blank">MouseMs's VPS主機合租服務(虛擬主機)</a></h3></li>
<li><h3><a href="http://www.godaddy.com/hosting/web-hosting-new.aspx?isc=iap599v1" target="_blank">GoDaddy</a></h3></li>
<li><h3><a href="http://www.yu-lan.com.tw/host.html" target="_blank">裕藍多媒體工作室</a></h3></li>
<li><h3><a href="http://www.my-life.tw/" target="_blank">My-Life 虛擬主機</a></h3></li>
<li><h3><a href="http://www.serverzoo.com/" target="_blank">ServerZoo 虛擬主機動物園</a></h3></li>
</ul>
</section>
<section class="slide" id="space-tester-title">
<h1>我想測試我挑的空間如何？</h1>
</section>
<section class="slide" id="space-tester-phpinfo">
<h2>使用phpinfo函式來查詢資訊</h2>
<img src="images/phpinfo.png" />
<p>phpinfo.php: </p>
<pre><code><?php
phpinfo();</code></pre>
</section>
<section class="slide" id="space-tester-phptestinfo">
<h2>使用PHP探針</h2>
<ul>
<li><h3><a href="http://www.yahei.net/" target="_blank">雅黑PHP探针</a></h3>
<p><a href="http://www.yahei.net/tz/tz_tw.php" target="_blank">官方DEMO頁</a></p></li>
<li><h3>iProber PHP 探針</h3>
<p>官網已經掛掉了......<br /><a href="http://briian.com/5403/iprober.html" target="_blank">重灌狂人的介紹</a></p></li>
</ul>
</section>
<!-- 綁網址 -->
<section class="slide" id="domain-why">
<h1>有空間了<br /><strong>那別人要怎麼連進來？？</strong></h1>
</section>
<section class="slide" id="domain-who">
<h2>網址就是你家門牌</h2>
<ul>
<li class="slide"><h3>搜尋引擎檢索的標準</h3></li>
<li class="slide"><h3>請另外綁網址，盡量不要使用網站空間附給你的網址</h3><p>日後網站搬家時，只要重新調整網址對應即可，不需重新給別人新網址</p></li>
<li class="slide"><h3>千萬千萬...<strong>不要直接給人家IP啦～</strong></h3></li>
</ul>
</section>
<section class="slide" id="domain-example">
<h2>那這網址............</h2>
<ul class="slide">
<li><h3><a href="http://yeeeeeeeeeeeeeees.com" target="_blank">http://yeeeeeeeeeeeeeees.com</a></h3></li>
<li><h3><a href="http://nooooooooooooooo.com" target="_blank">http://nooooooooooooooo.com</a></h3>
<p><a href="https://soundcloud.com/nooooooooooooo/nooooooooooooooo" target="_blank">聲音檔 (原網頁已拿掉按鈕)</p></a></li>
<li><h3><a href="http://www.nyan.cat" target="_blank">http://nyan.cat</a></h3>
<p><a href="https://www.youtube.com/watch?v=QH2-TGUlwu4" target="_blank">Youtube - Nyan Cat [original]</p></a></li>
</ul>
<h3 class="slide">啥鬼！？？？？？？</h3>
</section>
<section class="slide" id="domain-whois">
<h2>可以用WHOIS查詢</h2>
<a href="http://www.whois365.com/tw/" target="_blank"><img src="images/whois.png">
<p>http://www.whois365.com/tw/</p></a>
</section>
<section class="slide" id="domain-type">
<h2>頂級域名？二級域名？</h2>
<div style="float: left; width: 40%; text-align: right;">
<h3>頂級域名</h3>
<ul>
<li>*.com</li>
<li>*.net</li>
<li>*.tw</li>
<li>*.cc</li>
</ul>
</div>
<div style="float: right; width: 40%;">
<h3>二級域名</h3>
<ul>
<li>*.twbbs.org</li>
<li>*.twgg.org</li>
<li>*.cu.cc</li>
<li>*.no-ip.org</li>
</ul>
</div>
</section>
<section class="slide" id="domain-recommend-free">
<h2>免費網域推薦 <a href="http://twbbs.org" target="_blank">twbbs.org</a></h2>
<ul>
<li><h3>是與PTT那票人合作的</h3></li>
<li><h3>期限是一年</h3>
<p>不過快到期前可免費續用</p></li>
<li><h3>申請需要一個禮拜的審核時間</h3></li>
</ul>
</section>
<section class="slide" id="domain-recommend-free-other">
<h2>其他免費網域推薦</h2>
<ul>
<li><a href="http://www.dot.tk/zu/index.html" target="_blank">dot.tk</a> - *.tk</li>
<li><a href="http://www.noip.com/" target="_blank">NO-IP</a> - *.no-ip.org / -.no-ip.info / ...</li>
<li><a href="http://www.registry.cu.cc/" target="_blank">CU.CC</a> - *.cu.cc</li>
</ul>
<h3 class="slide text-warning">不過據說因為太容易取得而造成濫用，已被Google封殺，不檢索進搜尋裡</h3>
</section>
<section class="slide" id="domain-sub">
<h1>以上都是二級網域</h1>
</section>
<section class="slide" id="domain-premium">
<h1>但我還是想要有自己的專屬網址</h1>
</section>
<section class="slide" id="domain-premium-buy">
<h1>取得頂級域名...付費吧～～～</h1>
</section>
<section class="slide" id="domain-premium-country">
<h2>網域.後面字大不同</h2>
<ul>
<li><h3>通用頂級域名</h3>
<p>.com .org .net .info .gov .edu</p></li>
<li><h3>國家頂級域名</h3>
<p>.tw .cc .in .jp</p></li>
</ul>
<p>參考資料 <a href="http://zh.wikipedia.org/zh-tw/%E5%9F%9F%E5%90%8D" target="_blank">http://zh.wikipedia.org/zh-tw/%E5%9F%9F%E5%90%8D</a></p>
</section>
<section class="slide" id="domain-premium-country-but">
<h2>不過現在越來越模糊了</h2>
<h3>簡單來說就是...你喜歡就好</h3>
<ul>
<li>.cc 原是澳洲海外領地科科斯群島國家及地區，台灣無名小站就用這</li>
<li>.tv 原是圖瓦魯國家及地區，不過有影音網站喜歡用</li>
<li>.im原是英國海外屬地萌島國家及地區，不過有即時通軟體的官網網址就用</li>
</ul>
</section>
<section class="slide" id="domain-premium-country-money">
<h2>價錢大不同</h2>
<ul>
<div style="float: left; width: 40%;">
<h3>國內</h3>
<ul>
<li>.tw 一年800元</li>
<li>.idv.tw 一年400元</li>
</ul>
<h3>通用</h3>
<ul>
<li>.com 一年10美金 (約NT$300)</li>
<li>.org 一年11美金 (約NT$330)</li>
</ul>
</div>
<div style="float: right; width: 40%;">
<h3>他國</h3>
<ul>
<li>.in 一年9美金 (約NT$270)</li>
<li>.io 一年99美金 (約NT$2970)</li>
<li>.cc 一年35美金 (約NT$1050)</li>
</ul>
</div>
</ul>
<p style="clear: both;">以上為粗略估計，每家域名提供商的價錢不一樣 (範例中的台幣美金換算是*30估算的)</p>
</section>
<section class="slide" id="domain-premium-recommend-store">
<h2>推薦店家</h2>
<ul>
<div style="float: left; width: 40%;">
<li>國外</li>
<ul>
<li><a href="https://godaddy.com/" target="_blank">goDaddy</a></li>
<li><a href="https://www.name.com/" target="_blank">name.com</a></li>
<li><a href="https://www.namecheap.com/domains/" target="_blank">namecheap</a></li>
</ul>
</div>
<div style="float: right; width: 40%;">
<li>國內</li>
<ul>
<li><a href="http://myname.pchome.com.tw/" target="_blank">PChome</a></li>
<li><a href="http://nweb.hinet.net/" target="_blank">Hinet</a></li>
<li><a href="http://www.net-chinese.com.tw/" target="_blank">網路中文</a></li>
</ul>
</div>
</ul>
</section>
<section class="slide" id="domain-premium-notice">
<h2>購買域名注意</h2>
<ul>
<li class="slide"><h3>請注意域名是否合法？？</h3>
<p>雖然現在名稱有模糊化，但部份名稱還是有規定在。</p>
<p>申請容易，但不合規定被抓到的話，隨時會被收回。</p></li>
<li class="slide"><h3>如果要購買臺灣的域名，請向臺灣提供商購買</h3>
<p>雖然國外也有賣.tw域名，但會貴很多很多</p>
<p>相反的，如果要買國際/通用域名，請向國外購買</p></li>
<li class="slide"><h3>請注意價錢是<strong>第一年</strong>？還是以後都是？</h3>
<p>有好幾家標榜價錢低廉，但到第二年價差就差非常多</p></li>
<li class="slide"><h3>好域名就趕快搶吧～先搶先贏！！</h3></li>
</ul>
</section>
<section class="slide" id="domain-premium-my-buy">
<h2>老實說...我最近趁特價的時候，就敗了～</h2>
<a href="http://www.plurk.com/p/jeo3q5" target="_blank"><img src="images/my_buy.png"></a>
</section>
<section class="slide" id="domain-master">
<h1>有了域名以後，你就是這域名的主人！！</h1>
</section>
<section class="slide" id="domain-subdomain-example">
<h2>有了域名以後，你可以...</h2>
<ul>
<li>http://yuaner.tw</li>
<li>http://<strong>blog.</strong>yuaner.tw</li>
<li>http://<strong>img.</strong>yuaner.tw</li>
<li>http://<strong>album.</strong>yuaner.tw</li>
<li>ftp://<strong>ftp.</strong>yuaner.tw</li>
<li>me@yuaner.tw</li>
</ul>
</section>
<section class="slide" id="domain-DNS-server">
<h2>DNS Server</h2>
<ul>
<li><h3>你可以自行架設DNS Server</h3>
<p>適合需要大量子網域、主機......</p>
<p>不過...一樣要24hr開著，而且技術方面完全由你負責</p></li>
<li><h3>用外面的服務託管</h3>
<p>成本低，較容易上手，適合初學者。</p></li>
</ul>
</section>
<section class="slide" id="domain-subdomain-recommend">
<h2>免費提供DNS代管服務</h2>
<ul>
<li><h3><a href="http://freedns.afraid.org/" target="_blank">FreeDNS</a></h3>
<p>老牌！評價高、穩定！！</p></li>
<li><h3><a href="https://www.namecheap.com/products/freedns.aspx" target="_blank">NameCheap</a></h3>
<p>設定界面較漂亮</p></li>
</ul>
</section>
<section class="slide" id="domain-subdomain-setup">
<h2>設定好你的子網域吧～</h2>
<img src="images/setup_subdomain.png">
</section>
<section class="slide" id="domain-update-notice">
<h1>DNS設定好後可能需要花一兩天的時間對應上</h1>
</section>
<!-- TODO SSL -->
<!--<section class="slide" id="ssl-title">
<h2>SSL加密</h2>
<p>你我之間傳輸的資料可能會被第三者（線路的中間）竊取，可採用SSL加密，讓第三者無法解讀你我之間的的內容。</p>
<h3>免費的SSL憑證</h3>
<ul>
<li><a href="http://www.startssl.com/" target="_blank">StartSSL™</a></li>
</ul>
<p>免費的 Class 1 憑證基本上不檢查購買者的身份，取得容易，部份瀏覽器不採信此憑證，且萬一交易出問題也無法證明身份。</p>
</section>-->
<section class="slide" id="website-finish">
<h1>這樣你的網站就大致上成型了～</h1>
</section>
<!-- 之後的維護 -->
<section class="slide" id="maintain-title">
<h1>隨著網站的完成<br />甚至是開張</h1>
</section>
<section class="slide" id="maintain-menu">
<h2>你可能會需要...</h2>
<ul>
<li class="slide"><h3><a href="javascript:$.deck('go', 'uptime-title')">掛掉的即時通知</a></h3></li>
<li class="slide"><h3><a href="javascript:$.deck('go', 'performance-title')">了解進入你的網站要花多久時間？</a></h3></li>
<li class="slide"><h3><a href="javascript:$.deck('go', 'pressuretest-title')">壓力測試 - 能承受多少人來訪</a></h3></li>
<li class="slide"><h3><a href="javascript:$.deck('go', 'seo-title')">對搜尋引擎最佳化</a></h3></li>
</ul>
</section>
<section class="slide" id="uptime-title">
<h1>另外如果網站哪天突然掛掉了...</h1>
</section>
<section class="slide" id="uptime-title2">
<h1>會希望能在"第一時間"通知你吧～</h1>
</section>
<section class="slide" id="uptime-statuscake">
<h2><a href="https://www.statuscake.com/" target="_blank">StatusCake</a> -監控你的網站</h2>
<img src="images/statuscake.png" />
</section>
<section class="slide" id="uptime-hosttracker">
<h2><a href="http://host-tracker.com/" target="_blank">Host Tracker</a></h2>
<p>如果自己的主機都沒有當機，還可以向 Host Tracker 拿 uptime 貼紙放在網頁上炫耀一下。</p>
<p><a href="http://blog.zeroplex.tw/2008/06/host-tracker.html?m=0" target="_blank">Zeroplex 生活隨筆: Host Tracker 網站監控</a></p>
</section>
<!-- 網站測速 -->
<section class="slide" id="performance-title">
<h1>進入你的網站要花多久時間？</h1>
</section>
<section class="slide" id="performance-recommend-tools">
<h2>可以使用網站效能分析工具</h2>
<ul>
<li><h3><a href="javascript:$.deck('go', 'performance-recommend-tools-pingdom')">pingdom TOOLS</a></h3></li>
<li><h3><a href="javascript:$.deck('go', 'performance-recommend-tools-gtmetrix')">GTmetrix</a></h3></li>
<li><h3><a href="http://www.webpagetest.org/" target="_blank">WebPageTest</a></h3></li>
<li><h3><a href="http://developer.yahoo.com/yslow/" target="_blank">YSlow</a> - <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/" target="_blank">Firefox擴充套件</a></h3>
<p><a href="http://kevintsengtw.blogspot.tw/2010/08/yslow.html" target="_blank">使用YSlow幫你的網站靜態檔案做優化處理 - mrkt 的程式學習筆記</a></p></li>
</ul>
</section>
<section class="slide" id="performance-recommend-tools-pingdom">
<h2><a href="http://tools.pingdom.com/fpt/" target="_blank">pingdom TOOLS</a></h2>
<img src="images/pingdom-Website_speed_test.png" />
<p>參考資料: <a href="http://sofun.tw/pingdom/" target="_blank">[教學] Pingdom 網頁載入速度測試工具，找出拖垮網站速度元凶 - 簡單生活Easylife</a></p>
</section>
<section class="slide" id="performance-recommend-tools-gtmetrix">
<h2><a href="http://gtmetrix.com/" target="_blank">GTmetrix</a></h2>
<img src="images/GTmetrix-blog.yuaner.tw.png" />
<p>參考資料: <a href="http://www.playpcesor.com/2010/05/gtmetrix.html" target="_blank">GTmetrix 線上免費分析網站效能缺陷，根治拖慢網頁速度元兇 - 電腦玩物</a></p>
</section>
<!-- 壓力測試 -->
<section class="slide" id="pressuretest-title">
<h1>想了解你的網站能承受多少人來訪啊？</h1>
</section>
<section class="slide" id="pressuretest-loadimpact">
<h2><a href="https://loadimpact.com" target="_blank">Load Impact</a> -給網站做壓力測試</h2>
<img src="images/loadimpact.png" />
<p>我忘記最多能做多少連線數測試，印象中我的伺服器差不多在50人以上同時連線就差不多炸掉了 QQ</p>
</section>
<section class="slide" id="analytics-title">
<h1>想了解你的網站的流量狀況</h1>
</section>
<section class="slide" id="analytics-recommend">
<h2>流量分析工具</h2>
<ul>
<li><h3><a href="http://www.google.com/intl/zh-TW/analytics/" target="_blank">Google Analytics</a></h3></li>
<ul><li>若使用Wordpress架站，可搭配<a href="http://wordpress.org/plugins/googleanalytics/" target="_blank">Google Analytics</a></li></ul>
<li><h3><a href="http://statcounter.com/" target="_blank">StatCounter</a></h3></li>
<ul><li>若使用Wordpress架站，可搭配<a href="http://wordpress.org/plugins/official-statcounter-plugin-for-wordpress/" target="_blank">StatCounter - Free Real Time Visitor Stats</a>></li></ul>
<li><h3><a href="http://counter.fc2.com/tw/" target="_blank">FC2計數器</a></h3>
<p>非常可愛的計數器...</p></li>
<li><h3><del>Yahoo 站長工具</del> （已倒閉...哭哭）</h3></li>
</ul>
</section>
<section class="slide" id="analytics-no_track_me-title">
<h1>如果不想讓網站的主人知道我是從哪來？</h1>
</section>
<section class="slide" id="analytics-no_track_me-firefox">
<h2>Firefox 設定不要追蹤我</h2>
<img src="images/firefox-track_me.png" />
<p>在"編輯"→"偏好設定"→"個人隱私"那邊就能找到。</p>
</section>
<section class="slide" id="analytics-no_track_me-chromium">
<h2>Chromium 設定不要追蹤我</h2>
<img src="images/chromium-track_me.png" />
<p>在"自訂及控制"（工具列的選項紐）→"設定"→"顯示進階設定"那邊就能找到。</p>
</section>
<!-- SEO -->
<section class="slide" id="seo-title">
<h1>網頁背後的摘要</h1>
</section>
<section class="slide" id="seo-security-title">
<h1>有人覺得搜尋優化<br />"完全"不用管</h1>
</section>
<section class="slide" id="seo-security-passwdlist">
<h2>那看到這個呢......？</h2>
<img src="images/google-search-passwd.png" />
<p>我<strong>"只是"</strong>搜尋，完全沒用啥高深的技術......</p>
<p>不要讓搜尋引擎爬到啊......囧</p>
</section>
<section class="slide" id="seo-google-robots">
<h2>寫Robots.txt來控制Google的檢索</h2>
<ul>
<li><h3><a href="https://support.google.com/webmasters/answer/156449?hl=zh-Hant" target="_blank">Google: 使用 robots.txt 檔案來攔截或移除網頁</a></h3></li>
<li><h3><a href="http://gordon168.tw/?p=202" target="_blank">高登工作室: 用Robots.txt來和搜尋機器人打交道</a></h3></li>
<li><h3><a href="http://eric0703.pentaxfans.net/2016" target="_blank">Eric的攝影世界: robot.txt的規則以及寫法</a></h3></li>
</ul>
</section>
<section class="slide" id="seo-meta">
<h2>網頁上的<code><meta></code>也是搜尋引擎檢索根據</h2>
<h3>相關教學</h3>
<ul>
<li><a href="http://seo.soft4fun.net/2009/05/seo%E6%8A%80%E8%A1%93-element/" target="_blank">硬是要SEO！: [SEO教學,SEO技術] HTML META Element</a></li>
<li><a href="http://blog.seo-tw.org/2010/10/seo-meta.html" target="_blank">台湾SEO學院: SEO修身篇 | 五個最常誤用的Meta值</a></li>
</ul>
<h3>本投影片範例</h3>
<pre><code><meta name="description" content="這是我架起一個個人網站所得到的經驗，就用這份投影片分享給大家吧！！">
<meta name="author" content="元兒～">
<meta name="keywords" content="架站經驗 架站"></code></pre>
</section>