欣悅禮服形象網站建置企劃書 - Zymic.ppt

Adobe  Dreamweaver CS3 北訓電腦 網頁設計講師 講師姓名：羅涵筠 聯絡方式：hanyunluo@ 專業技能：網頁設計、軟體應用、硬體裝修、工業電子 Adobe  Dreamweaver CS3 網站基本概念與Dreamweaver環境介紹 在開始製作網頁之前，你得先了解一下網站與網頁的概念，然後再開始收集資料、規劃網站製作流程與內容， 做好這些基本功再動手製作網頁會比較有效率。 當然除了事前規劃很重要外，要製作出實際的網頁成品， 還得仰賴網頁編輯軟體，本堂課將帶你認識 Dreamweaver的環境與操作，使網頁實作上更加順利。 網站製作流程 網站就是網頁的集合 樹狀架構：類似樹狀伸展，分「層」別類的架構，網頁中會提供下一層所有網頁的連結，你可以自由選擇要連結的下一層網頁。 Adobe  Dreamweaver CS3 DreamWeaver 軟體介紹 DreamWeaver 是MacroMedia 公司設計(現已和Adobe合併) 網頁編輯軟體，具有所見即所得功能 功能強大，支援多種網頁語法 簡單入門、資料維護的好工具 為目前市場熱門軟體之一 啟動 Dreamweaver 認識工作區 文件視窗 插入面板 屬性面板 展開與收合面板 建立網站資料夾並定義網站 建立網站資料夾並定義網站 新增空白網頁 新增空白網頁 變更標題名稱 儲存網頁 儲存網頁 檔案命名時的注意事項 網頁編輯 實作練習 網站空間與上傳網站 講師：羅涵筠　e-mail：hanyunluo@ 網站如同網路開店 ? http://www. .tw 網路空間(房子) 網域名稱(門牌) + 1.網路空間(房子) 2.網域名稱(門牌) 3.架構風格(裝潢) 4.產品內容(禮服) 5.網站維護(換季) 1.規劃期： 設定主題、內容與資料收集。 2.施工期： 網頁的製作、測試與上傳。 3.維護期： 資料的正確性與時效性。 首頁 選單 =連結網頁內容 =可連結類型 下載 檔案 圖片 音樂 產品 … … … 補充範例資料 網路空間申請：/ 網域名稱申請：/ ※ 網路空間申請：/ (free) Host: User: dreamweavercs_99k 1.桌面新增資料夾命名為website 2.網站新增網站 網站名稱：OOO的網站 本地根資料夾: (桌面website路徑) 新增的網頁預設會以無標題文件做為網頁標題, 但是「網頁標題」就像是網頁的招牌, 當我們在入口網站搜尋網頁時, 會優先搜尋網頁標題；若將網頁加入我的最愛, 也會用網頁標題做為我的最愛中顯示的名稱, 所以一定得替網頁取個有意義又好記的標題喔！ 變更好網頁標題後, 我們先將此網頁檔案儲存到之前定義好的網站資料夾中。存檔的方式很簡單, 只要直接按 + 鍵 (或執行『檔案/儲存檔案』命令), 就會跳出如下的另存新檔交談窗, 讓你指定檔案名稱和儲存位置。 避免使用中文或全形符號 非中文的伺服器及瀏覽器可能會不支援, 造成無法連結到網頁。 最好統一使用小寫英文 例如 index.htm 跟 Index.htm 就會變成兩個不同的檔案。 檔名中不要有空格 例如將 my page.htm 改成 my_page.htm。 HTML基本架構 html headtitle標題文字/title/head body內容/body /html 頁面及文字的屬性 輸入文字、修改大小、顏色、連結 表格的建立及屬性設定 插入表格、列、欄、表格寬度、邊框、邊框顏色、間距、合併儲存格、插入圖片 請參考網址：/teacher/01/ 講師：羅涵筠　e-mail：hanyunluo@