《蘋果公司》網(wǎng)頁(yè)設(shè)計(jì)與制作

1、課 程 設(shè) 計(jì) 報(bào) 告 書題目： 蘋果公司網(wǎng)頁(yè)設(shè)計(jì)與制作 二級(jí)學(xué)院數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院年級(jí)專業(yè)2012級(jí)計(jì)算機(jī)網(wǎng)絡(luò)學(xué) 號(hào)學(xué)生姓名指導(dǎo)教師教師職稱講師 新余學(xué)院課程設(shè)計(jì)（論文）任務(wù)書二級(jí)學(xué)院： 學(xué) 號(hào)1202010002學(xué)生姓名董帥專業(yè)（班級(jí)）12計(jì)網(wǎng)設(shè)計(jì)題目蘋果公司網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)與制作設(shè)計(jì)技術(shù)參數(shù)以Dreamweaver為開(kāi)發(fā)工具，采用css為主要手段的網(wǎng)站開(kāi)發(fā)技術(shù)。具體內(nèi)容包括：Html、Dreamweaver操作、css層疊樣式表，javaScript腳本。設(shè)計(jì)要求本課程設(shè)計(jì)的目的是為了讓學(xué)生掌握一個(gè)完整網(wǎng)站的制作過(guò)程，并熟練運(yùn)用網(wǎng)頁(yè)制作的各種技術(shù)并學(xué)會(huì)使用div+css設(shè)計(jì)并開(kāi)發(fā)制作出一個(gè)

2、符合web2.0標(biāo)準(zhǔn)的網(wǎng)站。具體任務(wù)和要求如下：（一） 任務(wù)自選網(wǎng)站內(nèi)容，可參考如下主題: 科普、科幻知識(shí)；公益形象宣傳；大、中、小學(xué)教學(xué)用動(dòng)畫形象；奧林匹克體育；環(huán)境保護(hù)；戰(zhàn)爭(zhēng)與和平；求職；校園生活；誠(chéng)信、傳統(tǒng)美德；交通安全；衛(wèi)生與健康；愛(ài)心；教育；新青年；管理；實(shí)用工具等，根據(jù)選擇的內(nèi)容制作一個(gè)完整的網(wǎng)站。（二）要求1. 整個(gè)網(wǎng)站要突出主題，信息分類合理，導(dǎo)航清晰。2. 合理規(guī)劃站點(diǎn)和目錄，首頁(yè)文件名為index.html。3. 用div+css布局。用css美化網(wǎng)頁(yè)中的各個(gè)元素。適當(dāng)運(yùn)用動(dòng)畫和javaSript腳本，自己處理圖片和背景。4. 二級(jí)頁(yè)面風(fēng)格統(tǒng)一，所有的css樣式統(tǒng)一以文件的

3、形式保存，以鏈接的方式加載到Html文檔，以實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)和形式的分離。工作量1. 獨(dú)立完成整個(gè)網(wǎng)站；2. 網(wǎng)站至少7-8個(gè)頁(yè)面；3. 完成課程設(shè)計(jì)報(bào)告的書寫。工作計(jì)劃整個(gè)工作分5個(gè)部分完成：1.網(wǎng)站內(nèi)容的確定和整體規(guī)劃（3學(xué)時(shí)）根據(jù)自己的興趣愛(ài)好，選定一個(gè)主題。然后準(zhǔn)備相關(guān)的文字和圖片資料；確定網(wǎng)站的目錄結(jié)構(gòu)。2.進(jìn)行素材收集和整理（3學(xué)時(shí)）用ps或Firworks制作網(wǎng)站首頁(yè)的效果圖。3網(wǎng)站的制作（5學(xué)時(shí)）首先制作首頁(yè)，再制作各個(gè)二級(jí)頁(yè)面。4網(wǎng)站的測(cè)試（2學(xué)時(shí)）測(cè)試網(wǎng)站鏈接，精簡(jiǎn)樣式文件。5書寫課程設(shè)計(jì)報(bào)告書（2學(xué)時(shí)）將設(shè)計(jì)思路、制作過(guò)程、技術(shù)要點(diǎn)和特色說(shuō)明以報(bào)告書的形式書寫出來(lái)。參考資料1

