蘋果公司網(wǎng)頁設(shè)計及制作

1、-. z.課 程 設(shè) 計 報 告 書題目：蘋果公司網(wǎng)頁設(shè)計與制作二級學院數(shù)學與計算機科學學院年級專業(yè)2012級計算機網(wǎng)絡(luò)學 號學生指導教師教師職稱講師-. z.*學院課程設(shè)計論文任務(wù)書二級學院： 學 號1202010002學生董帥專業(yè)班級12計網(wǎng)設(shè)計題目蘋果公司網(wǎng)頁設(shè)計與制作設(shè)計技術(shù)參數(shù)以Dreamweaver為開發(fā)工具，采用css為主要手段的開發(fā)技術(shù)。具體容包括：Html、Dreamweaver操作、css層疊樣式表，javaScript腳本。設(shè)計要求本課程設(shè)計的目的是為了讓學生掌握一個完整的制作過程，并熟練運用網(wǎng)頁制作的各種技術(shù)并學會使用div+css設(shè)計并開發(fā)制作出一個符合web2.0標

2、準的。具體任務(wù)和要求如下：任務(wù)自選容，可參考如下主題: 科普、科幻知識；公益形象宣傳；大、中、小學教學用動畫形象；奧林匹克體育；環(huán)境保護；戰(zhàn)爭與和平；求職；校園生活；誠信、傳統(tǒng)美德；交通平安；衛(wèi)生與安康；愛心；教育；新青年；管理；實用工具等，根據(jù)選擇的容制作一個完整的。二要求整個要突出主題，信息分類合理，導航清晰。合理規(guī)劃站點和目錄，首頁文件名為inde*.html。用div+css布局。用css美化網(wǎng)頁中的各個元素。適當運用動畫和javaSript腳本，自己處理圖片和背景。二級頁面風格統(tǒng)一，所有的css樣式統(tǒng)一以文件的形式保存，以的方式加載到Html文檔，以實現(xiàn)網(wǎng)頁構(gòu)造和形式的別離。工作量獨

3、立完成整個；至少7-8個頁面；完成課程設(shè)計報告的書寫。工作計劃整個工作分5個局部完成：1.容確實定和整體規(guī)劃3學時根據(jù)自己的興趣愛好，選定一個主題。然后準備相關(guān)的文字和圖片資料；確定的目錄構(gòu)造。2.進展素材收集和整理3學時用ps或Firworks制作首頁的效果圖。3的制作5學時首先制作首頁，再制作各個二級頁面。4的測試2學時測試，精簡樣式文件。5書寫課程設(shè)計報告書2學時將設(shè)計思路、制作過程、技術(shù)要點和特色說明以報告書的形式書寫出來。參考資料袁磊.網(wǎng)頁設(shè)計與制作實例教程M.清華大學，2008.23-29，167-210.黃斯偉.HTML完全使用詳解M.人民郵電，2006.55-79.燁.別具光輝

4、DIV+CSS網(wǎng)頁布局與美化M.人民郵電，2006.120-150.超.CSS布局實錄M.科學，2006.67-99.賈素玲等.JavaScript程序設(shè)計M.清華大學，2007.167-180.指導教師簽字教研室主任簽字說明：此表一式叁份，學生、指導教師、二級學院各一份。2013年 6 月 18 日 -. z.目錄TOC o 1-3 h z uHYPERLINK l _Toc359079050第1章課程設(shè)計概述 PAGEREF _Toc359079050 h 1HYPERLINK l _Toc359079051第2章設(shè)計方案說明 PAGEREF _Toc359079051 h 3HYPERL

5、INK l _Toc3590790522.1 需求分析 PAGEREF _Toc359079052 h 3HYPERLINK l _Toc3590790532.2 布局類型和配色方案確實定 PAGEREF _Toc359079053 h 3HYPERLINK l _Toc3590790542.3 整體規(guī)劃 PAGEREF _Toc359079054 h 5HYPERLINK l _Toc3590790552.4 素材的收集和整理 PAGEREF _Toc359079055 h 5HYPERLINK l _Toc359079056第3章制作 PAGEREF _Toc359079056 h 7HY

