網(wǎng)頁制作實(shí)驗(yàn)報(bào)告

1、.實(shí)驗(yàn) 系網(wǎng)站的制作一。實(shí)驗(yàn)?zāi)康?） 掌握HTML語法基本的基本用法；2） 熟悉HTML編寫網(wǎng)頁的方法；3） 熟悉dreamweaver8界面及操作；4） 熟悉使用dreamweaver8建立站點(diǎn)及制作網(wǎng)頁；5） 熟悉photoshop的用法；6） 用自己所學(xué)的軟件，以系網(wǎng)站的內(nèi)容為參考，制作出有自己風(fēng)格的系網(wǎng)站7） 掌握創(chuàng)建網(wǎng)頁的方法；8） 掌握網(wǎng)頁的編輯，包括圖片的插入、動(dòng)態(tài)效果、背景圖片的的項(xiàng)操作。9） 掌握超鏈接的創(chuàng)建與編輯。二，實(shí)驗(yàn)基本原理（1） Photoshop是一個(gè)著名的圖像處理理軟件之一，集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件，具有強(qiáng)

2、大的圖像修飾功能,利用這些功能可進(jìn)行網(wǎng)頁背景圖像的制作，修復(fù)。（2） Dreamweaver8 是一款專業(yè)的HTML編輯器，用于對WEB 頁和WEB應(yīng)用程序進(jìn)行設(shè)計(jì)，編碼和開發(fā)。無論直接編寫HTML代碼還是在可視圖化編輯環(huán)境中工作，dreamweaver8 都會(huì)提供很多快捷的工具。Dreamweaver8 是可以完全自定義的，可以使用它創(chuàng)建自己的對象和命令，修改快捷鍵，也可以編寫JAVAScript 代碼，從而用自己創(chuàng)建的新行為，屬性檢查器和站點(diǎn)報(bào)告來擴(kuò)展 dreamweaver 的功能。三，實(shí)驗(yàn)準(zhǔn)備(1) 在電腦上安裝photoshop cs4及Dreamweaver8；(2) 收集一些關(guān)于

