网页版面制作.PPT

專題製作 許惠淑 網路源起 電影介紹：十月的天空 美國蘇聯冷戰時期，蘇聯發射第一顆人造衛星上外太空，刺激了美國國內科學的發展，為通訊之便，因此網際網路應運而生。 抓住自己的夢想，勇敢追尋！ 網站介紹 入口網站 搜尋引擎類,瀏覽器軟體公司類,ISP服務類, 網路社區類,資訊提供類 機構網站 政府, 一般公司行號, 學校 個人網站 HTML 介紹 HTML（Hyperlink Text Markup Language） 超文件標記語言 網路通訊協定 ?全球資訊網 ?瀏覽器 指令內嵌在文字中, 以 “ ” 符號框住關鍵字而形成所謂的標籤 HTML 介紹 html語法結構主要分 head和body兩部份 head標籤對 (head/head) 說明html文件標題及文件的定義等訊息 ,內容不顯示 base標籤 , title/title標籤對 , meta標籤 body標籤對 (body/body) 置放所有的顯示資料,如文件的文字、圖片等主體內容 text 屬性 bgcolor 屬性 link 屬性 alink 屬性 vlink 屬性 … HTML 介紹 一個html的基本架構 html head titleSue的第一個家/title /head body歡迎光臨*^_^*,這是我的第一個網頁喔!! /body /html 網頁與 Home Page 網頁（Web Page） 透過瀏覽器在WWW上所看到的畫面 首頁 ( Home Page ) 進入一個網站時所看到的第一個網頁 網站的門面 網站結構 網站中所有的網頁以超連結的方式連接,不同的連接方式有不同的結構 線性結構 每個網頁以直線方式連結起來 樹狀結構 類似樹狀伸展，一層一層的連接 網站開發流程 企劃階段 施工前置作業 施工階段 維護 網站開發流程 企劃階段 擬定網站的功能 決定網站主題,網站名稱,網站內容 資料蒐集與整理 繪製網站架構與流程 繪製網頁平面草圖 網站開發流程 施工前置作業 製作網頁元件 利用草圖規劃,進行個別元件製作 背景、標幟、按鈕、水平線、分隔線、動畫 個人風格呈現 網頁版面設計 網站開發流程 施工階段 相容性問題 時間規劃 修改與新增 維護 資訊更新與維護 網頁製作 素材製作 Photoimpact, Photoshop, Flash, Gif Animator 利用Photoimpact繪圖軟體 網頁製作 Dreamweaver, Frontpage, NotePad , Word 利用Dreamweaver網頁編輯器 素材製作 Photoimpact的網路元件設計師 素材製作 製作標幟--利用橫幅 點選左邊橫幅清單, 右邊即有範例, 可依需求選取 素材製作 在此選單中,可調整元件的大小,陰影,超連結 素材製作 在標幟下的標題,邊框,渦卷,皆可依需求做不同的設計,且標幟下的選單也會因範例而各有不同 素材製作 完成設計的動作後,即可匯出處理 影像最佳化程式 可協助處理透明化的背景 個別的物件 就如範例中的標題,邊框,渦卷,皆會各成一物件 元件物件 整個標幟為一物件 素材製作 在此以影像最佳化來完成此標幟 只有GIF檔才可完成透明化的背景 邊界的柔和選項可依需求選取 素材製作 在網路元件設計師中的其他範例,例如項目符號,按鈕,按鈕列,分隔線等,皆可依上述製作標幟的操作步驟來進行 按鈕列可一次做多個按鈕,且儲存時只需為第一個按鈕命名,其餘Photoimpact會自動幫你依序建好其他按鈕 個人風格塑造 網頁製作 利用Dreamweaver網頁編輯器軟體 所見即所得的視覺網頁編輯軟體 Dreamweaver網頁製作 網頁編輯 網頁版面製作 動態網頁 環境介紹 網頁文件視窗 環境介紹 網站管理視窗 環境介紹 工作環境 主功能表列 工具列 物件面版 屬性面板 狀態列 環境介紹 工作環境--主功能表列 提供各狀態下的指令,不過大部分的指令都可在面板上執行,或是可以在編輯區上按滑鼠右鍵出現的快顯功能表中下達指令 環境介紹 工作環境--工具列 可用不同的模式來檢視網頁,或是快速開啟瀏覽器來檢視網頁的結果 在此提供三個按鈕來切換三個不同的檢視模式來編輯網頁 環境介紹 工作環境--物件面版 提供現成的網頁元件 共有七種不同的物件面板 檔頭--網頁開頭 隱藏--不可見物件 可利用右上角的?來切換 環境介紹 工作環境--屬性面板 在編輯區中選取不同的元件時,會出現不同的屬性面板 可設定文字,圖片,各網頁元件的屬性 環境介紹 工作環境--狀態列 在狀態列中可以顯示目前網頁中主要的html標籤,網頁視窗尺寸,網頁檔案大小,預估下載時間及啟動列 環境介紹 工作環境--狀態列 目前網頁中主要的htm