Title1
Title2
Title3
Login
Link
Search
教學頻道
中信金融管理學院
點二下資訊社
新化社區大學
GAS+購物車開發
GAS專案
GAS+購物車開發
Google表單實戰電商購物車
GAS+LineBot開發
外帶內用管理
購物車管理
線上打卡系統管理
萬用表單5
LineBot 線上書籍
PHP專案
網站程式設計-PHP(10502)
網站程式設計-PHP
PHP SMARTY 樣板引擎
SMARTY樣板
課程教材
雲端工具入門
行動應用企劃人員養成班
萬用表單5
GAS+LineBot開發
研習
萬用表單5
鐵人賽-Google Apps Script整合運用
GAS+LineBot開發
樂齡3C學習不斷電
臺東專科學校
GAS 開發 LineBot 自動接單系統
德鍵
112行動應用企劃人員養成班
111網頁前端設計工程師培訓班
110網頁前端設計工程師培訓班
網頁前端設計工程師培訓班
old
網頁前端設計與開發運用培訓班
Javascript & JQUERY
免費釋出專案
萬用表單
自動資料查詢
台南社大
113-01-雲端工具入門
112-02-AI自動管理
112-01-用QRCODE打造自動化環境
110-01-用雲端打造自動化環境
用雲端打造自動化環境
Google雲端智慧王
讓雲端工具提昇工作效率
Google 速學工作術
台南市總圖
教你如何使用LINE Bot機器人增加工作效率
Google雲端工具基礎應用
Google雲端工具進階應用
工作自動化與行銷(台南社大)
全部教材
台南市人力發展中心
Google工具應用實務班
企業課程
鐳達實業有限公司
GAS研習-20200726
中正大學-GAS研習
將軍圖書館
Google雲端工具基礎應用
Google雲端工具進階應用
南方創客
GitHub 衍伸應用
Google 應用工作術
永康社大
用雲端打造自動化環境(110-春季班)
用雲端打造自動化環境
南關社大
電腦、手機生活應用
遠端桌面
公司業務
傳送檔案
adwcleaner
W10 更新
客戶網站
最近完工
深雋設計有限公司
新化社大校務系統
靚品科技有限公司
5C Precision Co., Ltd.
BALANCE 1
RWD網站
東北關廟麵
曼馱有限公司
永宸昕有限公司
昌美實業社
形象網站
勇信機械有限公司
GAS專案
聯絡我們&案件委託
所有書籍
「網頁設計好好玩(10502)」目錄
MarkDown
5. 建置網站流程
1. 網頁設計環境
2. Git 環境安裝
3. Git操作流程
3-1 Github操作
4. 註冊網址
5. 建置網站流程
6. 綜合練習
7. CSS盒子模式
7-1 練習
8. 網站佈局
9. bootstrap
10. 網站架構
11. 最新消息
12. FastStone Image Viewer
13. CSS背景
14. 綜合練習
15. 瀑布流
16. 線上資源
7. CSS盒子模式
網頁設計好好玩(10502) ============== 一、建立網頁檔案，上傳至github 1. 檔案管理：這裡有二個部份，分為「本地端」「伺服端」 2. git bash：幫我們將網頁檔案傳至「伺服端」 git add . git commit -m '1' git push origin master 3. sublime text3：用它來建立網頁檔案， 4.  5. 常用標籤： ``` <pre class="brush:as3;"> <h1>~<h6>標題 <p>段落</p> <div>區域</div> 程式碼 <ol>有序清單</ol><ul>無序清單</ul> <table></table> -------------------------------------------------- <a>連結</a> <br />換行 <img />圖片 <span>區域</span> ``` [5-1.html](http://tncomu10601.ugm.com.tw/5-1.html) ``` <pre class="brush:as3;"> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習5-1</title> </head> <body> <h1>練習5-1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html> ``` [5-2.html](http://tncomu10601.ugm.com.tw/5-2.html) ``` <pre class="brush:as3;"> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習5-2</title> </head> <body> <h1>練習5-2</h1> <h2>練習5-2</h2> <h3>練習5-2</h3> <h4>練習5-2</h4> <h5>練習5-2</h5> <h6>練習5-2</h6> 練習5-2 <p>練習5-2</p> <div>練習5-2</div><div>練習5-2</div> <span>練習5-2</span><span>練習5-2</span> </body> </html> ``` [5-3.html ](http://tncomu10601.ugm.com.tw/5-3.html)：請自行至 tw.yahoo.com 複制一段標題與段落 ``` <pre class="brush:as3;"> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習5-3</title> </head> <body> <h1>MLB／為了這一分 他受盡了苦難</h1> <p>紅雀隊今天以1比2輸給小熊隊，不過紅雀隊攻下的唯一1分，可是Stephen Piscotty歷經各種苦難之後拿下來的。</p> <p>紅雀隊今天遭到小熊隊強投Jake Arrieta的全力封鎖，打擊無法發揮。5局下Piscotty被Arrieta投出的球擊中右手肘上一壘，接著Arrieta暴投，Piscotty衝上二壘時，又被捕手Willson Contreras的傳球打到另一隻手的手肘。</p> </body> </html> ``` [index.html](http://tncomu10601.ugm.com.tw/index.html) ``` <pre class="brush:as3;"> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> </head> <body> <h1>首頁</h1> <ul> <li><a href="5-1.html">練習5-1</a></li> <li><a href="5-2.html">練習5-2</a></li> <li><a href="5-3.html" target="_blank">練習5-3</a></li> </ul> </body> </html> ``` [5-4.html](http://tncomu10601.ugm.com.tw/5-4.html) ：練習插入圖片，請先將上面圖片下載至專案 img/ex5.png 這裡需了解「圖片放置位置」「網頁檔案位置」之間的關係 ``` <pre class="brush:as3;"> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習5-4</title> </head> <body> <h1>插入圖片</h1> <div><img src="img/ex5.png"></div> </body> </html> ``` </body></html>
5. 建置網站流程