網(wǎng)站及其規(guī)劃優(yōu)秀課件

1.1Internet提供的服務

1.2web概述

1.3網(wǎng)頁制作及其工具

1.4站點及其規(guī)劃

1.5Dreamweaver概述網(wǎng)頁制作1.1Internet提供的服務網(wǎng)頁制作網(wǎng)頁制作⑴電子郵件服務（E-mail）

⑵遠程登錄服務（Telnet）

⑶文件傳輸服務（FTP）

⑷信息查詢服務(web)⑸信息討論及發(fā)布服務(bbs)

⑹娛樂及會話服務網(wǎng)頁制作網(wǎng)頁制作

WorldWideWeb簡稱為Web，它能夠處理文字、圖象、聲音、視頻等多媒體的信息系統(tǒng)，它提供了大量的內(nèi)容豐富的信息資源，具有廣域性、交互性、動態(tài)性和分散性等特征。網(wǎng)上90%以上的信息是以網(wǎng)頁的形式組織的。1.2Web概述㈠Web概述（三）Web特點：Web是圖形化的易于導航的Web是與平臺無關的Web是分布式的Web是動態(tài)的Web是交互的●HotDogProfessional5——制作要加入多種復雜技術的網(wǎng)頁

HotDog是較早基于代碼的網(wǎng)頁設計工具，其最具特色的是提供了許多向導工具，能幫助設計者制作頁面中的復雜部分。

HotDog的高級HTML支持插入marquee，并能在預覽模式中以正常速度觀看。這點非常難得，因為即使首創(chuàng)這種標簽的Microsoft在FrontPage98中也未提供這樣的功能。HotDog對plug－in的支持也遠遠超過其他產(chǎn)品，它提供的對話框允許你以手動方式為不同格式的文件選擇不同的選項。但對中文的處理不很方便。

HotDog是個功能強大的軟件，對于那些希望在網(wǎng)頁中加入CSS、Java、RealVideo等復雜技術的高級設計者，是個很好的選擇。

1.3網(wǎng)頁制作的工具MicrosoftFrontPageNetscape編輯器AdobePagemill

ClarisHomePage

Dreamｗeaver

HotDogProfessionalHomeSite

HotMetal

PaintshopUleadCool3DGIFMovieGearUleadSmartsaver●DreamWeaver——自制動態(tài)HTML動畫的網(wǎng)頁

DreamWeaver是一個很酷的網(wǎng)頁設計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動態(tài)的HTML動畫，支持動態(tài)HTML(DynamicHTML)的設計，使得頁面沒有plug－in也能夠在Netscape和IE4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。

DreamWeaver還采用了RoundtripHTML技術。這項技術使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換，HTML句法及結構不變。這樣，專業(yè)設計者可以在不改變原有編輯習慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰(zhàn)性和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它的功能。

●HotMetalPro4.0——制作具有強大數(shù)據(jù)嵌入能力的網(wǎng)頁

HotMetal既提供“所見即所得”圖形制作方式，又提供代碼編輯方式，是個令各層次設計者都不至于失望的軟件。但是初學者需要熟知HTML，才能得心應手地使用這個軟件。

HotMetal具有強大的數(shù)據(jù)嵌入能力，利用它的數(shù)據(jù)插入向導，可以把外部的Access、Word、Excel以及其它ODBC數(shù)據(jù)提出來，放入頁面中。而且HotMetal能夠把它們自動轉換為HTML格式，是不是很棒，此外它還能轉換很多老格式的文檔(如WordStar等)，并能在轉換過程中把這些文檔里的圖片自動轉換為GIF格式。

HotMetal為用戶提供了“太多”的工具，而且它還可以用網(wǎng)狀圖或樹狀圖表現(xiàn)整個站點文檔的鏈接狀況。

●Netscape編輯器——制作簡單的網(wǎng)頁

NetscapeCommunicator和NetscapeNavigatorGold3.0版本都帶有網(wǎng)頁編輯器。

