實(shí)驗(yàn)系網(wǎng)站的制作一。實(shí)驗(yàn)?zāi)康恼莆誋TML語(yǔ)法基本的基本用法；熟悉HTML編寫(xiě)網(wǎng)頁(yè)的方法；熟悉dreamweaver8界面及操作；熟悉使用dreamweaver8建立站點(diǎn)及制作網(wǎng)頁(yè)；熟悉photoshop的用法；用自己所學(xué)的軟件，以系網(wǎng)站的內(nèi)容為參考，制作出有自己風(fēng)格的系網(wǎng)站掌握創(chuàng)建網(wǎng)頁(yè)的方法；掌握網(wǎng)頁(yè)的編輯，包括圖片的插入、動(dòng)態(tài)效果、背景圖片的的項(xiàng)操作。掌握超鏈接的創(chuàng)建與編輯。二，實(shí)驗(yàn)基本原理Photoshop是一個(gè)著名的圖像處理理軟件之一，集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件，具有強(qiáng)大的圖像修飾功能，利用這些功能可進(jìn)行網(wǎng)頁(yè)背景圖像的制作，修復(fù)。Dreamweaver8是一款專(zhuān)業(yè)的HTML編輯器，用于對(duì)WEB頁(yè)和WEB應(yīng)用程序進(jìn)行設(shè)計(jì)，編碼和開(kāi)發(fā)。無(wú)論直接編寫(xiě)HTML代碼還是在可視圖化編輯環(huán)境中工作，dreamweaver8都會(huì)提供很多快捷的工具。Dreamweaver8是可以完全自定義的，可以使用它創(chuàng)建自己的對(duì)象和命令，修改快捷鍵，也可以編寫(xiě)JAVAScript代碼，從而用自己創(chuàng)建的新行為，屬性檢查器和站點(diǎn)報(bào)告來(lái)擴(kuò)展dreamweaver的功三，實(shí)驗(yàn)準(zhǔn)備在電腦上安裝photoshopcs4及Dreamweaver8；收集一些關(guān)于學(xué)校的圖片，以及一些其他的風(fēng)景圖片。四，實(shí)驗(yàn)內(nèi)容，網(wǎng)站名稱(chēng)：電子工程系，網(wǎng)頁(yè)設(shè)計(jì)的大體結(jié)構(gòu)

