網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)報(bào)告

1、高等教育自學(xué)考試通信與信息系統(tǒng)管理專業(yè)?？茖?shí)驗(yàn)報(bào)告考點(diǎn)名稱：課程名稱：計(jì)算機(jī)網(wǎng)絡(luò)與應(yīng)用姓名也口支勺成績教員簽名實(shí)驗(yàn)名稱網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)?zāi)康牧私鈱I(yè)網(wǎng)貝設(shè)計(jì)工具DreamweaverFireworks和Flash;了解網(wǎng)貝的核心技術(shù)HTML語言。使用儀器實(shí)驗(yàn)環(huán)境f多媒體電腦，組建內(nèi)部局域網(wǎng)，并且接入國際互聯(lián)網(wǎng)；安裝WindowsXP操作系統(tǒng)，建立IIS服務(wù)奮環(huán)境，并支持ASP;女裝網(wǎng)頁二劍客(Dreamweaver、Flash、Fireworks)等網(wǎng)貝設(shè)計(jì)軟件。實(shí)驗(yàn)內(nèi)容認(rèn)識(shí)網(wǎng)貝設(shè)計(jì)工具Dreamweaver;新建站點(diǎn)和網(wǎng)貝；進(jìn)行網(wǎng)站的結(jié)構(gòu)設(shè)計(jì)、站點(diǎn)風(fēng)格的選擇、網(wǎng)站層次規(guī)劃和貝囿布局；網(wǎng)貝的基

2、本組成要素的添加；網(wǎng)貝中多媒體的應(yīng)用；站點(diǎn)和網(wǎng)頁的保存；站點(diǎn)的發(fā)布。實(shí)驗(yàn)步驟：1、確定網(wǎng)站主題我的網(wǎng)站的主旨在于介紹自己，展示自己，包括我的自我介紹、學(xué)習(xí)、創(chuàng)作和我的班級(jí)等內(nèi)容。從各個(gè)方面全面的介紹我自己。另外，網(wǎng)站里還應(yīng)包括我的相冊(cè)，建立一個(gè)展示自我形象的平臺(tái)。同時(shí)，網(wǎng)站里的每一個(gè)網(wǎng)頁都要有統(tǒng)一的風(fēng)格，以加強(qiáng)渲染自己性格的效果。最重要的是做出自己的風(fēng)格，吸引瀏覽者的眼球。2、搜集材料主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的新聞，同時(shí)，查詢相關(guān)的圖書、報(bào)紙、光盤、多媒體等，也可以得來更加有說服力的信息。常言道：“巧婦難為無米之炊”。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要

3、盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。3、規(guī)劃網(wǎng)站我的網(wǎng)站包括5個(gè)頁面，首頁、自我介紹、我的相冊(cè)、我的班級(jí)和給我留言。每一個(gè)頁面用統(tǒng)一的背景圖片，以保證網(wǎng)站統(tǒng)一的風(fēng)格。用自己的名字命名網(wǎng)站Loge,搭配合適的元素用Photoshop設(shè)計(jì)出獨(dú)特的站標(biāo)，然后再仿制出相似的其他子頁面站標(biāo)，網(wǎng)站整體色調(diào)為白色，然后點(diǎn)綴其他不同的顏色相配，突出主題，但顏色不宜過多，過雜，給人一種雜亂的感覺。版面設(shè)計(jì)要靈活，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。但是每個(gè)頁面的主兀素和位置不能變，比如loge.版權(quán)信息等。網(wǎng)頁布局主要用層和表格，用層定

4、位內(nèi)容的大體結(jié)構(gòu)，再用表格具體定位。位子的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用是，用CSS設(shè)一個(gè)樣式，以保證隨時(shí)、準(zhǔn)確的調(diào)用。另外，為了網(wǎng)頁布局的協(xié)調(diào)，還可以加入flash動(dòng)態(tài)圖片，會(huì)達(dá)到更好的效果。4、選擇合適的制作工具做網(wǎng)貝的首先工具當(dāng)然為Dreamweaver,另外，為了處理網(wǎng)貝中的其他兀素，還口以使用Photoshop、GifAnimator等軟件。5、認(rèn)識(shí)網(wǎng)頁設(shè)計(jì)工具Dreamweaver(1)Dreamweaver的啟動(dòng)單擊任務(wù)欄上的開始一程序一Macromedia一aMacromediaDreamweaver”即可啟動(dòng)網(wǎng)頁設(shè)計(jì)工具軟件。(2)窗口組