6、PERLINK l _Toc3590790573.1創(chuàng)立站點 PAGEREF _Toc359079057 h 7HYPERLINK l _Toc3590790583.2創(chuàng)立樣式表文件 PAGEREF _Toc359079058 h 7HYPERLINK l _Toc3590790593.3頁面制作 PAGEREF _Toc359079059 h 9HYPERLINK l _Toc359079060第4章主要技術(shù)特點和特色說明 PAGEREF _Toc359079060 h 13HYPERLINK l _Toc359079061第5章課程設(shè)計總結(jié) PAGEREF _Toc359079061 h

7、15-. z.第1章 課程設(shè)計概述本課程設(shè)計主要是利用已經(jīng)學習的網(wǎng)頁設(shè)計與制作知識和初步掌握的網(wǎng)頁開發(fā)工具如Dreamweaver、Photoshop等軟件為蘋果公司設(shè)計并實現(xiàn)一個公司。根據(jù)教師的要求及指導，我設(shè)計了此。此屬于小型，以蘋果公司原為依托，按照原配色方案和外表構(gòu)造以DIV+CSS的方式仿制，蘋果公司Apple Inc.是美國的一家高科技公司，2007年由蘋果電腦公司Apple puter, Inc.更名而來，核心業(yè)務(wù)為電子科技產(chǎn)品，總部位于加利福尼亞州的庫比蒂諾。蘋果公司由史蒂夫喬布斯、斯蒂夫沃茲尼亞克和Ron Wayn在1976年4月1日創(chuàng)立，在高科技企業(yè)中以創(chuàng)新而聞名，知名的產(chǎn)

8、品有Apple II、Macintosh電腦、Macbook筆記本電腦、iPod音樂播放器、iTunes商店、iMac一體機、iPhone手機和iPad平板電腦等。2012年8月21日，蘋果成為世界市值第一的上市公司。本的主要功能是提供豐富、清晰的公司信息和資源，主要包括iphone、ipad、ipod、Mac、itunes等硬件產(chǎn)品以及iOS、Mac OS和APP應(yīng)用軟件等軟件產(chǎn)品的全方位展示和介紹；通過在線商店網(wǎng)頁為顧客和公司提供購置和銷售蘋果產(chǎn)品的便利通道；通過技術(shù)支持網(wǎng)頁為產(chǎn)品購置者提供維修效勞和支持圍。設(shè)計者希望通過清新簡潔，賞心悅目的外觀設(shè)計給予客戶和顧客以舒適的網(wǎng)頁瀏覽體驗。充分

9、展示公司提供的產(chǎn)品及設(shè)計理念和售后效勞能力，注重推廣公司各方面形象。以公司的宣傳推廣和將瀏覽者吸引成為公司的客戶作為的目標。堅持嚴謹、負責、創(chuàng)新的態(tài)度為消費者提供展示蘋果公司完美產(chǎn)品和周邊設(shè)備的個性化頁面，不斷創(chuàng)新變革助力科技進步和公司前進。此外，這不僅是為了肩負學生的責任而去完成教師交給我的任務(wù)，更是對過去學習的知識的溫習穩(wěn)固，是一個把理論轉(zhuǎn)化為實踐的過程，是一個把自己的設(shè)計思想轉(zhuǎn)化為實物的過程，是一個發(fā)揮自己創(chuàng)造力和想象力的過程。再者，這是對自己在一學期該學習科目以來的成果的檢查，這是一個自我審視的過程：檢測我該學期的學習成果，衡量一期以來的收獲，更為重要的是揚長避短，發(fā)現(xiàn)自己的問題與缺點

10、，使自己及時改正，覺察自身的優(yōu)點和長處并堅持發(fā)揚，有利于我以后的學習和開展。加強教師和同學們對我的認識，深化我們大家的情誼，有利于以后在學習、工作生活當中的團結(jié)協(xié)作。-. z.第2章 設(shè)計方案說明2.1 需求分析對公司目標用戶進展分析，得出結(jié)論用戶主要包括以下幾方面的需求即希望從獲取的信息：1公司產(chǎn)品的介紹；2公司產(chǎn)品的設(shè)計；3消費情況說明；4在線購置；5售前咨詢和售后效勞根據(jù)以上需求分析，結(jié)合公司的實際情況，為了更好地推廣公司及其公司產(chǎn)品，需求進一步細化為：的建立意義滿足顧客的需求，為企業(yè)公司贏得利潤；向顧客提供更好的效勞是一個商務(wù)的目標；能夠使企業(yè)實現(xiàn)全國化與全球化經(jīng)營戰(zhàn)略；實現(xiàn)改善經(jīng)營管

