網頁制作課程設計報告

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