4、. 袁磊.網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程M.清華大學(xué)出版社，2008.23-29，167-210.2. 黃斯偉.HTML完全使用詳解M.人民郵電出版社，2006.55-79.3. 李燁.別具光芒DIV+CSS網(wǎng)頁(yè)布局與美化M.人民郵電出版社，2006.120-150.4. 李超.CSS網(wǎng)站布局實(shí)錄M.科學(xué)出版社，2006.67-99.5. 賈素玲等.JavaScript程序設(shè)計(jì)M.清華大學(xué)出版社，2007.167-180.指導(dǎo)教師簽字教研室主任簽字說(shuō)明：此表一式叁份，學(xué)生、指導(dǎo)教師、二級(jí)學(xué)院各一份。2013年 6 月 18 日 iv目 錄第1章 課程設(shè)計(jì)概述1第2章 網(wǎng)站設(shè)計(jì)方案說(shuō)明32.1 需求分析

5、32.2 網(wǎng)站布局類型和配色方案的確定32.3 網(wǎng)站整體規(guī)劃52.4 素材的收集和整理5第3章 網(wǎng)站制作73.1創(chuàng)建站點(diǎn)73.2創(chuàng)建樣式表文件73.3頁(yè)面制作9第4章 主要技術(shù)特點(diǎn)和特色說(shuō)明13第5章 課程設(shè)計(jì)總結(jié)15蘋果公司網(wǎng)頁(yè)設(shè)計(jì)與制作第1章 課程設(shè)計(jì)概述本課程設(shè)計(jì)主要是利用已經(jīng)學(xué)習(xí)的網(wǎng)頁(yè)設(shè)計(jì)與制作知識(shí)和初步掌握的網(wǎng)頁(yè)開(kāi)發(fā)工具如Dreamweaver、Photoshop等軟件為蘋果公司設(shè)計(jì)并實(shí)現(xiàn)一個(gè)公司網(wǎng)站。根據(jù)老師的要求及指導(dǎo)，我設(shè)計(jì)了此網(wǎng)站。此網(wǎng)站屬于小型網(wǎng)站，網(wǎng)站以蘋果公司原網(wǎng)站為依托，按照原網(wǎng)站配色方案和表面結(jié)構(gòu)以DIV+CSS的方式仿制，蘋果公司（Apple Inc.）是美國(guó)的一

6、家高科技公司，2007年由蘋果電腦公司（Apple Computer, Inc.）更名而來(lái)，核心業(yè)務(wù)為電子科技產(chǎn)品，總部位于加利福尼亞州的庫(kù)比蒂諾。蘋果公司由史蒂夫·喬布斯、斯蒂夫·沃茲尼亞克和Ron Wayn在1976年4月1日創(chuàng)立，在高科技企業(yè)中以創(chuàng)新而聞名，知名的產(chǎn)品有Apple II、Macintosh電腦、Macbook筆記本電腦、iPod音樂(lè)播放器、iTunes商店、iMac一體機(jī)、iPhone手機(jī)和iPad平板電腦等。2012年8月21日，蘋果成為世界市值第一的上市公司。本網(wǎng)站的主要功能是提供豐富、清晰的公司信息和資源，主要包括iphone、ipad、ipod