3、學(xué)校的圖片，以及一些其他的風(fēng)景圖片。四，實(shí)驗(yàn)內(nèi)容（一），網(wǎng)站名稱：電子工程系（二），網(wǎng)頁設(shè)計(jì)的大體結(jié)構(gòu)主要是對主頁進(jìn)行設(shè)計(jì)，其結(jié)構(gòu)圖大體如下：電子工程系 最新狀態(tài)通知公告友情鏈接學(xué)生風(fēng)采文表下載學(xué)生工作招生就業(yè)成果展示實(shí)驗(yàn)室建設(shè)師資建設(shè)專業(yè)設(shè)置學(xué)校首頁系部首頁 五，設(shè)計(jì)規(guī)劃 （一） 畫圖 (1) 打開photoshop設(shè)置主體布局，將本次的布局為“三”字型布局(2) 利用photoshop畫圖，打開photoshop，導(dǎo)入一張自己認(rèn)為可做網(wǎng)頁背景的圖片；(3) 用photoshop里面的工具對背景圖片做適當(dāng)?shù)木庉嬓薷模{(diào)色；(4) 制作文字標(biāo)志將圖片和文字組合，將具有本系特色的logo繪制在頂

4、端；(5) 利用圓角矩形工具和顏色漸變工具制作網(wǎng)站主頁導(dǎo)航條，及其他導(dǎo)航條(6) 制作欄目內(nèi)容；(7) 在圖片下方制作版權(quán)區(qū)域；（二） 網(wǎng)頁模型的切片與導(dǎo)出利用切片工具將將導(dǎo)航條等項(xiàng)目分別切片，反復(fù)利用這個(gè)工具可創(chuàng)建多個(gè)矩形切片。切片創(chuàng)建后，切片的周圍顯示紅色的導(dǎo)線，它確定導(dǎo)出時(shí)將文檔拆分成的單獨(dú)圖像文件的邊界。當(dāng)切片切好后，執(zhí)行“文件”“導(dǎo)出”命令，打開“導(dǎo)出”對話框。在“導(dǎo)出”下拉列表中，選擇“HTML和圖像”的格式，在HTML下拉列表中選擇“導(dǎo)出HTML文件”，在切片下拉列表中選擇“到處切片”，最后單擊“導(dǎo)出”按鈕。導(dǎo)出后除了到處切片以外，還會(huì)導(dǎo)出一個(gè)包含表格代碼的HTML文件，以便在瀏

5、覽器重新裝配圖形（三） 在Dreamweaver8中編輯導(dǎo)出的網(wǎng)頁（1） 啟動(dòng)Dreamweaver8，打開生成的html文件；（2） 創(chuàng)建網(wǎng)頁名稱：選擇【查看】【代碼】編寫HTML語言，電子工程系創(chuàng)建網(wǎng)頁名稱。（3） 在導(dǎo)航條粗話分別添加鏈接，鏈接到其他網(wǎng)頁或相關(guān)圖片（4） 點(diǎn)擊“拆分”鍵，在非導(dǎo)航條出，分別將html語言代碼中其圖片所示代碼修改為背景圖像，此過程可通過對把里面的內(nèi)容剪切到中，便在其后添加”background”如下所示：將 .修改為 反復(fù)利用這個(gè)工具可對多個(gè)需要設(shè)為背景的圖片進(jìn)行修改；（5） 當(dāng)所需要的背景圖片全部修改好后，可利用指標(biāo)工具在其上面制作表格，其方法步驟為：在頁

6、面的左上角處選擇【插入】【表格】在彈出的對話框中，【行】【列】分別填1，4，【表格寬度】填300像素；（6） 當(dāng)表格制作好后可利用文字編輯工具，在表格里面進(jìn)行所需要的文字編輯，編輯中可對其文字字體、顏色等進(jìn)行設(shè)置，其方法步驟為設(shè)置文本的大小及顏色：選中要編輯的文本，選擇【文本】【顏色】/【大小】設(shè)置文本的顏色和大小；（7） 文字編輯好后可對文字進(jìn)行超級鏈接（8） 設(shè)置頁面背景顏色：選擇【窗口】【屬性】【頁面屬性】在彈出的對話框中【背景顏色】處選擇想要設(shè)置的顏色。（9） 當(dāng)修改好后可點(diǎn)擊編輯頁面上方的“在瀏覽器中運(yùn)行和調(diào)試按鈕”對其進(jìn)行調(diào)試和觀察六 ：具體實(shí)驗(yàn)步驟 、photoshop的使用 1

7、：打開photoshop軟件，低級菜單欄上的文件-新建 ，在彈出的對話框中可以填寫相關(guān)信息。例入標(biāo)題、像素，分辨率以及背景顏色等等。2 ：在剛才新建的模板上我們現(xiàn)在要增加一些因素。首先增加一副圖片。增加圖片的方法可以在面板的空白處雙擊鼠標(biāo)左鍵，然后找到圖片添加即可。3:添加好圖片后需要多圖片進(jìn)行剪切。因?yàn)槲覀冎恍枰獔D片的一部分。選擇PS的工具欄上的圖標(biāo)，將不需要的圈出來刪除即可。剩余的部分就是我們要的，這是我們可以將圖片進(jìn)行相關(guān)處理。例如羽化、變性以及添加其他圖片等操作。4：在剛才切好的圖片上寫上我們的主題“電子工程系”。點(diǎn)擊工具欄上的圖標(biāo)。此時(shí)還在菜單欄上有一些選擇。例如：字體、大小、形狀對