11、理、開拓市場、提高企業(yè)競爭力等。功能對于公司，及時發(fā)布介紹和展示最新創(chuàng)新產(chǎn)品，為顧客提供完善的咨詢效勞工作。對于顧客，通過建立商務(wù)平臺，讓公司可以與顧客嚴密地聯(lián)系在一起。重視顧客的意見反應(yīng)，掌握顧客的需求，加強與客戶之間的關(guān)系與往來，是企業(yè)營銷的重要環(huán)節(jié)。很重要的一個優(yōu)勢就是交互性，利用在上設(shè)置用戶調(diào)查表、產(chǎn)品相關(guān)的留言評論、討論公告板等方式可以迅速準確地得到大量用戶反應(yīng)和建議，這些有助于新產(chǎn)品推出，新市場開拓，又有助于售后效勞和客戶調(diào)查，同時可以為顧客隨時隨地地提供完美的效勞。市場的情報信息收集有關(guān)客戶市場研究和競爭對手的信息，包含豐富的有價值的信息，分層次地提供給相關(guān)人員，如銷售報表、市場

12、環(huán)境分析報告、競爭對手情況、產(chǎn)品技術(shù)工藝、生產(chǎn)方案、質(zhì)量問題報告等等，建立一個面向市場的情報信息中心系統(tǒng)。企業(yè)的各個人員可隨時在任何地方獲取這些準確最新的有價值的信息，從而有利于他們的工作或決策。原則與重點企業(yè)的電子商務(wù)的受眾主要是企業(yè)部相關(guān)人員、最終客戶及與企業(yè)生產(chǎn)相關(guān)的物資供給商及合作伙伴，的主題不僅是在容上有豐富的產(chǎn)品信息、情報信息，更重要的是應(yīng)具有滿足以上目標的相關(guān)功能。因此，的重點不是在界面宣傳制作上的如何美觀與漂亮，而是在于提供的信息容價值及功能實用性，這樣才能使長期有效地運行，從而到達既定的進展電子商務(wù)經(jīng)營的目標。系統(tǒng)要注意的重點有：1平安性電子商務(wù)作為企業(yè)經(jīng)營的一個重要部份，的

13、容信息具有非常重要的價值。信息的平安包括重要信息絕不能被競爭對手所獲取，不同級別的信息不能被不具有相應(yīng)權(quán)限的用戶所獲取，數(shù)據(jù)在意外損害的情況下應(yīng)有相應(yīng)的備份恢復措施等等。這就要求系統(tǒng)應(yīng)具有高度的平安性、復雜的權(quán)限控制級別及自動自我保護系統(tǒng)。這是一般的信息發(fā)布系統(tǒng)難以實現(xiàn)的。2高效性由于系統(tǒng)不僅僅完成簡單的網(wǎng)頁瀏覽功能，更多地要實現(xiàn)許多事務(wù)處理，如消息傳遞、多媒體通訊、信息關(guān)聯(lián)、排序、排版、復雜查詢、全文搜索等功能，這會導致系統(tǒng)的運行效率較低，而我們不能讓用戶有過長的等待，那將導致用戶不再愿意上網(wǎng)使用。因為，運行系統(tǒng)必須考慮其高效性，要求最終系統(tǒng)在數(shù)百個聯(lián)機事務(wù)處理時要有一個很好表現(xiàn)性能。3穩(wěn)定

