人事處網(wǎng)站的完善論文

PAGE摘要計算機網(wǎng)絡(luò)特別是Internet在過去十幾年經(jīng)歷了爆炸式的增長，網(wǎng)絡(luò)是現(xiàn)代計算機業(yè)最為活躍的領(lǐng)域，也是發(fā)展最為迅速的領(lǐng)域，而網(wǎng)頁和網(wǎng)站是網(wǎng)絡(luò)特別是Internet的重要組成部分?，F(xiàn)在，越來越多的企業(yè)、公司、學(xué)校和機構(gòu)通過網(wǎng)站來宣傳自己、介紹自己的產(chǎn)品和技術(shù)。學(xué)校人事處網(wǎng)站作為學(xué)校人事處擁有的對外媒體，網(wǎng)站形象是人事處形象的網(wǎng)絡(luò)化體現(xiàn)。而網(wǎng)站形象的好壞則取決于網(wǎng)站建設(shè)的質(zhì)量——主頁設(shè)計制作是否美觀、是否符合人事處形象、展示的服務(wù)是否得當(dāng)、是否經(jīng)常更新信息，等等。因此，要想學(xué)校的人事處網(wǎng)站引人注目，給人耳目一新的感覺，就必須做好以上提到的諸點。要制作出吸引人的Web網(wǎng)站，除了要把各方面的因素考慮進去，制作軟件也是很重要的。本人選用的是被稱為“網(wǎng)頁設(shè)計最佳拍檔”的Photoshop7.0、DreamweaverMX和FlashMX三個軟件。本次畢業(yè)設(shè)計在原來的學(xué)校人事處網(wǎng)站的基礎(chǔ)上，在保留了一些好的方面的前提下進行了重新設(shè)計和完善。努力做到美觀、符合人事處形象、展示得當(dāng)?shù)姆?wù)、經(jīng)常更新信息等要求。希望可以吸引他人的眼睛。關(guān)鍵字：網(wǎng)站、設(shè)計、Web、Photoshop、Dreamweaver、FlashAbstractCalculatornetworkespeciallytheInternetincreasedspeedyinpastmorethantenyears.Thenetworkisthemostactiverealminindustryinmoderncalculator,anditisalsothemostquickrealmofdevelopment.Andthat,WebpageandwebsiteareimportancepartsofnetworkespeciallytheInternet.Now,Moreandmorebusinessenterprises,companies,schoolsandorganizationspassthewebsitetodisseminatethemselves,introductiontheirproductandtechnique.Theschoolpersonneldepartmentwebsiteispersonneldepartmentownoutwardmedium.Thewebsiteimageisthenetworkofthepersonneldepartmentimage'sem-bodiment.Moreover,Thequalityofthewebsiteimagethenisdecidedbythequantityofwebsitedevelopments,suchasMainpagedesignmanufacturewhetherbeauty,whethertomatchtheserviceofthepersonneldepartmentimage,demonstrationornotwhetherproperly,whetherusuallyrenewtheinformation,andsoon.so,wanttomakethepersonneldepartmentwebsiteoftheschoolisarrestive,andgivethepersonthefellingofapleasantchangeofatmosphere,wemustdowellintheseparts.TocreateanattractivethewebsiteofWeb,apartfromtowanttoconsiderintothefactorofeveryone's,manufacturethesoftwaretoalsoisveryimportant.IchoosePhotoshop7.0,DreamweaverMXandFlashMXthreesoftwares,whosebecalled"thewebpagedesignclapsthefilebest".Thisgraduatedesignsatoriginalschoolthefoundationofthepersonneldepartmentwebsitetop,intheaspectsofreservingsomelikingofofthepremisescendedtoproceedtodesignafreshwithperfect.Iworkhardtoattainbeautiful,matchthepersonneldepartmentimageanddisplayproperlyofservice,usuallyrenewinformation,etc.Ihopeitcandrawontheeyeoftheothers.Keywords：website,design,Photoshop,Dreamweaver,Flash -PAGEi-目次第一章前言 1第二章軟硬件環(huán)境 22.1硬件配置 22.2軟件配置 2第三章所選軟件的介紹和比較 33.1DreamweaverMX的介紹 33.1.1DreamweaveMX軟件界面介紹 33.1.2DreamweaverMX的功能 73.1.3Dreamweaver與ASP 83.1.4Dreamweaver與Photoshop 93.1.5Dreamweaver與Flash 103.1.6Dreamweaver和FrontPage比較 123.2FlashMX的介紹 133.2.1FlashMX軟件界面介紹 133.2.2FlashMX的新功能 143.3Photoshop7.0的介紹 143.3.1Photoshop7.0軟件界面介紹 143.3.2Photoshop7.0的新功能 15第四章網(wǎng)站的分析和設(shè)計 164.1原人事處網(wǎng)站的分析 164.2網(wǎng)站設(shè)計構(gòu)想 17第五章人事處網(wǎng)站的實現(xiàn) 205.1建立站點 205.2訂立網(wǎng)站結(jié)構(gòu) 215.3網(wǎng)頁制作 215.3.1設(shè)置文檔的頁面屬性 235.3.2頁面的分割 235.3.3插入圖片 245.3.4文本輸入 255.3.5圖片和文字的超鏈接 265.3.6插入文本域 275.3.7插入按鈕 285.3.8插入FLASH 285.3.9插入列表 295.4為網(wǎng)站設(shè)立主頁 30第六章網(wǎng)站的測試和完善 34小結(jié) 37參考文獻 38附錄 391.style.css--關(guān)于去除下劃線的代碼 392.rainbow.js—關(guān)于七色彩虹變換的代碼 41 -PAGE23-第一章前言隨著計算機網(wǎng)絡(luò)技術(shù)的高速發(fā)展，越來越多的人沉浸于網(wǎng)絡(luò)所帶來的另一個嶄新的世界里。越來越多的人已不滿足僅僅是一個觀賞者或使用者，而是試圖參與其中，編織自己心中理想的網(wǎng)絡(luò)世界。因此，掌握網(wǎng)頁制作和構(gòu)建網(wǎng)站的技術(shù)是當(dāng)今青年不可缺少的素質(zhì)。網(wǎng)頁可分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁：靜態(tài)網(wǎng)頁通過鏈接靜止地訪問網(wǎng)頁的內(nèi)容，網(wǎng)頁的內(nèi)容是固定的，不隨訪問要求的改變而改變。文件多以htm或html為后綴。動態(tài)網(wǎng)頁是根據(jù)訪問者的不同訪問請求出現(xiàn)變動的訪問結(jié)果，其實現(xiàn)原理是將用戶的訪問請求發(fā)送到網(wǎng)站數(shù)據(jù)庫，網(wǎng)站數(shù)據(jù)庫根據(jù)訪問請求反饋出結(jié)果并傳送到網(wǎng)頁中。這里需要注意：切莫將動態(tài)網(wǎng)頁和網(wǎng)頁的動感（以動畫或其他效果表現(xiàn)）相混淆。在本次設(shè)計中本人主要負(fù)責(zé)第一個方面，主要負(fù)責(zé)靜態(tài)網(wǎng)站的構(gòu)建、靜態(tài)網(wǎng)頁的制作和完善。另外一個同學(xué)負(fù)責(zé)第二個方面，主要負(fù)責(zé)有關(guān)ASP和數(shù)據(jù)庫方面的內(nèi)容。本次畢業(yè)設(shè)計在原來的學(xué)校人事處網(wǎng)站的基礎(chǔ)上進行了重新設(shè)計和完善。努力做到美觀、符合人事處形象、展示得當(dāng)?shù)姆?wù)、經(jīng)常更新信息等。希望可以令你多看一眼。第二章軟硬件環(huán)境2.1硬件配置本人的計算機硬件配置為：CPU：賽揚1.7G硬盤：40G內(nèi)存：128M顯卡：NVIDIAGeforce2MX/MX400顯示器：大水牛17寸純平顯示器鍵盤：大水牛仿筆記本鍵盤鼠標(biāo)：大水牛光電鼠標(biāo)光驅(qū)：SONYCD-ROMCDU5221軟驅(qū)：SONY2.2軟件配置本人所用的軟件配置為：操作系統(tǒng)：WindowsXP主要制作工具：DreamweaverMX輔助制作工具：Photoshop7.0、FlashMX第三章所選軟件的介紹和比較3.1DreamweaverMX的介紹工欲善其事，必先利其器。Dreamweaver是在多媒體方面頗有建樹的Macromedia公司推出的可視化網(wǎng)頁制作工具，它與Flash、Fireworks合在一起被稱為網(wǎng)頁制作三劍客，這三個軟件相輔相承，是制作網(wǎng)頁的最佳選擇。其中，Dreamweaver主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高（圖3-1）。圖3-1DreamweaverMX啟動畫面Dreamweave字面意思為“夢幻編織”，這一軟件有著不斷變化的豐富內(nèi)涵和經(jīng)久不衰的設(shè)計思維，它能充分展現(xiàn)你的創(chuàng)意，實現(xiàn)你的想法，鍛煉你的能力，使你成為真正的網(wǎng)頁設(shè)計大師。3.1.1DreamweaveMX軟件界面介紹在安裝DreamweaverMX之后，它會自動在Windows的“開始”菜單中創(chuàng)建程序組，打開“開始”菜單，選擇“程序->Macromedia->MacromediaDreamweaverMX”命令，便可啟動DreamweaverMX（圖3-2）。軟件啟動后，會新建一個空白的HTML文檔等候編輯。圖3-2啟動DreamweaverMX圖3-2啟動DreamweaverMX以下是Dreamweaver的工作區(qū)中提供的窗口和其他元素的簡要說明。選擇DreamweaverMX工作區(qū)后，將看到下面的畫面（圖3-3）：圖3-圖3-3DreamweaveMX軟件界面圖3-4參數(shù)選擇的快捷鍵1、①為菜單區(qū)，和其它的軟件一樣，該軟件所有的操作命令都可以從這一個區(qū)內(nèi)找到,舉個例子，選中該區(qū)“編輯(E)”中的“參數(shù)選擇(S)...CTRL+U”圖3-4參數(shù)選擇的快捷鍵在這里，可以把自己的DREAMWEAVERMX設(shè)置為自己喜歡的樣式，一般使用默認(rèn)就可以了，如圖3-5所示：圖3-5圖3-5參數(shù)設(shè)置為了使用的方便，選中字體這一項目，把參數(shù)設(shè)置為上圖所示的樣子，因為默認(rèn)的時候?qū)嵲谔y看了（當(dāng)然也可以選自己喜歡的）。如果你瀏覽網(wǎng)頁時使用的不是IE的話，請選中“在瀏覽器中預(yù)覽”這一項（以后制作網(wǎng)頁的時候要用到），點一下那個“＋”添加你使用的瀏覽器程序。2、②是插入項目選擇工具(插入面板)，在②選中了某個項目，③中會出現(xiàn)相應(yīng)的插入項目，下面詳細(xì)介紹，選中“常用”這一項后圖3-6所示：圖3-6圖3-6常用卡“錨點”用于網(wǎng)頁中的定位，如網(wǎng)頁的上、中、下等；“圖像點位符”是用于動態(tài)交換圖片的，后面再說；“FireworksHTML”為用Fireworks軟件切割出來的圖片；“交換圖像”為鼠標(biāo)移上去時變?yōu)榱硪粓D片，增強動感；“表格數(shù)據(jù)”可以將其它文件的數(shù)據(jù)轉(zhuǎn)化為表格，插進網(wǎng)頁；“標(biāo)簽選擇器”可以插入其它不常用的HTML標(biāo)簽。在②中選中“布局”一項，共有“標(biāo)準(zhǔn)視圖”和“布局視圖”兩種視圖，如圖3-7所示：圖3-7圖3-7標(biāo)準(zhǔn)視圖在“標(biāo)準(zhǔn)視圖”下，可以插入表格和在網(wǎng)頁制作區(qū)畫圖層。切換到“布局視圖”下，如圖3-8所示：圖3-8圖3-8布局視圖在“布局視圖”下，可以在網(wǎng)頁制作區(qū)描繪布局視圖下的表格和單元格，描繪好之后，再切換到“標(biāo)準(zhǔn)視圖”后，可以轉(zhuǎn)化為表格，這個比較好用，可以用來排版網(wǎng)頁。在②中選中“文本”一項，可以對文本進行格式化，如圖3-9所示：圖3-9圖3-9文本選項卡“A”可以對字體進行全面的格式；“B”可以將字體變?yōu)榇煮w；“I”為斜體；“S”為加強字體；這些比較簡單，可以自己一項一項慢慢試試，看看字體有什么變化。在②中選擇“表單”（“表格”和“框架”兩項后面再說），可以插入各種按鈕，如圖3-10所示：圖3-10圖3-10表單選項卡A為表單；B為文本框；C為隱藏域；D為文本區(qū)域；E為多選框；F為單選框；G為單選按鈕組；H為列表/菜單；I為跳菜單；J為圖像域；K為文本字段；L為按鈕；M為標(biāo)簽；N為字段集。在②中選中“模版”可以使用模版制作網(wǎng)頁或自己創(chuàng)建模版，做起網(wǎng)頁更加方便快捷。在②中選中“字符”可以插入一些特殊的字符，其中BR為換行符（快捷鍵為CTRL+ENTER，此項與ENTER有所不同）。在②中選中“媒體”，可以插入FLASHFLASH按扭FLASH文本Applet等插件。在②中選中“文本頭”，將出現(xiàn)下面的畫面（圖3-11）：圖3-11圖3-11文本頭選項卡“關(guān)鍵字”為網(wǎng)頁的關(guān)鍵詞，可以讓搜索引擎搜索到；“說明”為網(wǎng)頁的說明，如作者、介紹等；“刷新”可以設(shè)定多長時間后刷新網(wǎng)頁或跳轉(zhuǎn)到其它網(wǎng)頁；“基礎(chǔ)”為網(wǎng)頁的基本鏈接，如插入一個目標(biāo)為_blank基礎(chǔ)，網(wǎng)頁中的一切默認(rèn)鏈接都將打開新窗口；其它比較少用不再詳細(xì)講述。在②中選中“腳本”，可以插入各種Javascript、Vbscript或其它腳本。在②中選中“ASP”（編輯ASP網(wǎng)頁時用到），可以插入各種ASP編程里用到的標(biāo)簽。在②中選中“應(yīng)用程序”（編輯動態(tài)網(wǎng)頁時候用到，新手可不必理會），可以對數(shù)據(jù)庫進行操作。3、對④區(qū)的詳解如圖3-12所示：圖3-12圖3-12文擋工具欄在上圖中，點擊帶有向下小箭頭的工具，會彈出更多選擇。4、⑤區(qū)為網(wǎng)頁設(shè)計區(qū)，所設(shè)計的網(wǎng)頁或代碼將出現(xiàn)在該區(qū)。5、⑥區(qū)為屬性區(qū)(屬性面板)，在該區(qū)可以對選中的對象進行一些設(shè)置。6、⑦區(qū)為卷廉面板區(qū)，在其中鑲嵌著許多常用面板。3.1.2DreamweaverMX的功能MacromediaDreamweaverMX是一款專業(yè)的HTML編輯器，用于對Web站點、Web頁和Web應(yīng)用程序進行設(shè)計、編碼和開發(fā)。無論是愿意享受手工編寫HTML代碼時的駕馭感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver都會提供有用的工具，使您擁有更加完美的Web創(chuàng)作體驗。利用Dreamweaver中的可視化編輯功能，可以快速地創(chuàng)建頁面而無需編寫任何代碼。可以查看所有站點元素或資源并將它們從易于使用的面板直接拖到文檔中?？梢栽贛acromediaFireworks中創(chuàng)建和編輯圖像，然后將它們直接導(dǎo)入Dreamweaver，或者直接在Dreamweaver中添加MacromediaFlash對象，從而優(yōu)化開發(fā)工作的流程。Dreamweaver還包括多種與編碼相關(guān)的工具和功能，其中包括代碼視圖中的代碼編輯工具（如代碼加色和標(biāo)簽完成）；有關(guān)HTML、CSS、JavaScript、CFML、ASP和JSP的參考資料以及一個JavaScript調(diào)試器。Macromedia的可自由導(dǎo)入導(dǎo)出HTML技術(shù)可導(dǎo)入手工編碼的HTML文檔而不會重新設(shè)置代碼的格式，可以隨后用首選的格式設(shè)置樣式來重新設(shè)置代碼的格式。Dreamweaver現(xiàn)在包含并擴展了MacromediaUltraDev中的所有功能，以幫助使用ASP、ASP.NET、ColdFusion標(biāo)記語言(CFML)、JSP和PHP等服務(wù)器語言來生成由動態(tài)數(shù)據(jù)庫支持的Web應(yīng)用程序。Dreamweaver可以完全自定義?？梢詣?chuàng)建自己的對象和命令，修改鍵盤快捷方式，甚至編寫JavaScript代碼，用新的行為、屬性檢查器和站點報告來擴展Dreamweaver的功能。3.1.3Dreamweaver與ASP上網(wǎng)、泡網(wǎng)、網(wǎng)上沖浪是現(xiàn)時校園中流行的時尚。制作網(wǎng)頁呢，便是近年來風(fēng)行的一種高檔次的時尚。不管是建立個人網(wǎng)頁、校園網(wǎng)還是社會公共網(wǎng)都離不開網(wǎng)頁的制作。當(dāng)前頂尖級的網(wǎng)頁設(shè)計和完善中總少不了網(wǎng)頁的動態(tài)設(shè)計、數(shù)據(jù)流技術(shù)等，而這些工作大都由ＡＳＰ來完成。由于關(guān)于ASP方面的內(nèi)容是另外一個同學(xué)負(fù)責(zé)的。本人在頁面設(shè)計時留了相關(guān)的空間給他。這里也稍微提一下。ASP為什么如此受人青睞呢？ASP用于動態(tài)頁面開發(fā)的最大優(yōu)點在于，它拋開了CGI、ISAPI等復(fù)雜的技術(shù),讓你不需編寫復(fù)雜的程序,就可以進行動態(tài)主頁的開發(fā)工作。只要你學(xué)習(xí)使用VBScript或者JScript等簡單的腳本(Script)語言，結(jié)合HTML語言，再插入ASP對象和內(nèi)置或自行制作的動態(tài)服務(wù)器組件(ActiveXServerComponent)，即可讓你產(chǎn)生和執(zhí)行動態(tài)、交互式、高效率的站點服務(wù)器的應(yīng)用程序。具有學(xué)習(xí)快、設(shè)計快、修改和維護容易等特征?？蓮囊韵碌奶攸c看出其獨特的魅力來：1與瀏覽器無關(guān)，用端只要使用可執(zhí)行HTML代碼的瀏覽器，即可瀏覽ASP所設(shè)計的網(wǎng)頁內(nèi)容。ASP所使用的腳本語言均在ＷＥＢ服務(wù)器端執(zhí)行，用戶瀏覽器不需要能夠執(zhí)行這些腳步本語言。2使用VBScript、Javaseript等簡單易懂的腳本語言結(jié)合HTML代碼，即可快速地完成網(wǎng)站的應(yīng)用程序。3使用普通的文本編輯器。如WINDOWS的記事本,即可進行編輯。4不須COMPILE編譯,可在服務(wù)器端直接執(zhí)行。5ASP能與任何ActiveXScripting語言相容，除了可使用VBScript語言來設(shè)計外，還通過plug-in的方式，使用由其它腳本語言如Perl、Tcl等。腳本引擎是處理程序的COM物件。ASP源程序不會被傳到客戶端瀏覽器，提高程序的安全性和保密性?？墒褂梅?wù)器端的腳本來產(chǎn)生客戶端腳步本。ActiveXserverComponents(ActiveX服務(wù)器元件)具有無限可擴充性。使用VisualBasic、Jave、VisualC++等語言來編寫所需要的ActiveXServerComponents。另外，用ASP與Dreamweaver結(jié)合設(shè)計和完善網(wǎng)頁，要注意系統(tǒng)總體風(fēng)格。1界面的風(fēng)格應(yīng)該采用一些符合網(wǎng)站的風(fēng)格的網(wǎng)頁。例如：不允許采用其他一些具有其他目的的網(wǎng)站風(fēng)格。2頁面上的修飾圖片不宜過多，因為網(wǎng)絡(luò)的傳輸速度是有限的，圖片所占的字節(jié)比較多,傳輸起來占用較多的時間。因此會讓用戶有較多的等待，勢必造成用戶心理上的焦急的心情。不利于本網(wǎng)頁為大家所喜愛。3頁面上盡量擁有經(jīng)常更新的內(nèi)容，例如最新消息等。因為每個人都不喜歡經(jīng)常見得同一內(nèi)容的網(wǎng)頁。所以，網(wǎng)頁的內(nèi)容因該能夠定期的更新，但這種更新應(yīng)該是有程序自動完成的,或僅需少量人工的干預(yù)，從而體現(xiàn)出計算機的優(yōu)越性，并能夠減輕沒有必要的人力勞動。本節(jié)只是介紹了ＡＳＰ的一些功能及其一些在網(wǎng)頁制作和完善中的簡單應(yīng)用。利用ＡＳＰ還可以制作聊天室、ＢＢＳ等。ＡＳＰ的靈活性和其強大的交互功能必然使得其在網(wǎng)頁制作和完善中的應(yīng)用越來越廣泛。3.1.4Dreamweaver與Photoshop在使用Dreamweaver進行網(wǎng)頁排版的過程中，難免有一些圖片會不適合整體排版的要求。這就要用到Photoshop來進行圖片的修改和完善甚至制作了。圖3-13所顯示的是裁切一圖片的過程。圖3-13裁切圖片運行Photoshop，打開要修改的圖片。點擊工具攔中的“裁切”按鈕，在圖片上拖動鼠標(biāo)，劃定要裁切的部分。在要裁切的部分右擊，選擇“裁切”命令。得到圖3-14。圖3-14裁切的結(jié)果執(zhí)行“文件/另保存為”命令，將其保存到文件夾之中。然后，Dreamweave就可以像應(yīng)用其它圖片一樣使用修改后的圖片了。3.1.5Dreamweaver與Flash為了使得用Dreamweaver制作的網(wǎng)頁更加生動和吸引人.可以將Dreamweaver和Flash結(jié)合起來。打開Flash程序,執(zhí)行“文件（File）/先建（New）”命令，建立一個新文件，存儲名為Welcome.fla。在第一幀中輸入紅色文字WELCOME，延長到第30幀（如圖3-16）。圖3-16Flash制作1在第1層下建立第2層，創(chuàng)建一個移動漸變動畫。圖3-17是第1幀的圖形樣式，圖3-17Flash制作2圖3-18是第20幀的圖形樣式。第20幀將前面的圖形進行了橫向縮短。右擊第一層，執(zhí)行“遮蓋（Mask）”命令。第一層成為第二層的遮蓋層。這個小動畫就制作就完成了。圖3-18Flash制作3執(zhí)行“控制（Control）/測試影片（TestMovie）”命令，文件自動生成一個播放格式（.swf）的同名文件，并激活播放程序，如圖3-20所示。該文件可以用于Dreamweaver的程序中。圖3-20Flash測試事先將生成的SWF文件放在Dreamweaver制作網(wǎng)頁要用到的文件夾中。在Dreamweaver程序中打開要加入Flash文件的網(wǎng)頁。在插入工具欄的“常用（Common）”選項卡中單擊Flash按鈕，從打開的對話框中搜索的SWF格式的動畫文件“welcome”。單擊“確定”?；氐紻reamweaver窗口，會看到插入了一個有Flash圖標(biāo)的灰色方塊（圖3-21）。在屬性面板上單擊“播發(fā)（Play）”按鈕，可以在窗口中看到動畫效果。圖3-21插入Flash3.1.6Dreamweaver和FrontPage比較Dreamweaver比FrontPage都是比較知名的網(wǎng)頁設(shè)計軟件，可稱得上是網(wǎng)頁設(shè)計中的佼佼者。但到底誰更好些呢？FrontPage占領(lǐng)的是中級市場，其地位猶如字處理軟件中的Word，比較重視網(wǎng)頁的開發(fā)效率、易學(xué)易用的引導(dǎo)過程；而Dreamweaver主攻的是網(wǎng)頁高級設(shè)計市場，其地位猶如出版領(lǐng)域的PageMaker，所強調(diào)的是更強大的網(wǎng)頁控制、設(shè)計能力及創(chuàng)意的完全發(fā)揮。Dreamweaver在功能的完善，使用的便捷上比FrontPage要強些。它囊括了FrontPage的所有基本操作，并開發(fā)了許多獨具特色的設(shè)計新概念，諸如行為（Behaviors）、時間線（Timeline）、資源庫（Library）等，還支持層疊式樣表（CSS）和動態(tài)網(wǎng)頁效果（DHTML）。而動態(tài)HTML是Dreamweaver最令人欣賞的功能，是它的最大的特色Dreamweaver與FrontPage比較，有幾下幾點優(yōu)勢：1.產(chǎn)生的垃圾代碼少，網(wǎng)頁可讀性好，可以提高網(wǎng)頁瀏覽速度；

