2網(wǎng)站的制作流程及Dreamweaver工具.ppt

1、站點(diǎn)創(chuàng)建及Dreamweaver使用,內(nèi)容,上節(jié)課內(nèi)容回顧 網(wǎng)站的分類 網(wǎng)頁基本要素 網(wǎng)站設(shè)計(jì)所需技術(shù) 網(wǎng)站制作流程 Dreamweaver 8的使用 站點(diǎn)創(chuàng)建,網(wǎng)站的分類,根據(jù)站點(diǎn)的性質(zhì)、實(shí)現(xiàn)不同功能表達(dá)不同主題可分為： 資訊類網(wǎng)站 形象類網(wǎng)站 資訊與形象相結(jié)合的網(wǎng)站 另一種分類：門戶類、娛樂類、電子商務(wù)、企業(yè)類、政府類、個(gè)人網(wǎng)站,網(wǎng)站的賞析-門戶類網(wǎng)站,YAHOO是互聯(lián)網(wǎng)上最知名的公司，一直高居訪問流量之首，是互聯(lián)網(wǎng)上最大的門戶，也是一個(gè)垂直網(wǎng)站總匯。YAHOO致力于做成互聯(lián)網(wǎng)上最大的媒體，涉及的領(lǐng)域包括網(wǎng)絡(luò)門戶、電子商務(wù)、網(wǎng)絡(luò)通信等，提供的服務(wù)還包括拍賣、購物、開設(shè)網(wǎng)上商店、聊天等。YA

2、HOO公司是一家全球性的互聯(lián)網(wǎng)通信、商貿(mào)及媒體公司，是全球第一家提供互聯(lián)網(wǎng)導(dǎo)航服務(wù)、主要以廣告為支撐的網(wǎng)站，廣告收入占公司收入的60%。YAHOO網(wǎng)站如圖所示。,2.網(wǎng)站的賞析-門戶類網(wǎng)站,1.3 網(wǎng)站的分類與賞析,YAHOO的網(wǎng)站以淺藍(lán)、紫色系為主要色調(diào)，右上新業(yè)務(wù)欄會(huì)不時(shí)變化相應(yīng)的主題，根據(jù)相應(yīng)的主題來定制不同的顏色，使用戶總有即時(shí)、新鮮的感覺。,（1）框架結(jié)構(gòu)-首頁 上左中右下結(jié)構(gòu)是框架,確切地說是左中右結(jié)構(gòu)。整個(gè)網(wǎng)站的主要內(nèi)容主要集中在中和右的信息內(nèi)容上。,（2）色彩 與某些門戶網(wǎng)站相比較，YAHOO網(wǎng)站的用色比較清爽、干凈。 整體看來，YAHOO使用了藍(lán)色、紫色兩套鄰近色，輔助以灰色

3、，使色彩過渡和諧。點(diǎn)睛色無疑為頂部左側(cè)醒目突出網(wǎng)站的標(biāo)志“YAHOO！”，這也是網(wǎng)站中純度最高的顏色。 YAHOO網(wǎng)站不僅對(duì)色相的微妙區(qū)別把握得很好，而且對(duì)色彩的純度主次的把握也值得稱贊。,（3）文字顏色 使用了低純度的普藍(lán)和黑色，其中普藍(lán)色的文字是網(wǎng)站的超級(jí)鏈接形式，鼠標(biāo)放上去后會(huì)有微妙的明度變化以及下劃線的出現(xiàn)。 說明性文字用的是黑色。 信息內(nèi)容框里的標(biāo)題，主次關(guān)系排視覺第一位，內(nèi)容框里的主要內(nèi)容縮小字號(hào)，都做了粗細(xì)的變化。 從文字上看，又一次體會(huì)到了門戶網(wǎng)站對(duì)細(xì)節(jié)的推敲的嚴(yán)謹(jǐn)性。,（4）圖形 第一屏上最大的圖片為右方的YAHOO！Travel，它能夠直接體現(xiàn)出YAHOO收益的新業(yè)務(wù)。其次

