網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)作業(yè)

網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)

—前言

隨著計算機網(wǎng)絡(luò)的迅速發(fā)展，Internet已經(jīng)成為我們生活中不可或缺的重

要組成部分。政府機關(guān)通過網(wǎng)站實現(xiàn)電子政務(wù)；企業(yè)利用網(wǎng)站展示企業(yè)形象、推

廣產(chǎn)品并進行電子商務(wù)活動；個人通過具有獨特風(fēng)格的網(wǎng)站來展示自我。因此，

搭建網(wǎng)站、設(shè)計精美的網(wǎng)頁來吸引瀏覽者成為大家共同關(guān)注的目標，學(xué)校里和社

會上涌現(xiàn)了大量的網(wǎng)頁設(shè)計愛好者，他們迫切希望盡快學(xué)習(xí)網(wǎng)頁設(shè)計與制作的知

識，并將其應(yīng)用于實踐中。

學(xué)校網(wǎng)站是學(xué)校對外宣傳的窗口，也是展示全校師生才能、加強對校外聯(lián)系、

互相學(xué)習(xí)、共同發(fā)展的陣地。學(xué)校網(wǎng)站的建設(shè)對促進師生與學(xué)校共同發(fā)展，建立

內(nèi)容豐富的網(wǎng)絡(luò)信息資源，形成開放的資源共享條件，實現(xiàn)教學(xué)、科研、管理、培

訓(xùn)的信息化,使校園網(wǎng)站成為信息資源的寶庫、學(xué)校形象的窗口、網(wǎng)絡(luò)教育的基

地和師生交流的樂園等有著重要的意義。

二網(wǎng)站制作具體內(nèi)容

網(wǎng)站開發(fā)工具的介紹

主要的使用工具有：Dreanweavercs3、fireworksflash而在此次設(shè)計中

主要用到Dreameaver設(shè)置首頁，編輯功能，排版功能，設(shè)計模版功能，插入文

本包括插入文本元素插入圖像和圖文混排和外部圖像的編輯等功能。關(guān)于

Dreameaver的插入FLASH功能我用的比較少，在首頁的前面里我插入了一副

FLASH,當然還有主頁的分頁里也插入了FLASHo其中Fireworks的功能我還不

是很了解，我相信我以后會更好的使用它。

Dreameavercs3：

DreamweaverCS3是由Adobe公司在并購Macromedia之后推出的最新版本，它

是一款專業(yè)的Web站點開發(fā)軟件，可用于Web站點、Web頁和Web應(yīng)用程序的設(shè)

計、編碼和開發(fā)工作。在業(yè)界通常將Dreamweaver、Flash>Fireworks稱為網(wǎng)頁

三劍客。

將各種網(wǎng)頁制作的相關(guān)工具緊密聯(lián)系起來是Dreamweaver系列的一大亮點，同時

良好的插件體系，使DreamweaverCS3可通過第三方插件進行補充。另外，

DreamweaverCS3還為開發(fā)人員提供了動態(tài)語言支持與豐富的模板。

DreamweaverCS3在功能強大與易用性之間具有很好的平衡，使用Dreamweaver

CS3可以有效地提高Web開發(fā)的工作效率。所以在這次網(wǎng)站中主要設(shè)計工具就是

DreamweaverCS3。

Flash:

Flash是FlashMacromedia公司開發(fā)的動畫編輯工具。1997年推出業(yè)內(nèi)最先

進的互動內(nèi)容創(chuàng)作環(huán)境，用于交互網(wǎng)站、交互數(shù)字體驗和高沖擊力的移動內(nèi)容的

創(chuàng)作。Flash由macromedia公司推出的交互式矢量圖和Web動畫的標準。網(wǎng)頁

設(shè)計者使用Flash創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果。

其中flash的檔案格式是“swf”這是一個完整的影片檔，無法被編輯。有時會

被念做“swiff"。Swf在發(fā)布時可以選擇保護功能，如果沒有選擇，很容易被

別人輸入到他的原始檔中使用。然而保護功能依然阻擋不了為數(shù)眾多的破解軟

件，有不少囚客專門以此來學(xué)習(xí)別人的程序代碼和設(shè)計方式。

"fla”是Flash的原始檔，只能用MacromediaFlash打開編輯或Adobe

FlashCS3及更高版本打開編輯。

Actionscript是一種程序語言的簡單文本文件.FLASH檔案能夠直接包含

Actionscript,但是也可以把它存成AS檔做為外部連結(jié)檔案（如定義

ActionScript類則必須在寫在as文件里,再通過import加入類），以方便共同

工作和更進階的程序修改。

Fireworks:

Fireworks是一個強大的網(wǎng)頁圖形設(shè)計工具，你可以使用它創(chuàng)建和編輯位

圖、矢量圖形，還可以非常輕松的做出各種網(wǎng)頁設(shè)計中常見的效果，比如翻轉(zhuǎn)圖

