使用CSS串接樣式表改變網頁版面設計

css style 300x1541

本篇CSS串接樣式表教學,將示範如何變更網頁各個區塊版面的高度、背景色彩、框線樣式、文字格式、文字對齊、超連結樣式...等CSS規則。

CSS 線上參考文件:https://helpx.adobe.com/tw/dreamweaver/using/cascading-style-sheets.html

下載 Adobe Dreamweaver CC 使用說明文件

 

單元一:網頁連結自訂規則的CSS串接樣式表

1. 新增一個檔案名稱為 style.css 的空白CSS串接樣式表。

2.網頁連結外部CSS串接樣式表 style.css 。

 

單元二:頁首版面設計

頁首版面改變高度,及加上版面區塊背景色彩。

1. 以下將示範將頁首版面高度變更為120px、版面背景色彩變更為藍色。

2.  style.css CSS 樣式表新增一個 header HTML標籤選擇器,及其宣告的樣式屬性,如下所示。

 

header {
 height: 120px;
 background-color: #113c51;
}

 

顏色的選擇,可以參考 Paletton 網站。

 

3. 因為新增的是標籤元素選擇器,會自動套用至 header 標籤,所以不需要修改網頁原始碼。

4. header 標籤因為沒有設定版面寬度,所以此版面的背景色彩會從左至右填滿整個螢幕。

 

5. 網頁頁首版面將變更如下圖所示。

css design 1

 

 

 

單元三:頁尾版面設計

頁尾版面改變高度,及加上版面區塊背景色彩。

1. 以下將示範將頁尾的版面高度變更為 80px、版面背景色彩變更為深藍色。

2.  style.css CSS 樣式表新增一個 footer 標籤元素選擇器,及其宣告的樣式屬性,如下所示。

 

footer {
 height: 80px;
 background-color: #032536;
}

 

顏色的選擇,可以參考 Paletton 網站。

3. 因為新增的是標籤元素選擇器,會自動套用至 footer 標籤,所以不需要修改網頁原始碼。

4. footer HTML標籤因為沒有設定版面寬度,所以此版面的背景色彩會從左至右填滿整個螢幕,跟頁首版面相同。

 

單元四:導覽選單的版面設計

 

導覽選單版面加上版面區塊背景色彩。

1. 將示範版面背景色彩變更為藍色。

2.  style.css CSS 樣式表新增一個 nav 標籤元素選擇器,及其宣告的樣式屬性,如下所示。

nav {
 background-color: #477286;
}

顏色的選擇,可以參考 Paletton 網站。

3. 因為新增的是標籤元素選擇器,會自動套用至 nav 標籤,所以不需要修改網頁原始碼。

4. footer HTML標籤因為沒有設定版面寬度,所以此版面的背景色彩會從左至右填滿整個螢幕,跟頁首版面相同。

 

單元五:內容區版面設計

版面區塊加上圓角邊框線(border)

 1. style.css CSS 樣式表新增一個 container-border 類別選擇器,及其宣告的樣式屬性,如下所示。

.container-border  {
  border-width: 1px;
  border-color: #d5d5d5;
  border-style: solid;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
}

2. 網頁原始碼的第二個 section 版面區段,將程式碼修改如下所示。

<!--第二單元-->
<section>
<div class="container container-border">
	<div class="row">
      <div class="col-lg-9">
	    <article>

上方程式碼主要是將原先的 div class="container" 變更為 div class="container container-border"
container-border 則是 style.css 串接樣式表中的一個設定版面區塊邊框的類別選擇器。

3. 網頁頁首版面將變更如下圖所示。

 

單元六:側邊攔版面設計

版面區塊加上灰色背景色彩

 

1. style.css CSS 樣式表新增一個 aside 類別選擇器,及其宣告的樣式屬性,如下所示。

.aside  {
  background-color: #d5d5d5;
  margin-top: -10px;
}

2. 網頁原始碼的 aside 版面區段,將程式碼修改如下所示。


<div class="col-lg-3 aside">
    <aside>
	  <!--側邊內容在這裡-->
    </aside>
</div>

上方程式碼主要是將原先的 div class="col-lg-3" 變更為 div class="col-lg-3 aside"
aside 則是 style.css 串接樣式表中的一個設定版面區塊灰色背景色彩的類別選擇器。

3. 網頁頁首版面將變更如下圖所示。

 

單元七:強化導覽選單版面

將導覽選單列的版面區塊上下置中於 nav 區塊版面,及延伸導覽選單列左右寬度,讓其與下方的其他版面區塊等寬。

1. style.css CSS 樣式表新增一個 navbar 類別選擇器,及其宣告的樣式屬性,如下所示。

.navbar  {
  margin-top: 5px;
  margin-bottom: 5px; 
  margin-right: -15px;
  margin-left: -15px;
}

2. 網頁原始碼的 nav 版面區段中,本來就有使用 navbar 類別樣式,所以我們不需要修改網頁程式碼。
    navbar 類別樣式已定義規則於 bootstrap.css 串接樣式表單,style.css 加入新的規則定義,可擴充及覆蓋 bootstrap.css 原先的定義。

navbar 類別樣式的使用位置,改如下所示。


<nav>
  <div class="container">
	<div class="row">
      <div class="col-lg-12">
        <nav class="navbar navbar-default">
          <div class="container-fluid">

3. 網頁頁首版面將變更如下圖所示。

 

 

單元八:強化頁尾版面

將頁尾版面區塊中的文字置中,及將文字顏色設定為白色。

1. style.css CSS 樣式表 footer 標籤選擇器的宣告中,加入如下所示的屬性定義。

footer {
 height: 80px;
 background-color: #032536;
 text-align: center;
 color: #ffffff;
 padding-top: 30px;
}

 

 

style.css 串接樣式表的完成內容

 

@charset "utf-8";
header {
	height: 120px;
	/* background-color: #113c51; */
	
}
footer {
	height: 80px;
	background-color: #032536;
	text-align: center;
	color: #ffffff;
	padding-top: 30px;
}
nav {
	background-color: #477286;

}
.navbar {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: -15px;
	margin-left: -15px;

}
.container-border {
	border-width: 1px;
    border-color: #d5d5d5;
    border-style: solid;
    border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 10px;

}
.aside {
	background-color: #d5d5d5;
	margin-top: -10px;

}
aside {
	padding-top: 10px;

}
a (
	color: #032536;

}

 

 

 

 


列印   Email