網(wǎng)頁設(shè)計(jì) 論文格式

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

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

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