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

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 總結

  1. 設計網頁、切圖

  2. 規劃你的佈局

  3. CSS 寫在一起 (CSS reset、佈局 CSS、index、course、faq)

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

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

Last updated