7、、Mac、itunes等硬件產(chǎn)品以及iOS、Mac OS和APP應(yīng)用軟件等軟件產(chǎn)品的全方位展示和介紹；通過(guò)在線商店網(wǎng)頁(yè)為顧客和公司提供購(gòu)買和銷售蘋果產(chǎn)品的便利通道；通過(guò)技術(shù)支持網(wǎng)頁(yè)為產(chǎn)品購(gòu)買者提供維修服務(wù)和支持范圍。設(shè)計(jì)者希望通過(guò)清新簡(jiǎn)潔，賞心悅目的外觀設(shè)計(jì)給予客戶和顧客以舒適的網(wǎng)頁(yè)瀏覽體驗(yàn)。網(wǎng)站充分展示公司提供的產(chǎn)品及設(shè)計(jì)理念和售后服務(wù)能力，注重推廣公司各方面形象。以公司的宣傳推廣和將網(wǎng)站瀏覽者吸引成為公司的客戶作為網(wǎng)站的目標(biāo)。堅(jiān)持嚴(yán)謹(jǐn)、負(fù)責(zé)、創(chuàng)新的態(tài)度為消費(fèi)者提供展示蘋果公司完美產(chǎn)品和周邊設(shè)備的個(gè)性化頁(yè)面，不斷創(chuàng)新變革助力科技進(jìn)步和公司前進(jìn)。此外，這不僅是為了肩負(fù)學(xué)生的責(zé)任而去完成老師交給

8、我的任務(wù)，更是對(duì)過(guò)去學(xué)習(xí)的知識(shí)的溫習(xí)鞏固，是一個(gè)把理論轉(zhuǎn)化為實(shí)踐的過(guò)程，是一個(gè)把自己的設(shè)計(jì)思想轉(zhuǎn)化為實(shí)物的過(guò)程，是一個(gè)發(fā)揮自己創(chuàng)造力和想象力的過(guò)程。再者，這是對(duì)自己在一學(xué)期內(nèi)該學(xué)習(xí)科目以來(lái)的成果的檢查，這是一個(gè)自我審視的過(guò)程：檢測(cè)我該學(xué)期的學(xué)習(xí)成果，衡量一期以來(lái)的收獲，更為重要的是揚(yáng)長(zhǎng)避短，發(fā)現(xiàn)自己的問(wèn)題與缺點(diǎn)，使自己及時(shí)改正，發(fā)覺(jué)自身的優(yōu)點(diǎn)和長(zhǎng)處并堅(jiān)持發(fā)揚(yáng)，有利于我以后的學(xué)習(xí)和發(fā)展。加強(qiáng)老師和同學(xué)們對(duì)我的認(rèn)識(shí)，深化我們大家的情誼，有利于以后在學(xué)習(xí)、工作生活當(dāng)中的團(tuán)結(jié)協(xié)作。17第2章 網(wǎng)站設(shè)計(jì)方案說(shuō)明2.1 需求分析對(duì)公司網(wǎng)站目標(biāo)用戶進(jìn)行分析，得出結(jié)論用戶主要包括以下幾方面的需求（即希望從網(wǎng)站

9、獲取的信息）：1）公司產(chǎn)品的介紹；2）公司產(chǎn)品的設(shè)計(jì)；3）消費(fèi)情況說(shuō)明； 4）在線購(gòu)買；5）售前咨詢和售后服務(wù)根據(jù)以上需求分析，結(jié)合公司的實(shí)際情況，為了更好地推廣公司及其公司產(chǎn)品，網(wǎng)站需求進(jìn)一步細(xì)化為： 網(wǎng)站的建設(shè)意義（）滿足顧客的需求，為企業(yè)（公司）贏得利潤(rùn)；（）向顧客提供更好的服務(wù)是一個(gè)商務(wù)網(wǎng)站的目標(biāo)；（）網(wǎng)站能夠使企業(yè)實(shí)現(xiàn)全國(guó)化與全球化經(jīng)營(yíng)戰(zhàn)略；（）實(shí)現(xiàn)改善經(jīng)營(yíng)管理、開(kāi)拓市場(chǎng)、提高企業(yè)競(jìng)爭(zhēng)力等。 功能對(duì)于公司，及時(shí)發(fā)布介紹和展示最新創(chuàng)新產(chǎn)品，為顧客提供完善的咨詢服務(wù)工作。對(duì)于顧客，通過(guò)建立商務(wù)網(wǎng)站平臺(tái)，讓公司可以與顧客緊密地聯(lián)系在一起。重視顧客的意見(jiàn)反饋，掌握顧客的需求，加強(qiáng)與客戶之間的

