十一、開發多頁式實戰講解

11-78 前言介紹

前面學了一個網頁的基本內容。我們請了設計師設計三個頁面的設計稿，可以據此來練習多頁式網站

11-79 環境架設

教建立雛型。先建立大架構

在桌面建立資料夾
在裡面建立 html
- 首頁的
- 其他頁面的
- 在首頁連結其他頁面
建立 css 資料夾
- cssreset (normalize css)
- pureCSS, bootstrape ...
- 自己定義的 css

11-80 Layout (佈局)

一個網站內，各頁面間共通的元素排列關係

以前設計習慣，可能會另外建立 layout.html，雖然可能沒有用，但可給後端參考管理

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/all.css">
    </head>
    <body>
        <div class="wrap">
            <div class="header">
                <a href="index.html">首頁</a>
                <a href="course.html">課程</a>
                <a href="faq.html">問答</a>
            </div>
            <div class="content">
                首頁內容
            </div>
            <div class="footer">

            </div>
        </div>

    </body>
</html>

其他

11-81 保持網頁靈活彈性的技巧

能用 content 設定 height: 100 的設計方式，而不是 padding-bottom: 100px 嗎

不行，不然內容超出高度後，就會破版。不要寫死高度，用 padding

11-82 CSS 管理方法

有不同頁面，是不是需要各個對應的 css 檔案？

不用，同一個就好

CSS 結構可能像是

css reset
共通佈局
課程 CSS
FAQ

font awesome

11-83 總結

設計網頁、切圖
規劃你的佈局
CSS 寫在一起 (CSS reset、佈局 CSS、index、course、faq)

之後可以用多頁式頁面再做一次作業

Previous十、最後，讓你的網頁變得更專業 Next十二、接下來，你還可以學什麼？

Last updated 5 years ago

Was this helpful?

11-80 Layout (佈局)

一個網站內，各頁面間共通的元素排列關係

以前設計習慣，可能會另外建立 layout.html，雖然可能沒有用，但可給後端參考管理

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/all.css">
    </head>
    <body>
        <div class="wrap">
            <div class="header">
                <a href="index.html">首頁</a>
                <a href="course.html">課程</a>
                <a href="faq.html">問答</a>
            </div>
            <div class="content">
                首頁內容
            </div>
            <div class="footer">

            </div>
        </div>

    </body>
</html>

其他

footer 很肥 XD，提供全部文章時間排序
footer 提供網站架構、版權宣告
footer 不在 wrap 裡面，版面很簡潔