HTML5 網頁版面設計教學

HTML5

本篇文章將示範使用 Dreamweaver CC 2015 及 HTML5 標籤,設計網頁版面的整個流程。

範例中的範例圖片,例如:logo、廣告圖片,您可以下載使用於練習。

HTML 程式碼可直接複製使用,以加快版面設計,並解決您設計上的錯誤。

 

本教學共區分八個單元:

第一單元:基本HTML版面元素標籤
第二單元:使用 Dreamweaver CC 2015 加入 bootstrap 版面組件 HTNL 標籤
第三單元:頁首左方欄版面區段中加入網站logo圖片
第四單元:導覽選單區段加入 bootstrap 導覽選單 Navbar
第五單元:修改 Bootstrap Navbar 組件的選單項目、名稱、超連結
第六單元:頁尾版面區加入版權宣告文字
第七單元:側邊加入直立式廣告圖片
第八單元:插入 bootstrap 輪播圖片組件 Carousel 的程序

 

本範例教學的相關檔案

 

第一單元:基本HTML版面元素標籤

1. 開啟 Dreamweaver CC 2015 應用程式

2. 新增一個 HTML 文件

3. body 標籤中,加入各項版面元素的標籤。

4. 您可以直接複製下方的程式碼,或是使用應用程式功能表列上的插入功能項目,一項一項的逐步插入版面元素標籤。
註:採用插入元素標籤的方法時,標籤中的中文字需要自行輸入。這些文字的目的是當您使用設計或即時編輯模式時,可以輕易辨識各個版面區塊的位置,當內容製作進來以後,即可刪除之。


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用網頁版面</title>
</head>
<body>
<header>頁首</header>
<nav>導覽選單</nav>
<section>區段</section>
<article>文章</article>
<aside>側邊</aside>
<footer>頁尾</footer>
</body>
</html>

使用瀏覽器預覽結果:

webpage design 0

 

 

 

第二單元:使用 bootstrap grid system (網格系統)進一步設計網頁版面

使用 HTML5 新的版面元素,雖然可以清楚定義版面區塊(Block)的用途,若是沒有搭配控制板面寬度的CSS串接樣式表,各個版面區塊將橫跨整個電腦螢幕,這會使文章版面寬幅過大,造成文章不易閱讀。

所以接下來本文將使用 Adobe Dremaweaver CC 2015 提供的 Bootstrap 組件,處理網頁版面,如此就不必另行設計CSS串接樣式表,輕易達成所需版面的設計。 Bootstrap 詳細介紹,請查看Bootstrap 英文官方網站及檢體簡體中文網站

以下將示範使用 Adobe Dremaweaver CC 2015 提供的 Bootstrap 組件,進一步處理網頁版面。

使用 Dreamweaver CC 2015 插入 bootstrap 版面組件的程序:

1. Dreamweaver CC 2015 切換成即時編輯模式

2. 選取頁首版面區,然後按功能表「插入→Bootstrap 組件→Container」

3.按巢狀化按紐,以插入 header 標籤的第一個子項目,如下圖所示。

4. 切換至程式碼編輯模式,您會發現 header 標籤中間加入了如下方的程式碼。


<header>
  <div class="container"></div>
</header>

 說明:

  • HTML div 標籤通常用來表示HTML文件中的通用區段。div 標籤使您可以將HTML元素的各個區段組合在一起,並使用CSS進行格式化。
  • class="container" 是指定 div 標籤使用 bootstrap.css  樣式表的 container 類別選擇器(Class Selector)。
  •  Adobe Dremaweaver CC 2015  使用的 bootstrap框架是 3.3.4 版,樣式表檔案名稱為  bootstrap-3.3.4.css。
  • bootstrap-3.3.4.css  樣式表中 ,container 類別選擇器設定了各類裝置不同螢幕大小的版面寬度值,電腦螢幕的寬度是設定為1200px

5. 先在程式碼編輯模式中,選取下方的程式碼。


  <div class="container"></div>

6. 切換編輯模式為即時,即可在版面區選取 container 區段,如下圖所示。

webpage design 2 1