如果你喜歡用Netscape瀏覽器上網(wǎng)，那么使用Netscape編輯器真是簡單方便！當你用Netscape瀏覽器顯示網(wǎng)頁時，單擊編輯按鈕，Netscape就會把網(wǎng)頁存儲在硬盤中，然后就可以開始編輯了。你也可以像使用Word那樣編輯文字、字體、顏色，改變主頁作者、標題、背景顏色或圖像，定義描點，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等，是不是與Frontpage98還有些像。但是，Netscape編輯器對復雜的網(wǎng)頁設計就顯得功能有限了，它連表單創(chuàng)建、多框架創(chuàng)建都不支持。

Netscape編輯器是網(wǎng)頁制作初學者很好的入門工具。如果你的網(wǎng)頁主要是由文本和圖片組成的，Netscape編輯器將是一個輕松的選擇。如果你對HTML語言有所了解的話，能夠使用Notepad或UltraEdit等文本編輯器來編寫少量的HTML語句，那么也可以彌補Netscape編輯器的一些不足。

站點概念站點概念。

所謂站點：可以看作是一系列文檔的組合，這些文檔之間通過各種鏈接關聯(lián)起來。利用瀏覽器可以實現(xiàn)對整個對整個站點的瀏覽。本地站點和web站點。

在Dreamweaver中，站點這個術語既可以指internet服務器上的遠端

站點，也可以位于本地計算機上的本地站點。一般先建本地站點，再上載到服務器上。建立站點的必要性實現(xiàn)互聯(lián)則必須建立網(wǎng)站。雖然單個的網(wǎng)頁也能夠給人提供一些信息，但是這些遠遠不夠。要為訪問者提供更加詳盡的一些信息，則需要大量的網(wǎng)頁。要實現(xiàn)網(wǎng)頁相互關聯(lián)（鏈接）易于查找這一目標，則必須建立網(wǎng)站。所有的網(wǎng)絡應用程序都必須保存在站點內(nèi)。建立了站點后可以將已有的信息有組織的存放，方便調(diào)用和顯示。建立站點注意事項在使用Dreamweaver設計具體的網(wǎng)站之前必須先建立站點所有和站點有關的資源（HTMl文檔、圖片、動畫等）都必須保存在站點之內(nèi)

返回1網(wǎng)站規(guī)劃1.網(wǎng)站規(guī)劃一般來說，創(chuàng)建站點的第一步是對站點進行規(guī)劃。你需要了解站點的目的，確定他要提供什么，針對什么樣的觀眾，以確定網(wǎng)頁中該出現(xiàn)什么樣的內(nèi)容。有的時候，良好的構思，比實際的技術顯得更為重要，因為他直接決定你的張點的質(zhì)量和將來的訪問流量。明確站點目的定義目標用戶考慮網(wǎng)絡技術①確定建站目標確定建站目標:就是指明確你希望通過這個站點實現(xiàn)什么，確定它要提供什么樣的服務?！澳康摹睕Q定了站點的樣式外觀、整體效果、個性特點。例如：與銷售產(chǎn)品的Web站點相比，提供特定主題新聞的Web站點應該具有截然不同的外觀和導航方式。目標的復雜性將影響導航方式、使用的創(chuàng)作工具（Flash、Director等），甚至影響站點的外觀和行為。例如③考慮網(wǎng)絡技術目標用戶使用什么樣的電腦、什么平臺、（Macintosh、Windows、Linux等）、平均連接速度是多少（56kModem、128KISDN、還是更快的專線連接）？使用什么樣的瀏覽器（IE、Netscape）？顯示器的分辨率怎樣（1024*768、800*600）？有多媒體播放器嗎？所有這些因素會影他們在瀏覽網(wǎng)頁時的顯示效果。例如:如果站點的目標用戶大多數(shù)使用Windows9X操作系統(tǒng)；使用IE3.0以上版本的瀏覽器；平均連接速度為56K；用15~17英寸的顯示器。那么在制作網(wǎng)頁時，最好使用Windows系統(tǒng)，用MicrosoftIE瀏覽器，并且以800x600像素的分辨率來測試網(wǎng)頁。同時，還應該在Macintosh平臺上NetscapeNavigator瀏覽器下測試網(wǎng)頁。雖然網(wǎng)頁的查看者可能較少，但您仍然應該確保站點在這些計算機上能夠工作，盡管它的顯示可能不象對目標用戶那樣精確。①組織站點結構的必要性

