網(wǎng)頁制作實驗報告

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

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

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

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

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

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

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

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

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

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