【正文】 .............. 30 致謝 ...........................................................................................................................31 參考文獻(xiàn) ..................................................................................................................32 附錄 ...........................................................................................................................34 黃岡職業(yè)技術(shù)學(xué)院 8 第一章 緒論 研究背景 在 Inter 飛速發(fā)展的今天，電子數(shù)字計(jì)算機(jī)是 20 世紀(jì)重大科技發(fā)明之一，而互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各 個(gè)方面發(fā)揮著重要的作用。為了讓更 多人 更容易的搜索到更多的健康的美食食譜。 為了方便人們對(duì)美食的搜索，由此我就設(shè)計(jì)了一個(gè)美食網(wǎng)。 希望給各位愛(ài)好美食的人帶來(lái)方便。 其中主要包括網(wǎng)站研究的背景和網(wǎng)站研究的內(nèi)容。 其中主要包括設(shè)計(jì)網(wǎng)站的代碼和網(wǎng)站的效果圖。 第五章，對(duì)全 文 做了一個(gè)小小的總結(jié) ， 并 對(duì)以后 指出了進(jìn)一步的研究方向 。 一個(gè)網(wǎng)站的成功與否與建設(shè)前的網(wǎng)站規(guī)劃有著極其重要的關(guān)系，只有進(jìn)行詳細(xì)的規(guī)劃，才能避 免在網(wǎng)站建設(shè)中出現(xiàn)的許多問(wèn)題，使網(wǎng)站建設(shè)能順利進(jìn)行。也是將網(wǎng)站設(shè)計(jì)師的圖片用 HTML 方式展示出來(lái)，屬于前臺(tái)工程師的一項(xiàng)任務(wù)，前臺(tái)工程師任務(wù)包括： 網(wǎng)站設(shè)計(jì)、網(wǎng)站用戶體驗(yàn)、網(wǎng)站 JAVA 效果、網(wǎng)站制作等工作。但是一般來(lái)說(shuō)自己選擇的題材最好是自己擅長(zhǎng)的或者喜愛(ài)的內(nèi)容，因?yàn)檫@樣在制作時(shí)才不會(huì)覺(jué)得力不從心。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、 文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁(yè)之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。 黃岡職業(yè)技術(shù)學(xué)院 12 第 三 章 網(wǎng)站的制作過(guò)程 網(wǎng)站主頁(yè)就好象是宣傳欄或者店面 —— 對(duì)訪問(wèn)者產(chǎn)生第一印象，都希望盡量給人留下好的印象。你當(dāng)然也可以創(chuàng)造出自己的設(shè)計(jì)方案，但如果你是初學(xué)者，那么最好明白網(wǎng)頁(yè)布局的基本概念。 瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。如果需要在同一頁(yè) 面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪問(wèn)者瀏覽。 黃岡職業(yè)技術(shù)學(xué)院 13 （ 3） 頁(yè)頭 頁(yè)頭又可稱之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。頁(yè)頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。 （ 5） 頁(yè)腳 頁(yè)腳和頁(yè)頭相呼應(yīng)。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。并且所使用的圖片要接近網(wǎng)頁(yè)的主題，不可以以難用。 網(wǎng)頁(yè)布局的方法 網(wǎng)頁(yè)布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。 Photoshop 所具有的對(duì)圖像的 編輯功能用到設(shè)計(jì)網(wǎng)頁(yè)布局上更顯得心應(yīng)手。就如我的網(wǎng)頁(yè)用繪圖軟件繪制為 黃岡職業(yè)技術(shù)學(xué)院 15 網(wǎng)站首頁(yè)設(shè)計(jì) 在此網(wǎng)站的首頁(yè)我們可以看到許多美食的食譜，還有許多美麗的圖片。 網(wǎng)站的導(dǎo)航包含有八個(gè)選項(xiàng)分別是首、秀色可餐、吃出美麗、家常菜譜、休閑食品等。 網(wǎng)站的上部分 網(wǎng)站的上部分由左、中、右三部分組成。 /p 黃岡職業(yè)技術(shù)學(xué)院 18 p 將香菇洗凈切片，碼在碗底，上面放入腌制好的翅根，大火蒸半個(gè)小時(shí)即可。此圖片組由十一張圖片組成，在一個(gè)頁(yè)面里循環(huán)的流動(dòng)。 HEIGHT:150px table width=100% border=0 align=left cellpadding=0 cellspacing=0 tr td id=demo1TABLE cellSpacing=5 cellPadding=0 border=0 TBODY TR TD align=middleA href= target=_blankimg height=150 src=images/fengjing/ width=140 border=0 //ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= 黃岡職業(yè)技術(shù)學(xué)院 22 target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= target=_blankimg height=150 src=images/fengjing/ width=140 border=0 //ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 黃岡職業(yè)技術(shù)學(xué)院 23 border=0/ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD /TR /TBODY /TABLE/td td id=demo2/td /tr /table /div /TR/TBODY/TABLE /div SCRIPT language=javascript var speed=30 = function Marquee(){ if(=0) = 黃岡職業(yè)技術(shù)學(xué)院 24 else{ ++ } } var MyMar=setInterval(Marquee,speed) =function() {clearInterval(MyMar)} =function() {MyMar=setInterval(Marquee,speed)} /SCRIPT 網(wǎng)站頁(yè)尾的設(shè)計(jì) 網(wǎng)站的頁(yè)尾主要是由一些友情鏈接和一些聯(lián)系方式組成。其中以圖文結(jié)合的方法介紹了《美食天下》首頁(yè)的制作，把首頁(yè)的代碼和效果圖一同展示了出來(lái)。 （ 2） 巧妙設(shè)置分辨率 在制作網(wǎng)站時(shí)，有時(shí)會(huì)發(fā)現(xiàn)，制作好的網(wǎng)頁(yè)在本地計(jì)算機(jī)上瀏覽時(shí)很正常，但在另外一臺(tái)計(jì)算機(jī)上瀏覽時(shí)卻發(fā)現(xiàn)網(wǎng)頁(yè)的布局亂套了，這是因?yàn)楦鱾€(gè)計(jì)算機(jī)的分辨率不同所致。 （ 4） 怎樣僅僅復(fù)制文字而不想要其格式？ 當(dāng)從 Dreamweaver 中復(fù)制文字到另一個(gè)應(yīng)用程序中時(shí)， HTML 代碼和文字一起被復(fù)制過(guò)去了。但如果不想顯示時(shí)，也可以隱藏標(biāo)簽，方法是按【 Ctrl＋ U】鍵打開(kāi)【首選參數(shù)】對(duì)話框，在【分類】中選中【不可見(jiàn)元素】，在面板的右邊將會(huì)出現(xiàn)所有的元素標(biāo)簽。如果將同一格式屬性指定給兩個(gè)或更多文本元素， Dreamweaver 將使用相同的標(biāo)題標(biāo)記這些元素，消除冗余的樣式名稱。解決的方法有以下幾種。 （ 9） 為什么在 Dreamweaver 中按 Enter 鍵換行時(shí)，與上一行的距離卻很大？ 在 Dreamweaver 中按 Enter 鍵換行時(shí)，與上一行的距離卻很遠(yuǎn)這是因?yàn)榘聪翬nter 鍵時(shí)默認(rèn)的是一個(gè)段落，而不是一般的單純的換行所造成的。如果不用這些字體系列，就需要自己編輯字體系列，可以通過(guò)下拉列表最下面的【編輯字體列表】來(lái)創(chuàng)建的字體系列，也可以直接在下拉列表中輸入字體名，字體之間用逗號(hào)隔開(kāi)，中文網(wǎng)頁(yè)默認(rèn)字體是宋體，一般空著，不要選擇任何字體。 （ 13） 解決跳轉(zhuǎn)菜單可能出現(xiàn)的問(wèn)題 選擇跳轉(zhuǎn)菜單項(xiàng)后，如果再次導(dǎo)航回到該頁(yè)面，或者如果在【插入跳轉(zhuǎn)菜單】對(duì)話框的【打開(kāi) URL 于】文本框中指定了一個(gè)框架，則無(wú)法重新選擇此菜單項(xiàng)。 需要注意的是：由于這些選項(xiàng)應(yīng)用于整個(gè)跳轉(zhuǎn)菜單，因此在【插入跳轉(zhuǎn)菜單】對(duì)話框中， 每個(gè)跳轉(zhuǎn)菜單只能選擇這些選項(xiàng)中的一項(xiàng)。對(duì)于已經(jīng)在網(wǎng)頁(yè)中的圖像也是一樣，直接拖過(guò) 來(lái)即可，但如果被拖動(dòng)的圖