10、關(guān)系與往來(lái)，是企業(yè)營(yíng)銷的重要環(huán)節(jié)。網(wǎng)站很重要的一個(gè)優(yōu)勢(shì)就是交互性，利用在網(wǎng)站上設(shè)置用戶調(diào)查表、產(chǎn)品相關(guān)的留言評(píng)論、討論公告板等方式可以迅速準(zhǔn)確地得到大量用戶反饋和建議，這些有助于新產(chǎn)品推出，新市場(chǎng)開(kāi)拓，又有助于售后服務(wù)和客戶調(diào)查，同時(shí)可以為顧客隨時(shí)隨地地提供完美的服務(wù)。 市場(chǎng)的情報(bào)信息收集有關(guān)客戶市場(chǎng)研究和競(jìng)爭(zhēng)對(duì)手的信息，包含豐富的有價(jià)值的信息，分層次地提供給相關(guān)人員，如銷售報(bào)表、市場(chǎng)環(huán)境分析報(bào)告、競(jìng)爭(zhēng)對(duì)手情況、產(chǎn)品技術(shù)工藝、生產(chǎn)計(jì)劃、質(zhì)量問(wèn)題報(bào)告等等，建立一個(gè)面向市場(chǎng)的情報(bào)信息中心系統(tǒng)。企業(yè)的各個(gè)人員可隨時(shí)在任何地方獲取這些準(zhǔn)確最新的有價(jià)值的信息，從而有利于他們的工作或決策。原則與重點(diǎn)企業(yè)的

11、電子商務(wù)網(wǎng)站的受眾主要是企業(yè)內(nèi)部相關(guān)人員、最終客戶及與企業(yè)生產(chǎn)相關(guān)的物資供應(yīng)商及合作伙伴，網(wǎng)站的主題不僅是在內(nèi)容上有豐富的產(chǎn)品信息、情報(bào)信息，更重要的是應(yīng)具有滿足以上目標(biāo)的相關(guān)功能。因此，網(wǎng)站的重點(diǎn)不是在網(wǎng)站界面宣傳制作上的如何美觀與漂亮，而是在于網(wǎng)站提供的信息內(nèi)容價(jià)值及功能實(shí)用性，這樣才能使網(wǎng)站長(zhǎng)期有效地運(yùn)行，從而達(dá)到既定的進(jìn)行電子商務(wù)經(jīng)營(yíng)的目標(biāo)。系統(tǒng)要注意的重點(diǎn)有：（1）安全性電子商務(wù)網(wǎng)站作為企業(yè)經(jīng)營(yíng)的一個(gè)重要部份，網(wǎng)站的內(nèi)容信息具有非常重要的價(jià)值。信息的安全包括重要信息絕不能被競(jìng)爭(zhēng)對(duì)手所獲取，不同級(jí)別的信息不能被不具有相應(yīng)權(quán)限的用戶所獲取，數(shù)據(jù)在意外損害的情況下應(yīng)有相應(yīng)的備份恢復(fù)措施等等

12、。這就要求系統(tǒng)應(yīng)具有高度的安全性、復(fù)雜的權(quán)限控制級(jí)別及自動(dòng)自我保護(hù)系統(tǒng)。這是一般的網(wǎng)站信息發(fā)布系統(tǒng)難以實(shí)現(xiàn)的。（2）高效性由于系統(tǒng)不僅僅完成簡(jiǎn)單的網(wǎng)頁(yè)瀏覽功能，更多地要實(shí)現(xiàn)許多事務(wù)處理，如消息傳遞、多媒體通訊、信息關(guān)聯(lián)、排序、排版、復(fù)雜查詢、全文搜索等功能，這會(huì)導(dǎo)致系統(tǒng)的運(yùn)行效率較低，而我們不能讓用戶有過(guò)長(zhǎng)的等待，那將導(dǎo)致用戶不再愿意上網(wǎng)使用。因?yàn)?，運(yùn)行系統(tǒng)必須考慮其高效性，要求最終系統(tǒng)在數(shù)百個(gè)聯(lián)機(jī)事務(wù)處理時(shí)要有一個(gè)很好表現(xiàn)性能。（3）穩(wěn)定性許多系統(tǒng)運(yùn)行后，由于穩(wěn)定性不好，我們可以常?？匆?jiàn)系統(tǒng)管理員整天忙碌于系統(tǒng)的維護(hù)補(bǔ)救，而更重要的是，眾多的工作人員都在上面處理各種工作事務(wù)，系統(tǒng)的經(jīng)常性崩潰