2.通過圖層功能，可以快速制作出復(fù)雜的頁面，圖片定位更容易；3.可基本解決IE與Netscape的兼容性；

4.設(shè)計思路廣，內(nèi)涵豐富，創(chuàng)作隨意性強，可充分展現(xiàn)用戶的創(chuàng)意。3.2FlashMX的介紹FLASHMX是目前非常熱門，備受廣大動畫愛好者及網(wǎng)頁制作者推崇的一個專業(yè)化網(wǎng)頁制作軟件。以其特有的簡單易學(xué)、操作方便及適用于網(wǎng)絡(luò)等優(yōu)點，得到了廣大用戶的認(rèn)可和接受，被廣泛應(yīng)用于互聯(lián)網(wǎng)、多媒體演示及游戲軟件的制作等方面。另外，由于FLASH還具有功能強大、可加入音效、生成文件小等特點，在美術(shù)設(shè)計、網(wǎng)頁制作及教學(xué)光盤制作等諸多領(lǐng)域也得到了充分的應(yīng)用。在FlashMX中，許多Flash5中的核心功能有所加強，擴展了一些有趣的領(lǐng)域，用戶界面也變得更容易使用，并且具有更加強大的編程功能。3.2.1FlashMX軟件界面介紹打開FlashMX后，在其界面中，包括標(biāo)題欄，菜單欄，“主要”欄，繪圖工具欄，“時間軸”面板，舞臺，“屬性”面板以及面板集等元素(如圖3-22)?！爸饕睓谑怯啥鄠€工具按鈕組成，在工作界面上方，提供對常用命令的快速訪問（如“新建”、“打開”、“保存”等命令）。繪圖工具欄一般位于工作界面的左側(cè)，其中包括十多種工具，主要供用戶在繪制圖形時使用。而舞臺是進行動畫創(chuàng)作的區(qū)域，擁護可以在其中直接勾畫插圖，也可以在其中安排導(dǎo)入的插圖。與以前的Flash不同，F(xiàn)lashMX將多個常用面板集集成在“屬性”面板中，位于舞臺的下方，它可根據(jù)用戶當(dāng)前所選工具及進行操作的不同動態(tài)進行改變。另外FlashMX加強了面板的管理功能，將所有面板都嵌入到了一個面板集中。利用面板集可以對工作界面的面板布局進行重新組合，以適應(yīng)不同用戶的工作需要。另外，我個人認(rèn)為“時間軸”面板是其中最重要和最復(fù)雜的了。時間軸的主要組件是圖層、幀和播放頭，主要用于組織和控制影片內(nèi)容在一定時間內(nèi)播放的層數(shù)和幀數(shù)。與膠片一樣，F(xiàn)lash影片也將時長分為幀。圖層就像層疊在一起的幻燈片一樣，每個圖層都包含一個顯示在舞臺中的不同圖像。圖3-22FlashMX界面3.2.2FlashMX的新功能在Macromedia公司推出的FlashMX中，改良了用戶界面，重新設(shè)計了面板。對其易用性，創(chuàng)造性及功能性作了更進一步的增強，使其不僅可用于二維動畫的制作，同時也可進行Web應(yīng)用程序的開發(fā)。在FlashMX中，各個面板是編輯場景和時間線以及編寫ActionScript的重要工具。設(shè)標(biāo)記的面板被取消或替換，而成為能讓用戶按自己的喜好隨意分解和組合的面板。其具各項功能也得到進一步的擴展，如將許多常用面板組合到了統(tǒng)一的“屬性”面板中；新增了組件功能：支持視頻流播放；所支持的文件類型更多；支持動態(tài)聲音導(dǎo)入、鍵盤響應(yīng)功能等。另外，在FlashMX中還新增了對麥克風(fēng)和攝像頭的支持，使用戶可以直接通過麥克風(fēng)和攝像頭向flash中輸入音頻與視頻。3.3Photoshop7.0的介紹Photoshop是Adobe公司開發(fā)的平面設(shè)計軟件，一直受到平面設(shè)計人員的青睞。Photoshop以前的的版本雖然在圖象處理方面始終占有一定的優(yōu)勢，但是在畫筆功能和圖形的制作及網(wǎng)絡(luò)支持方面卻還不夠完美。Photoshop7.0是Adobe公司在2002年推出的圖象編輯軟件，它的功能更為強大，它將畫筆的繪畫功能和圖形的制作功能推向更加令人振奮的高度，無論在圖象處理、圖形制作、文本編輯等方面，還是在新興的網(wǎng)絡(luò)編輯方面，其優(yōu)越的性能和快捷的操作都是無可比擬的。Photoshop7.0的推出再次證明了Photoshop系統(tǒng)在圖形圖象處理領(lǐng)域中的重要位置。3.3.1Photoshop7.0軟件界面介紹Photoshop7.0的界面主要分為菜單、工具條、選項面板、狀態(tài)欄、工作區(qū)五大部分（如圖3-23）?！安藛巍辈糠衷诮缑娴恼戏剑依怂械腜hotoshop命令?！肮ぞ邨l”在界面的靠左部分，是在設(shè)計過程中最頻繁接觸的部分。工具條由上至下依次分為：控制欄，程序標(biāo)識圖標(biāo)，選擇工具組，著色編輯工具組，專用工具組，導(dǎo)航工具組，顏色控件，快速掩膜和標(biāo)準(zhǔn)視圖模式以及屏幕視圖控件。圖3-23Photoshop7.0的界面“選項面板”在界面的靠右部分，共計十一部分，分別是：導(dǎo)航（Navigator）面板，信息（Info）面板，設(shè)置（Option）面板，顏色（Color）面板，調(diào)色板（Swatches）面板，筆刷（Brushes）面板，層（Layers）面板，通道（Channels）面板，路徑（Paths）面板，歷史（History）面板以及動作（Actions）面板?！盃顟B(tài)欄“是被多數(shù)人所忽略的部分，其實狀態(tài)欄的功能極其重要。它位于界面的在下方，能實時地提供當(dāng)前圖像需要多少內(nèi)存空間，多少硬盤空間等等很重要的信息。時刻了解這些信息，用戶就會始終清醒地意識到如何進行操作，而不必?fù)?dān)心系統(tǒng)死機。單擊狀態(tài)欄上的三角形即可看到它的五個部分：DocumentSizes（文檔尺寸），ScratchSizes（緩存數(shù)據(jù)），Efficiency（效率），Timing（時間），CurrentTool（當(dāng)前工具）。3.3.2Photoshop7.0的新功能在Photoshop7.0的所有新特性中，或許最棒的要屬HealingBrush(修復(fù)畫筆工具)了。它是為修整圖片而設(shè)計的，可以清除圖片上常見的塵跡、劃痕、污漬和折紋。HealingBrush的特別之處是，在同一幅圖片中或在圖片與圖片之間進行克隆時，它會自動地保留圖像的明暗和紋理等屬性。用Photoshop還可以自定制常用工具以及把所喜歡的設(shè)置狀態(tài)存成新工具，以便重復(fù)使用。在Photoshop中還可以定制和儲存不同類型項目的工作區(qū)。另外，Photoshop7.0的繪圖引擎完全重做了。新的繪圖引擎“可以創(chuàng)建過去在Photoshop中無法獲得的特殊的圖像”。它也使對工作過程的控制更為精確，如利用手寫畫板的壓力感應(yīng),包括傾斜和噴筆指輪的特征。對于畫筆，可以調(diào)整十幾種設(shè)置，包括筆形、傾斜、間隔、松散度、抖動、直徑、紋理、陰影等屬性，而這些設(shè)置還可以存成自定制的畫筆預(yù)設(shè)方案。Photoshop7.0的其他增強項還有：

