Download presentation
Presentation is loading. Please wait.
1
親愛的老師您好 感謝您選用本書作為授課教材，博碩文化準備本書精選簡報檔，特別摘錄重點提供給您授課專用。 說明： 博碩文化：
1、本教具為非賣品，不得作為商業之用。 2、本教具僅授權使用原著作為授課教材之教師作為教學或研究等學術用途。 3、本教具未授權提供學生任何拷貝、影印、引用、翻印等行為。 4、教師若需申請網站或內容授權，可透過您的博碩業務協助處理，謝謝。 博碩文化： 總公司：台北縣汐止市新台五路一段112號10樓A棟 電話：(02) 分機 傳真：(02) 網址： 出書提案信箱
2
計算機概論 請老師填入姓名主講 課本：資訊能力的養成與應用 博碩文化出版發行
3
第十二章 網站設計實務 課前指引 網頁技術的種類也不斷地推陳出新，由HTML、CSS 到炙手可熱的ASP（動態伺服器網頁） 或ASP.NET，亦或是客戶端的JavaScript、Dreamweaver 到伺服端的JSP 等。本章開始進入到網站設計的領域，藉由深入淺出的介紹，相信各位都可以很輕易的學會網站設計的觀念及方式。
4
章節大綱 12-1 認識網站 12-5 建立網站 12-2 HTML簡介 12-6 Dreamweaver CS6的基本 操作
12-1 認識網站 12-5 建立網站 12-2 HTML簡介 12-6 Dreamweaver CS6的基本 操作 12-3 Dreamweaver CS6網頁設 計入門 12-7 Dreamweaver CS6的圖文 編輯 12-4 Dreamweaver CS6的面板 操作 備註：可依進度點選小節
5
12-1 認識網站 網頁基本元素 網頁畫面中的基本組成元素有文字、圖片及超連結等項目，其中文字及圖片是用來表達頁面中的資料內容。但是網站中當然不可能只有一個頁面，此時「超連結」就負起了各個網頁之間串連的工作。簡單說明如下：
6
12-2 HTML簡介 語法基本結構(1) 語法對稱性
HTML 屬於「對稱性」的語法，大部份語法都是成雙成對的，「<>」的作用代表著裡面的英文字是一個HTML 語法指令，「<>」內沒有加上「/」表示是語法開始，有加上「/」表示是語法結束。 如圖中的<Html> 和</Html> 就是一組語法，其他的依此類推。同時語法中並沒有區分英文字母的大小寫，而語法前面的空白也可以視個人的習慣決定是否加入，不過這裏建議各位最好還是利用空白鍵來區隔出程式碼的內容結構，這樣在檢查語法內容時會方便許多：
7
語法基本結構(2) 語法結構性 HTML 語法的「結構性」則是指語法的擺放位置，這裡先列出前面所使用到的語法功能：
8
語法基本結構(3) HTML 5 HTML5 是基於既有的語法基礎再發展， 並沒有捨棄HTML4 的元素標籤，實際包括了HTML5.0、CSS3 和JavaScript 在內的一套技術組合，特別是在錯誤語法的處理上更加靈活，對於使用者來說，只要瀏覽軟體支援HTML5，就可以享受HTML5 的特殊功能，而且開放規格統一了video 語法，把影音播放部份交給各大瀏覽器競爭。
9
12-3 Dreamweaver CS6網頁設計入門
10
認識Dreamweaver CS6的視窗環境(1)
11
認識Dreamweaver CS6的視窗環境(2)
功能表 放置Dreamweaver 各項編輯指令的區域，不過許多功能指令可以透過滑鼠右鍵所顯示的快顯功能表來執行。 插入面板 插入面板用來插入各式各樣的網頁元件，面板上的每一個圖示都代表著一種元素，只要點選面板中的功能圖示，就可以將相關元件放置到網頁上。至於「插入」面板的開啟及隱藏，可由「視窗/ 插入」來進行。
12
認識Dreamweaver CS6的視窗環境(3)
文件視窗 是網頁內容的編輯區域，設計出來的網頁畫面與實際上線時的呈現效果幾乎一模一樣。 屬性面板 對頁面中的各種元素進行調整及編輯。當各位在頁面上點選不同的網頁元素時，屬性面板也會對應顯示不同的屬性。執行「視窗/ 屬性」可決定是否顯示「屬性面板」。 其他工作面板 其他工作面板則是安排各種輔助編輯的面板，畫面上所看到「CSS 樣式」、「AP 元素」、「檔案」及「資源」是在Dreamweaver 預設啟動的工作面板。
13
12-4 Dreamweaver CS6的面板操作 面板的開啟與隱藏
14
展開與收合面板
15
調整面板位置
17
插入面板的類別切換
18
12-5 建立網站 開始建立網站
19
網站的管理
20
網站之間的切換
21
12-6 Dreamweaver CS6的基本操作 新增網頁檔案
22
新增網站資料夾
23
網頁檔案的編輯與開啟
25
切換頁面的編輯模式 設計模式：使用與文書軟體相同的方式來編排頁面。 程式碼模式：以撰寫程式碼的方式來設計頁面。
分割模式：會將頁面左右分割為「設計」與「程式碼」二種編輯環境，使用者可同時對照編輯內容。
26
設定頁面的編碼方式
27
設定頁面字體大小的預設值
28
設定頁面背景(1) 以CSS語法作外觀設定
29
設定頁面背景(2) 以HTML標籤作外觀設定
30
設定頁面標題文字
31
12-7 Dreamweaver CS6的圖文編輯 輸入文字內容
32
輸入連續的空格
33
加入特殊符號
34
設定項目符號
36
加入網頁圖片
38
設定圖片超連結
39
本章結束 Q&A討論時間
Similar presentations