13、導(dǎo)致這些工作無(wú)法進(jìn)行，反而使事務(wù)工作效率大大降低，從而使企業(yè)運(yùn)行效率大大降低。因此，信息系統(tǒng)的穩(wěn)定性非常關(guān)鍵。2.2 網(wǎng)站布局類型和配色方案的確定根據(jù)對(duì)網(wǎng)站內(nèi)容的需求分析，網(wǎng)站的頁(yè)面將多以圖片為主，文字為輔圖文混排的形式設(shè)計(jì)，因此根據(jù)內(nèi)容表現(xiàn)的需要設(shè)計(jì)該網(wǎng)站采用“三”型布局，同時(shí)作為公司網(wǎng)站，配色方案以灰系為主色調(diào)，以表達(dá)公司莊重沉穩(wěn)、簡(jiǎn)約大方的主題，同時(shí)配合使用顏色艷麗的圖片，一方面改善灰色的冷色調(diào)影響，另一方面符合公司愛(ài)好者對(duì)生活充滿熱情和活力的特征。2.3 網(wǎng)站整體規(guī)劃整個(gè)網(wǎng)站以首頁(yè)為入口，對(duì)公司提供的產(chǎn)品和服務(wù)做詳細(xì)介紹，并以公司主要產(chǎn)品為欄目制作不同的子頁(yè)面，分別對(duì)產(chǎn)品做詳細(xì)介紹，網(wǎng)

14、站的整體層次結(jié)構(gòu)圖如圖所示:indexstoreiphoneipaditunessupportipodMac圖2-1 網(wǎng)站結(jié)構(gòu)圖2.4 素材的收集和整理根據(jù)內(nèi)容需求共收集了如下格式的素材：圖片、文字；其中圖片處理為*.jpg、*.png和*.ico格式，以所在頁(yè)面名稱開(kāi)頭加位置命名圖片，例如：index-top1.jpg； 頁(yè)面的Logo的設(shè)計(jì)理念：由DONG四個(gè)英文大寫字母組成采用可口可樂(lè)英文字體設(shè)計(jì)，標(biāo)志整體白色字體透明背景，與導(dǎo)航條的黑底白字形成呼應(yīng)，力求簡(jiǎn)約大方，與網(wǎng)站的黑白灰色彩方案相搭配，體現(xiàn)網(wǎng)站整體的簡(jiǎn)單之美。DONG是設(shè)計(jì)者董帥的姓的英文拼音，代表網(wǎng)站設(shè)計(jì)者是董帥先生。實(shí)現(xiàn)效果

15、如圖所示：圖2-2 logo實(shí)現(xiàn)效果圖第3章 網(wǎng)站制作3.1創(chuàng)建站點(diǎn)使用Dreamweaver創(chuàng)建站點(diǎn)，并組織好站點(diǎn)的結(jié)構(gòu)。站點(diǎn)結(jié)構(gòu)圖如下所示：圖3-1 站點(diǎn)結(jié)構(gòu)圖創(chuàng)建了images文件夾用于存放圖片文件；css文件夾存放css樣式文件；Library文件夾存放庫(kù)文件；SpryAssets文件夾存放腳本文件；Templates文件夾存放模板文件；根據(jù)頁(yè)面的欄目設(shè)計(jì)分別創(chuàng)建了index、store、Mac、ipod、iphone5、ipad、itunes和support文件夾；考慮到每個(gè)頁(yè)面都需要使用Logo圖片和版權(quán)通知，因此將它們創(chuàng)建成庫(kù)項(xiàng)目以便在網(wǎng)站中頻繁使用； 3.2創(chuàng)建樣式表文件本網(wǎng)站

