網頁設計 論文格式

PAGE1任務和要求1、動手制作網頁之前，必須認真做好網站的需求分析，策劃好網站的主題，規(guī)劃好網站的風格和結構，創(chuàng)建完善的目錄結構。主題要求積極健康，原創(chuàng)作品。2、制作網頁前，收集好所需的文字資料、圖像資料、flash動畫等素材。3、所創(chuàng)建的網站至少包括６個頁面，分為三層。４、不少于2400字。論文包括以下內容：封面網站規(guī)劃與設計作品制作過程總結參考文獻附范文一篇.(禁止照抄范文)

題目名稱“琴棋書畫”靜態(tài)網站姓名李林林學號李林林班級08級1班學院08級1班專業(yè)電子商務

目錄TOC\o"1-3"\h\z目錄 3一、網站規(guī)劃與設計 4二、本站點的實現步驟及網頁介紹 72.1創(chuàng)建站點 72.2建web頁面頁面分別介紹 82.3完善鏈接 21三、結論與心得 21參考文獻 24一、網站規(guī)劃與設計1.1網站規(guī)劃：利用Dreamweaver8.0制作一個關于“琴棋書畫”的網站，利用表格、層和鏈接等網頁設計技術設計頁面，涉及到的軟件有Dreamweaver8、Flash8、Fireworks8操作環(huán)境為Windows2000/XP/win7操作系統。1.2網站結構1.2.1網站整體設計本網站以琴棋書畫為素材，主要講解了與琴棋書畫相關的內容。首頁設古琴頻道、圍棋頻道、書法頻道、國華頻道四個欄目。古琴頻道下設8各欄目，總共包括24個鏈接頁面，圍棋頻道下設4各欄目總共包括8個鏈接頁面，書法頻道下設4各欄目總共包括8個鏈接頁面，國畫頻道下設4各欄目總共包括8個鏈接頁面。具體結構如圖1.1所示。網頁1-48分別為：1-琴(置琴曲幾上)2-琴(客來鳴素琴)3-琴(名士竹林隈)4-舜奏《南風》治天下5-《高山流水》話話知音6-刺客與《廣陵散》7-重振浙派第一人論古琴家徐元白的成就與貢獻8-聆聽劉景韶先生9-憶著名古琴家高仲鈞先生與我的琴緣貓緣10-琴史略述11-現代琴人12-古琴發(fā)展簡略13-終南書院古琴社14-四川大學古琴社15-九竹琴社16-陰陽學說與古琴制作17-歷代古琴形制18-斲琴隨筆19-我國現存最早的古琴譜——《碣石調·幽蘭》20-一首相當古老的琴曲——《廣陵散》21-一種文人的精神和品格——《離騷》22-古琴演奏家區(qū)君虹23-古琴演奏家劉揚24-斲琴名家張玉新25-圍棋著述26-《天龍八步》與珍瓏27-廣州亞運會韓國選拔賽落幕姜東潤獲最后一個出線名額28-TOM冠軍戰(zhàn)“劍無形”奪冠直接升段9段組比賽8日晚開戰(zhàn)29-中國圍棋規(guī)則（2002）30-應氏圍棋規(guī)則31-圍棋禮儀與弈德33-鐘繇34-王羲之35-書法作品落款基本常識36-書法術語37-王羲之·自論書38-成公綏·隸書體39-吳昌碩拜師40-齊白石41-吳冠中42-鄭板橋巧諷和尚43-古字畫鑒賞44-書畫折扇扇面如何真假辨識45-文房四寶知識46-石刻治硯——通古齋47-蘭亭書畫研究院48-西泠印社圖1.11．2.3網站的開發(fā)流程具體步驟：（1）設計網站主題、內容、結構（2）素材準備（3）創(chuàng)建站點（4）創(chuàng)建網頁，調整網頁布局，添加網頁內容并為網頁添加鏈接（5）網站測試、預覽并發(fā)布站點二、本站點的實驗步驟及網頁介紹2.1創(chuàng)建站點打開Dreamweaver8.0，選擇菜單欄中的“站點”|“新建站點”命令，出現“站點定義為”窗口如圖2.1所示，在“高級”選項卡中命名站點名稱myweb選擇默認圖像文件夾img單擊“確定”，站點即創(chuàng)建成功。圖2.12.2建web頁面頁面分別介紹2．2.1創(chuàng)建mycssCSS樣式圖2.2編輯代碼具體為：.導航字體1{ font-family:"華文行楷"; font-size:20px; color:#660000;}.table1{ border:1pxsolid#006600;}.table2{ border:1pxdashed#669966;}.導航字體2{ font-family:"隸書"; font-size:18px; color:#663300; font-weight:normal;}.導航字體3{ font-family:"隸書"; font-size:16px; color:#400000; font-weight:bold;}.文章標題{ font-family:"隸書"; font-size:20px; font-weight:bold; color:#000000;}body{ background-image:url(img/back.jpg);}a:link{ color:#663300;}a:visited{ color:#666633;}a:active{ color:#CC0000;}.．正文字體{ font-size:18px; color:#000066; font-family:"華文新魏"; line-height:normal;}.導航字體4{ font-family:"隸書"; font-size:18px; color:#FF0000;}2．2.2創(chuàng)建首頁“琴棋書畫”index.html預覽效果如圖2.3圖2.3首先，導入mycss樣式。選擇插入面板組中的“常用”|“表格”按鈕，在空白頁面中依次插入2*5、1*1、1*1的表格，分別命名為“導航表格”、“正文表格”、“版權表格”。對“導航表格”的操作：選中導航表格，在“屬性”面板中設置其屬性，寬設為100%，高設為120px，對齊方式為居中對齊，類選擇“.table1”,邊框為0，背景顏色為#339900。選中第1行五個單元格，在“屬性”面板中選擇“合并單元格”按鈕，將單元格合并，將光標定位于“導航表格”第一行，選擇插入面板組中的“常用”|“圖像”按鈕，插入圖片“導航.jpg”，單擊圖片，在“屬性”面板中單擊編輯中的“裁剪”按鈕對圖片進行裁剪，裁剪完成后，將圖片的寬設置為100%，高設置為120px。在其第2行的后四個單元格中分別插入文本“古琴頻道”“圍棋頻道”“書法頻道”“國畫頻道”，居中對齊，選擇其樣式為“導航字體1”。對“正文表格”的操作：選中正文表格，在屬性面板中設置其屬性，寬設為100%，對齊方式為居中對齊，類選擇“.table1”，邊框為0。將光標定位于左側單元格中，選擇插入面板組中的“常用”|“表格”按鈕，插入一個9*1的表格，命名為“推薦閱讀”，在屬性面板中將其寬設為100%，對齊方式設置為居中對齊，類選擇“.table2”，邊框為0。將光標定位于右側單元格中，選擇插入面板組中的“常用”|“表格”按鈕，插入一個2*2的表格，命名為“正文內部”，在屬性面板中將其寬設為100%，對齊方式設置為居中對齊，邊框為0。對“推薦閱讀”的操作：將光標定位于表格“推薦閱讀”的第1行，在屬性面板中設置其背景圖像為“img/lefttitlebg.gif”，在該單元格中輸入文本“推薦閱讀”，字體設置為“隸屬”，大小為18px,顏色為#FFCCCC。選擇“推薦閱讀”的2-8行，在屬性面板中設置其字體樣式為“導航字體3”，并在第2-7分別插入文本“琴史略述”“《天龍八步》與珍瓏”“《高山流水》話話知音”“書法作品落款基本常識”“石刻治硯——通古齋”。將光標定位于表格“推薦閱讀”的第9行，選擇插入面板組中的“常用”|“表格”按鈕，插入一個4*2的表格，命名為“友情鏈接”，在屬性面板中將其寬設為100%，對齊方式設置為居中對齊，類選擇“.table2”，邊框為0。對“友情鏈接”的操作：選中其第1行兩個單元格，在“屬性”面板中選擇“合并單元格”按鈕，將兩單元格合并，并在屬性面板中設置其背景圖像為“img/lefttitlebg.gif”。將光標定位于第1行單元格內，選擇插入面板組中的“常用”|“圖像”按鈕，插入“友情鏈接.gif”。選擇“友情鏈接”的其他單元格，在屬性面板中設置其字體樣式為“導航字體3”，單元格水平對齊方式為“居中對齊”，在單元格中分別插入“琴箏藝術網”“古箏的空間”“琴棋書畫導航”“中國書法展”“云子圍棋網”“中國畫家網”，并在屬性面板鏈接選項中設置其相應的外部鏈接。對“正文內部”的操作：將光標定位與表格“正文內部”左上單元格，選擇插入面板組中的“常用”|“表格”按鈕，插入一個3*1的表格，命名為“古琴頻道”，在屬性面板中將其寬設為100%，對齊方式設置為居中對齊，邊框為0。光標定位于“古琴頻道”的第1行單元格內，在屬性面板中設置其屬性，單元格對齊方式為“居中對齊”，樣式選擇“導航字體2”，背景顏色#99CC66，插入文本“古琴頻道”。將光標定位于表格“古琴頻道”的第2行單元格中，設置其單元格對齊方式為“居中對齊”，在菜單欄中選擇“插入”|“媒體”|“圖像查看器”插入一個圖像查看器，設置其屬性為寬150高150，在其參數選項中單擊imagesURLs設置其源文件，設置參數showControls為“否”，參數slideAutoPlay為“是”，slideLoop為“是”。將光變定位于“古琴頻道”表格的第3行，將單元格的水平對齊方式為“右對齊”，樣式選擇“導航字體3”，插入文本“進入古琴頻道”。在“正文內部”的其他三個單元格中插入同樣的表格，分別命名為“圍棋頻道”、“書法頻道”、“國畫頻道”，操作與“古琴頻道”相同。對“版權表格”的操作：在屬性面板中設置其單元格水平對齊方式為“居中對齊”在菜單欄中選擇“插入”|“HTML”|“水平線”插入一條水平線。輸入文本“版權所有青島大學軟件技術學院”“更新日期”，設置其大小為12px,顏色為#003300。將光標定位于文本“版權所有”后，在菜單欄中選擇“插入”|“HTML”|“特殊字符”|“版權”插入版權符號，將光標定位于文本“更新日期”后，，在菜單欄中選擇“插入”|“日期”當前日期。層的應用：首頁中共包括了4個層分別為Layer1、Layer2、Layer3、Layer4。對Layer1的操作：在導航表格的左上角繪制層Layer1，在屬性面板中設置其位置(左21px上18px)大?。▽?20px高90px）。將光標定位于層中，輸入文本“琴”，設置其大小為80px顏色為#400000，再輸入文本“棋書畫”設置其大小為40px顏色為#400000。對Layer2的操作：用于插入背景音樂。在導航表格處繪制層Layer2設置其大?。▽?7px高59px）。將光標定位于層中，在菜單欄中選擇“插入”|“媒體”|“插件”插入一個插件，在屬性面板中選擇其源文件為“高山流水.mp3”對Layer3的操作：在導航表格的左上角繪制層Layer3，在屬性面板中設置其位置(左391px上18px)大?。▽?62px高108px）。將光標定位于層中，在菜單欄中選擇“插入”|“媒體”|“Flash”插入一個Flash，設置其參數wmode為transparent。對Layer4的操作：在“正文表格”的左上角繪制層Layer4，在屬性面板中設置其位置(左10px上156px)大?。▽?9px高100px）背景顏色設置為#FFFF00，將光標定位于層中輸入文本“聯系我們”設置其大小為18px。2．2.3創(chuàng)建“琴棋書畫”新建一個html，命名為“琴棋書畫”。首先，導入mycss樣式。選擇插入面板組中的“常用”|“表格”按鈕，在空白頁面中依次插入2*5、2*2、1*1的表格，分別命名為“導航表格”、“正文表格”、“版權表格”。對“導航表格”的操作：選中導航表格，在“屬性”面板中設置其屬性，寬設為100%，高設為120px，對齊方式為居中對齊，類選擇“.table1”,邊框為0，背景顏色為#339900。選中第1行五個單元格，在“屬性”面板中選擇“合并單元格”按鈕，將單元格合并，將光標定位于“導航表格”第一行，選擇插入面板組中的“常用”|“圖像”按鈕，插入圖片“導航.jpg”，單擊圖片，在“屬性”面板中單擊編輯中的“裁剪”按鈕對圖片進行裁剪，裁剪完成后，將圖片的寬設置為100%，高設置為120px。在其第2行的五個單元格中分別插入文本“首頁”“古琴頻道”“圍棋頻道”“書法頻道”“國畫頻道”，居中對齊，選擇其樣式為“導航字體1”。對“正文表格”的操作：選中正文表格，在屬性面板中設置其屬性，寬設為100%，對齊方式為居中對齊，類選擇“.table1”，邊框為0。將光標定位于左側第1行單元格中，選擇插入面板組中的“常用”|“表格”按鈕，插入一個7*1的表格，命名為“推薦閱讀”，在屬性面板中將其寬設為100%，對齊方式設置為居中對齊，類選擇“.table2”，邊框為0。將光標定位于左側第2行單元格中，選擇菜單欄中“插入”|“模板對象”|“可編輯區(qū)域”創(chuàng)建一個可編輯區(qū)域命名為“圖像”。選中右側的兩個單元格，在“屬性”面板中選擇“合并單元格”按鈕，將兩單元格合并。將光標定位于右側單元格中，選擇插入面板組中的“常用”|“表格”按鈕，插入一個1*2的表格，命名為“正文內部”，在屬性面板中將其寬設為100%，對齊方式設置為居中對齊，邊框為0。對“推薦閱讀”表格的操作：將光標定位于表格“推薦閱讀”的第1行，在屬性面板中設置其背景圖像為“img/lefttitlebg.gif”，在該單元格中輸入文本“推薦閱讀”，字體設置為“隸屬”，大小為18px,顏色為#FFCCCC。選中“推薦閱讀”的2-8行，在屬性面板中設置其字體樣式為“導航字體3”，單元格對齊方式設置為“水平對齊”，選擇菜單欄中“插入”|“模板對象”|“可編輯區(qū)域”創(chuàng)建一個可編輯區(qū)域命名為“推薦閱讀”。對“正文內部”表格的操作：將光標定位于表格“正文內部”的左側單元格中，選擇插入面板組中的“常用”|“表格”按鈕，插入一個4*1的表格，命名為“內容1”，在屬性面板中設置其屬性，寬100%，對齊方式為“居中對齊”。將光標定位于表格“內容1”的第1行，在屬性面板中設置其屬性，樣式為“導航字體2”，單元格對齊方式為“居中對齊”，背景顏色為#99CC66，選擇菜單欄中“插入”|“模板對象”|“可編輯區(qū)域”創(chuàng)建一個可編輯區(qū)域命名為“內容標題”。選中表格“內容1”的2-4行，設置其對齊方式為“居中對齊”，選擇菜單欄中“插入”|“模板對象”|“可編輯區(qū)域”創(chuàng)建一個可編輯區(qū)域命名為“內容1”。在表格“正文內部”的右側單元格中插入與“內容1”相同屬性設置的表格“內容2”，并在表格“內容2”里設置同樣的可編輯區(qū)域。選中表格“正文內部”，選擇菜單欄中“插入”|“模板對象”|“重復區(qū)域”創(chuàng)建一個重復區(qū)域。對“版權表格”的操作：在屬性面板中設置其單元格水平對齊方式為“居中對齊”在菜單欄中選擇“插入”|“HTML”|“水平線”插入一條水平線。輸入文本“版權所有青島大學軟件技術學院”“更新日期”，設置其大小為12px,顏色為#003300。將光標定位于文本“版權所有”后，在菜單欄中選擇“插入”|“HTML”|“特殊字符”|“版權”插入版權符號，將光標定位于文本“更新日期”后，，在菜單欄中選擇“插入”|“日期”當前日期。層的應用：包括了兩個層Layer1、Layer2。對Layer1的操作：在導航表格的左上角繪制層Layer1，在屬性面板中設置其位置(左21px上18px)大?。▽?20px高90px）。將光標定位于層中，輸入文本“琴”，設置其大小為80px顏色為#400000，再輸入文本“棋書畫”設置其大小為40px顏色為#400000。對Layer2的操作：用于插入背景音樂。在導航表格處繪制層Layer2設置其大?。▽?7px高59px）。將光標定位于層中，選擇菜單欄中“插入”|“模板對象”|“可編輯區(qū)域”創(chuàng)建一個可編輯區(qū)域命名為“背景音樂”。整體效果如圖2.3所示圖2.32．2.4創(chuàng)建“古琴頻道”、“圍棋頻道”、“書法頻道”、“國畫頻道”web頁利用“琴棋書畫”模板創(chuàng)建“古琴頻道”（guqin-pindao.html）、“圍棋頻道”（weiqi-pindao）、“書法頻道”（shufa-pindao.html）、“國華頻道”（guohua-pindao.html）。下面以創(chuàng)建“圍棋頻道”舉例說明：新建一個html頁面，命名為“weiqi-pindao.html”。在“資源”面板中，拖動昂以創(chuàng)建好的模板“琴棋書畫1”到空白html頁面中，將光標定位于可編輯區(qū)域“推薦閱讀”中，在單元格中分別輸入“圍棋著述”“廣州亞運會韓國選拔賽落幕姜東潤獲最后一個出線名額”“《天龍八步》與珍瓏”“圍棋禮儀與弈德”。將光標定位于可編輯區(qū)域“圖像”中，在菜單欄中選擇“插入”|“媒體”|“圖像查看器”插入一個圖像查看器，設置其屬性為寬150px高150px，在其參數選項中單擊imagesURLs設置其源文件，設置參數showControls為“否”，參數slideAutoPlay為“是”，slideLoop為“是”。將光標定位于可編輯區(qū)域“背景音樂”中，在菜單欄中選擇“插入”|“媒體”|“插件”插入一個插件，在屬性面板中選擇其源文件為“平沙落雁.mp3”,設置其參數autostart為true。將光標定位于可編輯區(qū)域“內容標題”中輸入文本“圍棋文化”。將光標定位于可編輯區(qū)域“內容標題2”中輸入文本“圍棋新聞”。將光標定位于可編輯區(qū)域“內容1”中在單元格中分別輸入文本“圍棋著述”、“《天龍八步》與珍瓏”，對可編輯區(qū)域“內容2”預覽效果如圖2.4所示圖2.42．2.7創(chuàng)建三級頁面由于頁面相似就不一一說明，下面以創(chuàng)建“琴史略述”（琴史略述.html）具體說明：新建一個html頁面，命名為“琴史略述.html”。在“資源”面板中，拖動昂以創(chuàng)建好的模板“古琴-正文”到空白html頁面中。將光標定位可編輯區(qū)域“文章標題”中輸入文本“琴史略述”，將光標定位可編輯區(qū)域“正文內容”中將準備好的文章復制進去。預覽效