4、為屏幕中央的新聞?wù)掌?，其它則為左側(cè)的導(dǎo)航圖片（個(gè)性服務(wù)）。 在整個(gè)網(wǎng)站里，破除單調(diào)呆板印象，使整個(gè)版面生動(dòng)的點(diǎn)睛之筆是左側(cè)的8個(gè)圖標(biāo)，也是網(wǎng)站為用戶訂制的特色服務(wù)。,網(wǎng)站的賞析-數(shù)碼產(chǎn)品類網(wǎng)站,數(shù)碼產(chǎn)品網(wǎng)站主要用來說明和展示數(shù)碼產(chǎn)品的功能和樣式，對(duì)于功能齊全和有一定技術(shù)含量的網(wǎng)站，還可以通過網(wǎng)站進(jìn)行電子交易和產(chǎn)品訂購等操作。不同的企業(yè)建設(shè)數(shù)碼產(chǎn)品的要求有所不同，設(shè)計(jì)風(fēng)格也不同，此類網(wǎng)站主要還是以符合產(chǎn)品的特點(diǎn)為主。網(wǎng)頁設(shè)計(jì)者在設(shè)計(jì)的時(shí)候，只要抓住數(shù)碼產(chǎn)品的樣式風(fēng)格、性能特征等方面的特點(diǎn)，設(shè)計(jì)與其風(fēng)格匹配的網(wǎng)站即可。設(shè)計(jì)風(fēng)格通常比較時(shí)尚、大方、具有時(shí)代感，色彩多選擇藍(lán)色、紅色、灰色等體現(xiàn)時(shí)尚感的

5、顏色。,2.網(wǎng)站的賞析-數(shù)碼產(chǎn)品類網(wǎng)站,1.3 網(wǎng)站的分類與賞析,（1）色彩分析 使用藍(lán)色來體現(xiàn)具有科技感的網(wǎng)站早已司空見慣，該實(shí)例大膽的采用了紅、橙色來作為主色調(diào)，同時(shí)選用銀灰色來作為輔助色。頁面整體布局體現(xiàn)了產(chǎn)品的時(shí)代科技感，同時(shí)也體現(xiàn)了產(chǎn)品的活力潮流感。 選用紅、橙色是依據(jù)網(wǎng)站logo、手機(jī)屏幕的色彩方案而設(shè)定的，是一種能同時(shí)體現(xiàn)企業(yè)形象與產(chǎn)品風(fēng)格的設(shè)計(jì)方案。熱情、充滿活力的紅色和橙色很好的體現(xiàn)了音樂手機(jī)的時(shí)尚魅力，讓用戶第一眼就被網(wǎng)站亮麗的色彩所吸引，這在當(dāng)今網(wǎng)絡(luò)上數(shù)以億計(jì)的網(wǎng)頁中顯得尤為重要。 銀灰色的選用主要是起到了輔助襯托的作用，它不僅不搶主色調(diào)的風(fēng)采，反而增加了頁面的對(duì)比度。因

6、為既然選用了紅、橙色來作為主色調(diào)，那么就盡量少用或不用其他諸如藍(lán)、綠等比較搶眼的顏色，否則將會(huì)出現(xiàn)主次不分明、畫面凌亂的副作用。,（2）布局分析 該網(wǎng)頁的整體頁面屬于上下型結(jié)構(gòu)，導(dǎo)航和 Banner區(qū)域?yàn)橐粔K，內(nèi)容區(qū)域?yàn)榱硗庖粔K。導(dǎo)航和Banner區(qū)域的邊框和內(nèi)容區(qū)域的邊框風(fēng)格一致，這樣既有整體性也有對(duì)比性。 放在Banner區(qū)域左邊的會(huì)員登錄框被包圍在“電子線路板”的圓角線條框內(nèi)，體現(xiàn)科技感的同時(shí)也符合了用戶從“從左至右”的習(xí)慣。 內(nèi)容區(qū)域使用的是左右結(jié)構(gòu)。左邊使用了一張較大的手機(jī)屏幕圖，然后將主要內(nèi)容放置其中顯得特別突出；右邊使用了兩幅廣告圖來推薦主要的業(yè)務(wù)；下面是文字類新聞標(biāo)題。圖文并茂

7、顯得畫面更豐富多彩。,網(wǎng)頁的基本要素,俞晨視覺傳奇網(wǎng)站default.html網(wǎng)頁基本構(gòu)成要素,網(wǎng)頁標(biāo)題,LOGO,網(wǎng)頁文本,網(wǎng)頁圖像,網(wǎng)頁頁腳,網(wǎng)頁導(dǎo)航,超級(jí)鏈接,1頁面標(biāo)題,網(wǎng)站中的每一個(gè)頁面都有標(biāo)題，用來提示該頁面的主要內(nèi)容，標(biāo)題出現(xiàn)在瀏覽器的標(biāo)題欄中，而不是出現(xiàn)在頁面布局中。 設(shè)置頁面標(biāo)題很簡(jiǎn)單，一般的網(wǎng)頁編輯軟件都提供這項(xiàng)設(shè)置。在HTML文檔中的和之間輸入網(wǎng)頁的標(biāo)題即可。,網(wǎng)頁的基本要素,2網(wǎng)站標(biāo)志,網(wǎng)頁的基本要素,LOGO,3頁面尺寸,網(wǎng)頁的基本要素,分辨率為800像素600像素，頁面的顯示尺寸為778像素430像素，分辨率為1024像素768像素頁面的顯示尺寸為1000像素600