16、采用外部樣式表的形式，將樣式表文件命名為index.css保存在站點(diǎn)文件css中，文件主要對(duì)頁(yè)面的主題背景、字體和圖片格式進(jìn)行了定義，主要內(nèi)容如圖所示：圖3-2 樣式文件1圖3-2 樣式文件23.3頁(yè)面制作為了提高工作效率，保持頁(yè)面整體風(fēng)格的統(tǒng)一，網(wǎng)站根據(jù)內(nèi)容制作了模版頁(yè)面，具體效果如圖所示：圖3-3 模版頁(yè)面根據(jù)內(nèi)容的不同，依據(jù)模版頁(yè)面分別制作了相關(guān)子頁(yè)面，下面以Mac.html和support.html頁(yè)面為例展示效果。效果如圖所示：圖3-4 Mac頁(yè)面圖3-5 support頁(yè)面網(wǎng)站設(shè)計(jì)的重點(diǎn)是首頁(yè)，它對(duì)瀏覽用戶的第一直觀印象起著非常重要的作用，因此首頁(yè)的制作過(guò)程，我適當(dāng)?shù)募尤肓藙?dòng)畫效果

17、和平面設(shè)計(jì)的效果圖以期達(dá)到更好的頁(yè)面效果，如圖所示：圖3-6 index頁(yè)面第4章 主要技術(shù)特點(diǎn)和特色說(shuō)明1、DIV+CSS的使用在這次網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，使用了CSS布局和外部樣式表，和傳統(tǒng)的 Html 相比 CSS 有很多的優(yōu)點(diǎn)，他具有強(qiáng)大的控制能力和排版能力：CSS 控制字體的能力比標(biāo)記好多了，因此現(xiàn)在標(biāo)記早已被 W3C 組織列為不被推薦使用的標(biāo)記。同時(shí)提高了網(wǎng)頁(yè)的瀏覽速度：使用 CSS 設(shè)計(jì)方法比傳統(tǒng)的 Web 設(shè)計(jì)節(jié)省了50%到60%的文件尺寸。Table 標(biāo)簽是全部加

18、載完才會(huì)顯示出來(lái)，而 CSS 頁(yè)面是加載一點(diǎn)顯示一點(diǎn)也更好的提高了網(wǎng)頁(yè)的瀏覽速度。軟件開(kāi)發(fā)以前非得通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用 CSS 就可以輕松實(shí)現(xiàn)，改為從而能夠更快地下載頁(yè)面。使用他可以縮短修改時(shí)間提高工作量：傳統(tǒng)的 Web 頁(yè)面是需要修改每個(gè)<Font>及<Table>等標(biāo)簽，而利用 CSS 設(shè)計(jì)的 Web 頁(yè)面只需要簡(jiǎn)單的修改幾個(gè) CSS 文件就可以重新設(shè)計(jì)整個(gè)站點(diǎn)。使用它更有利于搜索引擎的搜索：CSS 減少了代碼量，使得正文更

