HTML5 網頁版面設計教學

點擊數: 7707

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 

© 2024 JoyCat.org 版權所有.