8、像素。從以上數(shù)據(jù)可以看出，分辨率越高，頁面尺寸越大。,4頁眉和頁腳、導(dǎo)航欄、圖片、文本,網(wǎng)頁的基本要素,頁眉的風(fēng)格一般要求和頁面的整體風(fēng)格保持一致。一個(gè)富有個(gè)性特色的頁眉將和網(wǎng)站標(biāo)志一樣起到標(biāo)示的作用。在頁眉中常放置含有站點(diǎn)名字的圖片、標(biāo)志、網(wǎng)站宗旨、宣傳口號(hào)和廣告語等,LOGO,頁眉,導(dǎo)航欄,5多媒體,網(wǎng)頁的基本要素,在網(wǎng)頁中可以使用的媒體對(duì)象主要包括flash動(dòng)畫、flash按鈕、flash文本、java小程序、音頻和視頻等。,網(wǎng)頁中的Flash動(dòng)畫 網(wǎng)頁中的視頻,制作網(wǎng)站需要的技術(shù),Html Dreamweaver Photoshop或fireworks Flash 服務(wù)器端腳本語言as

9、p、jsp、php 客戶端腳本語言：vbscript或Javascript,制作流程,網(wǎng) 站 維 護(hù),前 期 策 劃 與 內(nèi) 容 組 織,效 果 圖 設(shè) 計(jì),網(wǎng) 頁 編 輯 與 動(dòng) 畫 設(shè) 計(jì),動(dòng) 態(tài) 編 程 或 代 碼 融 合,發(fā) 布 測(cè) 試,啟動(dòng)Dreamweaver 8,1）啟動(dòng)Dreamweaver 8，出現(xiàn)如圖所示的界面，選擇“創(chuàng)建新項(xiàng)目”欄目中的HTML，系統(tǒng)便會(huì)新建一個(gè)HTML文檔。,Dreamweaver網(wǎng)頁編輯界面,插入面板,窗口菜單,標(biāo)簽,浮動(dòng)面板,屬性面板,Dreamweaver視圖,1.三種視圖： 代碼：HTML代碼 設(shè)計(jì)：圖形界面 拆分： 2.查看網(wǎng)頁源代碼：“查看”

10、菜單源文件 3.動(dòng)態(tài)網(wǎng)頁： *.asp 靜態(tài)網(wǎng)頁： *.htm,新建網(wǎng)頁,1）保存 （1.名稱不要包含漢字 2.如果是主頁通常為index.html或者為default.html ） 2）輸入網(wǎng)頁標(biāo)題 （顯示在標(biāo)題欄上）,新建網(wǎng)頁,3）執(zhí)行“插入”“表格”命令，參數(shù)如圖所示，然后設(shè)置表格屬性如圖所示：高為100%，背景顏色為黑色#000000。,新建網(wǎng)頁,4）執(zhí)行“插入”“圖像”命令，在“選擇圖像源文件”對(duì)話框中選擇“index.jpg”圖片，點(diǎn)擊“確定”按鈕即可完成圖像的插入，選擇圖像設(shè)置“居中對(duì)齊”。 5）插入圖像后，按鍵，輸入“2009-2010 版權(quán)所有： 建議使用1024*768以上

11、分辨率瀏覽”版權(quán)信息。選擇輸入的文字，在屬性欄中修改文字的顏色為白色（#ffffff）。 6）邊做邊保存 7）按鍵，在IE瀏覽器中預(yù)覽該網(wǎng)頁。,新建網(wǎng)頁,顏色表示 法1： Color=red 如：color=yellow,color=blue 法2： Color=#RRGGBB 十六進(jìn)制0f 如：color=#000000 紅 綠 藍(lán) color=#368f9e color=#ffffff 法3： Color=rgb(RRR,GGG,BBB) 十進(jìn)制0255 如：color=rgb(70,0,151),任務(wù)一 制作網(wǎng)頁,動(dòng)手編寫你的第一個(gè)網(wǎng)頁,任務(wù)二,對(duì)任務(wù)一完成的頁面，轉(zhuǎn)換到代碼視圖，熟悉HTML代碼,IIS應(yīng)用,IIS：Internet Information Service（Internet信息服務(wù)） 1.主要功能： Web服務(wù)器 FTP服務(wù)器 SMTP 2.安裝 控制面板添加/刪除程序Windows組件從Windows光盤安裝,IIS應(yīng)用,3. IIS配置 右擊“我的電腦” 管理Internet信息服務(wù),IIS應(yīng)用,3. IIS配置,IIS應(yīng)用,3. IIS配置,IIS應(yīng)用,3. IIS配置,新建站點(diǎn),1.建目錄