Dreamweaver CS4 的操作環境介紹
Download
Report
Transcript Dreamweaver CS4 的操作環境介紹
網站的概念與開發流程
講師:陳烱勳
Email: [email protected]
[email protected]
網站與網頁的基本概念
「網頁」-- Web Page
「首頁」-- Home Page
網站的門面
提供整個網站的內容導覽
公佈最新消息
網站
網站就是網頁的集合
網站中的所有網頁彼此連結
線性架構
樹狀架構
線性架構
每個網頁以直線方式連結, 明確地提供上
一頁、下一頁及各頁次的連結
搜尋引擎、網路相簿、部落格、產品列表頁
樹狀架構
多會安排固定的連結導覽列
網站是放在哪裡呢？
網路伺服器
如何架設網站伺服器
申請或租用「虛擬伺服器」 (或稱虛擬主機)
ISP (Internet Service Provider, 網路服務提供者),
或專門提供網站空間服務的公司
免費的網站空間
自行建立IIS Server
須考量上傳頻寬
需較高花費(因為server不能關機，電費是一個考
量重點)
不同功能的網站分類
網站會因設計者不同的需求與定位，而產生
各類不同風格與內容的網頁，我們將其分成
下列幾個類別，供您製作網站時參考。
入口網站
網路資訊入口，主要提供新聞、搜尋引擎、
聊天室、電子佈告欄(BBS)、電子商務、電子
信箱、免費網頁等服務。使用者必須先進這
個入口，才能進一步瀏覽資訊內容。
不同功能的網站分類
資訊服務網
提供各種資訊服務，常見的有新聞、股市、氣象、娛樂、
運動、理財等，幾乎包含生活中需要的資訊與生活常識，
同時也提供詞彙搜尋引擎。這類的服務網，必須掌握即
時、快速、正確，而且要每天更新。
線上百科全書
提供各種知識，包括：科學、自然、宗教、歷史、地理、
網路、專有名詞、公司行號、人物、人文等。只要輸入
關鍵字，點選搜尋鍵，就能找到相關的資料。這類的網
站必須具備龐大的資料庫及伺服器，同時還要提供不同
的語言版本。以 維基百科 為例，它是非商業型的網站，
由基金會支持運作，提供近百個國家的語文查閱，內容
已超過11 萬條的中文條目，而且陸續增加中。
不同功能的網站分類
搜尋引擎網
同樣提供各類資料的搜尋，但它是以商業經
營的形式生存。拉里. 佩奇和謝爾蓋. 布休二位
史丹福大學的肄業生，在1998 年共同創立了
Google 網站後，快速的網頁搜尋方式，獲得大
家的信任。
購物拍賣網站
集合各類產品或二手物品，登錄在網頁中，
供人上網競標購買。例如：e-bay 是專業型的
拍賣網站，讓消費者與消費者之間商品的買賣，
呈現在網路平台中。
1-1-2 不同功能的網站分類
部落格(Blog)
這類型網站最符合個人化的表現，它以網頁
的方式，做專輯式的整理，內容包含旅遊報導、
相片專輯，或是評論各自的看法。有系統的整
理，還可以出版電子報，提供專業資訊，供人
訂閱。如何設定個人的部落格呢？請進入雅虎
部落格的網站(http://tw.blog.yahoo.com) 裡面有
非常詳細的介紹與說明。
使用FTP連上免費空間
FileZilla(免費軟體)
https://www.ohloh.net/projects/filezilla/downlo
ad?filename=FileZilla_3.3.4.1_win32-setup.exe
CuteFTP(付費軟體)
安裝FileZilla client
新增站台
連線成功的畫面
Dreamweaver CS4 的操作環境介紹
Dreamweaver 提供了一個彈性的環境，讓使用者
可以搭配使用各種不同的網頁文件。進入
Dreamweaver 軟體首先看到的是歡迎畫面，開啟
文件後就可瀏覽整個操作環境。
Dreamweaver 的環境介紹
一、 歡迎畫面的使用
每次啟動 Dreamweaver 沒有開啟任何文件時都會顯示歡迎畫
面，在上面可以快速開啟最近開啟過的檔案或新增文件。
Dreamweaver CS4 的歡迎畫
面。請選按 新增 的 HTML
開啟一個全新的檔案，以方便
等一下的解說。
操作環境的介紹
以下是 Dreamweaver CS4 的操作環境，使用預設的
設計師 使用介面來進行介紹，如果您的介面與我們
不同，請比對參考：
Dreamweaver CS4 的輔助說明
Dreamweaver 說明
相關資料的連結。
Dreamweaver各項功能說明
新增功能說明
如何擴充Dreamweaver 功能
Spry 架構
ColdFusion 的說明
Dreamweaver CS4 輔助說明
網頁文件
說明 \ Dreamweaver說明會開啟說明文件網頁視窗
。
Dreamweaver 說明文件畫面，將 Dreamweaver CS4 使用說明分成幾個重要
的項目，放置在視窗左方。只要針對所需要的資訊來選按，即會在視窗右方出
現相關說明與內容。
搜尋 功能
明確詢問主題
中文化的說明檔
Dreamweaver 主說明檔中靈活的
利用目錄、索引及搜尋功能。
Dreamweaver CS4 官方網站資源
說明
Dreamweaver 說明
Dreamweaver 交流中心
Dreamweaver 支援中心
Adobe 線上討論區
將官方網站中的線上資源都整理在此，不僅有最新的教材、文件
，甚至有全世界的使用者交流文件與Adobe 工程師的經驗分享。
操作秘技與重點叮嚀
針對初次使用 Dreamweaver 這套軟體的使用者，
整理出幾項秘技，讓操作與學習的過程更為順暢
關閉或重新使用歡迎畫面
關閉或重新使用歡迎畫面
再次進入 Dreamweaver 時，歡迎畫面便不會自動開啟
了！若要重新顯示該畫面可以依下述步驟進行設定：
改變工作區的配置方式
Dreamweaver CS4 根據使用者習慣的不同，設計了多
種工作區的配置，無論是美工人員或是程式設計師都
有特殊的工作區配置，甚至能設計屬於自己的工作區
配置，在儲存後供人使用。
1. 可以由視窗右上角選按切換鈕或是由功能表列 視窗 \
工作區版面 選取要使用的工作區配置方式即可。
2. 如果對於目前的工作區配置方式十分滿意，可以由功
能表列 視窗 \ 工作區版面 \ 新增工作區 將目前的配置
儲存起來。
3. 如果對於自訂並儲存的版面想要執行更名、刪除等動
作，可由功能表列 視窗 \ 工作區版面 \ 管理工作區版
面 進行管理動作。
設定預設的副檔名及編碼方式
如果沒有特別設定過，Dreamweaver CS4 開啟新檔案時預
設的副檔名為 「.html」，編碼方式為 「Unicode (UTF-8)
」。
請選按功能表列 編輯 \ 偏好設定 開啟 偏好設定 對話方塊，
選按 分類：新文件。
輸入 預設副檔名：「.htm」。
選按 預設編碼：繁體中文 (Big5)。如此即可設定預設的編碼方式
為繁體中文，讓網頁避免出現亂碼的情況。相同的，如果想要撰寫
其他語系的網頁，可以調整預設編碼中的選項即可完成。
網站開發的流程
規劃階段
根據使用者之需求，所有參與網站製作的各個單位一
起構思、討論, 最後取得共識, 才能確保往後的開發過
程不會發生爭議, 能有效率地進行。
38
擬定網站內容與目的
希望網站提供什麼內容與功能？
此網站要完成的目標？
網站目的
銷售產品
建立形象
傳遞資訊
提供遊戲娛樂
社交…
資料收集與整理
當網站的內容擬定之後, 即可請相關企劃人員提供所需
的書面文件, 並著手收集或製作要放到網站上的資料
文章
圖片
影片
音樂檔…等
規劃網站架構圖
訂出需求網頁
設定網頁的檔名
網頁的連結方式
網頁的瀏覽動線
二、製作階段
網頁版面設計製作
影像處理軟體
1.
Photoshop、Fireworks、PhotoImpact
繪圖軟體
Illustrator、CorelDraw
螢幕顯示範圍的設定
Notebook
PC
Smart phone(智慧型手機), pad(平板電腦)
網頁內容較長只設定寬度
不同瀏覽器解析網頁的功能皆不相同
背景底圖設計成可重複拼貼
背景圖片的邊緣設計與背景底色相符
網頁配色
版面設計
參考坊間的設計書籍
觀摩網路上知名網站的配色與版型,
例如 FWA(http://favouritewebsiteawards.com/)
會定時推薦精彩酷炫的網頁設計作品, 你可從中
學習並培養屬於自己的風格。
製作與歸納網頁所需的檔案
設計好的完整網頁版面先切割成多個部
份, 再分別壓縮、轉存為適合網頁的檔
案格式
將各類圖檔、音效檔、動畫檔、…等
分類歸納到相對應資料夾中
使用 Dreamweaver 製作網頁
「網站定義」(chapter 4)
避免日後製作網頁時發生檔案連結錯誤的問題。
製作網頁
Dreamweaver 製作的相同程式碼, 在不同瀏覽器中可
能會顯示出不同的結果
由於不同瀏覽器 (或瀏覽器不同的版本) 所支援的語
法或功能會有些差異, 用 Dreamweaver 製作的同一
種效果, 在不同瀏覽器中可能會顯示出不同的結果,
因此製做網頁時需特別留意相容性的問題。
目前網路上較多人使用的瀏覽器有 IE
(Internet Explorer)、Firefox、Safari 等, 如
果你希望製做出來的網頁可以在大多數
的瀏覽器中正常顯示, 建議可安裝多套不
同瀏覽器實際測試網頁效果 (請參閱第 55 節, 會有更詳盡的說明)。
HTML 文件的結構
真正開始動手設計網頁前，先來瞭解HTML 文件的結構，根據
HTML 規格定義，HTML 文件的結構是由 HEAD 及 BODY 二大部份
所組成，整個文件的架構如下圖所示。
HTML 語法及基本元件
HTML 文件的結構雖然僅是由 HEAD 及
BODY 二大部份所組成，但是其程式內容
仍必須依循規定的語法撰寫，並且應包含
下列幾項基本元件：
<HTML>...</HTML>
<HEAD>...</HEAD>
<BODY>...</BODY>
HTML的文字標籤
<p> 代表「段落」 (Paragraph) ，其目的
在於讓個個段落分明，使整個文章看起
來整齊美觀
< br> 代表「中斷」 (Break) ，其目的在
強迫文字呈現於瀏覽器時，能夠切換到
下一列。
範例
<html>
<body>
此句話會從此<br> 斷開，就是因為加了<br>
的緣故。
<p> 這是新的一個段落，所以會和前面的文字隔
開一列。
<p align=center> 這是靠中的段落。
<p align=right> 這是靠右的段落。
</body>
</html>
若要顯示”<“或”>“
“<“<
“>”>
表頭（Heading）常用在強調文字的重要
性，讓使用者可以透過不同的 Heading
來區分所在的章節。Heading 以 H1 字型
最大，H6 字型最小，預設的 align(排列)
屬性是置左的
表頭（Heading）範例
<html>
<body>
<h1 align="left">H1在左邊</h1>
<h1 align="center">H1在中間</h1>
<h1 align="right">H1在右邊</h1>
<h2>H2較H1字型稍小</h2>
<h3>H3較H2字型稍小</h3>
<h4>H4較H3字型稍小</h4>
<h5>H5較H4字型稍小</h5>
<h6>H6是最小的</h6>
</body>
</html>
FONT
<FONT SIZE=1>size=1</FONT>
<FONT SIZE=2>size=2</FONT>
<FONT SIZE=3>size=3</FONT>
<FONT SIZE=4>size=4</FONT>
<FONT SIZE=5>size=5</FONT>
<FONT SIZE=6>size=6</FONT>
<FONT SIZE=7>size=7</FONT>
FONT V.S. HEADING
FONT 只會指定字體的大小以及顏色 (除
非使用者另加一些標籤)
HEADING 卻會同時加粗字體且在其文字
上下空白兩行
HR 水平線
<HR width=“50%”>
<HR size=10>
粗細大小是10的水平線
<HR noshade size=10>
長度是視窗寬度一半的水平線
無陰影且粗細大小是10的水平線
<HR align=right width="70%" size=4>
置右且長度是視窗寬度70%、粗細大小是4的水平線
marquee 標籤
可以達到「跑馬燈」的效果
<html>
<head>
<title>跑馬燈</title>
</head>
<body>
<marquee direction=left bgcolor="#ff9999" behavior=scroll scrollamount=10
scrolldelay=100>嗨！我是一號跑馬燈</marquee>
<marquee direction=right bgcolor="#99ff99" behavior=slide scrollamount=20
scrolldelay=100>Hello！我是二號跑馬燈</marquee>
<marquee direction=left bgcolor="#9999ff" behavior=alternate scrollamount=30
scrolldelay=100>嘿嘿！我是三號跑馬燈</marquee> </body> </html>