5、成的認(rèn)識(shí)6、新建站點(diǎn)執(zhí)行“站點(diǎn)”菜單中的“新建站點(diǎn)”命令，在彈出的對(duì)話框中選擇“基本”標(biāo)簽，在文本框中分別輸入新建站點(diǎn)名稱和站點(diǎn)的HTTP地址；再選擇“高級(jí)”標(biāo)簽，在分類列表中選擇“本地信息”，并在右邊各文本框中輸入站點(diǎn)名稱、本地根文件夾、默認(rèn)圖像文件夾、HTTP地址，這些設(shè)置完成后，單擊確定按鈕，即可完成站點(diǎn)的創(chuàng)建。7、站點(diǎn)中首頁的創(chuàng)建“文件”菜單一“新建”一選擇“常規(guī)”選項(xiàng)卡中的基本頁一在右邊列表中選擇“HTML”,再單擊“創(chuàng)建”按鈕，完成網(wǎng)頁文件的新建，然后再通過“修改”菜單中的“頁面屬性”命令把網(wǎng)頁的上、下、左、右邊距都設(shè)為“0px”，最后在網(wǎng)頁中通過表格進(jìn)行頁面的布局，然后輸入所需要

6、的網(wǎng)頁元素。8、制作網(wǎng)頁素材、風(fēng)格、模板都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)，比如說，mysite然后再建立各個(gè)頁面時(shí)，都應(yīng)該建立在本地站點(diǎn)中，在網(wǎng)頁制作時(shí)所需的各個(gè)元素都要進(jìn)行統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時(shí)建立了“image”文件夾來存放圖片，同時(shí)，由于“我的相冊(cè)”頁面中的信息太多，于是建立了一個(gè)專門的文件夾存放相冊(cè)信息，網(wǎng)頁中的css樣式文件也應(yīng)統(tǒng)一管理，做到有條不紊。9、根據(jù)自己的網(wǎng)頁風(fēng)格，在網(wǎng)上搜集合適的圖片，另外網(wǎng)頁的頁寬一般不超過900像素，以保證左右不出現(xiàn)滾動(dòng)條。在設(shè)計(jì)窗口中插入一個(gè)一行一列的表格

7、，表格的間距為0,顏色為黑色，居中對(duì)齊，然后插入背景圖片，就做成了網(wǎng)頁的背景，網(wǎng)頁的設(shè)計(jì)布局為，中間部分顯示網(wǎng)頁最新動(dòng)態(tài)，用層工具定位元素的大致位置，在層中然后插入表格，精確定位圖像、文本的位置，同時(shí)考慮色彩搭配和布局結(jié)構(gòu)，合理的配置每一個(gè)元素。首先制作的是網(wǎng)站的banner,站標(biāo)是網(wǎng)頁中最顯眼的部分，因此，站標(biāo)既要顯示出自己的網(wǎng)頁主題還要顯示出自己的網(wǎng)頁風(fēng)格，在設(shè)計(jì)我自己的站標(biāo)時(shí)，我先使用了兩個(gè)立體圖像重疊在一起，設(shè)置為黑白色，既突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺，站標(biāo)的另一部分是要介紹網(wǎng)站的主要內(nèi)容，而我設(shè)計(jì)的是我自己的網(wǎng)站，因此，為“劉瑞的主頁”，最后還有一個(gè)不能忽視的問題，就是網(wǎng)站站

