基于Dreamweaver的校園網(wǎng)站制作

1、-. z. 信息職業(yè)技術(shù)學(xué)院 畢業(yè)設(shè)計(jì)論文作者 * 41321P系部 計(jì)算機(jī)與軟件學(xué)院_專業(yè) 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)_題目基于Dreamweaver的校園制作_指導(dǎo)教師_ 史律_評(píng)閱教師_完成時(shí)間： 2016 年 4 月 20 日畢業(yè)設(shè)計(jì)(論文)中文摘要(題目)：基于Dreamweaver的校園制作摘要：本人的畢業(yè)論文主要是使用了Photoshop、Dreamweaver、DIV+CSS制作了本的界面。論文闡述了我的的設(shè)計(jì)和制作的主要過(guò)程，其中包括設(shè)計(jì)規(guī)劃、設(shè)計(jì)準(zhǔn)備、設(shè)計(jì)過(guò)程、測(cè)試四個(gè)局部，其中設(shè)計(jì)規(guī)劃主要是介紹了本的設(shè)計(jì)方向及目的、設(shè)計(jì)準(zhǔn)備主要介紹設(shè)計(jì)所使用的Photoshop、Dreamweave

2、r、DIV+CSS三個(gè)主要軟件、設(shè)計(jì)過(guò)程主要具體介紹了本建站具體步驟和設(shè)計(jì)思路、測(cè)試主要是介紹了制作中一些需要解決的問(wèn)題。關(guān)鍵詞：Dreamweaver 校園 div+css畢業(yè)設(shè)計(jì)(論文)外文摘要Title :The production of campus website based on DreamweaverAbstract: My graduation project is mainly the use of Photoshop, Dreamweaver, div + CSS created this website interface. Paper describes the ma

3、in course of my website design and production, including design and planning, preparation design, process design, site testing of four parts, including design and planning of this website is to introduce the design direction and purpose, the design focuses on preparation website design used Photosho

4、p, Dreamweaver, div + CSS three major software design mainly specifically describe the present website design and the specific steps and design ideas, web site testing is to introduce the production of some problems to be solved.keywords: Dreamweaver campus website div+css目 錄TOC o 1-2 h z uHYPERLINK

5、 l _Toc4509243171 引言 PAGEREF _Toc450924317 h 5HYPERLINK l _Toc4509243182 校園設(shè)計(jì)規(guī)劃 PAGEREF _Toc450924318 h 6HYPERLINK l _Toc4509243192.1 校園的容選取 PAGEREF _Toc450924319 h 6HYPERLINK l _Toc4509243203 設(shè)計(jì)的前期準(zhǔn)備 PAGEREF _Toc450924320 h 8HYPERLINK l _Toc4509243213.1 軟件準(zhǔn)備 PAGEREF _Toc450924321 h 8HYPERLINK l _To

6、c4509243223.2 IIS 7的安裝與設(shè)置 PAGEREF _Toc450924322 h 8HYPERLINK l _Toc4509243234 校園的制作過(guò)程 PAGEREF _Toc450924323 h 13HYPERLINK l _Toc4509243244.1 主頁(yè)的制作過(guò)程 PAGEREF _Toc450924324 h 13HYPERLINK l _Toc4509243254.2 頁(yè)面的制作 PAGEREF _Toc450924325 h 18HYPERLINK l _Toc4509243265 的測(cè)試與上傳 PAGEREF _Toc450924326 h 20HYPE

7、RLINK l _Toc4509243275.1 的測(cè)試 PAGEREF _Toc450924327 h 20HYPERLINK l _Toc4509243285.2 的上傳 PAGEREF _Toc450924328 h 21HYPERLINK l _Toc450924329結(jié)論 PAGEREF _Toc450924329 h 22HYPERLINK l _Toc450924330致 PAGEREF _Toc450924330 h 23HYPERLINK l _Toc450924331參考文獻(xiàn) PAGEREF _Toc450924331 h 241 引 言開(kāi)展到今天，已經(jīng)出現(xiàn)各種各樣形態(tài)風(fēng)格