19、加突出，有利于搜索引擎的更有效的搜索到你的 Web 頁(yè)面。CSS的作用可以達(dá)到效果及特點(diǎn)： （1）在幾乎所有的瀏覽器上都可以使用。   （2）以前一些非得通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁(yè)面。 （3）使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目（4）你可以輕松地控制頁(yè)面的布局。 （5）你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了。你可以將站點(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生

20、變動(dòng)。想一想，沒(méi)有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標(biāo)簽來(lái)實(shí)現(xiàn)，代碼非常煩瑣。很難想象，如果在一個(gè)頁(yè)面里需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長(zhǎng)度一定臃腫不堪。說(shuō)實(shí)話，CSS就是為了簡(jiǎn)化這樣的工作誕生的，當(dāng)然其功能決非這么簡(jiǎn)單。結(jié)合DIV CSS是通過(guò)對(duì)頁(yè)面結(jié)構(gòu)的風(fēng)格控制的思想，來(lái)控制整個(gè)頁(yè)面的風(fēng)格的屬性。瀏覽器通過(guò)CSS類解釋來(lái)呈現(xiàn)CSS屬性來(lái)表現(xiàn)樣式里設(shè)置的樣式。CSS配合DIV或div+css作用與解決問(wèn)題：   （1）CSS技術(shù)幫我們控制網(wǎng)頁(yè)中的字體大小、頁(yè)面寬度、頁(yè)面內(nèi)容靠左靠右、

21、字體樣式、某些網(wǎng)頁(yè)里區(qū)域背景圖片、背景顏色、超鏈接鼠標(biāo)事件樣式、圖片居中、文字居中、網(wǎng)頁(yè)中內(nèi)容板塊間隔等樣式（花樣）。 （2）網(wǎng)頁(yè)中一些標(biāo)簽元素樣式控制，如：標(biāo)題<h1>、段落<p>、span<span>、列表<li>等等網(wǎng)頁(yè)元素設(shè)置控制，包括上面講的文字圖片大小、DIV CSS布局寬度顏色等屬性。2、使用鏈接 為方便讀者的查閱，在各頁(yè)面頂部導(dǎo)航都設(shè)置了頁(yè)面鏈接。3、iphone網(wǎng)頁(yè)設(shè)置了圖片輪換效果，鼠標(biāo)放置停止圖片切換。圖片輪換的圖片文件名通常是有規(guī)律的序列，比如說(shuō)是從1到N，然后設(shè)置定時(shí)器，每隔一段時(shí)間換一張圖片，圖片文

22、件名作為一個(gè)自加變量，在輪換完后再?gòu)念^開(kāi)始。另外在任意兩張圖片的輪換時(shí)還會(huì)有一些轉(zhuǎn)換的過(guò)渡效果，這個(gè)主要依靠轉(zhuǎn)換濾鏡來(lái)實(shí)現(xiàn)， iphone網(wǎng)頁(yè)中利用revealTrans濾鏡產(chǎn)生轉(zhuǎn)換效果。 4、運(yùn)用Photoshop工具圖片的插入和設(shè)置背景圖像是兩個(gè)不同的概念，當(dāng)然可以達(dá)到相同的效果，這是很基本的知識(shí)運(yùn)用，也用了很多次，但是當(dāng)圖像較小時(shí)在層中插入更方便些，因?yàn)樽鳛楸尘皶r(shí)圖片會(huì)重復(fù)出現(xiàn)造成混亂的局面，但圖片過(guò)小時(shí)，用層將之拉寬大就會(huì)使圖片變模糊、嚴(yán)重變形，不但沒(méi)能美化頁(yè)面反而帶來(lái)了負(fù)面影響，此時(shí)最好借助Photoshop工具來(lái)編輯圖片。文本的插入在層內(nèi)或框架內(nèi)完成較好，但不能設(shè)置為藝術(shù)字體，因此需要運(yùn)用Photoshop工具來(lái)輔助完成，其實(shí)很多地方都可以用到Photoshop工具特別是一些要表現(xiàn)自己獨(dú)特的思想和設(shè)計(jì)畫面。第5章 課程設(shè)計(jì)總結(jié)通過(guò)本次設(shè)計(jì)對(duì)之前學(xué)的網(wǎng)站開(kāi)發(fā)與網(wǎng)頁(yè)制作知識(shí)有了有效地利用，在做設(shè)計(jì)的時(shí)候遇到了很多問(wèn)題，很多都是因?yàn)槠綍r(shí)練習(xí)的少，一些