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

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

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

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

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

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

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

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

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

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