8、標(biāo)要顯示網(wǎng)站的域名信息，讓瀏覽者下次來的時(shí)候，有跡可尋，我沒有自己的域名，因此，我設(shè)計(jì)為象征性的代表。其他子頁面的有子站標(biāo)，其大體內(nèi)容和風(fēng)格和主頁面的相同。另外，為了達(dá)到亮眼的效果，我在每個(gè)子頁站標(biāo)上都加入了透明flash,既與主網(wǎng)頁相同，又有新意。在頁面的右下角擦入一個(gè)友情鏈接的菜單欄，一方面為了布局合理，彌補(bǔ)左下角的空缺，另一方面給瀏覽者提供放表的導(dǎo)航，這里也使用從來布局，方便靈活。在我的最新動(dòng)態(tài)部分，為了活波頁面氣氛，可以插入動(dòng)態(tài)的字母效果，用marquee標(biāo)簽設(shè)計(jì)具體內(nèi)容。另外，為了使瀏覽者可以關(guān)注到更多的動(dòng)態(tài)信息，在每一項(xiàng)上面可以做一個(gè)連接，連接到具體信息的頁面。在頁面的下方是一個(gè)l

9、ogo,放置一個(gè)動(dòng)態(tài)flash廣告，也是用層布局，雖然，一般的網(wǎng)頁logo和banner都是出現(xiàn)在網(wǎng)頁的頂部，但是在我的頁面中，考慮到網(wǎng)頁的形狀，如果logo放于上面，則顯得頁面太雜亂，放于下面則可以平衡頁面，而且可以填補(bǔ)下頁面的空缺。在廣告的下面是版權(quán)信息，盡量用簡潔的語言和穩(wěn)重的色彩，給人留下清新，簡練的感覺。其他子頁面的制作和主頁面的大體相同，在introduce頁面中，我使用了層動(dòng)畫效果，使用動(dòng)畫幀控制動(dòng)畫重復(fù)播放。在頁面的下面是一個(gè)滾動(dòng)字幕，用層進(jìn)行定位，添加背景后再加上一個(gè)一行一列的表格進(jìn)行文字定位。再用marquee標(biāo)簽控制文字在固定區(qū)域內(nèi)上下滾動(dòng)。在“我的相冊(cè)”頁面里，我是用了

10、圖片交換效果，插入四張照片，可以按下按鈕自由翻頁，自由瀏覽，下部分是一段美麗文字欣賞，用相同的色彩布局，明快而又有緊促感，而且使整個(gè)頁面色調(diào)平衡。第三個(gè)子頁面是“我的班級(jí)”頁面，也使用相同的背景，相同的布局，但是由于時(shí)間倉促，班級(jí)信息沒有完全收集到，使用彈出信息框說明“網(wǎng)頁信息正在搜集中，請(qǐng)大家繼續(xù)關(guān)注我的網(wǎng)站！”最后一個(gè)頁面是“給我留言”頁面，同樣的用層和表格進(jìn)行布局，使用表單同用戶進(jìn)行信息交流，網(wǎng)頁的左下面是一個(gè)flash動(dòng)態(tài)時(shí)鐘，顯示當(dāng)前時(shí)間，給瀏覽者提供方便。這就是我的網(wǎng)頁設(shè)計(jì)過程。最后還要制作各個(gè)頁面的鏈接，把整個(gè)網(wǎng)頁可憐起來，形成一個(gè)統(tǒng)一的整體，方便瀏覽者進(jìn)行各個(gè)頁面間的跳轉(zhuǎn)。10、上傳測(cè)試網(wǎng)頁制作完畢以后，要進(jìn)行測(cè)試，在瀏覽器上運(yùn)行自己的網(wǎng)站，反復(fù)測(cè)試，以發(fā)現(xiàn)設(shè)計(jì)中的缺陷。實(shí)驗(yàn)結(jié)果及理論分析:非常感謝老師給了我這次，獨(dú)立設(shè)計(jì)，制作網(wǎng)頁的機(jī)會(huì)，通過這次試驗(yàn)，我的收益頗多。首先，獨(dú)立的實(shí)踐了一個(gè)完整的網(wǎng)站設(shè)計(jì)的全過程，把設(shè)計(jì)中零散的注意點(diǎn)和要求在自己大腦中形成了一個(gè)完整的框架體系，使平時(shí)學(xué)到的知識(shí)