8、種類，有關(guān)于小說(shuō)、新聞、游戲、微博等等，而制作的方法也多種多樣，現(xiàn)在，只要愿意甚至你可以為自己做一個(gè)個(gè)人，越來(lái)越多的公司通過(guò)建立的方法來(lái)展示自己的公司環(huán)境、公司理念，而這些也就成為這些公司向外界展示自己的窗口，好的表現(xiàn)出一個(gè)公司的實(shí)力，從而吸引到更多實(shí)力強(qiáng)大的人參加到他們公司。而我做這個(gè)主要是向外界展示我們的學(xué)校，讓我校的學(xué)生能更了解我們的學(xué)校，簡(jiǎn)單的構(gòu)造，亮麗的風(fēng)格，是我的吸引人的主要方法，豐富多樣的容是制勝的法寶。2校園設(shè)計(jì)規(guī)劃2.1 校園的容選取我在制作這個(gè)時(shí)主要考慮了的定位，目標(biāo)用戶，容以及網(wǎng)頁(yè)的版面，因?yàn)橹谱髑拔覀兙蛻?yīng)該明確我們的是做給誰(shuí)看的，放些什么容給人看，以及的樣式方不方便讓人

9、觀看，可以說(shuō)只要知道這幾點(diǎn)，就有人愿意來(lái)看你做的這個(gè)，這也是我們制作的核心。就比方我制作的這個(gè)，我是模仿我們學(xué)校的官網(wǎng)制作的，當(dāng)然由于是個(gè)人制作看起來(lái)還是很粗超，我的定位是門(mén)戶，主要是目標(biāo)用戶是本學(xué)校的學(xué)生，網(wǎng)頁(yè)上的容主要是學(xué)校的各類信息。從我的版面上來(lái)看我的主要分為四個(gè)局部：學(xué)校介紹主要介紹了我們學(xué)校的軟硬件環(huán)境，學(xué)校新聞也就是學(xué)校一些比擬大的活動(dòng)，學(xué)校通告是關(guān)于學(xué)校發(fā)布的一些通知，最后是大學(xué)生活主要是關(guān)于我們大學(xué)生活中發(fā)生的一些事。其實(shí)，大局部都是這樣，介紹公司文化理念，公司活動(dòng)，公司安排等，這也是大局部公司向外界展示自己的窗口。要求不同則展示的方式也不同，一個(gè)小說(shuō)和一個(gè)新聞，無(wú)論是從建站

10、的目的，或者說(shuō)容都大不一樣，小說(shuō)主要是面向廣闊讀者，越豐富種類越齊全則吸引的人就越多，可新聞更加注重新聞的時(shí)效性，要是新聞上掛的最新一條新聞都是好幾天前的，你說(shuō)這樣的還能吸引人嗎？，所以作為模仿學(xué)校官網(wǎng)的，我主要選取的容是和我們的大學(xué)生活息息相關(guān)的而且對(duì)于我的的瀏覽者我很明確，就是學(xué)校的學(xué)生群體，所以我最要的容就是關(guān)于我們的大學(xué)生活，比方學(xué)校最近舉辦了什么活動(dòng)，有什么重要的通知，發(fā)生了什么有趣的事，這都是我們大學(xué)生所關(guān)注的。而且的構(gòu)造和風(fēng)格也能反映一個(gè)的特色，一個(gè)好的，構(gòu)造和風(fēng)格足夠吸引人，將會(huì)給這個(gè)加分不少，就比方我的構(gòu)造簡(jiǎn)單，顏色亮麗，背風(fēng)光主要是藍(lán)色，而之所以這樣設(shè)計(jì)是因?yàn)槲覀兊膶?duì)象是大

11、學(xué)生，要是構(gòu)造復(fù)雜，好幾十個(gè)板塊，那我們還有耐心看下去嗎？或者的背風(fēng)光是黑色，讓人看起來(lái)就死氣沉沉，同樣沒(méi)有大學(xué)生愿意看。所以說(shuō)鮮明的構(gòu)造獨(dú)特的風(fēng)格起的是畫(huà)龍點(diǎn)睛的作用，要是一個(gè)容再豐富，構(gòu)造不夠鮮明，風(fēng)格不夠獨(dú)特，那也是毫無(wú)價(jià)值的。所以設(shè)計(jì)前我們需要考慮多方面的因素，千萬(wàn)不能想到什么做什么，這樣做出來(lái)的是無(wú)法長(zhǎng)時(shí)間吸引人的。圖2.1 主頁(yè)如圖2.1所示，我的這個(gè)的構(gòu)造主要由學(xué)校簡(jiǎn)介、南信新聞、學(xué)校展示等幾大局部組成。這些局部組成了我的整個(gè)的構(gòu)造，使得整個(gè)站點(diǎn)不會(huì)因?yàn)槿葸^(guò)多而顯得雜亂無(wú)章。3設(shè)計(jì)的前期準(zhǔn)備3.1 軟件準(zhǔn)備制作網(wǎng)頁(yè)的方式多種多樣，也從來(lái)沒(méi)人說(shuō)過(guò)我們一定要拘泥于哪一種，對(duì)于我們這些

