1、2024/3/7,1,網(wǎng)頁設(shè)計三合一教程,主講教師,第1章 網(wǎng)頁設(shè)計簡介,主講教師,本章要點,了解網(wǎng)頁的設(shè)計理念了解網(wǎng)頁的設(shè)計風(fēng)格了解網(wǎng)頁的創(chuàng)意設(shè)計了解網(wǎng)頁的色彩搭配熟悉Dreamweaver 8的工作環(huán)境,第1章 網(wǎng)頁設(shè)計簡介,1.1 網(wǎng)頁設(shè)計概述1.2 初識Dreamweaver 8,1.1 網(wǎng)頁設(shè)計概述,1.1.1 網(wǎng)頁設(shè)計遵循的理念1.1.2 網(wǎng)站整體風(fēng)格的確定1.1.3 網(wǎng)頁創(chuàng)意1.1.4 網(wǎng)頁色彩搭配簡介
2、1.1.5 常用網(wǎng)頁設(shè)計工具簡介,1.1.1 網(wǎng)頁設(shè)計遵循的理念,（1）考慮訪問者的帶寬問題。（2）版面布局合理。（3）網(wǎng)站標(biāo)志的設(shè)計。（4）站點內(nèi)容要精、專，及時更新。,1.1.2 網(wǎng)站整體風(fēng)格的確定,網(wǎng)站的風(fēng)格指網(wǎng)站的整體形象給訪問者的綜合感受。包含的因素網(wǎng)站的標(biāo)志設(shè)計、色彩、版面布局、瀏覽方式、交互性、文字和價值等。例如：兒童網(wǎng)站“WaWaYaYa”是生動活潑的；大多商業(yè)網(wǎng)站如IBM，是專業(yè)嚴(yán)肅的。,確定網(wǎng)站的整體
3、風(fēng)格需要注意以下幾個方面：,（1）網(wǎng)站標(biāo)志要放在醒目位置要保持不變。（2）反應(yīng)網(wǎng)站精髓的標(biāo)語并動態(tài)顯示。（3）導(dǎo)航放在每一張網(wǎng)頁的相同位置。（4）確定網(wǎng)站的主體顏色并注意顏色。（5）頁面的布局一般采用左邊導(dǎo)航右邊文字，或者上面導(dǎo)航下面文字的方法，或兩者結(jié)合使用。（6）內(nèi)容結(jié)構(gòu)簡單且分類要簡而精。,1.1.3 網(wǎng)頁創(chuàng)意,什么是創(chuàng)意？（1）創(chuàng)意是傳達(dá)信息的一種特殊手段。（2）創(chuàng)意是將現(xiàn)有的要素重新組合。,1.1.4 網(wǎng)頁色彩搭
4、配簡介,網(wǎng)頁色彩搭配應(yīng)考慮以下因素：（1）色彩的鮮明性。（2）色彩的獨特性。（3）色度的合適性。（4）色彩的代表性。,1.1.5 常用網(wǎng)頁設(shè)計工具簡介,1．網(wǎng)頁設(shè)計軟件Dreamweaver2．網(wǎng)絡(luò)動畫制作軟件Flash3．網(wǎng)絡(luò)圖像處理軟件Fireworks,1．網(wǎng)頁設(shè)計軟件Dreamweaver,Dreamweaver是一個方便的網(wǎng)頁制作工具，支持最新的DHTMLTT和CSS標(biāo)準(zhǔn)。它能夠快速高效地創(chuàng)建極具表現(xiàn)力和動感效果
5、的網(wǎng)頁，同時使制作過程簡單化。不僅提供了強大的網(wǎng)頁編輯功能，而且擁有完善的站點管理機制，是一個集網(wǎng)頁制作和站點管理于一身的網(wǎng)頁創(chuàng)作工作。,2．網(wǎng)絡(luò)動畫制作軟件Flash,Flash是最流行的矢量動畫制作軟件之一，它只用少量矢量數(shù)據(jù)就可以描述一個復(fù)雜的對象，而且占用的存儲空間少，非常適合在網(wǎng)絡(luò)上使用。運用它可以制作出栩栩如生、動感十足的動畫作品。,3．網(wǎng)絡(luò)圖像處理軟件Fireworks,Fireworks是專門針對Web而設(shè)計的圖像處
6、理軟件，因此它對圖像進行了充分的優(yōu)化。利用Fireworks生成的網(wǎng)頁圖像的色彩也符合Web標(biāo)準(zhǔn)。設(shè)計時看到的顏色就是將來網(wǎng)頁上顯示的顏色，制作起來非常直觀。,1.2 初識Dreamweaver 8,1.2.1 工作界面的選擇1.2.2 主窗口簡介,1.2.1 工作界面的選擇,啟動Dreamweaver 8后，首先出現(xiàn)的是初始化界面。接著彈出【工作區(qū)設(shè)置】對話框。如果習(xí)慣編寫代碼的，可以選擇【編碼器】單選鈕。這里選擇【設(shè)計者】
