> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/html-css-learning/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/html-css-learning/shi-yi-3001-kai-fa-duo-ye-shi-shi-zhan-jiang-jie.md).
# 十一、開發多頁式實戰講解
## 11-78 前言介紹
前面學了一個網頁的基本內容。我們請了設計師設計三個頁面的設計稿，可以據此來練習多頁式網站
## 11-79 環境架設
教建立雛型。先建立大架構
* 在桌面建立資料夾
* 在裡面建立 html
* 首頁的
* 其他頁面的
* 在首頁連結其他頁面
* 建立 css 資料夾
* cssreset (normalize css)
* pureCSS, bootstrape ...
* 自己定義的 css
## 11-80 Layout (佈局)
一個網站內，各頁面間共通的元素排列關係
以前設計習慣，可能會另外建立 layout.html，雖然可能沒有用，但可給後端參考管理
```markup
Document
```
其他
* [網頁組成的3大元素 | 槑UI設計](http://mei-ui-designer.blogspot.com/2014/11/blog-post_10.html)
* [50 Excellent Blog Footer Designs - Hongkiat](https://www.hongkiat.com/blog/50-excellent-blog-footer-designs/)
* [Sam Rayner](http://www.samrayner.com/) footer 很肥 XD，提供全部文章時間排序
* [noupe - THE magazine for webworkers and site owners](https://www.noupe.com/) footer 提供網站架構、版權宣告
* [Los Angeles Web Designer | Web Designer & Front-end Developer – Soh Tanaka – Servicing All of Los Angeles County, South Bay Torrance, and more.](http://sohtanaka.com/web-design/) footer 不在 wrap 裡面，版面很簡潔
* [網頁設計的 header 是什麽意思\_百度知道](https://zhidao.baidu.com/question/90232942.html)
* [程式語言教學誌 FB, YouTube: PYDOING: HTML 5 快速導覽 - 區域元素 ](https://pydoing.blogspot.com/2012/01/html-5-header.html)
* [自己動手寫 HTML5 網頁 | iThome](https://www.ithome.com.tw/tech/90791)
## 11-81 保持網頁靈活彈性的技巧
能用 content 設定 height: 100 的設計方式，而不是 padding-bottom: 100px 嗎
* 不行，不然內容超出高度後，就會破版。不要寫死高度，用 padding
## 11-82 CSS 管理方法
有不同頁面，是不是需要各個對應的 css 檔案？
* 不用，同一個就好
CSS 結構可能像是
* css reset
* 共通佈局
* 課程 CSS
* FAQ
font awesome
## 11-83 總結
1. 設計網頁、切圖
2. 規劃你的佈局
3. CSS 寫在一起 (CSS reset、佈局 CSS、index、course、faq)
之後可以用多頁式頁面再做一次作業