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

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

—前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dreameavercs3：

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

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

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

三劍客。

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

良好的插件體系，使DreamweaverCS3可通過第三方插件進(jìn)行補(bǔ)充。另外，

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

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

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

DreamweaverCS3。

Flash:

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

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

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

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

其中flash的檔案格式是“swf”這是一個(gè)完整的影片檔，無法被編輯。有時(shí)會(huì)

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

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

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

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

FlashCS3及更高版本打開編輯。

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

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

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

工作和更進(jìn)階的程序修改。

Fireworks:

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

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

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

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

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

需求分析

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

網(wǎng)站的選題：

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

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

考/資訊”這類。因?yàn)橄葰w類有利于更好更準(zhǔn)確的選出自己想要的主題。

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

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

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

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

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

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

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

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

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

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

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

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

在我的“科目”欄目中主要用到是表格的運(yùn)用而已；在我的“年級(jí)”欄目里，

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

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

一年級(jí)■二年級(jí)I三年緞四年級(jí)

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

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

科目第及

四年級(jí)上四年級(jí)下五年級(jí)上

五年級(jí)下六年級(jí)上六年級(jí)下

語年級(jí)上人教版

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

單元測(cè)試

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

站點(diǎn)測(cè)試：

(1)啟動(dòng)DearmweaverCS3,打開本站點(diǎn)"yang”并對(duì)該站點(diǎn)進(jìn)行測(cè)試。

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

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

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

畫

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）返回本地視圖，打開站點(diǎn)中任意一個(gè)網(wǎng)頁文件，選擇“文件/檢查頁面/

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

▼結(jié)里搜索參考驗(yàn)證瀏覽器兼容性檢查鏈接和站點(diǎn)托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個(gè)級(jí)別的潛在問題：錯(cuò)誤提示、警告提示、

和告知性信息。具體錯(cuò)誤需要具體處理。

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

(7)選擇“站點(diǎn)/報(bào)告