1、課 程 設 計 報 告 書題目： 蘋果公司網頁設計與制作 二級學院數學與計算機科學學院年級專業2012級計算機網絡學 號學生姓名指導教師教師職稱講師 新余學院課程設計（論文）任務書二級學院： 學 號1202010002學生姓名董帥專業（班級）12計網設計題目蘋果公司網站網頁設計與制作設計技術參數以Dreamweaver為開發工具，采用css為主要手段的網站開發技術。具體內容包括：Html、Dreamweaver操作、css層疊樣式表，javaScript腳本。設計要求本課程設計的目的是為了讓學生掌握一個完整網站的制作過程，并熟練運用網頁制作的各種技術并學會使用div+css設計并開發制作出一個

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

3、形式保存，以鏈接的方式加載到Html文檔，以實現網頁結構和形式的分離。工作量1. 獨立完成整個網站；2. 網站至少7-8個頁面；3. 完成課程設計報告的書寫。工作計劃整個工作分5個部分完成：1.網站內容的確定和整體規劃（3學時）根據自己的興趣愛好，選定一個主題。然后準備相關的文字和圖片資料；確定網站的目錄結構。2.進行素材收集和整理（3學時）用ps或Firworks制作網站首頁的效果圖。3網站的制作（5學時）首先制作首頁，再制作各個二級頁面。4網站的測試（2學時）測試網站鏈接，精簡樣式文件。5書寫課程設計報告書（2學時）將設計思路、制作過程、技術要點和特色說明以報告書的形式書寫出來。參考資料1

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

5、32.2 網站布局類型和配色方案的確定32.3 網站整體規劃52.4 素材的收集和整理5第3章 網站制作73.1創建站點73.2創建樣式表文件73.3頁面制作9第4章 主要技術特點和特色說明13第5章 課程設計總結15蘋果公司網頁設計與制作第1章 課程設計概述本課程設計主要是利用已經學習的網頁設計與制作知識和初步掌握的網頁開發工具如Dreamweaver、Photoshop等軟件為蘋果公司設計并實現一個公司網站。根據老師的要求及指導，我設計了此網站。此網站屬于小型網站，網站以蘋果公司原網站為依托，按照原網站配色方案和表面結構以DIV+CSS的方式仿制，蘋果公司（Apple Inc.）是美國的一

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

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

8、我的任務，更是對過去學習的知識的溫習鞏固，是一個把理論轉化為實踐的過程，是一個把自己的設計思想轉化為實物的過程，是一個發揮自己創造力和想象力的過程。再者，這是對自己在一學期內該學習科目以來的成果的檢查，這是一個自我審視的過程：檢測我該學期的學習成果，衡量一期以來的收獲，更為重要的是揚長避短，發現自己的問題與缺點，使自己及時改正，發覺自身的優點和長處并堅持發揚，有利于我以后的學習和發展。加強老師和同學們對我的認識，深化我們大家的情誼，有利于以后在學習、工作生活當中的團結協作。17第2章 網站設計方案說明2.1 需求分析對公司網站目標用戶進行分析，得出結論用戶主要包括以下幾方面的需求（即希望從網站

9、獲取的信息）：1）公司產品的介紹；2）公司產品的設計；3）消費情況說明； 4）在線購買；5）售前咨詢和售后服務根據以上需求分析，結合公司的實際情況，為了更好地推廣公司及其公司產品，網站需求進一步細化為： 網站的建設意義（）滿足顧客的需求，為企業（公司）贏得利潤；（）向顧客提供更好的服務是一個商務網站的目標；（）網站能夠使企業實現全國化與全球化經營戰略；（）實現改善經營管理、開拓市場、提高企業競爭力等。 功能對于公司，及時發布介紹和展示最新創新產品，為顧客提供完善的咨詢服務工作。對于顧客，通過建立商務網站平臺，讓公司可以與顧客緊密地聯系在一起。重視顧客的意見反饋，掌握顧客的需求，加強與客戶之間的

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

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

12、。這就要求系統應具有高度的安全性、復雜的權限控制級別及自動自我保護系統。這是一般的網站信息發布系統難以實現的。（2）高效性由于系統不僅僅完成簡單的網頁瀏覽功能，更多地要實現許多事務處理，如消息傳遞、多媒體通訊、信息關聯、排序、排版、復雜查詢、全文搜索等功能，這會導致系統的運行效率較低，而我們不能讓用戶有過長的等待，那將導致用戶不再愿意上網使用。因為，運行系統必須考慮其高效性，要求最終系統在數百個聯機事務處理時要有一個很好表現性能。（3）穩定性許多系統運行后，由于穩定性不好，我們可以常常看見系統管理員整天忙碌于系統的維護補救，而更重要的是，眾多的工作人員都在上面處理各種工作事務，系統的經常性崩潰

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

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

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

16、采用外部樣式表的形式，將樣式表文件命名為index.css保存在站點文件css中，文件主要對頁面的主題背景、字體和圖片格式進行了定義，主要內容如圖所示：圖3-2 樣式文件1圖3-2 樣式文件23.3頁面制作為了提高工作效率，保持頁面整體風格的統一，網站根據內容制作了模版頁面，具體效果如圖所示：圖3-3 模版頁面根據內容的不同，依據模版頁面分別制作了相關子頁面，下面以Mac.html和support.html頁面為例展示效果。效果如圖所示：圖3-4 Mac頁面圖3-5 support頁面網站設計的重點是首頁，它對瀏覽用戶的第一直觀印象起著非常重要的作用，因此首頁的制作過程，我適當的加入了動畫效果

17、和平面設計的效果圖以期達到更好的頁面效果，如圖所示：圖3-6 index頁面第4章 主要技術特點和特色說明1、DIV+CSS的使用在這次網頁設計過程中，使用了CSS布局和外部樣式表，和傳統的 Html 相比 CSS 有很多的優點，他具有強大的控制能力和排版能力：CSS 控制字體的能力比標記好多了，因此現在標記早已被 W3C 組織列為不被推薦使用的標記。同時提高了網頁的瀏覽速度：使用 CSS 設計方法比傳統的 Web 設計節省了50%到60%的文件尺寸。Table 標簽是全部加

18、載完才會顯示出來，而 CSS 頁面是加載一點顯示一點也更好的提高了網頁的瀏覽速度。軟件開發以前非得通過圖片轉換實現的功能，現在只要用 CSS 就可以輕松實現，改為從而能夠更快地下載頁面。使用他可以縮短修改時間提高工作量：傳統的 Web 頁面是需要修改每個<Font>及<Table>等標簽，而利用 CSS 設計的 Web 頁面只需要簡單的修改幾個 CSS 文件就可以重新設計整個站點。使用它更有利于搜索引擎的搜索：CSS 減少了代碼量，使得正文更

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

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

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

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