7. 按 Dreamweaver CC 2015 功能表「插入→Bootstrap 組件→Grid Row with column」

 webpage design 2 2

8. 從出現設定畫面,欄位輸入2,按一下巢狀化按紐,最後按確定。

webpage design 2 3

9. div.container 區段內增加了一個一列二欄的版面區段,此二欄的版面寬度相同,各佔最大版面寬度1200像素之 50%,左邊欄位區段用來放置網站 logo 圖片,右邊欄位區段可放置長條狀橫幅廣告。

10. 切換至程式碼模式,將可看見新增的程式碼如下。其中 div.row 是版面區段,div.col-lg-6 是版面區段。


<div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
</div>

11. 重複步驟1-10,在 nav 版面元素中插入一個 container 區段,然後在 div.container 區段中插入一個一列一欄的版面區段,此區段將放置網站導覽選單

12. 重複步驟1-10,在 section 版面元素中插入一個 container 區段,然後在 div.container 區段中插入一個一列一欄的版面區段,此區段將放置動態輪播圖片

13. 在 settion 版面元素下方,在新增一個section 版面元素,用來放置文章及側欄。

14. 重複步驟1-10,在第二個 section 版面元素中插入一個 container 區段,然後在 div.container 區段中插入一個一列二欄的版面區段,此區段將放置文章與側欄

15.切換至程式碼模式,將下方的一列二欄的版面區段,將左欄版面區段變更為最大版面寬度之3/4,右欄版面區段變更為最大版面寬度之1/4。

原始程式碼:


<section>
<div class="container">
	<div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
</div>
</section>

 

修改後的程式碼:


<section>
<div class="container">
	<div class="row">
      <div class="col-lg-9"></div>
      <div class="col-lg-3"></div>
    </div>
</div>
</section>

 

16. 將 article 文章版面元素程式碼,搬移至 div.col-lg-9 版面區段中

17. 將 aside 側邊版面元素程式碼,搬移至 div.col-lg-3 版面區段中

18. 搬移後的程式碼將如下方所示


<section>
<div class="container">
	<div class="row">
      <div class="col-lg-9"><article>文章</article></div>
      <div class="col-lg-3"><aside>側邊</aside></div>
    </div>
</div>
</section>

 

19. 重複步驟1-10,在 footer 頁尾版面元素中插入一個 container 區段,然後在 div.container 區段中插入一個一列一欄的版面區段,此區段將放置網站頁尾資訊

20. 最後完成的完整HTML原始碼如下:

 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加入 bootstrap 版面標籤</title>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--頁首-->
<header>
<div class="container">
	<div class="row">
      <div class="col-lg-6">logo</div>
      <div class="col-lg-6">橫幅廣告</div>
    </div>
</div>
</header>
<!--導覽選單-->
<nav>
  <div class="container">
	<div class="row">
      <div class="col-lg-12">導覽選單</div>
    </div>
  </div>
</nav>
<!--第一區段-->
<section> 
<div class="container">
	<div class="row">
      <div class="col-lg-12">動態輪播圖片</div>
    </div>
  </div>
</section>
<!--第二區段-->
<section>
<div class="container">
	<div class="row">
      <div class="col-lg-9"><article>文章</article></div>
      <div class="col-lg-3"><aside>側邊</aside></div>
    </div>
</div>
</section>
<!--頁尾-->
<footer>
<div class="container">
	<div class="row">
      <div class="col-lg-12">頁尾</div>
    </div>
  </div>
</footer>
</body>
</html>

使用瀏覽器預覽結果:

webpage design 1

 

 

 

第三單元:頁首左方欄版面區段中加入網站logo圖片

範例圖片:

logo

 

 

 

第四單元:導覽選單區段加入 bootstrap 導覽選單 Navbar

插入 bootstrap 導覽選單列組件 Navbar 的程序:

1. Dreamweaver CC 2015 切換成即時編輯模式

2. 滑鼠點選導覽選單區段的 div.col-lg-12,結果如下圖所示。

webpage design 3 1

3. 按 Dreamweaver CC 2015 應用程式選單「插入→Bootstrap 組件→Navbar→Basic Navbar」