組織站點結構的必要性：從一開始就認真組織站點可以減少失誤并節(jié)省時間。如果沒有考慮文檔在文件夾層次結構中的位置就開始創(chuàng)建文檔，最終可能會導致一個充滿了文件的大而笨重的文件夾，或導致相關的文件散布在許多名稱類似的文件夾中。②設計站點結構應遵循如下一些原則:用文件夾來保存文檔.使用合理的文件名:

要易理解

不宜過長

不要使用中文名字④收集相關資源

在開始開發(fā)站點前，請確保收集了所有這些項目并做好了準備。否則，您將不得不為找到一幅圖像或創(chuàng)建一個按鈕而經(jīng)常中斷開發(fā)過程。⑤設置站點的常規(guī)做法是：

首先在本地磁盤上創(chuàng)建一個包含站點所有文件的文件夾（稱作本地站點），然后在該文件夾中創(chuàng)建和編輯文檔。當準備好發(fā)布站點并允許公眾查看時，再將這些文件拷貝到Web服務器上。

優(yōu)點：這種方法要比在實時公共Web站點上創(chuàng)建和編輯文件好，因為它允許您在公開各種更改之前，在本地站點先測試這些更改，然后在完成后立即上傳本地站點文件并更新整個公共站點。使用Dreamweaver設置了本地站點后，就可以更輕松地執(zhí)行管理站點文件、跟蹤鏈接、更新頁面等操作了。1網(wǎng)站規(guī)劃2網(wǎng)站設計3網(wǎng)頁開發(fā)3、網(wǎng)頁開發(fā)網(wǎng)頁設計中常見的問題網(wǎng)頁設計的基本原則網(wǎng)頁設計中常見的問題下載慢意圖不明確布局混亂站點孤立缺乏有用信息網(wǎng)頁設計的基本原則形式與內(nèi)容協(xié)調(diào)一致。

要注意過多的圖片影響下載速度、影響站點主題的突出前后風格統(tǒng)一。

主頁和和其他頁要風格統(tǒng)一，超鏈接也要前后保持一致清楚方便的超鏈接。

注意訪問過的超鏈接和沒有訪問過的超鏈接的區(qū)別。必要的測試。

要在不同瀏覽器上進行必要的測試1網(wǎng)站規(guī)劃2網(wǎng)站設計4網(wǎng)站發(fā)布5網(wǎng)站維護3網(wǎng)頁開發(fā)

4、網(wǎng)站發(fā)布

5、網(wǎng)站維護

（略）1.5Dreamweaver概述Dreamweaver的功能簡介系統(tǒng)要求認識dreamweaver的工作環(huán)境Dreamweaver是Macromedia公司發(fā)布的一款專業(yè)的網(wǎng)頁設計軟件，能兼容不同平臺、不同瀏覽器和版本的網(wǎng)頁，并且同時提供界面操作和代碼編寫兩種設計模式，適用于各個階段的使用者。Dreamweaver以其強大的功能和簡便的操作而在眾多的網(wǎng)頁設計師中廣泛流傳，可以說Dreamweaver已經(jīng)成為全功能世界級的網(wǎng)頁編輯軟件與設計行業(yè)標準，是每一位立志從事網(wǎng)頁設計的人士的首選工具。