分享圖片前對圖片加密——現(xiàn)在的Photoshop提供了對Acrobat5.0的安全設(shè)置的完全支持，允許在與他人在線分享PhotoshopPDF文件或?qū)⑵浼拥紸dobePDF工作流之前對其加密碼或其他保護。

拼寫檢查——新的內(nèi)建拼寫檢查器允許搜索和替換文本，可對同一文件中的多種語言進行拼寫檢查，并在同文檔的一個文本層上或跨越全部文本層對拼寫進行糾正。

打印省時省錢——PicturePackage的設(shè)計目的是幫助在一頁上打印多個圖像，以節(jié)省時間和打印耗材?？梢源蛴〕筛鞣N規(guī)格的頁，如8x10、10x16和11x17；可以給每個圖像加標(biāo)簽或文本，如版權(quán)注釋和標(biāo)題；可以在一頁上打印一個以上的圖像；并且可以按一個平面文檔或者分?jǐn)?shù)層輸出圖像。

與其他應(yīng)用軟件集成——Photoshop7.0在打印、網(wǎng)頁、電子文稿和動態(tài)媒體上與其他Adobe專業(yè)圖形程序緊密集成。第四章網(wǎng)站的分析和設(shè)計4.1原人事處網(wǎng)站的分析本次的畢業(yè)設(shè)計要求在原來的人事處網(wǎng)站的基礎(chǔ)上進行完善。原來的人事處網(wǎng)站首頁如圖4-1和圖4-2所示?，F(xiàn)在，本人分析一下原來的人事處網(wǎng)站，說幾點個人的想法：圖4-1人事處網(wǎng)站首頁上部圖4-2人事處網(wǎng)站首頁下部（1）原來的人事處網(wǎng)站首頁的高度稍微過長。（2）在“人事科室”一欄下面（如圖4-2），留有一大片空白，破壞了整體的平衡感。（3）“用戶注冊”一欄沒有完成。（4）原來的“最新消息”一欄非常有新意，很吸引人。（5）“最新公告”和“最新消息”每次改換信息就要用網(wǎng)頁編輯工具重新編輯和修改。（6）缺少一個對網(wǎng)站印象的留言板之類的頁面。（7）“最新消息”一欄的內(nèi)容太多，使得此欄的長度稍微過大。（8）“招聘信息”一欄下的“人事處網(wǎng)站簡介”和二級網(wǎng)頁中的“人事處網(wǎng)站簡介”重復(fù)?？梢詫⑦@一欄去掉。（9）“人事科室”一欄中的各個科室的有關(guān)消息沒有添加上去。（10）“招聘信息”一欄中的有關(guān)消息也沒有添加上去。當(dāng)然，以上幾點只是我個人的看法。4.2網(wǎng)站設(shè)計構(gòu)想結(jié)合多種因素，本人在指導(dǎo)老師的指導(dǎo)下，重新設(shè)計和完善了人事處網(wǎng)站的首頁（如圖4-3）：?；战笕耸绿嶧LASH歡迎二級網(wǎng)頁按鈕最新消息江大人事處簡介重要消息人事處領(lǐng)導(dǎo)班子處長室人事處科室人才交流中心江大首頁人事處網(wǎng)站簡介人事處職能聯(lián)系我們處長信箱計數(shù)器圖4-3人事處網(wǎng)站首頁設(shè)計草圖（1）將網(wǎng)站首頁的高度稍微減少了一些，頁面居中。（2）去除在“人事科室”一欄下面的空白。（3）去除原來的“人事處網(wǎng)站簡介”一欄。（4）減小“最新消息”一欄的的長度，以顯示六七條消息為準(zhǔn)，剩下的消息擠到MORE中。（5）保留原來的“人事科室”、“最新消息”、“招聘信息”、“人事處領(lǐng)導(dǎo)”等欄。（6）在首頁中增加一個留言板按鈕，以便讓合作的同學(xué)加入一個留言板頁面。（7）基本顏色以淡藍色為準(zhǔn)。下面介紹一下人事處網(wǎng)站的構(gòu)成（如圖4-4）：機構(gòu)設(shè)置機構(gòu)設(shè)置辦公流程師資隊伍規(guī)章制度文件下載招聘信息公共服務(wù)人事處網(wǎng)站首頁處長室人才交流中心人事科勞資科師資科人事檔案科網(wǎng)站簡介人事處職能教師職工調(diào)入程序教職工調(diào)出工作程序教職工校內(nèi)調(diào)配程序畢業(yè)生報到程序辦理教職工婚姻狀況證明程序圖4-4人事處網(wǎng)站的構(gòu)成根據(jù)圖4-4可以看出，主頁下面有九個二級網(wǎng)頁。分別是機構(gòu)設(shè)置、師資隊伍、規(guī)章制度、文件下載、招聘信息、公共服務(wù)、辦公流程、人事處職能和網(wǎng)站簡介。其中機構(gòu)設(shè)置又分處長室、人才交流中心、人事科、勞資科、師資科和人事檔案科六個三級網(wǎng)頁。辦公流程又分教師職工調(diào)入程序、教職工調(diào)出工作程序、教職工校內(nèi)調(diào)配程序、畢業(yè)生報到程序和辦理教職工婚姻狀況五個三級網(wǎng)頁。二級網(wǎng)頁中，機構(gòu)設(shè)置介紹人事處的構(gòu)成；師資隊伍介紹有關(guān)師資力量的情況；規(guī)章制度介紹相關(guān)的制度和要求；文件下載主要提供相關(guān)文件的下載；招聘信息介紹相關(guān)的招聘信息；公共服務(wù)介紹人事處的服務(wù)承諾；辦公流程介紹各種手續(xù)的辦理流程；人事處職能顯示的是人事處的主要職能；網(wǎng)站簡介主要是簡單介紹人事處網(wǎng)站的情況。三級網(wǎng)頁中，處長室、人才交流中心、人事科、勞資科、師資科和人事檔案科主要介紹各個科室的領(lǐng)導(dǎo)、功能和相關(guān)信息。教師職工調(diào)入程序、教職工調(diào)出工作程序、教職工校內(nèi)調(diào)配程序、畢業(yè)生報到程序和辦理教職工婚姻狀況程序就是介紹各個程序的辦理流程。