12、初學(xué)者來(lái)說(shuō)，最簡(jiǎn)單的、最方便的才是最適合我們的。網(wǎng)頁(yè)制作中最知名的莫過(guò)于Dreamweaver和Frontpage這兩款軟件，我可以說(shuō)只要是制作網(wǎng)頁(yè)的人就沒(méi)有不知道這兩款軟件的。我這里使用的是Dreamweaver，我也向那些新手推薦這款軟件，因?yàn)樗娴暮芎?jiǎn)單。還有和它同公司的另外兩款軟件Fireworks和flash，他們并稱Macromedia公司的網(wǎng)頁(yè)制作三劍客，另外兩款軟件對(duì)我們制作更絢麗的網(wǎng)頁(yè)有很大幫助。Dreamweaver 是由美國(guó)Macromedia公司推出的一個(gè)所見(jiàn)即所得的可視化開(kāi)發(fā)制作工具。 Fireworks則被稱為Macromedia公司網(wǎng)頁(yè)設(shè)計(jì)三劍客之火焰，它最擅長(zhǎng)處

13、理網(wǎng)頁(yè)圖片，可以用來(lái)制作GIF動(dòng)畫(huà)。 Flash則被稱作Macromedia公司網(wǎng)頁(yè)三劍客之中的閃電，它最擅長(zhǎng)制作作網(wǎng)上動(dòng)畫(huà)為特長(zhǎng)，可以用來(lái)做動(dòng)畫(huà) 小游戲。Dreamweaver 采用所見(jiàn)即所得的設(shè)計(jì)模式，你所制作出來(lái)是什么效果，展示出來(lái)就是什么效果。不用去考慮其他制作上的問(wèn)題。它將網(wǎng)頁(yè)設(shè)計(jì)中的實(shí)現(xiàn)與設(shè)計(jì)兩個(gè)局部別離開(kāi)來(lái)，這樣我們的設(shè)計(jì)人員就可以將更多的精力放在設(shè)計(jì)頁(yè)面上而不是花太多的時(shí)間來(lái)考慮如何將我們的網(wǎng)頁(yè)實(shí)現(xiàn)，因?yàn)閷?shí)現(xiàn)的局部將由軟件來(lái)替我們完成，是不是很方便。在我設(shè)計(jì)我的個(gè)人的過(guò)程中，我選擇了Dreamweaver 8和 Photoshop兩種軟件。Photoshop我在學(xué)校選修課學(xué)過(guò)，

14、這個(gè)軟件主要是負(fù)責(zé)用來(lái)幫我處理圖片，對(duì)我來(lái)說(shuō)，相對(duì)于其它的軟件來(lái)說(shuō)，這兩個(gè)我還算是比擬熟悉的。 3.2 IIS 7的安裝與設(shè)置在眾多的基于瀏覽的開(kāi)發(fā)方案中，微軟的IIS是作為客戶端與效勞器端之間連接的橋梁。當(dāng)有人想要瀏覽你的網(wǎng)頁(yè)時(shí)，在地址欄輸入你的地址，這時(shí)請(qǐng)求將會(huì)從你的瀏覽器發(fā)送給效勞器端，然后效勞器端將你的請(qǐng)求交給IIS處理，然后IIS將檢索你訪問(wèn)的頁(yè)面，并通過(guò)你所請(qǐng)求的文件名對(duì)該網(wǎng)頁(yè)進(jìn)展處理，參加頁(yè)面是以HTML為擴(kuò)展名又或者頁(yè)面是另外的格式，IIS再對(duì)網(wǎng)頁(yè)上的代碼進(jìn)展處理。IIS 是微軟專為Windows系統(tǒng)設(shè)計(jì)的 WEB 效勞器軟件。Windows 7在安裝系統(tǒng)時(shí)，就已經(jīng)自帶IIS

