第1章Web前端開發基礎主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.1web介紹3Web也稱萬維網。Web的英文全稱是“WorldWideWeb”，簡稱WWW。Web是基于“超文本”的信息查詢和發布系統。萬維網將Internet上眾多的Web服務器提供的資源連接起來，組成一個海量的信息網。Web是英國的TimBerners-Lee1980年在歐洲共同體的一個大型科研機構任職時發明的。通過Web平臺，互聯網上的資源在一個網頁里展示出來，而且資源之間可以建立鏈接。1.1web介紹4WWW的開發階段WWW的發展階段WWW商業化階段無所不在的WWWWeb起源Web1.0Web2.0Web3.0Web版本主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.2Web開發6前端開發用HTML，DIV+CSS，JavaScript等技術開發前端。后端開發使用PHP、ASP、JSP等技術開發，也可以使用成熟的框架技術。主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.3Web基本概念8超文本傳輸協議。http協議主要用于服務器和瀏覽器之間的請求和響應服務。http協議主要功能是提供信息服務。常見的Web服務器有兩種，微軟的IIS服務器（互聯網信息服務器）和阿帕奇（apache）的Tomcat服務器。Web服務器解析并顯示HTML文件的應用軟件。常見的瀏覽器有IE、google、Firefox、Opera和Safari。Web瀏覽器Internet上有內在聯系的若干頁面通過超級鏈接構成的網頁的集合。通常把進入網站首先看到的網頁稱為首頁。網站由多種媒體，如文字、聲音、動畫等組成的頁面，在頁面上通過超鏈接實現與其他網頁之間的跳轉。網頁中的媒體元素包括：文本、圖像、音頻、視頻。網頁中的組成元素包括：logo、banner、導航條、內容板塊等網頁統一資源定位。URL的一般書寫格式是：訪問協議：//主機域名或IP地址[：端口號]/路徑/文件名。URL主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.4Web頁面瀏覽過程1012341432服務處理請求根據瀏覽器發起的請求，把url地址轉換成網頁所在服務器上的實際路徑，找到相應的網頁文件反饋網頁網頁中僅包含html標記，服務器直接通過http協議將文檔發送到客戶端，如果還包括jsp程序或者其他動態網站程序，則通過服務器執行后將運行結果發送給客戶端啟動瀏覽器在地址欄中輸入要訪問的網頁的url，通過http協議向url所在的服務器發起服務請求客戶端顯示網頁瀏覽器解釋html文檔，將結果顯示在客戶端瀏覽器主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.5Web前端開發技術1201020304HTML技術CSS技術JavaScript技術jQuery技術HTML為超文本標記語言。網頁文件都是由超文本標志語言HTML所創建的。HTML技術CascadingStyleSheet，層疊樣式表，是一種用來表現網頁格式的語言。使用CSS可以將網頁的格式和內容相分離，編輯格式時不需要考慮內容，便于網頁維護。CSS技術JavaScript是一種解釋型、基于對象的腳本語言，用來向HTML頁面添加交互行為，具有跨平臺特性的一種語言。JavaScript技術通過jQuery使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，并且方便地為網站提供AJAX交互。jQuery技術主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.6主流Web瀏覽器14微軟公司推出的一款網頁瀏覽器IE瀏覽器GoogleChrome是一款由Google公司開發的網頁瀏覽器。GoogleChrome的特點是簡潔、快速。GoogleChrome是一個自由及開放源代碼的網頁瀏覽器，使用Gecko排版引擎，支持多種操作系統FirefoxOpera是一款挪威OperaSoftwareASA公司制作的，支持多頁面標簽式瀏覽的網絡瀏覽器。具有跨平臺性Opera主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.7Web前端開發流程16需求分析確立建站目標，網站所面向的用戶及網站所要實現的功能設計階段明確網站的欄目組成，頁面的內容，網站的鏈接結構制作階段使用網頁制作軟件和圖像處理軟件來完成網頁測試、維護和更新檢查網站的鏈接結構，跨瀏覽器兼容性，檢查頁面是否出現顯示錯誤，使用網頁設計軟件對網站進行更新和維護需求分析17產品、服務銷售建立一種公益性服務為一種思想、觀念、事業作宣傳使自己的業務走向世界建網站的目的性別年齡職業網站的瀏覽者以內容為本，訪問速度快視覺設計具有特色大量使用圖和動畫，忽略登錄速度打開頁面的速度最重要網站的特色網站設計18明確網頁文件的路徑和名稱按照功能劃分或者欄目劃分的方式來組織網站文件設計頁面及路徑頁面設計文檔是針對某個網頁而制定的，包含css、框架等內容的網頁需要書寫說明書頁面詳細設計文檔網站制作19使用網頁圖像制作軟件來設計整個網站的布局通過dreamweave編輯網頁元素進，完成網站的靜態頁面的制作。前臺頁面制作利用css和javascript技術對網頁進行美化，為網頁增加一些交互動作，如鼠標指向的動作，滾動圖片效果。頁面代碼書寫對于動態網站，需要數據庫的支持，所以后臺程序開發包括設計數據庫和數據表，以及編寫操作數據庫中表的程序。后臺程序開發網站測試201234功能性測試測試網站的功能是否能實現，包括頁面是否顯示正常、鏈接是否正確、表單是否能夠正常填寫和提交、數據庫是否能夠正常讀寫、后臺管理程序是否能夠完成任務等性能測試連接速度測試負載測試壓力測試年齡可用性測試主觀測試客觀測試安全性測試對用戶的用戶名和密碼分別要做出有效和無效兩個方面的測試檢查后臺程序是否能夠正常工作，安全性維護和更新www.islide.cc21增加新的內容和功能定期維護和更新主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.8Web前端開發工具www.islide.cc23KeywordsKeywords小巧但是功能強大的可處理文本、HTML和程序語言的Windows編輯器EditPlus所見即所得的網頁編輯器，功能強大，是現在主流的網站開發工具Dreamweaver可編輯HTML，CSS等語言的文本編輯器，具有漂亮的用戶界面和強大的功能SublimeText主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.9Web前端工程師從業要求www.islide.cc25Web前端工程師主要工作職責是協調前端設計師完成頁面的界面美化，協調后端程序員實現用戶的交互設計。前端工程師必須掌握HTML5、CSS、JavaScript、jQuery、Ajax等核心技術，具備互聯網交互設計能力，熟悉后端服務器運行環境和數據通信協議。能掌握響應式布局框架、Bootstrap、AngularJS等最新JS框架的技術。主流Web瀏覽器Web前端開發技術Web開發Web前端開發基礎Web基本概念1234ContentsWeb介紹Web頁面瀏覽過程5678910Web前端開發流程Web前端開發工具Web前端工程師從業要求網站鑒賞能力培養1.10網站鑒賞能力培養www.islide.cc27時光網首頁分析色調分析藍色白色正版商城區域新品登陸熱銷爆款折扣促銷超前預售banner區域片輪換方式來展示熱門影視人物及新聞主體區域今日熱點購票正版商城時光精選區域購票區域以時間為線索，詳細列出瀏覽者所在城市影院正在熱播的電影名稱、影片分類、導演、票價等信息時光精選區域查看新片預告片配合宣傳片了解影片的相關信息網站整體結構今日熱點購票正版商城時光精選等熱門影評影迷發表查看電影評價信息1.10網站鑒賞能力培養-欄目分析www.islide.cc28欄目分析購票欄目主體區域分為了正在熱映、即將上映兩部分。在每部電影的介紹中都為用戶提供了選座購票的快捷鏈接。每個區域均層次分明，結構清晰正版商城內容豐富、布局整齊而又不失活潑新聞欄目將最醒目最流行的新聞資訊置于中心位置，分區感強、色彩搭配和諧網站特色總結290102030504網站主要展示最新、最熱門的電影資訊信息主題定位明確沒有受到圖片和媒體文件大造成下載速度慢的影響訪問速度快顏色搭配出彩，布局整齊風格獨特在網站多處能看到“今日”等文字，時間感強。另外地域也很明確資訊更新及時當影迷需要發表影評，可以非常快捷的通過表單提交言論，也可以在虛擬社區參加討論提供了