第五章人事處網(wǎng)站的實現(xiàn)5.1建立站點如果要用Dreamweaver設(shè)計編排網(wǎng)頁，為建立網(wǎng)站做準(zhǔn)備，就得預(yù)先設(shè)立站點（site）,以便所用的網(wǎng)頁及網(wǎng)頁中的元素有一個有效的提取路徑。如果一個完成的網(wǎng)站，文件存放混亂，在瀏覽器中是無法正常分布的。打開資源管理器，在D盤上創(chuàng)建文件夾site，在site文件夾中增加文件夾renshi。該文件夾是存放以后將要設(shè)立的站點的所有內(nèi)容的地方?；氐紻reamweaverMX，選擇site/Newsite選項，在打開的定義站點屬性對話框中（如圖5-1），對將要建立的站點進行屬性設(shè)置。選擇“高級選項”，在“分類”選項中，單擊“本地圖5-1定義站點屬性信息”。在“站點名稱”中輸入renshichu（人事處）；在“本地根文件夾”中搜索選擇D:\site\renshi\；在“自動刷新本地文件列表”此選項中打上鉤，一切如圖5-1所示。一切設(shè)置好后，單擊“確定”即可。到此，一個名為“renshichu”的站點已經(jīng)建立，只不過它是一個沒有內(nèi)容的空的本地站點。5.2訂立網(wǎng)站結(jié)構(gòu)建立一個網(wǎng)站往往需要有許多相互鏈接的網(wǎng)頁，每個網(wǎng)頁還會有各種各樣的插入元素。為了有效的管理這些網(wǎng)頁和元素，必須建立一個合理的結(jié)構(gòu)。在站點面板中右擊文件夾site-renshi,在彈出的菜單中執(zhí)行“新建文件”命令。如圖5-2所顯示：圖5-2新建文件“新建文件”命令會增加一個沒有命名的新文件。就其命名為index.htm。為文件命名一定要用小寫的英文或者拼音字母。也可以右擊文件夾site-renshi，在彈出的菜單中執(zhí)行“新建文件夾”命令。就其命名為pic,用來存放index.htm的相關(guān)圖片和文件。同樣的方法，再增加機構(gòu)設(shè)置、師資隊伍、規(guī)章制度、文件下載、招聘信息、公共服務(wù)、辦公流程、人事處職能和網(wǎng)站簡介幾個二級網(wǎng)頁文件。將它們分別命名為jigou.htm、shizi.htm、guizhang.htm、download.htm、cpxx.htm、ggfw.htm、bangong.htm、zhineng.htm、jianjiei.htm。注意，后綴“htm”一定不能少。再增加相關(guān)文件夾,將其命名為jigou、shizi、guizhang、download、cpxx、ggfw、bangong、zhineng、jianjiei。用來存放對應(yīng)頁面的相關(guān)圖片和文件。到此，已經(jīng)有一個擁有幾個網(wǎng)頁的站點了。5.3網(wǎng)頁制作雖然，前面已經(jīng)有一個擁有幾個網(wǎng)頁的站點了，但是它是一個只有框架結(jié)構(gòu)，而沒有實際內(nèi)容的空殼網(wǎng)站。為了給這個空殼網(wǎng)站加入內(nèi)容，還得進行網(wǎng)頁制作。打開DreamweaverMX,在站點面板中找到“renshichu”文件夾，雙擊新前建立的文件“index”，可以打開該文件的編輯窗口（如圖5-3）。圖5-3打開編輯窗口從窗口的標(biāo)題欄中可以看到這個文件的名稱index,在后面的括號中還有這個文件的所屬說明。在屬性面板的上面也能看到這個文檔的標(biāo)簽。為了方便識別，在標(biāo)準(zhǔn)工具欄的“標(biāo)題”中為這個文檔輸入一個標(biāo)題“index”。如圖5-4:圖5-4文件的標(biāo)題5.3.1設(shè)置文檔的頁面屬性在頁面的空白處右擊在打開的菜單中，選擇最下面的一項命令PageProperties(頁面屬性),打開“頁面屬性”對話框“如圖5-5”。圖5-5頁面屬性在打開“頁面屬性”對話框中，可以對各項頁面屬性進行設(shè)置。如添加背景圖案或背景顏色，默認(rèn)文本、鏈接、訪問后的鏈接及激活鏈接等顏色的設(shè)置，等等。另外，為了避免網(wǎng)頁在不同的顯示器中偏左或偏右?？梢詫⑵湓O(shè)置為居中。方法如下：在“常用”選擇卡中，點擊“顯示代碼視圖”或“顯示代碼視圖和設(shè)計視圖”按鈕，打開代碼窗口。找到其中最大的table，將其設(shè)為：align=“center”。5.3.2頁面的分割在第三章，介紹DreamwearMX的插入工具欄中，提到“布局”一項共有“標(biāo)準(zhǔn)視圖”和“布局布圖”兩種視圖。在“標(biāo)準(zhǔn)視圖”下，可以插入表格和在網(wǎng)頁制作區(qū)畫圖層。在“布局視圖”下，可以在網(wǎng)頁制作區(qū)描繪布局視圖下的表格和單元格，描繪好之后，可以再切換到“標(biāo)準(zhǔn)視圖”后再轉(zhuǎn)化為表格。因此，可以充分應(yīng)用“標(biāo)準(zhǔn)視圖”和“布局視圖”這兩種視圖進行頁面分割。1.插入表格在插入工具欄中，選擇“布局”(Layout)選擇項，單擊“標(biāo)準(zhǔn)視圖”（StandardView）按鈕，再單擊“插入表格”按鈕，彈出表格設(shè)置窗口（如圖5-6）,按照首頁設(shè)計草圖的要求，對表格進行設(shè)置。圖5-6插入表格如果表格不合要求，可以通過屬性面板進行整。在表格被選中的情況下，打開屬性面板（Window/properties）。此時的屬性面板即為表格的屬性面板。在表格屬性面板中，可以對表格進行重新設(shè)置。如縮放單元格、合并與拆分單元格、為單元格填色、為單元格填入背景圖，等等。2.利用Layout(排版)進行版面設(shè)計在“布局視圖”下單擊“繪制布局表格”按鈕，可以在網(wǎng)頁制作區(qū)描繪表格。單擊“繪制布局單元格”按鈕，可以在描繪的布局表格中繪制單元格。選中描繪的布局表格或者單元格，打開屬性面板，可以對屬性進行重新設(shè)置。前面已經(jīng)說過，Layout可以轉(zhuǎn)換為表格。即在“布局視圖”下單擊“標(biāo)準(zhǔn)視圖”按鈕就可以了。這兩種編輯狀態(tài)是可逆的。3.層的創(chuàng)建在“標(biāo)準(zhǔn)視圖”下，選擇“插入層”按鈕。將鼠標(biāo)移到適當(dāng)?shù)奈恢?，按住鼠?biāo)左鍵拖動，松開后就出現(xiàn)了一個方框。此時在葉面的左上方有一個小小的層標(biāo)志。同樣，也可以改變層的屬性，以達到設(shè)計的要求。甚至還可以創(chuàng)建層中層，等等。另外，層也可以轉(zhuǎn)換為表格。前提是確認(rèn)所有的層沒有重疊，可以在層面板中選上“防止重疊”一項。確認(rèn)沒有重疊后，執(zhí)行“修改(Modify)／轉(zhuǎn)換(Convert)／層到表格(LayerstoTable)”命令，在打開的“轉(zhuǎn)換層為表格”對話框中（如圖5-7所示），選取相應(yīng)的選項，單擊“確定”即可。圖5-7轉(zhuǎn)換層為表格對話框表格雖然直觀，但有時不斷變化的表格使得定位成為問題，常常使人頭疼。而層是一個獨立的區(qū)域，在定位方面較為靈活，還可以相互重疊。移動非常方便，不受限制。層雖然使用起來非常方便，但是在瀏覽器中的圖層位置會與在編輯時的位置有所出入。因此，層的穩(wěn)定性不如表格，所以，本人是將層和表格結(jié)合起來的方法，根據(jù)首頁設(shè)計草圖進行頁面分割的。5.3.3插入圖片頁面分割好后，在單元格中插入圖片和文本。Dreamweaver不是一個圖像繪制和編輯的軟件，因此網(wǎng)頁中使用的圖片要通過插入的方式，將在別的程序在生成的圖象裝入頁面。選中要插入圖片的單元格，然后在插入工具欄中選擇對象選項卡中的“圖像插入”按鈕，打開“搜索圖像”對話框，在其中選擇有插入的圖片，點擊，插入。圖5-8所顯示的是在主頁中插入“人事處”圖片。如果插入的圖片事新沒有保存在“site/renshi/pic”中，會彈出提示對話框，詢問是否將圖片復(fù)制到“site/renshi/pic”中，選擇“是”。在圖片的屬性面板中（圖5-8），根據(jù)設(shè)計要求，可以改變圖片的大小、尺寸，及對齊圖片等。如果圖片在網(wǎng)中排版中不太適合，可以用Potoshop來進行重新修改。圖片的屬性面板圖片的屬性面板圖5-8插入圖片5.3.4文本輸入文本的輸入與插入圖片相似，選中要輸入文本的單元格，在其中輸入文本。然后在文本的屬性面板中改變其屬性，以達到設(shè)計的要求。還可以增加文字的樣式。如圖5-9所示，在文本的屬性面板中選擇“字體”中的編輯字體列表，打開“編輯字體列表”窗口（圖5-10），選擇“+”按鈕，在“可用字體”中雙擊要用的字體，再點擊“確定”就行了。圖5-9增加文字樣式圖5-10編輯字體列表窗口5.3.5圖片和文字的超鏈接網(wǎng)站中往往都不只是是一個網(wǎng)頁，網(wǎng)頁和網(wǎng)頁之間需要鏈接，從而組成網(wǎng)站；網(wǎng)站與網(wǎng)站之間也要有鏈接，搜索網(wǎng)站才能發(fā)揮作用；用戶要與網(wǎng)站之間進行互動，同樣要有鏈接。建立超鏈接，可以活化網(wǎng)頁，在網(wǎng)頁中架起連接、溝通、互動的橋梁。超鏈接又可以分為對象為文件的超鏈接、對象為圖形的超鏈接、對象為郵件的超鏈接、對象為URL的超鏈接四種。在網(wǎng)頁中圖片或文字都可以成為鏈接的媒介物，先看看如何讓圖片成為鏈接媒介物。選擇要建立超鏈接的圖片，此時，屬性面板的左上角出現(xiàn)該圖片的圖標(biāo)。在屬性面板中單擊鏈接（Link）欄右邊的“文件搜索（SelectFile）”按鈕，打開“文件搜索”對話框，尋找到將要鏈接的文件，單擊OK按鈕將其加入鏈接（Link）輸入框中。如果是對象為郵件的超鏈接或者是對象為URL的超鏈接，則在鏈接（Link）輸入框中輸入網(wǎng)址或者E-mail地址就可以了。圖5-11所顯示的是對象為文件的超鏈接。在文檔編輯狀態(tài)下，看不到鏈接的結(jié)果。按F12打開瀏覽器窗口，將鼠標(biāo)指針指向建立鏈接的圖形，如果鼠標(biāo)指針變成手形，就意味著該圖形具有鏈接功能，單擊該圖形后可以鏈接到相應(yīng)的網(wǎng)頁文件、網(wǎng)站或郵件。圖5-11圖片的超鏈接讓文字成為鏈接媒介物與讓圖片成為鏈接媒介物相似，選中要建立超鏈接的文字，在屬性面板中的鏈接（Link）輸入框中輸入文件路徑、URL或者E-mail地址就可以了。但是這樣的文字超鏈接會有下劃線，并且在超鏈接建成后，字體會變色。本人在網(wǎng)頁設(shè)計中，將有些文字超鏈接去掉了下劃線，并且當(dāng)鼠標(biāo)停在上面的時候，會成七彩色變換。方法如下：在代碼窗口中找到title，在<title>index</title>下面加入如下代碼：<Likehref=“style.css”ret=stylesheettype=text/css>/*去掉下劃線*/<Scriptsrc=“raibow.js”></script>/*成七彩色變換*/關(guān)于去掉下劃線和成七彩色變換的代碼文件style.css和raibow.js附在后面的附錄中。5.3.6插入文本域要增加“文本域”、“復(fù)選框”、“單選框”、“列表”等組件，就必須先要用到組件框，如果不事先插入組件框，就直接插入組件，Dreamweaver也會提示是否要增加組件框。插入組件框的方法如下：在“插入”工具欄中單擊組件選擇卡，使“插入”工具欄變?yōu)椤敖M件”工具欄。如圖5-12所示，用鼠標(biāo)選中要插入組件框的單元格，再點擊工具欄中最左邊的“組件框”按鈕。在單元格中就會出現(xiàn)一個紅色的虛線框。這個紅色的虛線框就是組件框。在默認(rèn)狀態(tài)下組件框不顯示。只要執(zhí)行“查看（View）/可視化助理（VisualAids）/不可見元素（InvisibleElements）”命令就可以看見組件框了。插好組件框后，用鼠標(biāo)選中這個紅色的虛線框，再點擊“組件框”按鈕右邊的“插入文本域”按鈕，在組件框中出現(xiàn)了一個“文字”輸入框。這是一個交互式文本框，將由網(wǎng)上用戶填寫。可以在“文字”輸入框的前面輸入“用戶名”等文字。在“文字”輸入框的屬性面板中可以對“文字”輸入框的屬性進行修改，以達到設(shè)計的要求。同理，還可以再添加一個“密碼”的文本域，但最好在屬性面板的“類型”中選擇“密碼”一項。這樣，用戶輸入密碼后，文本域顯示的是“*”號。圖5-12插入文本域5.3.7插入按鈕仍然在相應(yīng)的組件框中單擊，在組件工具欄中單擊“插入”按鈕。在組件框中出現(xiàn)了一個帶有Submit（提交）字樣的按鈕（圖5-13）。圖5-13插入按鈕在屬性面板中的Lable（標(biāo)簽）處輸入文字“登陸”按下回車鍵，按鈕上的字樣隨之改變。同理，可以再做一個“重置”的按鈕，不過在屬性面板的“動作”中要選擇“重設(shè)表單”這一項。5.3.8插入FLASH圖5-14插入FLASH預(yù)先用FlashMX做好相關(guān)的Flash動畫，并保存在“site/renshi/pic”文件夾中。在Dreamweaver中點中要加入Flash動畫的單元格，選擇“常用”選項卡，再點擊其中的“插入Flash”按鈕，在打開的對話框中選擇要用的Flash動畫。回到Dreamweaver窗口，會看到插入了一個有Flash圖標(biāo)的灰色方塊（圖3-21）。在屬性面板上單擊“播放（Play）”按鈕，可以在窗口中看到動畫效果。如果Flash不合乎要求，在屬性面板上單擊“編輯（Edit）”圖5-14插入FLASH5.3.9插入列表點擊組件工具欄中的“列表”按鈕，在組件框中插入一個列表框。選中此列表框，在屬性面板上的“類型（Type）”中選擇“列表（List）”,并將“高度（Height）”設(shè)為1。如圖5-15所示：圖5-15插入表框在屬性面板的右側(cè)點擊“列表值（ListValues）”按鈕，打開如圖5-16所示的“列表值”對話框，輸入相應(yīng)的內(nèi)容。輸入完畢以后，單擊“確定”按鈕，這個列表框就完成了。在屬性面板上的“初始化選定（Initiallyselected）”的列表中出現(xiàn)了剛剛輸入的文字內(nèi)容。在編輯頁面中，也看到列表框中出現(xiàn)了文字。圖5-16列表值對話框同理，再做一個“友情鏈接”的列表框。5.4為網(wǎng)站設(shè)立主頁根據(jù)5.2所說的那樣，補全所有的網(wǎng)頁，再像完成主頁那樣完成所有的網(wǎng)頁。到現(xiàn)在為止，人事處網(wǎng)站已經(jīng)完成的差不多了。在站點面板上可以清楚的看到所有的網(wǎng)頁文件和素材文件。然而其主頁還只是名義上的，并沒有進行實際的認(rèn)定。在站點面板上，選擇“編輯站點（Editsite）”命令。打開“站點編輯”對話框（圖5-17）。選擇“renshichu”,并單擊“編輯（Edit）”按鈕。圖5-17編輯站點對話框在打開的“站點屬性”對話框中（圖5-18），選擇“高級（Advanced）”選項卡，先在“分內(nèi)（Category）”下選擇“站點地圖布局（SiteMapLayout）”命令，再在右側(cè)“主頁（HomePage）”欄中輸入主頁文檔的根目錄相對路徑，單擊“確定”按鈕。圖5-18站點屬性對話框回到“站點編輯”對話框中（圖5-17），單擊“完成（Done）”按鈕，完成站點屬性的編輯工作。在如圖5-19所示的位置上選擇“本地視圖（MapView）”命令將站點面板從文檔視圖轉(zhuǎn)換為圖5-19選擇本地視圖命令站點地圖視圖。此時站點面板中只出現(xiàn)了index一個文檔的圖標(biāo)，位于面板上方中間的位置，說明該圖5-20站點地圖視圖文件已經(jīng)成為了人事處網(wǎng)站真正的主頁了（圖5-20）。圖5-21擴大站點面板到整個窗口單擊如圖5-20所顯示的按鈕。此時站點面板擴大到整個窗口（圖5-21），并形成了站點地圖與文檔視圖并列的面板樣式。單擊站點地圖視圖中的index文檔圖標(biāo)，右上角立即出現(xiàn)了圓形的鏈接圖標(biāo)。拖動圓形的鏈接圖標(biāo)到右側(cè)文檔視圖中，尋找要鏈接的頁面進行單擊。站點地圖視圖中就多出了一個文檔。按照這個方法，分別鏈接網(wǎng)站中的其它二級網(wǎng)頁，可以形成直觀的導(dǎo)航示意圖。如圖5-22所示：圖5-22二級網(wǎng)頁導(dǎo)航示意圖單擊index.htm下面的bangong.htm，在出現(xiàn)了鏈接圖標(biāo)后，還可以用上面的方法為bangong.htm鏈接下一級的網(wǎng)頁。同理，也可以讓jigou.htm去鏈接下一級的網(wǎng)頁。最終形成全面的直觀導(dǎo)航示意圖（圖5-23）。圖5-23全面的直觀導(dǎo)航示意圖第六章網(wǎng)站的測試和完善由于本人從來沒有設(shè)計過網(wǎng)頁，也沒有接觸過有關(guān)網(wǎng)頁設(shè)計的軟件，可以說是沒有任何經(jīng)驗可言。本次畢業(yè)設(shè)計是自己一邊看書一邊摸索的，做出來的東西肯定有一些不足甚至可笑之處了。本人在設(shè)計的過程中曾遇到許多的問題。如頁面在顯示器中總是便在一邊、頁面不夠緊湊、整體的顏色太過鮮艷、圖層的定位不是很準(zhǔn)確、圖片的應(yīng)用不好，等等。后來在老師的指導(dǎo)下，終于一一解決。經(jīng)過老師的指導(dǎo)和多次的修改，將本人和與我合作的同學(xué)所做的相結(jié)合起來，最終形成的頁面如下（圖6-1和圖6-2）：圖6-1首頁的上部圖6-2首頁的下部（1）將網(wǎng)站首頁的高度稍微減少了一些，頁面居中。（2）去除了在“人事科室”一欄下面的空白。（3）去除了原來的“人事處網(wǎng)站簡介”一欄。（4）減小了“最新消息”一欄的的長度，以顯示六七條消息為準(zhǔn)，剩下的消息擠到MORE中。（5）保留原來的“人事科室”、“最新消息”、“招聘信息”、“人事處領(lǐng)導(dǎo)”等欄。（6）完成了“用戶注冊”一欄。（7）“最新公告”和“最新消息”每次改換信息不必再用網(wǎng)頁編輯工具重新編輯和修改。直接在數(shù)據(jù)庫中添加就行了。（8）增加了一個對網(wǎng)站印象的留言板。（9）“人事科室”一欄中的各個科室的有關(guān)消息各添加了三條。（10）“招聘信息”、“處長室”、“人才交流中心”等欄中的有關(guān)消息也添加了上去。預(yù)先的設(shè)想，在網(wǎng)站的首頁中基本上都實現(xiàn)了。圖6-3和圖6-4是二級網(wǎng)頁中的機構(gòu)設(shè)置和三級網(wǎng)頁中的畢業(yè)生報到程序，也基本上都實現(xiàn)了預(yù)先的設(shè)想。圖6-3二級網(wǎng)頁中的機構(gòu)設(shè)置圖6-4三級網(wǎng)頁中的畢業(yè)生報到程序二級網(wǎng)頁中的機構(gòu)設(shè)置和三級網(wǎng)頁中的畢業(yè)生報到程序只是各級網(wǎng)頁中所舉的例子。至于其它各級的頁面，也基本上都實現(xiàn)了預(yù)先的設(shè)想。由于頁面太多和篇幅的關(guān)系，這里就不把圖一一列出來了。小結(jié)本次畢業(yè)設(shè)計本人是和另一位同學(xué)合作，在原來的學(xué)校人事處網(wǎng)站的基礎(chǔ)上進行了重新設(shè)計和完善。本人主要負(fù)責(zé)靜態(tài)網(wǎng)站的構(gòu)建、網(wǎng)頁的制作和完善。另一個同學(xué)負(fù)責(zé)有關(guān)ASP和數(shù)據(jù)庫方面的內(nèi)容。通過本次畢業(yè)設(shè)計，使本人從原來對網(wǎng)頁設(shè)計的一無所知，到略知一二、可以說出個所以然來。由于本人從來沒有設(shè)計過網(wǎng)頁，也沒有接觸過有關(guān)網(wǎng)頁設(shè)計的軟件，可以說是沒有任何經(jīng)驗可言，再加上又缺少一些藝術(shù)細(xì)胞，做出來的東西難免有些不盡如人意。比如：主頁的風(fēng)格和二級三級的風(fēng)格不是太一樣；頁面太過死板，等等。但是，本人還是慶幸可以通過本次畢業(yè)設(shè)計，了解了幾個有名的軟件，增強了自己的動手能力。為自己將來的生活和工作又作了一次有效的投資，為自己以后的人生又添加了一筆財富。在這里，我要衷心地謝謝林慶和吳旻兩位指導(dǎo)老師，感謝他們在這段時間內(nèi)對我的指導(dǎo)和不倦的教誨。萬分感謝！參考文獻DreamweaverUltraDev4與Flash5網(wǎng)頁、動畫、數(shù)據(jù)庫完美結(jié)合洪錦魁研究室編中國青年出版社網(wǎng)頁制作與設(shè)計教程陳語林梁建國周誠編著中國水利水電出版社DreamweaverMX標(biāo)準(zhǔn)案例教材陳青劉時燕王山編著人民郵電出版社FlashMX高級教程沈大林關(guān)點主編沈晰馬廣月李斌等編電子工業(yè)出版社FlashMX中文版互動實例雷波編著電子工業(yè)出版社Potoshop7.0圖像藝術(shù)設(shè)計實例教程郭萬軍陳北京徐芹編著清華大學(xué)出版社