15、7；但Windows 7不會(huì)主動(dòng)安裝它。下面就我就介紹一下在我制作過(guò)程中在Windows 7上安裝IIS 7的過(guò)程。步驟 1 在windows7桌面上的左下角，點(diǎn)擊開(kāi)場(chǎng)，找到控制面板，并點(diǎn)擊進(jìn)去。步驟 2 進(jìn)入控制面板后，首先將查看方式選擇為類別,以縮小圖標(biāo)查找的圍，然后點(diǎn)擊程序。步驟 3 進(jìn)入程序顯示頁(yè)面后，找到程序和功能一欄，點(diǎn)擊翻開(kāi)或關(guān)閉Windows功能。翻開(kāi)的界面如圖3.1所示圖3.1 window功能 圖3.2 添加IIS效勞步驟 4 進(jìn)入到翻開(kāi)或關(guān)閉Windows功能頁(yè)面后，找到Internet信息效勞一欄，可以看到其前面的勾未勾上。單擊Internet信息效勞前面的加號(hào)將目錄全

16、部展開(kāi)，然后將FTP、效勞器、web管理工具、萬(wàn)維網(wǎng)效勞目錄下的所有選項(xiàng)進(jìn)展勾選，最后點(diǎn)擊確定按鈕即可。如圖3.2所示。步驟 5 IIS 7功能翻開(kāi)完畢后，可以在開(kāi)場(chǎng)-程序搜索框里面輸入IIS 7,找到Internet信息效勞管理器，并翻開(kāi)，翻開(kāi)之后就可以進(jìn)展IIS 7的一些配置，發(fā)布html了。當(dāng)然我們也可以設(shè)置我們默認(rèn)站點(diǎn)及主頁(yè)，修改正程如下：步驟 6 翻開(kāi)IIS，彈出一個(gè)界面如圖3.3所示。圖 3.3 IIS管理器步驟 7 右鍵單擊按鈕，在右鍵菜單里面選擇添加選項(xiàng)，然后翻開(kāi)添加界面如圖3.4所示。圖 3.4 添加的界面步驟 8 首先我們先輸入我們制作的名稱，這里我輸入的是mynet。這時(shí)

17、軟件會(huì)自動(dòng)創(chuàng)立一個(gè)與名稱同名的應(yīng)用程序池。然后我們?cè)冱c(diǎn)擊連接為按鈕，選擇特定用戶，這里的特定用戶是我重新創(chuàng)立的一個(gè)系統(tǒng)用戶，輸入這個(gè)web_user賬戶的用戶名和密碼，如圖3.5所示。端口我們要更改為8080， 因?yàn)?0已經(jīng)被default website占用，我們無(wú)法使用，主機(jī)名我們不用填寫(xiě)。 圖 3.5 添加的步驟步驟 9 編輯身驗(yàn)證，添加默認(rèn)主頁(yè)，翻開(kāi)如下圖3.6界面。圖 3.6 身份驗(yàn)證步驟 10 編輯應(yīng)用池，點(diǎn)擊頁(yè)面左側(cè)的應(yīng)用程序池按鈕，選中與我們同名的應(yīng)用程序池。然后，點(diǎn)擊右側(cè)欄的高級(jí)設(shè)置。根據(jù)的開(kāi)發(fā)版本選相應(yīng)的版本，不然會(huì)出錯(cuò)的。如圖3.7所示圖3.7 應(yīng)用程序池設(shè)置步驟 11直

