第1章 網(wǎng)頁設(shè)計

1、本章要點： 網(wǎng)頁設(shè)計基本理念 確定網(wǎng)頁整體風(fēng)格 網(wǎng)頁色彩的搭配 繪制設(shè)計草圖 建立站點表單視頻動畫表格圖像文字網(wǎng)頁中的主要元素不容忽視的下載速度不容忽視的下載速度 Basic ConceptBasic ConceptBasic Concept 能適應(yīng)不同瀏覽器及分辨率能適應(yīng)不同瀏覽器及分辨率 FrontPage是Microsoft公司推出的Web站點創(chuàng)建和管理工具，它是微軟Office成員之一。FrontPage是一個所見即所得的“傻瓜”型網(wǎng)頁制作軟件，你可以在對HTML毫不了解的情況下輕松地制作出自己的網(wǎng)頁來，你需要做的只是用鼠標(biāo)以及鍵盤的簡單操作。 風(fēng)格，是指站點的整體形象給訪問者的綜合感

2、受，比風(fēng)格，是指站點的整體形象給訪問者的綜合感受，比較抽象。較抽象。 網(wǎng)站的整體形象包含以下因素網(wǎng)站的整體形象包含以下因素 色彩色彩 版面布局版面布局 瀏覽方式瀏覽方式 網(wǎng)站標(biāo)志的設(shè)計網(wǎng)站標(biāo)志的設(shè)計 交互性交互性 文字文字 價值價值網(wǎng)站欣賞欣賞新浪網(wǎng)網(wǎng)站欣賞欣賞洪恩在線網(wǎng)站欣賞欣賞IBM的網(wǎng)站確定網(wǎng)站風(fēng)格注意事項確定網(wǎng)站風(fēng)格注意事項 確定網(wǎng)站風(fēng)格注意事項確定網(wǎng)站風(fēng)格注意事項紅色：有力量、喜慶的色彩。具有刺激效果，容易使紅色：有力量、喜慶的色彩。具有刺激效果，容易使人產(chǎn)生沖動，是一種雄壯的精神體現(xiàn)，有憤怒、熱情、人產(chǎn)生沖動，是一種雄壯的精神體現(xiàn)，有憤怒、熱情、活力的感覺活力的感覺。 橙色：也是一

3、種激奮的色彩，有輕快、歡欣、熱烈、橙色：也是一種激奮的色彩，有輕快、歡欣、熱烈、溫馨、時尚的效果。溫馨、時尚的效果。 黃色：亮度最高，有溫暖感，具有快樂、希望、智黃色：亮度最高，有溫暖感，具有快樂、希望、智慧和輕快的個性，讓人感覺燦爛輝煌。慧和輕快的個性，讓人感覺燦爛輝煌。 黑色：給人深沉、神秘、寂靜、悲哀、壓抑的感覺。黑色：給人深沉、神秘、寂靜、悲哀、壓抑的感覺。 綠色：介于冷暖色中間，顯得和睦、寧靜，給人健康、綠色：介于冷暖色中間，顯得和睦、寧靜，給人健康、安全的感覺。與金黃、淡白搭配，產(chǎn)生優(yōu)雅、舒適的安全的感覺。與金黃、淡白搭配，產(chǎn)生優(yōu)雅、舒適的氣氛。氣氛。 藍色：代表永恒、博大，最具涼

4、爽、清新、專藍色：代表永恒、博大，最具涼爽、清新、專業(yè)的色彩。與白色混合，能體現(xiàn)柔順、淡雅、浪業(yè)的色彩。與白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛，給人感覺平靜、理智。漫的氣氛，給人感覺平靜、理智。 紫色：給人神秘、壓迫的感覺。紫色：給人神秘、壓迫的感覺。 白色：具有潔白、明快、純真、清潔的個性。白色：具有潔白、明快、純真、清潔的個性。 灰色：具有中庸、平凡、溫和、謙讓、中立和灰色：具有中庸、平凡、溫和、謙讓、中立和高雅的個性。高雅的個性。根據(jù)實際需要，畫出網(wǎng)站的設(shè)計草圖根據(jù)實際需要，畫出網(wǎng)站的設(shè)計草圖 Dreamweaver 8 是一款專業(yè)的HTML編輯器用于對Web站點、Web頁和Web應(yīng)用