象，下拉菜單等，設(shè)計完成以后，如果你要在網(wǎng)頁設(shè)計中使用，你可以將它輸出

為html文件,還能輸出為可以在photoshop,illustrator和flash等軟件中編

輯的格式。這里主要是用［它來制作網(wǎng)頁圖片。

需求分析

1）選題'風(fēng)格：

網(wǎng)站的選題：

網(wǎng)站的主題也就是網(wǎng)站的題材，也就是網(wǎng)站的眼睛。網(wǎng)站選題千奇百怪,琳瑯滿

目，只要想的到，就可以把它制作出來。在這里，我先把我的個人網(wǎng)站歸類為“參

考/資訊”這類。因為先歸類有利于更好更準確的選出自己想要的主題。

我設(shè)計學(xué)習(xí)網(wǎng)站的主題就是“小學(xué)各年級課件匯總”，也就是把我所想的記

錄下來并去實現(xiàn)它，當然還有更深層的含意。

網(wǎng)站的風(fēng)格：

網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標準色彩是相當重要的一

步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。在本網(wǎng)站里

主要用到的顏色有：粉紅色、藍色和綠色，網(wǎng)站看上去給人的第一印象就是簡潔、

有條理、寓教于樂的這么一個網(wǎng)站。

2）網(wǎng)站說明'網(wǎng)站主要欄目的介紹

在我的網(wǎng)頁中，主要是通過首頁來實現(xiàn)其他的網(wǎng)頁界面。在首頁中的主要欄

目有：首頁，科目，年級。而各部分是相互鏈接在一起的。也就是說明了我充分

的運用了DREAMWEAVERCS3的超鏈接功能。在我的“首頁”欄目中主要用到是嵌

入和連接功能，嵌如了一張圖片和被連接了一副FLASH,增加了網(wǎng)頁的精美效果;

在我的“科目”欄目中主要用到是表格的運用而已；在我的“年級”欄目里，

也簡單，沒有創(chuàng)意。里面也就小學(xué)一到六年級。

小學(xué)各年級課件教案習(xí)題，課

一年級■二年級I三年緞四年級

語文數(shù)學(xué)英語一年級下二年級上

科學(xué)二年級下三年線上三年級下

科目第及

四年級上四年級下五年級上

五年級下六年級上六年級下

語年級上人教版

O的蝌

I

O漢語拼音

1.aoe

2.iuu

3.bPmf

4.dtnI

5jqx

6.zcs

7.zhchshr

8.aieiui

9.aoouiu

10.ieueer

11.aneninunvn

12angengingong

單元測試

三網(wǎng)站的測試與發(fā)布

站點測試：

(1)啟動DearmweaverCS3,打開本站點"yang”并對該站點進行測試。

（2）打開文檔窗口右側(cè)的“文件”面板，在“視圖”下拉列表框中選擇“地圖

視圖”選項，以地圖方式顯示站點結(jié)構(gòu)。如下圖：

C3）單擊“展開顯示本在和遠端站點”按鈕同打開站點視圖。如下圖:

畫

index.html

liuybo.html

.故事

f金f-+p

ifii

??*_index,html:故事.html…-index,html

…

…

.金-+

…

：-

xiezuo.htmlindex,html：xiezuo.html

…

：

愜

田-+

:看s重慶火鍋―ffi:--

：index,htmljianli.html:index,htmldream.html

：

㈤唯-

￡(±:)-+

『喳,美食介紹...:-

：xiezuo.htmlxiezuo.htmljianli.htmljianli.html

囹

：

唯-

金+

：-

田jianli.html:dream.htmlliuybo.html：dream,html故事.html

唯-

ffi-

由dream.htmlliuybo.html-liuybo.html口?http...le.cn

巴渝人家-.口?http...q.com

?liuybo.html'□?http...g.com

;：留言板.html，口?http..m/pub

力::write.txt

kD0JavascriP--?

javascrip...

（4）返回本地視圖，打開站點中任意一個網(wǎng)頁文件，選擇“文件/檢查頁面/

檢查瀏覽器兼容性”命令，如下圖：

▼結(jié)里搜索參考驗證瀏覽器兼容性檢查鏈接和站點托FTP?服務(wù)詈歷史記巳

行問題瀏覽器支持i可題

60不支持的值：“1?！辈恢С值闹担骸癷o”二

影響:Firefox1.5;Internet

Explorer6.0,7.0;Internet

ExplorerforMacintosh5.2;

Netscape8.0;Opera8.0,9.0;

Safari2.0▼

在Adobe,com上工與瀏覽器中的

CSS支持有關(guān)閡信算:

(5)“瀏覽器兼容性檢查”提供了3個級別的潛在問題：錯誤提示、警告提示、

和告知性信息。具體錯誤需要具體處理。

(6)選擇“文件/檢查頁/鏈接”命令，檢查頁面的鏈接是否正確。

(7)選擇“站點/報告