8、齊方式和字體顏色。選擇好后在想要添加文字的地方點(diǎn)擊一下鼠標(biāo)左鍵就可以寫字了。同樣也可以在寫好后在“圖層”屬性框雙擊圖標(biāo)進(jìn)行修改。5：接下來增加一條導(dǎo)航條，點(diǎn)擊工具欄圖標(biāo)，選擇矩形，然后在剛才切好的圖片下方畫一個(gè)矩形框。之后將底色設(shè)置為青綠色、6：在導(dǎo)航條上加入一些文字，如學(xué)校主頁、系部首頁、專業(yè)介紹、師資建設(shè)、實(shí)驗(yàn)室建設(shè)、實(shí)驗(yàn)成果、文表下載等。添加文字的方法同上所述。7：在下面我們規(guī)劃的是畫3個(gè)框，分別用來放“通知公告”“本周動(dòng)態(tài)”“就業(yè)信息”。步驟和上面第五條類似。點(diǎn)擊圖標(biāo)，選擇好屬性后直接畫就可以了。畫好后在圖層里直接復(fù)制2個(gè)圖層，拖動(dòng)到相應(yīng)位置即可。這樣就不用畫3次了。8：接下來在下面我

9、們畫一個(gè)矩形框。留著用作滾動(dòng)圖片制作。9：最下面這里放置一些版權(quán)信息。如郵編、電話和歸屬權(quán)。添加文字就可以了。10：完成了網(wǎng)頁的基本排版后就可以切片了。點(diǎn)擊工具欄上的切片工具。將我們的網(wǎng)頁切成小塊小塊。因?yàn)槲覀円谇泻玫膱D片上添加超鏈接。錢不切好后保存為web所用的格式。點(diǎn)擊文件存儲(chǔ)為web所用格式完成。11：photoshop的基本排版就完成了。下來要用到dreamwear來修改網(wǎng)頁了。dreamwear的使用1：點(diǎn)擊桌面上的圖標(biāo)，啟動(dòng)dreamwear程序。在打開的界面打開用ps編輯好并保存好的網(wǎng)頁，之后就出現(xiàn)了網(wǎng)頁。 2：在菜單欄的下方有三個(gè)按鈕，分別是“代碼”“拆分”“設(shè)計(jì)”，選擇不同

10、的方式就可以用不同的界面編輯網(wǎng)頁。在這里我們選擇拆分。之后就會(huì)出現(xiàn)兩個(gè)界面，一個(gè)是代碼的界面，另一個(gè)是網(wǎng)頁的實(shí)際效果界面。我們可以用代碼操作，也可以在網(wǎng)頁上直接操作。接下來先看代碼部分。在*之間可以寫標(biāo)題。然后找到,在前面加上，在的后面加上。目的是將網(wǎng)頁居中設(shè)置。3：接下來要?jiǎng)?chuàng)建超鏈接。點(diǎn)擊要建立超鏈接的圖片或文字，會(huì)在底部的屬性框顯示一些屬性設(shè)置，例如圖片大小，鏈接地址等。在鏈接框填入要鏈接到的地址就可以完成了鏈接。其他的依次照此即可。4：“通知公告”“本周動(dòng)態(tài)”“就業(yè)信息”框的修改。在ps保存的時(shí)候我們將這三個(gè)框都設(shè)置為了圖片。而在dreamwear中我們無法在圖片上寫文字，需要將圖片改為背景。具體操作如下：單擊圖片，就會(huì)在代碼框中顯示該圖片的位置及代碼，將代碼如下滾動(dòng) .修改為 經(jīng)過上面的改動(dòng)后原來的圖片就會(huì)變位文本框了。這樣就可以在里面寫我們要寫的內(nèi)容了。另外的兩個(gè)框的修改和上面的操作一樣。5：滾動(dòng)圖片的制作。先將要放滾動(dòng)圖片的位置的圖片刪除了。記住此時(shí)留下的空白區(qū)域的大小。將下列代碼添加到原圖片的位置： 添加代碼后會(huì)在網(wǎng)頁上有幾個(gè)小框框，雙擊既可以添加圖片。也可以單擊小框框，單擊后就會(huì)在代碼區(qū)域顯示相關(guān)信息，將要顯示的圖片的了解粘貼在“img src=”后面就可以了，還可以在圖片的后面加上長和寬的信息。6：當(dāng)全部都弄好了之后就可以發(fā)布了。在