附錄1.style.css--關(guān)于去除下劃線的代碼BODY{ FONT:9pt"MSSong","宋體";MARGIN:0px}TD{ COLOR:#000000;FONT:9pt"MSSong","宋體"}INPUT{ FONT:9pt"MSSong","宋體"}SELECT{ FONT:9pt"MSSong","宋體"}TEXTAREA{ FONT:9pt"MSSong","宋體"}P{ COLOR:#000000;TEXT-INDENT:2em}A.open:link{ COLOR:#ffffff;TEXT-DECORATION:none}A.open:visited{ COLOR:#87c5f8;TEXT-DECORATION:none}A.open:hover{ COLOR:#ffba4a;TEXT-DECORATION:none}A.open:active{ COLOR:#ffba4a;TEXT-DECORATION:none}A:link{ COLOR:#000066;TEXT-DECORATION:none}A:visited{ COLOR:#000066;TEXT-DECORATION:none}A:hover{ COLOR:#000066;TEXT-DECORATION:underline}A:active{ COLOR:#000066;TEXT-DECORATION:none}.small{ FONT-SIZE:9pt;LINE-HEIGHT:150%}.big{ FONT:9pt"MSSong","宋體"}.verdana{ FONT-FAMILY:verdana}.arial{ FONT-FAMILY:arial}.ll{ FONT:9pt"MSSong","宋體"}.red{ COLOR:red}.blue{ COLOR:#60cbff}.sel{ BACKGROUND-COLOR:#404040;BORDER-BOTTOM:white1pxdotted;BORDER-LEFT:white1pxdotted;BORDER-RIGHT:white1pxdotted;BORDER-TOP:white0pxdotted;COLOR:white;FONT-SIZE:9pt}.bg{ BACKGROUND-COLOR:#383838}.box{ BORDER-BOTTOM:black1pxsolid;BORDER-LEFT:black1pxsolid;BORDER-RIGHT:black1pxsolid;BORDER-TOP:black0pxsolid}.pp{ COLOR:#000066;FONT:9pt"MSSong","宋體"}HTML{ 新聞:}.newbig{ COLOR:#000000;FONT:14px/170%"MSSong","宋體"}2.rainbow.js—關(guān)于七色彩虹變換的