5、程序進行設(shè)計、編碼和開發(fā)。可以查看所有的站點元素或資源，并且可以直接將它們從一個易用面板中拖動到文檔?？梢猿绦蚧_發(fā)流程。Dreamweaver 8中的可視化編輯功能可以為頁面快速添加各種設(shè)計和功能。1. 選擇工具界面選擇工具界面2. 主窗口介紹主窗口介紹3. 主菜單介紹主菜單介紹4. 視圖方式視圖方式 1. 選擇工具界面選擇工具界面2. 主窗口介紹主窗口介紹3. 主菜單介紹主菜單介紹4. 視圖方式視圖方式 1. 選擇工具界面選擇工具界面2. 主窗口介紹主窗口介紹3. 主菜單介紹主菜單介紹4. 視圖方式視圖方式 1. 選擇工具界面選擇工具界面2. 主窗口介紹主窗口介紹3. 主菜單介紹主菜單介紹

6、4. 視圖方式視圖方式 【文本】菜單使你可以輕松地設(shè)置文【文本】菜單使你可以輕松地設(shè)置文本的格式。本的格式。 【命令】菜單提供對各種命【命令】菜單提供對各種命令的訪問，包括設(shè)置代碼格式的命令、令的訪問，包括設(shè)置代碼格式的命令、創(chuàng)建相冊的命令等創(chuàng)建相冊的命令等 【站點】菜單提供用于管理站點以及【站點】菜單提供用于管理站點以及上傳和下載文件的菜單項。上傳和下載文件的菜單項。 【窗口】菜單提供對面板、檢查器和【窗口】菜單提供對面板、檢查器和窗口的訪問。窗口的訪問。 【幫助】菜單提供幫助系統(tǒng)，還包括【幫助】菜單提供幫助系統(tǒng)，還包括各種語言的參考材料。各種語言的參考材料。1. 選擇工具界面選擇工具界面2

7、. 主窗口介紹主窗口介紹3. 主菜單介紹主菜單介紹4. 視圖方式視圖方式代碼視圖代碼視圖：可以直接編輯網(wǎng)頁可以直接編輯網(wǎng)頁的源代碼的源代碼。設(shè)計視圖設(shè)計視圖：能更好地美化網(wǎng)頁，能更好地美化網(wǎng)頁，更合理地布局網(wǎng)頁更合理地布局網(wǎng)頁。同時顯示代碼視圖和設(shè)計視圖同時顯示代碼視圖和設(shè)計視圖：讓我們能夠更好地理解源代碼，讓我們能夠更好地理解源代碼，提高編程能力。提高編程能力。執(zhí)行執(zhí)行【管理站點【管理站點】命令】命令新建站點新建站點輸入站點的名稱輸入站點的名稱根據(jù)提示建立站點根據(jù)提示建立站點創(chuàng)建創(chuàng)建“images”images”文件夾文件夾新建網(wǎng)頁文件新建網(wǎng)頁文件“index.htmindex.htm”（1

8、）一般來說，網(wǎng)站設(shè)計所需遵循的理念有哪些。（）一般來說，網(wǎng)站設(shè)計所需遵循的理念有哪些。（ ）（2）網(wǎng)頁設(shè)計常用的工具有哪些。（）網(wǎng)頁設(shè)計常用的工具有哪些。（ ） AFrontPage BDreamweaver CFlash DFrontPageA帶寬問題帶寬問題 B版面布局版面布局C色彩搭配色彩搭配 D網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容（3）Dreamweaver中有三種視圖方式，它們是哪些。（中有三種視圖方式，它們是哪些。（ ） A顯示代碼視圖顯示代碼視圖 B顯示設(shè)計視圖顯示設(shè)計視圖C顯示代碼視圖和設(shè)計視圖顯示代碼視圖和設(shè)計視圖 D預(yù)覽視圖預(yù)覽視圖（1）在制作網(wǎng)頁之前，先要確定網(wǎng)站的整體風(fēng)格，這時需要注意）在制作網(wǎng)頁之前，先要確定網(wǎng)站的整體風(fēng)格，這時需要注意哪些問題？哪些問題？（3）訪問一些大型的網(wǎng)站，試著分析一下網(wǎng)站使用的網(wǎng)頁元素有）訪問一些大型的網(wǎng)站，試著分析一下網(wǎng)站使用的網(wǎng)頁元素有哪些，它們分別有哪些特點。哪些，它們分別有哪些特點。（2）Dreamweaver有三種視圖方式，分別敘述這三種視圖的用途。有三種視圖方式，分別敘述這三種視圖的用途。（1）啟動）啟動Dreamweaver，并熟悉其工作界面的各個組成部分。，并熟悉其工作界面的各個組成部分。（3）在創(chuàng)建好的站點中創(chuàng)建以下一級目錄：）在創(chuàng)建好的站點中創(chuàng)建以下一級目錄：img，sound，