18、接關(guān)閉防火墻。到這兒，IIS的設(shè)置到此完畢。4校園的制作過(guò)程4.1 主頁(yè)的制作過(guò)程圖4.1 主頁(yè)步驟1，新建一個(gè)HTML頁(yè)面，然后設(shè)置背景顏色，設(shè)置完背景顏色的頁(yè)面如圖4.2所示：圖 4.2 設(shè)置背風(fēng)光步驟2，選擇布局表格，然后在頁(yè)面上選中自己所需要的區(qū)域，如圖4.3所示圖4.3 布局表格步驟3，然后對(duì)布局表格的CSS樣式進(jìn)展設(shè)置：設(shè)置代碼如圖4.4所示圖4.4 CSS樣式步驟4，接著退出布局，開(kāi)場(chǎng)進(jìn)展圖片插入，以及文字輸入，完成圖如圖4.5所示：圖4.5 top欄制作步驟5，進(jìn)展nav標(biāo)簽的制作，這里我是通過(guò)代碼進(jìn)展制作4.6，代碼如圖，CSS樣式如圖4.7，制作完效果圖如4.8所示：圖4.

19、6 輸入代碼圖4.7 CSS樣式圖4.8 效果圖步驟6，banner標(biāo)簽的設(shè)置，步驟與2,3類似，最后插入圖片，如圖4.9圖4.9 banner標(biāo)簽的設(shè)置步驟7，主題局部的制作也與步驟6相似，而不同的主要是CSS樣式的設(shè)置，學(xué)校介紹的主要是about，CSS樣式如圖4.10，其他三個(gè)區(qū)域主要是CSS樣式bt1，如圖4.11圖 4.10 學(xué)校介紹CSS樣式 圖 4.11 其他局部CSS樣式步驟8，最后是foot標(biāo)簽的制作，直接通過(guò)代碼，進(jìn)展制作，然后修改CSS樣式一般來(lái)說(shuō)，最底部可以制作一個(gè)導(dǎo)航欄，方便用戶瀏覽，還可以輸入一些地址， ，所有之類的容，代碼如圖4.12，CSS樣式如圖4.13，以及

20、效果圖如圖4.14。圖4.12 foot標(biāo)簽代碼圖4.13 foot標(biāo)簽CSS樣式圖4.14 foot標(biāo)簽效果圖步驟9，整個(gè)網(wǎng)頁(yè)主要分為三個(gè)局部頭部、主體、尾部，我這里只是粗略的進(jìn)展制作，主體局部主要是填充容，所以不再詳細(xì)講解過(guò)程，不過(guò)在圖片區(qū)域添加了一串代碼，來(lái)實(shí)現(xiàn)圖片的滾動(dòng)顯示，如圖4.15所示，添加的代碼如圖4.16所示：圖4.15圖片滾動(dòng)播放圖 4.16 滾動(dòng)播放代碼4.2 頁(yè)面的制作圖4.17 新聞資訊頁(yè)面如圖4.17 圖片中顯示的就是我的里新聞資訊的樣子，當(dāng)點(diǎn)擊網(wǎng)頁(yè)上的新聞資訊四個(gè)字時(shí)，瀏覽器就會(huì)重新翻開(kāi)一個(gè)界面，顯示我制作的新聞資訊網(wǎng)頁(yè)，下面是我制作這個(gè)的步驟：首先，制作主頁(yè)面的

21、時(shí)候，我們要先保存，然后選擇新聞資訊四個(gè)字右鍵選擇創(chuàng)立連接，然后將我做好的網(wǎng)頁(yè)做為目標(biāo)，這里我自己已經(jīng)提前做好另一個(gè)網(wǎng)頁(yè)news.html，如圖4.18所示圖4.18 到news.html同樣的步驟，重復(fù)將南信新聞、學(xué)校展示等區(qū)域的more小圖標(biāo)做上超，如圖4.19區(qū)域，其他類似，所以不再一一表達(dá)。圖4.19 設(shè)置的區(qū)域主要幾個(gè)設(shè)置完成。的設(shè)置到此完畢。5的測(cè)試與上傳5.1 的測(cè)試建立好后，我們要相對(duì)進(jìn)展測(cè)試，由于我制作的不是很復(fù)雜，所以我主要進(jìn)展測(cè)試的只有3個(gè)方面：分辨率、兼容性、。1. 頁(yè)面在不同屏幕分辨率下顯示不同不同分辨率的頁(yè)面，顯示出來(lái)也不同，因?yàn)槲覀兊捻?yè)面表單控件默認(rèn)寬度為固定值1