DreamweaverMX是該軟件的最新版本，與以前版本相比，該版本在界面操作方面具有如下新增特性：1.改進了工作空間布局和面板管理：該版本改變了以往版本的浮動面板風格，使得多個面板可以組合停靠，可以擴展和折疊（當然，用戶也可以選擇熟悉的浮動面板風格）。當用戶同時打開多個文檔時，該版本使用MDI（多文檔界面）布局，把Dreamweaver的相關窗口集成為一個窗口以選項卡的形式?？吭谌蝿諜谥校脩糁恍鑶螕羧蝿諜谏系南鄳x項卡即可在文檔間輕松切換。2.預定義范例頁面：該版本預裝了大量的頁面布局樣式，用戶可以在新建文檔時選擇預定義的布局樣式來創(chuàng)建新文檔。3.模板的功能增強：除了可以定義固定區(qū)域和可編輯區(qū)域外，該版本還新增了可選區(qū)域和重復區(qū)域的設置功能，以及使模板頁面元素單個標記屬性可編輯，給用戶使用模板創(chuàng)建網(wǎng)頁帶來更大的靈活性。此外該版本還允許在一個模板中嵌套另一個模板。Dreamweaver的功能簡介（1）可視化網(wǎng)頁設計，操作方便，所見即所得支持表格或層規(guī)劃網(wǎng)頁布局可以制作框架網(wǎng)頁可以制作簡單動畫可以制作簡單的交互網(wǎng)頁有強大的站點管理功能

可以有效地管理各網(wǎng)頁之間的關系

Dreamweaver的功能簡介（2）可在編碼視圖中指甲編輯JavaScript、MXL和其他文本文件支持多瀏覽器支持動態(tài)網(wǎng)頁技術

可以方便地插入Flash、Generator、Java、Shockwave、ActiveX等多種通用對象系統(tǒng)要求（1）IntelPentiumII處理器或等效處理器，300MHz或更快Windows98、Windows2000、WindowsNT（具有ServicePack3或更高版本）、WindowsME或WindowsXPNetscapeNavigator4.0版或更高版本或MicrosoftInternetExplorer系統(tǒng)要求（2）96MB的可用內(nèi)存(RAM)（建議采用128MB內(nèi)存）275MB的可用磁盤空間分辨率可達800

x

600像素的256色顯示器（建議顏色為百萬顏色，分辨率達到1024

x

768

像素）CD-ROM驅動器認識dreamweaver的工作環(huán)境Dreamweaver的窗口結構操作浮動面板的基本方法設置dreamweaver基本參數(shù)1.Dreamweavermx的窗口結構屬性面板狀態(tài)行設計視圖代碼視圖浮動面板窗口大小彈出菜單下載速度窗口大小彈出菜單這里僅僅顯示文檔窗口的大小，提醒用戶不要將網(wǎng)頁內(nèi)容超出范圍文檔窗口在非最大化時才可選用2.操作浮動面板的基本方法單擊選項卡可以顯示相應的面板單擊這里可以打開面板菜單浮動面板組標題欄單擊這里可以顯示或隱藏浮動面板組區(qū)域拖動這里可以移動或?？扛用姘褰M拖動這里可以改變浮動面板的寬度拖動這里可以改變相鄰兩個浮動面板組的高度返回3.設置dreamweaver基本參數(shù)設置dreamweaver的常規(guī)選項定制浮動面板定制瀏覽器定制屏幕字體定制快捷鍵打開對話框的方法(如圖):編輯菜單參數(shù)選擇設置dreamweaver的常規(guī)選項選中該項啟動后直接進入站點未選中該項時連敲空格鍵也只能輸入一個空格可以選擇用于拼寫檢查的字典返回定制浮動面板復選框選中該浮動面板放置于文檔窗口上方列表中是當前面板中顯示的按鈕選中則面版圖標在窗口啟動欄顯示返回定制瀏覽器添加瀏覽器用于設置在制定的瀏覽器中預覽按下F12即可啟動預覽按下ctrl-F12即可啟動預覽返回定制屏幕字體在這里選擇要設置的字體,比如創(chuàng)作簡體中文網(wǎng)頁時對顯示的字體進行設置可以設定操作環(huán)境中比例字體的名稱和字號可以設置操作環(huán)