webpage design 3 2

 

 4. 按巢狀化按紐,以插入選取標籤(div.col-lg-12)的第一個子項目,如下圖所示。

webpage design 3 3

5. 出現 Bootstrap 導覽選單,如下圖所示。

webpage design 3 4

使用瀏覽器預覽結果:

webpage design 2

 

 

第五單元:修改 Bootstrap Navbar 組件的選單項目、名稱、超連結

1. 將下方圖(1)所示選單HTML程式碼,變更為圖(2)選單程式碼。

圖(1)
webpage design 3


<li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>

 

圖(2)


<li class="active"><a href="/index.html">首頁<span class="sr-only">(current)</span></a></li>
                <li><a href="/about.html">關於我們</a></li>
                <li><a href="/news.html">最新消息</a></li>
                <li><a href="/services.html">服務項目</a></li>
                <li><a href="/contact.html">聯絡我們</a></li> 

 

 

2. 刪除導覽選單最右側多餘的選單項目,如下圖所示。

webpage design 5


<ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>

 

修改完成後,導覽選單HTML程式碼如下:

 


<nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
              <a class="navbar-brand" href="#">Brand</a></div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="defaultNavbar1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="/index.html">首頁<span class="sr-only">(current)</span></a></li>
                <li><a href="/about.html">關於我們</a></li>
                <li><a href="/news.html">最新消息</a></li>
                <li><a href="/services.html">服務項目</a></li>
                <li><a href="/contact.html">聯絡我們</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
        </nav>
      </div>
    </div>
  </div>
</nav>

 

 使用瀏覽器預覽結果:

webpage design 6

 

 

第六單元:頁尾版面區加入版權宣告文字

版權宣告文字範例:© Copyright 2017-2020 JoyCat 版權所有. All Rights Reserved.

 

 

第七單元:側邊加入直立式廣告圖片

圖檔範例:

aside banner 1

 

使用瀏覽器預覽結果:

 


webpage design 7

 

 

 

第八單元:插入 bootstrap 輪播圖片組件 Carousel 的程序:

 

各項操作步驟的圖片,可參考第四單元:加入導覽選單。

1. Dreamweaver CC 2015 切換成即時編輯模式

2. 滑鼠點選輪播圖片區。

3. 按 Dreamweaver CC 2015 應用程式選單「插入→Bootstrap 組件→Carousel 

4. 按巢狀化按紐,以插入選取標籤(div.col-lg-12)的第一個子項目,如下圖所示。

webpage design 8

5. 點選輪播圖片區中間的圖片,然後切換至程式碼編輯模式,程式碼中被選取的程式碼,即是該圖片的程式碼,如下圖所示。

webpage design 9

6. 將圖片程式碼變更如下圖所示,以替換圖片。

原始圖片程式碼


<img src="file:///C|/Users/mike/AppData/Roaming/Adobe/Dreamweaver CC 2015/zh_TW
/Configuration/Temp/Assets/eam1B70.tmp/images/Carousel_Placeholder.png"
alt="First slide image" class="center-block">

 

 新的圖片程式碼


<img src="/images/slideshow_1.jpg" alt="First slide image" class="center-block">

註:slideshow_1.jpg 是您想要使用的第一個圖檔

7. 視需要修改刪除圖片程式碼下方英文的圖片標題與段落文字

圖片標題及簡介程式碼:


<div class="carousel-caption">
                <h3>First slide Heading</h3>
                <p>First slide Caption</p>
              </div>

 

7. 預設輪播圖片共有三張,請依序將其他二張更換為您的圖片。

8. 更換後的圖片程式碼,如下所示。

<


<div class="carousel-inner" role="listbox">
            <div class="item active"><img src="/images/slideshow_1.jpg" alt="First slide image" class="center-block">
            </div>
            <div class="item"><img src="/images/slideshow_2.jpg" alt="Second slide image" class="center-block">
            </div>
            <div class="item"><img src="/images/slideshow_3.jpg" alt="Third slide image" class="center-block">
</div>

 

9. 使用 Mozilla Firefox 瀏覽器預覽,將如下圖所示,圖片會自動輪流播放。

webpage design 10 


列印   Email