14、性許多系統(tǒng)運行后，由于穩(wěn)定性不好，我們可以常?？匆娤到y(tǒng)管理員整天忙碌于系統(tǒng)的維護補救，而更重要的是，眾多的工作人員都在上面處理各種工作事務(wù)，系統(tǒng)的經(jīng)常性崩潰導致這些工作無法進展，反而使事務(wù)工作效率大大降低，從而使企業(yè)運行效率大大降低。因此，信息系統(tǒng)的穩(wěn)定性非常關(guān)鍵。2.2 布局類型和配色方案確實定根據(jù)對容的需求分析，的頁面將多以圖片為主，文字為輔圖文混排的形式設(shè)計，因此根據(jù)容表現(xiàn)的需要設(shè)計該采用三型布局，同時作為公司，配色方案以灰系為主色調(diào)，以表達公司莊重沉穩(wěn)、簡約大方的主題，同時配合使用顏色艷麗的圖片，一方面改善灰色的冷色調(diào)影響，另一方面符合公司愛好者對生活充滿熱情和活力的特征。2.3 整體

15、規(guī)劃整個以首頁為入口，對公司提供的產(chǎn)品和效勞做詳細介紹，并以公司主要產(chǎn)品為欄目制作不同的子頁面，分別對產(chǎn)品做詳細介紹，的整體層次構(gòu)造圖如下圖:inde*inde*storeiphoneipaditunessupportipodMac圖2-1 構(gòu)造圖2.4 素材的收集和整理根據(jù)容需求共收集了如下格式的素材：圖片、文字；其中圖片處理為*.jpg、*.png和*.ico格式，以所在頁面名稱開頭加位置命名圖片，例如：inde*-top1.jpg；頁面的Logo的設(shè)計理念：由DONG四個英文大寫字母組成采用可口可樂英文字體設(shè)計，標志整體白色字體透明背景，與導航條的黑底白字形成照應(yīng)，力求簡約大方，與的黑白

16、灰色彩方案相搭配，表達整體的簡單之美。DONG是設(shè)計者董帥的姓的英文拼音，代表設(shè)計者是董帥先生。實現(xiàn)效果如下圖：圖2-2 logo實現(xiàn)效果圖-. z.第3章 制作3.1創(chuàng)立站點使用Dreamweaver創(chuàng)立站點，并組織好站點的構(gòu)造。站點構(gòu)造圖如下所示：圖3-1 站點構(gòu)造圖創(chuàng)立了images文件夾用于存放圖片文件；css文件夾存放css樣式文件；Library文件夾存放庫文件；SpryAssets文件夾存放腳本文件；Templates文件夾存放模板文件；根據(jù)頁面的欄目設(shè)計分別創(chuàng)立了inde*、store、Mac、ipod、iphone5、ipad、itunes和support文件夾；考慮到每個頁

17、面都需要使用Logo圖片和通知，因此將它們創(chuàng)立成庫工程以便在中頻繁使用；3.2創(chuàng)立樣式表文件本采用外部樣式表的形式，將樣式表文件命名為inde*.css保存在站點文件css中，文件主要對頁面的主題背景、字體和圖片格式進展了定義，主要容如下圖：圖3-2 樣式文件1圖3-2 樣式文件23.3頁面制作為了提高工作效率，保持頁面整體風格的統(tǒng)一，根據(jù)容制作了模版頁面，具體效果如下圖：圖3-3 模版頁面根據(jù)容的不同，依據(jù)模版頁面分別制作了相關(guān)子頁面，下面以Mac.html和support.html頁面為例展示效果。效果如下圖：圖3-4 Mac頁面圖3-5 support頁面設(shè)計的重點是首頁，它對瀏覽用戶的

18、第一直觀印象起著非常重要的作用，因此首頁的制作過程，我適當?shù)膮⒓恿藙赢嬓Ч推矫嬖O(shè)計的效果圖以期到達更好的頁面效果，如下圖：圖3-6 inde*頁面-. z.第4章 主要技術(shù)特點和特色說明1、DIV+CSS的使用在這次網(wǎng)頁設(shè)計過程中，使用了CSS布局和外部樣式表，和傳統(tǒng)的Html相比CSS有很多的優(yōu)點，他具有強大的控制能力和排版能力：CSS控制字體的能力比標記好多了，因此現(xiàn)在標記早已被W3C組織列為不被推薦使用的標記。同時提高了網(wǎng)頁的瀏覽速度：使用CSS設(shè)計方法比傳統(tǒng)的Web設(shè)計節(jié)省了50%到60%的文件尺寸。Table標簽是全部加載完才會顯示出來，而CSS頁面是加載一點顯示一點也更好的提高了

