這個網站純粹教大家怎麼套用模版，在最短時間完成靜態個人網頁，不會深入討論到HTML、CSS、Javascript要怎麼寫，目標是把網站架到GITHUB或是成大提供的個人網站空間上。

相信大家一年級的計概學得不錯，直接開始巴，下載模版對照學習，
希望大家看完這個網站，可以學會修改任何模版以做成自己想要的網站。
模版資源：templated.co html5up.net designscrazed.org
或搜尋 Bootstrap Template, RWD HTML5 Template, etc

STEP 1

解壓縮下載的模版，開啟index.html看模版是否正常運作，如果如左邊的圖，恭喜你已經完成了95%！

下載Sublime Text方便編輯原始碼。

STEP 2

用Sublime Text開啟index.html找到<h1>Hello</h1>(ctrl+f搜尋)Hello改成中文字，ctrl+s儲存，再去網頁看有沒有改變。

基本上要做的就是改Sublime Text開啟index.html裡白色字的部分。

STEP 3

客製自己的內容，以下步驟用我簡單做的顏老師網站說明一些東西：
顏教授的那個網站也是用現在很流行的單頁式網頁的模版。
高畫質的照片可以到Unsplash.com找，

找一張照片替換掉原本模版的照片，到images資料夾可以看到那張照片的檔名為hero1.jpeg，通常你要更改的地方都在index.html這個檔案裡，但有些東西有時候得在CSS或JS裡面改，CSS的機率又高很多。

找出hero1.jpeg被設定在哪裡，出現在CSS資料夾裡的style.css機率非常高，CSS用來設計整個網頁的基本樣式，JS則動畫居多，或者可以用更簡單的方法找如左圖，找到後一樣用Sublime Text開啟那個CSS檔案，ctrl+f找到hero1.jpeg，把hero1.jpeg改成你要的圖片檔名，後面的副檔名注意不要打錯，ctrl+s存檔後更新網頁看照片有沒有改變。

STEP 4

對照網頁和原始碼，把網頁上的那些文字改成自己需要的，雖然原始碼看起來很複雜，但其實要改的地方只有一點點而已，例如網頁再往下拉看到那裡可以放張圖片，在images資料夾找到這張圖片，再來看它被寫在哪裡，一樣可以用上面那種方法找發現在style.css裡，更改成你需要的檔名即可。

介紹幾個常用的簡單語法

<p>p為段落的意思，中間放文字</p>
<br />用來換行
<h1>h為標題，h1最大h6最小</h1>
<strong>這是粗體</strong>
<a href="網址" target="_blank">中間放你要顯示的超連結文字</a>
(target="_blank"是開新分頁的語法，刪掉的話就原本的網頁按了連結後直接換到連結網址)
<!--這是註解的語法，純粹用來說明這段code在幹嘛-->
<table><td><tr>為表格

再強調一次，大部分要改的就是Sublime Text裡白色字而已。

STEP 5

因為work和service沒有要用到，把原始碼這段刪除，從<section>刪到</section>。
再往下skill bar的設定也很直觀<div class="skillbar" data-percent="99%">%數自己設定。

STEP 6

網頁內容差不多就這樣寫，非常簡單，在最下面有一個contact的表單，因為等下網頁要用Github Pages架，但它不支援php，這裡用最原始的方法寫 

<form method="post" action="MAILTO:yenmf@mail.ncku.edu.tw">
mailto的語法會開啟outlook來寄信。

STEP 7

最後，設定MENU，在原始碼<body>下面會看到<nav>，<nav>用來導覽網站，因為我剛才把Work和Services刪除了，所以把這裡的也刪掉，更改後存檔看有沒有正常運作。大致到這裡網站已經完成，以下一些補充說明。

一點點CSS

在示範網站的最下面，我把模版的twitter改成wiki，顏色改成綠色，用Sublime Text開啟style.cssctrl+f搜尋twitter看到

.twitter{
  background: #ABABAB;
}
.twitter a:after{
  background-color: #77ccf1;
}
仿照它的格式寫出
} .wiki{
  background: #ABABAB;
}
.wiki a:after{
  background-color: #00ff00;
}
新增一個class="wiki" 連結顏色變化從#77ccf1變#00ff00

Font Awesome Icons

ICON在製作網頁時也常用到，如果模版中有fonts這個資料夾就可以用(如果沒有可以自己下載)，到http://fortawesome.github.io/Font-Awesome/icons/看有什麼icons可以用。

示範如下： 

<a href="#" class="icon fa-twitter">．．．</a>
<a href="#" class="icon fa-facebook">．．．</a>
<a href="#" class="icon fa-instagram">．．．</a>
到網站找需要的icon後改fa-之後的英文字。

參照示範網頁與原始模版

下載以下檔案，檢視修改的地方

  • 進階教學，掛Plugins到你的網站

  • 發布網站到Github或是成大個人網頁空間

  • 購買網域教學，一年不超過新台幣50元