22、50p*，當(dāng)分辨率高了之后，表格中就會(huì)顯示過(guò)多的空白，頁(yè)面布局就會(huì)看上去很不協(xié)調(diào)，這種情況在寬屏顯示器上格外明顯。不過(guò)這里也有幾個(gè)問(wèn)題我們需要注意一下，就假設(shè)我們?cè)O(shè)定寬度為770p*，而表格寬度我們?cè)O(shè)定的是百分比單位，則我們使用大于800600的分辨率時(shí)，網(wǎng)頁(yè)就會(huì)拉寬，則網(wǎng)頁(yè)看上去就變形了。解決方法：比方我們要想讓頁(yè)面在分辨率為1024*768時(shí)居中，只要在網(wǎng)頁(yè)代碼的后再加一個(gè)，前加一句。還有就是我們提到的百分比，表格、單元格的寬度單位最好不要用百分比，而要使用像素單位。2.頁(yè)面在不同瀏覽器下顯示不同不同的瀏覽器查看頁(yè)面，也會(huì)有一些差異，因?yàn)椴煌娘@示器對(duì)代碼的翻譯也是不一樣的，這也是大多數(shù)制

23、作者需要考慮的問(wèn)題，因?yàn)槟惚匦枰槍?duì)瀏覽器進(jìn)展調(diào)整。國(guó)的瀏覽器大多使用的IE核，但是IE并沒(méi)有嚴(yán)格遵守W3C標(biāo)準(zhǔn)，而國(guó)外的瀏覽器嚴(yán)格遵守W3C標(biāo)準(zhǔn)。解決方法：我們應(yīng)該防止使用 W3C 組織不推薦的排版屬性，我們可以是用 CSS樣式代替。不過(guò)現(xiàn)在大局部國(guó)瀏覽器出了兼容模式，能夠保證大多數(shù)的瀏覽器顯示一致。3.圖片無(wú)法顯示我在進(jìn)展網(wǎng)頁(yè)的測(cè)試過(guò)程中經(jīng)常發(fā)現(xiàn)網(wǎng)頁(yè)翻開(kāi)后，圖片不顯示出來(lái)，經(jīng)過(guò)屢次測(cè)試，發(fā)現(xiàn)是由于我在制作的過(guò)程中對(duì)圖片的位置進(jìn)展移動(dòng)，導(dǎo)致圖片物理路徑和我代碼設(shè)定的路徑不同產(chǎn)生的，知道后我就對(duì)這個(gè)問(wèn)題進(jìn)展了處理。解決方法：假設(shè)自己上查看時(shí)，可以把圖片放在同一個(gè)文件夾，如果上傳到效勞器后，也同

24、樣把圖片放到同一個(gè)文件夾，然后對(duì)圖片代碼路徑重新進(jìn)展更改。在所有測(cè)試中，對(duì)的測(cè)試是我花費(fèi)時(shí)間最長(zhǎng)的一局部，因?yàn)闇y(cè)試的成功與否將直接影響我的整體效果，所以我對(duì)進(jìn)展了反復(fù)測(cè)試，以確保沒(méi)有什么問(wèn)題。5.2 的上傳當(dāng)然我們也可以將自己的上傳到一些效勞器空間，比方阿里云等，如果有興趣的話，還可以購(gòu)置一個(gè)域名，到時(shí)候只要輸入網(wǎng)址就直接能看到自己做的，其他不多講，這個(gè)過(guò)程中主要說(shuō)一下域名如何解析到效勞器上：步驟1登錄購(gòu)置效勞器的代理商并進(jìn)入后臺(tái)管理系統(tǒng)，找到效勞器管理的快捷入口。步驟2進(jìn)入效勞器管理界面，選擇指定的效勞器，點(diǎn)擊綁定域名。步驟3添加域名。注意需要填寫(xiě)兩種域名格式，一種是帶前綴的，另一種是不帶的縮寫(xiě)形式。步驟4域名和效勞器是雙向綁定的，效勞器綁定完域名后，需要域名填寫(xiě)解析地址。點(diǎn)擊域名解析。步驟5仿造提示信息，修改A記錄和AME所對(duì)應(yīng)的值后保存。步驟6等待2-6個(gè)小時(shí)，使其生效。生效后即可通過(guò)域名訪問(wèn)發(fā)布到效勞器上的了。這是將自己上傳效勞器綁定域名的根本步驟。結(jié)論通過(guò)這次做網(wǎng)頁(yè)的練習(xí)，讓我懂得了很多。以