使用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

 

網頁中嵌入 youtube 影片的方法

1. 開啟瀏覽器應用程式

2. 瀏覽 youtube 網站

3. 開啟播放想要嵌入網頁的影片

4. 按影片右下方的方享,如下圖所示。

insert youtube video 1

 

了解串接樣式表

 

關於串接樣式表

「串接樣式表」(Cascading Style Sheets, 簡稱 CSS) 是控制網頁內容外觀的格式規則集合。您可以使用 CSS 樣式來格式化頁面中所呈現的個別內容。網頁的內容 (HTML 程式碼) 存在於 HTML 檔案本身,而 CSS 規則在另一個檔案 (外部樣式表) 或是 HTML 文件的另一部分 (通常是 head 區段) 中定義程式碼的呈現方式。將內容從呈現的網頁中獨立出來可讓您透過集中位置輕鬆維護網站的外觀,而且每次當您需要進行變更,也不用一一更新每個頁面上的所有屬性。將內容從呈現的網頁中獨立出來同時也會產生比較簡單跟乾淨的 HTML 程式碼,不但可以縮短瀏覽器載入時間,還可幫助使用上有困難的人簡化瀏覽問題 (例如,需要藉助螢幕讀取器的人)。

CSS 可針對頁面所呈現的實際外觀,提供您相當大的彈性與掌控能力。有了 CSS,您可以控制許多文字屬性,包括特定字體與字體大小、粗體、斜體、劃底線,與文字陰影;文字顏色與背景顏色、連結顏色與連結底線等等。使用 CSS 來控制字體,也可以確保頁面的版面和外觀在多種瀏覽器中具有更為一致的處理方式。

除了文字格式以外,您還可以使用 CSS 控制網頁中區塊層級元素的格式和定位。區塊層級的元素是一種獨立的內容,在 HTML 頁面中通常以新行來區隔,而且會在視覺上格式化為區塊。例如, h1 標籤、p 標籤和 div 標籤都會在網頁上產生區塊層級元素。您可以為區塊層級元素設定邊界與邊框,將其定位在特定的位置,為其加上背景顏色,並在其周圍加上浮動文字等等。運用區塊層級元素是您配置 CSS 頁面時不可或缺的方式。

 

圖片版面配置對齊的HTML語法

 

20171208162139638「美的事物無所不在,我們只是缺乏發現『美』的眼睛」,這是雕塑大師羅丹對美深植於世的看法。當代荷蘭藝術家漢克.哈勒曼特,同樣地,也以深入觀察事物的罕見能力為長,他對生活的凝視,真摯的展現於畫筆間。他的每件作品,皆透露出他的思考與感受,而這種強而有力的感覺,可跨越時代和國界直達每位觀者的心。

1945年,漢克.哈勒曼特(Henk Helmantel)生於荷蘭北部威斯特安頓(Westeremden)小鎮,父母務農,是虔誠的基督徒。1961年進入密涅瓦學院(Minerva Academy)學習藝術,鍾情於古典繪畫技法和現代藝術創作觀。現今,漢克.哈勒曼特已被譽為歐洲當代寫實主義繪畫的指標性畫家,並以能再現萬物質感和精神著稱。他不畫宏大的場面,獨鍾日常事物,他的寫實不單只是再現外觀,還包括肌理、量感、空間、光影、空氣乃至個性和情感等具體而微的深層表現,世界各地對於他的作品都給予至高的評價。2014年,他更獲頒荷蘭女王碧翠斯所核發的「奧倫治拿索騎士勳章」 (Knight in the order of Orange-Nassau),以彰顯他對荷蘭社會的貢獻。

上例圖片向左對齊的語法: 

<img  src="/logo.png" style="float: left;">

 

語法說明:

style= 是行內樣式的設定

  • float: left; 表示圖片靠左對齊
  • float: right; 表示圖靠右對齊
  • float: center; 表示圖片置中對齊

 

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

 

版權所有 © 2016 JoyCat All Rights Reserved.