網(wǎng)頁(yè)制作課程設(shè)計(jì)報(bào)告

..網(wǎng)頁(yè)設(shè)計(jì)報(bào)告祖國(guó)六十年__3123420__趙佐權(quán)2012/12/16目錄一、設(shè)計(jì)目的3二、設(shè)計(jì)思想3三、網(wǎng)頁(yè)詳細(xì)設(shè)計(jì)分析4<1>建立布局4〔2網(wǎng)頁(yè)中的圖像4〔1在網(wǎng)頁(yè)中插入圖像4〔2圖像的各種屬性設(shè)置5〔3怎樣編輯網(wǎng)頁(yè)中的圖像6〔4使用背景圖像7〔5設(shè)置鏈接8四、網(wǎng)頁(yè)說明8五、總結(jié)10網(wǎng)頁(yè)設(shè)計(jì)試驗(yàn)報(bào)告一、設(shè)計(jì)目的本課程的設(shè)計(jì)目的是通過實(shí)踐使我經(jīng)歷Dreamweaver8開發(fā)的全過程和受到一次綜合訓(xùn)練,以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開發(fā)案例,理解并初步掌握運(yùn)用Dreamweaver8可視化開發(fā)工具進(jìn)行網(wǎng)頁(yè)開發(fā)的方法；了解網(wǎng)頁(yè)設(shè)計(jì)制作過程。我本次主要是設(shè)計(jì)的"祖國(guó)六十年"為主題的網(wǎng)頁(yè),針對(duì)祖國(guó)六十年的發(fā)展了介紹。二、設(shè)計(jì)思想利用Dreamweaver8制作一個(gè)關(guān)于"祖國(guó)六十年"的網(wǎng)站,利用表格、行為、層和鏈接等網(wǎng)頁(yè)設(shè)計(jì)技術(shù)設(shè)計(jì)頁(yè)面。本網(wǎng)站以新中國(guó)發(fā)展為素材,主要講解了與新中國(guó)變化相關(guān)的內(nèi)容。各網(wǎng)站鏈接示意圖如下所示：祖國(guó)六十年國(guó)情總覽祖國(guó)六十年國(guó)情總覽經(jīng)濟(jì)發(fā)展航天事業(yè)武器裝備人口增長(zhǎng)環(huán)境保護(hù)法律體系教育體系衛(wèi)生體系北京上海XX天津XX東方紅一號(hào)神州五號(hào)嫦娥一號(hào)神州八號(hào)天宮一號(hào)紅鳥導(dǎo)彈翼龍無人機(jī)L—15教練機(jī)99式坦克XX號(hào)三、網(wǎng)頁(yè)詳細(xì)設(shè)計(jì)分析<1>建立布局在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局,所以怎么樣建立布局是關(guān)鍵。Dreamweaver8是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱手兵器,也是眾多入門者的捷徑。特別是其在布局方面的出色表現(xiàn),更受青睞。大家都知道,沒有表格的幫助,很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面?！?網(wǎng)頁(yè)中的圖像〔1在網(wǎng)頁(yè)中插入圖像利用Dreamweaver8可以方便地在網(wǎng)頁(yè)中插入圖像,還可以設(shè)置圖像邊框、大小、和位置,并且可以直接對(duì)圖像進(jìn)行編輯。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)單：1.新建一個(gè)空白網(wǎng)頁(yè),把光標(biāo)定位在網(wǎng)頁(yè)的開始位置。2.打開"工具"菜單,選擇"圖片"菜單項(xiàng),在子菜單中選擇"來自文件"菜單項(xiàng),或者單擊工具欄中的圖片工具圖標(biāo),彈出一個(gè)"圖片"對(duì)話框。3.在此對(duì)話框中單擊"瀏覽"按鈕,出現(xiàn)一個(gè)"選擇文件"對(duì)話框。4.在"選擇文件"對(duì)話框的文件列表中選擇某個(gè)圖像文件,然后單擊"確定"按鈕,或直接雙擊該圖像文件,該圖像即被加入到網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)置了?！?圖像的各種屬性設(shè)置1.選中所插入的圖片,單擊鼠標(biāo)右鍵,彈出一個(gè)快捷菜單,在菜單中選擇"圖片屬性"菜單項(xiàng),出現(xiàn)一個(gè)"圖片屬性"對(duì)話框.2.打開"外觀"選項(xiàng)卡。<1>設(shè)定圖像邊框粗細(xì)：在"外觀"選項(xiàng)卡的"布局"欄里可以根據(jù)需要定義圖像的邊框,也可以定義邊框值為"0”<2>設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度,但有時(shí)需要將圖像和文字分開,且兩者互不影響。比如在網(wǎng)頁(yè)左邊插入一幅圖像,要求右邊的文字就像沒有圖像時(shí)可以多行輸入,這就要通過設(shè)置圖像的環(huán)繞方式來實(shí)現(xiàn)。在網(wǎng)頁(yè)中圖像的環(huán)繞方式有兩種：①左環(huán)繞：圖像在左邊,文本在圖像的右邊進(jìn)行環(huán)繞。②右環(huán)繞：圖像在右邊,文本在圖像的左邊進(jìn)行環(huán)繞。在"外觀"選項(xiàng)卡的"布局"欄中打開"對(duì)齊方式"下拉列表框,選擇"左"選項(xiàng),并單擊"確定"按鈕,圖像就被設(shè)置為左環(huán)繞方式,同樣,如果選"右",圖像就被設(shè)置為右環(huán)繞方式。<3>編輯圖像大?。涸贒reamweaver8中,當(dāng)在網(wǎng)頁(yè)中加入一幅圖像后,圖像大小默認(rèn)設(shè)置為其原來的大小,如果加入的圖像太大或太小,或有其他特別需要,就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡(jiǎn)單靈活,只要你選中加入的圖像,用鼠標(biāo)左鍵拖動(dòng)圖像邊框,可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。<4>設(shè)置圖像縮放比例：網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)重要原則就是網(wǎng)頁(yè)的兼容性,對(duì)于不同的瀏覽器或者不同的分辨率,不管是800×600的窗口,還是1024×768的窗口,網(wǎng)頁(yè)都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化,與瀏覽器的大小成一固定比例,這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：1.選中網(wǎng)頁(yè)中的圖像,單擊鼠標(biāo)右鍵,在彈出的快捷菜單里,選擇"圖像屬性"菜單項(xiàng),彈出一個(gè)"圖像屬性"對(duì)話框.2.在"大小"欄中選中"指定大小"復(fù)選框,同時(shí)選中"寬度"和"高度"下面的"百分比"單選按鈕,然后在"寬度"和"高度"欄里輸入想顯示的比例,單擊"確定"完成設(shè)置。外還可以在"外觀"選項(xiàng)卡的"水平間距"和"垂直間距"欄里進(jìn)行設(shè)置,水平間距是指圖像與周圍元素在水平方向的間距,以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距?！?怎樣編輯網(wǎng)頁(yè)中的圖像在Dreamweaver8中,可以使用"圖片"工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯,編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。另外,為了使圖片更符合要求,我們還在photoshop中對(duì)所用的圖片進(jìn)行了處理,使得圖片看起來更加精細(xì)美觀,符合我們的主題要求?！?使用背景圖像使用背景圖像與使用背景色不同,使用背景色只將網(wǎng)頁(yè)的背景用某種顏色填充,而使用背景圖像則是將網(wǎng)頁(yè)的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁(yè)更美觀好看。網(wǎng)頁(yè)中使用背景圖像的具體步驟如下：1.新建一個(gè)空白網(wǎng)頁(yè)。2.單擊鼠標(biāo)右鍵,彈出的快捷菜單里選"網(wǎng)頁(yè)屬性",彈出"網(wǎng)頁(yè)屬性"對(duì)話框.3.開"背景"選項(xiàng)卡。4.在"背景"選項(xiàng)卡的"格式"欄中選中"背景圖片"復(fù)選框,然后單擊下面的"瀏覽"按鈕,出現(xiàn)一個(gè)"選擇背景圖片"對(duì)話框。5.在"選擇背景圖像"對(duì)話框中單擊"瀏覽文件"按鈕,出現(xiàn)一個(gè)"選擇文件"對(duì)話框。6.在"選擇文件"對(duì)話框的文件列表中選擇圖像文件,單擊"確定"按鈕。這樣,所選圖片將作為整個(gè)網(wǎng)頁(yè)的背景,如果在第4步時(shí)同時(shí)選中"水印"復(fù)選框,背景圖片將顯示為特殊的水印效果,當(dāng)網(wǎng)頁(yè)滾動(dòng)時(shí),背景不動(dòng),只有網(wǎng)頁(yè)內(nèi)容滾動(dòng),產(chǎn)生一種透明層的效果,非常吸引人?！?設(shè)置鏈接選中圖片或者文字,在下面的鏈接屬性中輸入所要連接到的地址,同時(shí),下方的目標(biāo)屬性被激活,輸入blank設(shè)置成在新窗口中打開網(wǎng)頁(yè)。我們?cè)O(shè)置了鏈接本站點(diǎn)的網(wǎng)頁(yè)頁(yè)面,同時(shí)也連接了外網(wǎng),使得大家訪問頁(yè)面時(shí)能夠查詢更多詳細(xì)的信息,方便用戶查詢。四、網(wǎng)頁(yè)說明1.在首頁(yè)中分別連接在不同的網(wǎng)頁(yè)中友情鏈接,連接到與之對(duì)應(yīng)的網(wǎng)站,同時(shí)在其他網(wǎng)頁(yè)中也用同樣的作用.2在"國(guó)情總覽"網(wǎng)頁(yè)中,分別連接在本網(wǎng)頁(yè)的相應(yīng)位置不同欄目中不同的資料,通過點(diǎn)擊可以連接到本頁(yè)中的對(duì)應(yīng)位置3.在"經(jīng)濟(jì)發(fā)展"網(wǎng)頁(yè)中點(diǎn)擊后分別連接到五個(gè)地方經(jīng)濟(jì)發(fā)展的狀況4.在"航天事業(yè)"網(wǎng)頁(yè)中點(diǎn)擊后分別連接到在中國(guó)航天史上具有重要意義的時(shí)刻的敘述中5.在"武器發(fā)展"網(wǎng)頁(yè)中通過點(diǎn)擊可以進(jìn)入相關(guān)武器的介紹中去五、總結(jié)通過這次網(wǎng)頁(yè)課程設(shè)計(jì)激發(fā)學(xué)習(xí)興趣,調(diào)動(dòng)學(xué)習(xí)的自覺性,自己動(dòng)腦、動(dòng)手,動(dòng)口,運(yùn)用網(wǎng)絡(luò)資源,結(jié)合教材及老師的指導(dǎo),通過自身的實(shí)踐,創(chuàng)作出積聚個(gè)人風(fēng)格、個(gè)性的個(gè)人網(wǎng)頁(yè)?？傮w來說,整個(gè)學(xué)期的學(xué)習(xí)過程,我學(xué)會(huì)了很多知識(shí),在此次網(wǎng)頁(yè)設(shè)計(jì)中,我充分利用了這次設(shè)計(jì)的機(jī)會(huì),全心全意投入到網(wǎng)頁(yè)世界,去不斷的學(xué)習(xí),去不斷的探索；同時(shí)去不斷的充實(shí),去不斷的完善自我,在網(wǎng)絡(luò)的天空下逐漸的美化自己的人生！做好頁(yè)面,并不是一件容易的事,它包括個(gè)人主頁(yè)的選題、內(nèi)容采集整理、圖片的處理、頁(yè)面的排版設(shè)置、背景及其整套網(wǎng)頁(yè)的色