19、網(wǎng)頁的瀏覽速度。軟件開發(fā)以前非得通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實現(xiàn)，改為從而能夠更快地下載頁面。使用他可以縮短修改時間提高工作量：傳統(tǒng)的Web頁面是需要修改每個及等標簽，而利用CSS設(shè)計的Web頁面只需要簡單的修改幾個CSS文件就可以重新設(shè)計整個站點。使用它更有利于搜索引擎的搜索：CSS減少了代碼量，使得正文更加突出，有利于搜索引擎的更有效的搜索到你的Web頁面。CSS的作用可以到達效果及特點：1在幾乎所有的瀏覽器上都可以使用。2以前一些非得通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實現(xiàn)，從而更快地下載頁面。3使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目4

20、你可以輕松地控制頁面的布局。5你可以將許多網(wǎng)頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網(wǎng)頁風格都使用一個CSS文件進展控制，只要修改這個CSS文件中相應(yīng)的行，則整個站點的所有頁面都會隨之發(fā)生變動。想一想，沒有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標簽來實現(xiàn)，代碼非常煩瑣。很難想象，如果在一個頁面里需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長度一定臃腫不堪。說實話，CSS就是為了簡化這樣的工作誕生的，當然其功能決非這么簡單。結(jié)合DIVCSS是通過對頁面構(gòu)造的風格控制的思想，來控制整個頁面的風格的屬性。瀏覽器通過CSS

21、類解釋來呈現(xiàn)CSS屬性來表現(xiàn)樣式里設(shè)置的樣式。CSS配合DIV或div+css作用與解決問題：1CSS技術(shù)幫我們控制網(wǎng)頁中的字體大小、頁面寬度、頁面容靠左靠右、字體樣式、*些網(wǎng)頁里區(qū)域背景圖片、背景顏色、超鼠標事件樣式、圖片居中、文字居中、網(wǎng)頁中容板塊間隔等樣式把戲。2網(wǎng)頁中一些標簽元素樣式控制，如：標題、段落、span、列表等等網(wǎng)頁元素設(shè)置控制，包括上面講的文字圖片大小、DIVCSS布局寬度顏色等屬性。2、使用 為方便讀者的查閱，在各頁面頂部導航都設(shè)置了頁面。3、iphone網(wǎng)頁設(shè)置了圖片輪換效果，鼠標放置停頓圖片切換。圖片輪換的圖片文件名通常是有規(guī)律的序列，比方說是從1到N，然后設(shè)置定時器

22、，每隔一段時間換一圖片，圖片文件名作為一個自加變量，在輪換完后再從頭開場。另外在任意兩圖片的輪換時還會有一些轉(zhuǎn)換的過渡效果，這個主要依靠轉(zhuǎn)換濾鏡來實現(xiàn)， iphone網(wǎng)頁中利用revealTrans濾鏡產(chǎn)生轉(zhuǎn)換效果。4、運用Photoshop工具圖片的插入和設(shè)置背景圖像是兩個不同的概念，當然可以到達一樣的效果，這是很根本的知識運用，也用了很屢次，但是當圖像較小時在層中插入更方便些，因為作為背景時圖片會重復出現(xiàn)造成混亂的局面，但圖片過小時，用層將之拉寬大就會使圖片變模糊、嚴重變形，不但沒能美化頁面反而帶來了負面影響，此時最好借助Photoshop工具來編輯圖片。文本的插入在層或框架完成較好，但不能設(shè)置為藝術(shù)字體，因此需要運用Photoshop工具來輔助完成，其實很多地方都可以用到Photoshop工具特別是一些要表現(xiàn)自己獨特的思想和設(shè)計畫面。-. z.第5章 課程設(shè)計總結(jié)通過本次設(shè)計對之前學的開發(fā)與網(wǎng)頁制作知識有了有效地利用，在做設(shè)計的時候遇到了很多問題，很多都是