主要是對(duì)主頁(yè)進(jìn)行設(shè)計(jì)，其結(jié)構(gòu)圖大體如下：五，設(shè)計(jì)規(guī)劃(一)畫(huà)圖(1)打開(kāi)photoshop設(shè)置主體布局，將本次的布局為“三”字型布局利用photoshop畫(huà)圖，打開(kāi)photoshop,導(dǎo)入一張自己認(rèn)為可做網(wǎng)頁(yè)背景的圖片;用photoshop里面的工具對(duì)背景圖片做適當(dāng)?shù)木庉嬓薷?，調(diào)色；制作文字標(biāo)志將圖片和文字組合，將具有本系特色的logo繪制在頂端；利用圓角矩形工具和顏色漸變工具制作網(wǎng)站主頁(yè)導(dǎo)航條，及其他導(dǎo)航條制作欄目?jī)?nèi)容；在圖片下方制作版權(quán)區(qū)域；二)網(wǎng)頁(yè)模型的切片與導(dǎo)出利用切片工具將將導(dǎo)航條等項(xiàng)目分別切片，反復(fù)利用這個(gè)工具可創(chuàng)建多個(gè)矩形切片。切片創(chuàng)建后，切片的周?chē)@示紅色的導(dǎo)線，它確定導(dǎo)出時(shí)將文檔拆分成的單獨(dú)圖像文件的邊界。當(dāng)切片切好后，執(zhí)行“文件”一“導(dǎo)出”命令，打開(kāi)“導(dǎo)出”對(duì)話框。在“導(dǎo)出”下拉列表中，選擇“HTML和圖像”的格式，在HTML下拉列表中選擇“導(dǎo)出HTML文件”，在切片下拉列表中選擇“到處切片”，最后單擊“導(dǎo)出”按鈕。導(dǎo)出后除了到處切片以外，還會(huì)導(dǎo)出一個(gè)包含表格代碼的HTML文件，以便在瀏覽器重新裝配圖形(三)在Dreamweaver8中編輯導(dǎo)出的網(wǎng)頁(yè)啟動(dòng)Dreamweaver8,打開(kāi)生成的html文件；創(chuàng)建網(wǎng)頁(yè)名稱(chēng)：選擇【查看】一【代碼】編寫(xiě)HTML語(yǔ)言，<title>電子工程系</title>創(chuàng)建網(wǎng)頁(yè)名稱(chēng)。在導(dǎo)航條粗話分別添加鏈接，鏈接到其他網(wǎng)頁(yè)或相關(guān)圖片點(diǎn)擊“拆分”鍵，在非導(dǎo)航條出，分別將html語(yǔ)言代碼中其圖片所示代碼修改為背景圖像，此過(guò)程可通過(guò)對(duì)把<imgsrc>里面的內(nèi)容剪切到<td>中，便在其后添加"background”如下所示：將<tdcolspan="2"><ahref="照片O25.jpg"><imgsrc="images/index_04.gif"alt=""width="102"height="61"border="0"></a></td>.修改為<tdcolspan="2"background="images/index_04.gif"alt=""width="102"height="61"border="0"><ahref="照片025.jpg"></a></td>反復(fù)利用這個(gè)工具可對(duì)多個(gè)需要設(shè)為背景的圖片進(jìn)行修改；當(dāng)所需要的背景圖片全部修改好后，可利用指標(biāo)工具在其上面制作表格，其方法步驟為：在頁(yè)面的左上角處選擇【插入】—【表格】在彈出的對(duì)話框中，【行】【列】分別填1，4，【表格寬度】填300像素；當(dāng)表格制作好后可利用文字編輯工具，在表格里面進(jìn)行所需要的文字編輯，編輯中可對(duì)其文字字體、顏色等進(jìn)行設(shè)置，其方法步驟為設(shè)置文本的大小及顏色：選中要編輯的文本，選擇【文本】—【顏色】/【大小】設(shè)置文本的顏色和大小；文字編輯好后可對(duì)文字進(jìn)行超級(jí)鏈接設(shè)置頁(yè)面背景顏色：選擇【窗口】—【屬性】—【頁(yè)面屬性】在彈出的對(duì)話框中【背景顏色】處選擇想要設(shè)置的顏色。當(dāng)修改好后可點(diǎn)擊編輯頁(yè)面上方的“在瀏覽器中運(yùn)行和調(diào)試按鈕”對(duì)其進(jìn)行調(diào)試和觀察六：具體實(shí)驗(yàn)步驟＜一〉、photoshop的使用1打開(kāi)photoshop軟件，低級(jí)菜單欄上的文件----＞新建，在彈出的對(duì)話框中可以填寫(xiě)相關(guān)信息。例入標(biāo)題、像素，分辨率以及背景顏色等等。2：在剛才新建的模板上我們現(xiàn)在要增加一些因素。首先增加一副圖片。增加圖片的方法可以在面板的空白處雙擊鼠標(biāo)左鍵，然后找到圖片添加即可。3：添加好圖片后需要多圖片進(jìn)行剪切。因?yàn)槲覀冎恍枰獔D片的一部分。選擇PS的工具欄上的圖標(biāo)踐，將不需要的圈出來(lái)刪除即可。剩余的部分就是我們要的，這是我們可以將圖片進(jìn)行相關(guān)處理。例如羽化、變性以及添加其他圖片等操作。4：在剛才切好的圖片上寫(xiě)上我們的主題“電子工程系”點(diǎn)擊工具欄上的丁」圖標(biāo)。此時(shí)還在菜單欄上有一些選擇。例如：字體、大小、形狀對(duì)齊方式和字體顏色。選擇好后在想要添加文字的地方點(diǎn)擊一下鼠標(biāo)左鍵就可以寫(xiě)字了。同樣也可以在寫(xiě)好后在“圖層”屬性框雙擊圖標(biāo)進(jìn)行修改。5：接下來(lái)增加一條導(dǎo)航條，點(diǎn)擊工具欄：圖標(biāo)，選擇矩形，然后在剛才切好的圖片下方畫(huà)一個(gè)矩形框。之后將底色設(shè)置為青綠色、6：在導(dǎo)航條上加入一些文字，如學(xué)校主頁(yè)、系部首頁(yè)、專(zhuān)業(yè)介紹、師資建設(shè)、實(shí)驗(yàn)室建設(shè)、實(shí)驗(yàn)成果、文表下載等。添加文字的方法同上所述。7：在下面我們規(guī)劃的是畫(huà)3個(gè)框，分別用來(lái)放“通知公告”“本周動(dòng)態(tài)”“就業(yè)信息”。步驟和上面第五條類(lèi)似。點(diǎn)擊田圖標(biāo)，選擇好屬性后直接畫(huà)就可以了。畫(huà)好后在圖層里直接復(fù)制2個(gè)圖層，拖動(dòng)到相應(yīng)位置即可。這樣就不用畫(huà)3次了。8：接下來(lái)在下面我們畫(huà)一個(gè)矩形框。留著用作滾動(dòng)圖片制作。9：最下面這里放置一些版權(quán)信息。如郵編、電話和歸屬權(quán)。添加文字就可以了。10：完成了網(wǎng)頁(yè)的基本排版后就可以切片了。點(diǎn)擊工具欄上的切片工具囚。將我們的網(wǎng)頁(yè)切成小塊小塊。因?yàn)槲覀円谇泻玫膱D片上添加超鏈接。錢(qián)不切好后保存為web所用的格式。點(diǎn)擊文件T存儲(chǔ)為web所用格式T完成。11：photoshop的基本排版就完成了。下來(lái)要用到dreamwear來(lái)修改網(wǎng)頁(yè)了。<=>dreamwear的使用1：點(diǎn)擊桌面上的…圖標(biāo)，啟動(dòng)dreamwear程序。在打開(kāi)的界面打開(kāi)用ps編輯好并保存好的網(wǎng)頁(yè)，之后就出現(xiàn)了網(wǎng)頁(yè)。2：在菜單欄的下方有三個(gè)按鈕，分別是“代碼”“拆分”“設(shè)計(jì)”，選擇不同的方式就可以用不同的界面編輯網(wǎng)頁(yè)。在這里我們選擇拆分。之后就會(huì)出現(xiàn)兩個(gè)界面，一個(gè)是代碼的界面，另一個(gè)是網(wǎng)頁(yè)的實(shí)際效果界面。我們可以用代碼操作，也可以在網(wǎng)頁(yè)上直接操作。接下來(lái)先看代碼部分。在<title>****</title>之間可以寫(xiě)標(biāo)題。然后找到<body></body>，在<body>前面加上<center>,在</匕04丫>的后面加上</center>。目的是將網(wǎng)頁(yè)居中設(shè)置。3：接下來(lái)要?jiǎng)?chuàng)建超鏈接。點(diǎn)擊要建立超鏈接的圖片或文字，會(huì)在底部的屬性框顯示一些屬性設(shè)置，例如圖片大小，鏈接地址等。在鏈接框填入要鏈接到的地址就可以完成了鏈接。其他的依次照此即可。4：“通知公告”“本周動(dòng)態(tài)”“就業(yè)信息”框的修改。在ps保存的時(shí)候我們將這三個(gè)框都設(shè)置為了圖片。而在dreamwear中我們無(wú)法在圖片上寫(xiě)文字，需要將圖片改為背景。具體操作如下：?jiǎn)螕魣D片，就會(huì)在代碼框中顯示該圖片的位置及代碼，將代碼如下滾動(dòng)<tdcolspan="2"><ahref="照片025.jpg"><imgsrc="images/index_04.gif"alt=""width="102"height="61"border="0"></a></td>.修改為<tdcolspan="2"background="images/index_04.gif"alt=""width="102"height="61"border="0"><ahref="照片O25.jpg"></a></td>經(jīng)過(guò)上面的改動(dòng)后原來(lái)的圖片就會(huì)變位文本框了。這樣就可以在里面寫(xiě)我們要寫(xiě)的內(nèi)容了。另外的兩個(gè)框的修改和上面的操作一樣。5：滾動(dòng)圖片的制作。先將要放滾動(dòng)圖片的位置的圖片刪除了。記住此時(shí)留下的空白區(qū)域的大小。將下列代碼添加到原圖片的位置：<divid="demo"style="overflow:hidden;width:1O24px;height:169;color:#ffffff;"><tablecellpadding="O"cellspacing="O"border="O"><tr><tdid="demo1"valign="top"align="center"><tablecellpadding="2"cellspacing="O"border="O"><tralign="center"><td><imgsrc="滾動(dòng)/indem_19.gif"width="180"height="169"></td><td><imgsrc="滾動(dòng)/indem_21.gif"width="180"height="169"></td><td><imgsrc="滾動(dòng)/indem_22.gif"width="180"height="169"></td><td><imgsrc="滾動(dòng)/indem_47.gif"width="180"height="169"></td></tr></table></td><tdid="demo2"valign="top"></td></tr></table></div>添加代碼后會(huì)在網(wǎng)頁(yè)上有幾個(gè)小框框，雙擊既可以添加圖片。也可以單擊小框框，單擊后就會(huì)在代碼區(qū)域顯示相關(guān)信息，將要顯示的圖片的了解粘貼在“imgsrc