初識網(wǎng)頁設(shè)計(jì)與Dreamweaver第1章

1、 第1章 初識網(wǎng)頁設(shè)計(jì)與Dreamweaver1主要內(nèi)容1.1 網(wǎng)頁設(shè)計(jì)理念及工具11.2 網(wǎng)頁設(shè)計(jì)總體規(guī)劃21.3 網(wǎng)頁中的基本元素321.4 啟動(dòng)Dreamweaver CS541.5 使用開始頁5主要內(nèi)容31.6 Dreamweaver CS5的窗口布局61.8 如何獲取幫助8 1.9 上機(jī)實(shí)訓(xùn)深入認(rèn)識“網(wǎng)頁設(shè)計(jì)”91.7 網(wǎng)頁編輯視圖71.1 網(wǎng)頁設(shè)計(jì)理念及工具 41.1.1 網(wǎng)頁設(shè)計(jì)理念主頁的理念就是你對自己主頁的定位。這與主題有些區(qū)別，理念不但約束現(xiàn)在的制作，同時(shí)也指引發(fā)展的方向。主頁的理念一般表現(xiàn)在網(wǎng)頁的風(fēng)格和創(chuàng)意上：簡潔明快的、精雕細(xì)琢的、活潑可愛的、成熟穩(wěn)重的、黑白素雅的、色

2、彩斑斕的。1.1 網(wǎng)頁設(shè)計(jì)理念及工具 5*1.1.2 網(wǎng)頁設(shè)計(jì)工具一般按工作方式可以將網(wǎng)頁設(shè)計(jì)工具劃分為兩類。一類是所見即所得的編輯工具。用過這類工具的人都知道，它們提供了可視化的界面，通過拖曳鼠標(biāo)就能在頁面上自動(dòng)顯示需要的對話框、表格，相應(yīng)的HTML代碼會(huì)由工具自動(dòng)生成，設(shè)計(jì)者可在HTML代碼中插入各種音頻、圖像、視頻之類的對象。所見即所得的網(wǎng)頁編輯工具的代表有Dreamweaver、Microsoft FrontPage等。另一類是直接編寫HTML源代碼的軟件，如Hotdog、Editplus等，使用這一類工具需要對HTML代碼掌握純熟才能得心應(yīng)手，所以不太適合新手。1.2 網(wǎng)頁設(shè)計(jì)總體規(guī)

3、劃 6*1.2.1 確定網(wǎng)站的整體風(fēng)格圖1.4 精美個(gè)性1.2 網(wǎng)頁設(shè)計(jì)總體規(guī)劃 7*1.2.2 創(chuàng)意設(shè)計(jì)圖1.5 創(chuàng)意小技巧1.3 網(wǎng)頁中的基本元素 8*1. 文字2. 圖像3. 音頻4. 視頻5. 動(dòng)畫6. 版式7. 色彩8鏈接和路徑1.4 啟動(dòng)Dreamweaver CS5 9*圖1.16 Adobe Dreamweaver CS5窗口1.5 使用開始頁 10*1. 打開最近的項(xiàng)目2. 新建3. 主要功能4. 擴(kuò)展5. 幫助6. 隱藏/顯示開始頁圖1.18 “打開”對話框1.6 Dreamweaver CS5的窗口布局11*1.6.1 菜單欄在編輯窗口的頂部是菜單欄，幾乎所有的功能都可以

4、通過這些菜單來實(shí)現(xiàn)。1.6.2 “插入”工具欄圖1.24 “插入”工具欄圖1.25 在不同子工具欄之間切換1.6 Dreamweaver CS5的窗口布局12*1.6.3 面板與面板組1. 打開與關(guān)閉面板2. 展開與折疊面板組3. 移動(dòng)面板組4. 開啟與關(guān)閉全部面板圖1.29 展開后的“文件”面板組圖1.31 分離后的“CSS樣式”面板組1.7 網(wǎng)頁編輯視圖13*1. 可視化視圖2. 源代碼視圖3. 拆分視圖圖1.34 拆分視圖1.8 如何獲取幫助14*1.8.1 使用“幫助”窗口圖1.35 幫助窗口1.8 如何獲取幫助15*1.8.2 使用“參考”模板圖1.36 “參考”面板1.9 上機(jī)實(shí)訓(xùn)深入認(rèn)識“網(wǎng)頁設(shè)計(jì)”16*（1）訪問一些大型的門戶網(wǎng)站，歸納這些網(wǎng)站使用的網(wǎng)頁元素有哪些，分別有什么特點(diǎn)。（2）從Adobe官方網(wǎng)站上下載并安裝Dreamweaver CS5的試用版。（3）啟動(dòng)Dreamweaver CS5，熟悉窗口界面的各個(gè)組成部分。（4）選擇菜單命令“窗口”|“文件”，打開“文件”面板組。將該面板組移動(dòng)出來，打開其中的“文件”面板，觀察其中包含的文件列表與Win