Web前端開發工程師是近幾年計算機行業的一個新興崗位,而且未來發展的勢頭強勁,本書針對這一崗位的具體技術需求編寫,內容涵蓋了該崗位所需的基礎及專業知識。全書共分五大部分15章,從平面設計到動畫制作,從網頁美工到網頁動態技術,從易到難地將Web前端技術呈現在廣大讀者面前,每章以基礎知識為主,綜合練習為輔,從理論與實踐兩個方面對學生進行訓練,以期學生好地掌握課程內容,快地適應工作崗位。 本書可以作為本、專科學校相關專業的教學用書,也可以作為想要從事Web前端開發職業的技術人員的學習用書。
本書講授的知識點就是WEB前端崗位的技術需求,本書的案例就是工作中的實際案例。掌握了本書的知識,就是就職于工作崗位的前提條件,從學習過程中訓練自身的實踐動手能力,綜合分析能力及全面的工作能力,以期好地掌握課程內容,很快適應工作崗位。
隨著互聯網從Web 1.0發展到Web 2.0,網站也在靜態頁面(用戶使用網站的行為也以瀏覽為主)的基礎上添加了各種桌面軟件,使網頁不再只是承載單一的文字和圖片,各種富媒體讓網頁的內容更加生動,網頁上軟件化的交互形式為用戶提供了更好的使用體驗,這些都是基于前端技術實現的,其中包括CSS、HTML、DOM、Ajax、JavaScript等。
Web前端開發是一個很特殊的領域,涵蓋的知識面非常廣,既有具體的技術,也有抽象的理念。簡單地說,它的主要職能就是把網站的界面更好地呈現給用戶。Web前端開發工程師除了要具有良好的團隊合作精神以外,還要有不斷學習的目標,在知識層面上包括從最初的Photoshop、Flash、Dreamweaver到現在常用的HTML、CSS、JavaScript、Ajax等技術。本書最真實地貼近Web前端工程師的崗位需求,從基礎知識抓起,理論與實踐相結合,在注重基礎理論講解的同時加強對動手能力的訓練。
本書共分五大部分,第一部分只包括1章,是對Web知識的整體敘述; 第二部分是Photoshop部分,對Photoshop進行了詳細講解; 第三部分是Flash部分,對Flash的常用知識進行了講解,包括工具箱的使用、動畫的制作; 第四部分是HTML+CSS部分,對HTML語言、CSS用于網頁美化及布局進行了詳細的講解; 第五部分是JavaScript,包括JavaScript和Ajax、jQuery,對網頁的前端技術進行了講解。
本書由在校的相關專業教師編著,其中,第1~5章由唐哲卿編寫,第6、7章由單瑩瑩編寫,第8、9、11、12章由王麗銘編寫,第13、15章由劉志凱編寫,第14章由郭鑫編寫,第10章由王金偉編寫。這些教師都在學校從事最基礎的Web開發課程的講解,同時具有企業開發的經驗,對Web前端有自己的認識和理解。希望這些知識對在校學生、想從事Web前端開發的讀者有一定的指導和幫助作用。
由于編者的能力有限,本書還有很多不足之處,敬請廣大讀者給予指正。
編者
2015年10月
第1章Web前端開發技術概述
1.1Web概述
1.1.1Web的起源
1.1.2Web技術
1.1.3Web技術的發展
1.1.4Web的工作原理
1.2Web前端的由來
1.2.1Web前端的概念
1.2.2Web前端的開發歷史和開發現狀
1.3Web前端開發技術
1.4Web前端開發工具
1.5Web前端工程師的職業要求
第2章Photoshop CS6概述
2.1Photoshop簡介
2.1.1Photoshop的起源
2.1.2Photoshop的應用
2.1.3圖像的基本概念
2.2Photoshop CS6界面簡介
2.3Photoshop CS6的基本操作
2.3.1文件的新建
2.3.2文件的存儲
2.3.3圖像的瀏覽
2.3.4面板的顯示與隱藏
2.3.5標尺、網格和參考線
2.4綜合應用
2.4.1界面顏色的修改
2.4.2網格線的設置
2.4.3【首選項】命令
2.4.4顯示與隱藏浮動面板
第3章Photoshop工具的應用
3.1選區工具
3.1.1選框工具
3.1.2移動工具
3.1.3套索工具
3.1.4魔棒工具
3.2繪畫與修飾工具
3.2.1畫筆工具、鉛筆工具、顏色替換工具和混合器畫筆工具
3.2.2漸變工具和油漆桶工具
3.2.3歷史記錄畫筆工具和歷史記錄藝術畫筆工具
3.2.4修復工具組
3.2.5圖章工具組
3.2.6橡皮擦工具組
3.2.7模糊工具、銳化工具和涂抹工具
3.2.8減淡工具、加深工具和海綿工具
3.3路徑和矢量工具
3.3.1路徑的構成
3.3.2鋼筆工具和自由鋼筆工具
3.3.3添加錨點工具和刪除錨點工具
3.3.4轉換點工具
3.3.5路徑選擇工具和直接選擇工具
3.3.6矢量圖形工具
3.3.7【路徑】面板
3.4文字工具
3.4.1創建文字圖像和選區
3.4.2創建段落文字
3.4.3設置文字屬性
3.5其他工具
3.5.1裁剪工具
3.5.2輔助工具
3.6綜合應用
3.6.1奧運五環的制作
3.6.2矢量圖案的制作
3.6.3圖像的修剪
3.6.4文字標識的制作
3.6.5Logo的制作
第4章Photoshop圖層、通道和蒙版
4.1圖層
4.1.1圖層的基本概念
4.1.2圖層的基本操作
4.1.3圖層樣式
4.1.4圖層的混合模式
4.2通道
4.2.1通道的基本概念
4.2.2【通道】面板
4.3蒙版
4.3.1蒙版的基本操作
4.3.2快速蒙版
4.4綜合應用
4.4.1按鈕的制作
4.4.2蒙版的合成
4.4.3藝術相框的制作
第5章Photoshop色彩調整及濾鏡
5.1圖像的編輯
5.2顏色的調整
5.3濾鏡
5.4綜合應用
5.4.1鮮花字
5.4.2調色
5.4.3時鐘
第6章Flash CS6概述
6.1Flash CS6簡介
6.2Flash CS6的工作環境
6.3Flash CS6的基本操作
6.3.1文件的新建
6.3.2文件的保存
6.3.3設置影片屬性
6.3.4設置首選參數
6.3.5文件的導入與導出
6.4Flash動畫的制作流程
6.5綜合應用
6.5.1設置舞臺的顯示比率
6.5.2設置顯示網格線
6.5.3自定義工具面板
第7章Flash CS6工具箱
7.1繪制圖形的工具
7.1.1線條工具
7.1.2鉛筆工具
7.1.3橢圓工具
7.1.4矩形工具
7.1.5多角星形工具
7.1.6刷子工具
7.1.7噴涂刷工具
7.1.8鋼筆工具
7.1.9Deco工具
7.2文本工具
7.2.1文本的輸入
7.2.2文本的類型
7.2.3文本工具的【屬性】面板
7.3圖形編輯工具
7.3.1顏料桶工具
7.3.2墨水瓶工具
7.3.3滴管工具
7.3.4橡皮擦工具
7.3.5漸變變形工具
7.3.6任意變形工具
7.3.7骨骼工具和綁定工具
7.4輔助工具
7.4.1選擇工具
7.4.2部分選取工具
7.4.3套索工具
7.4.43D旋轉工具和3D平移工具
7.5綜合應用
7.5.1扇面的繪制
7.5.2商品標識的制作
第8章基礎動畫的制作
8.1動畫的基礎知識
8.1.1幀
8.1.2時間軸與圖層
8.1.3元件的創建與編輯
8.1.4場景概述
8.1.5動畫的類型
8.2逐幀動畫
8.2.1直接導入生成逐幀動畫
8.2.2創建逐幀動畫
8.3動畫補間動畫
8.3.1動畫補間動畫的制作
8.3.2動畫補間動畫的參數設置
8.4形狀補間動畫
8.4.1形狀補間動畫的制作
8.4.2形狀補間動畫的參數設置
8.4.3添加形狀提示
8.5綜合應用
8.5.1按鈕的制作
8.5.2運動小球的制作
8.5.3歡迎光臨Banner的制作
8.5.4動畫標識的制作
第9章高級動畫的制作
9.1引導層動畫
9.1.1引導層動畫的概念
9.1.2創建引導層動畫
9.1.3引導層動畫的參數設置
9.1.4取消引導層動畫
9.2遮罩層動畫
9.2.1遮罩層的概念
9.2.2創建遮罩層動畫
9.2.3取消遮罩層
9.3交互式動畫
9.3.1ActionScript 3.0簡介
9.3.2常用的數據類型
9.3.3語法規則
9.3.4變量及運算符、表達式
9.3.5流程控制語句
9.3.6利用【動作】面板添加動作
9.4綜合應用
9.4.1星空的制作
9.4.2Banner的制作
9.4.3動作按鈕的應用
第10章HTML與CSS網頁設計基礎
10.1HTML簡介
10.1.1HTML的概念
10.1.2HTML的產生及特點
10.1.3HTML和XHTML
10.2CSS簡介
10.2.1CSS的概念
10.2.2CSS的發展與特點
10.2.3CSS在網頁中的應用
10.3Dreamweaver CS6的應用
10.3.1窗口界面
10.3.2基本網頁的制作
10.3.3表格
10.3.4框架
10.3.5表單
10.3.6聲音和動畫
10.3.7CSS
第11章HTML
11.1HTML基礎
11.1.1一個簡單的HTML實例
11.1.2HTML的基本結構
11.1.3HTML的基本標記
11.2文字、列表與圖片
11.2.1文字
11.2.2段落
11.2.3列表
11.2.4圖片
11.2.5網頁背景
11.3超鏈接
11.3.1創建超鏈接
11.3.2錨點
11.3.3圖像的超鏈接
11.4表格基礎
11.4.1創建表格
11.4.2表格的屬性
11.4.3表格行的對齊方式
11.4.4行和列的合并
11.4.5表格的結構
11.4.6表格的標題
11.4.7表格的嵌套
11.5框架基礎
11.5.1創建框架
11.5.2分割窗口
11.5.3設置框架邊框
11.5.4框架的屬性
11.5.5在框架中使用鏈接
11.5.6浮動框架
11.6表單基礎
11.6.1添加表單
11.6.2輸入標簽
11.6.3下拉列表
11.6.4文本域
11.7多媒體和滾動文字
11.7.1多媒體元素
11.7.2插入背景音樂
11.7.3滾動字幕
11.8綜合應用
11.8.1蝴蝶之戀
11.8.2個人主頁
第12章CSS與DIV
12.1CSS基礎
12.1.1CSS樣式表的設置方法
12.1.2選擇符
12.1.3偽類和偽元素
12.1.4CSS的優先級
12.1.5CSS中的單位
12.2文字和文本樣式
12.2.1設置文字樣式
12.2.2設置文本樣式
12.2.3空白與換行
12.2.4設置間距
12.2.5CSS注釋
12.3設置表格、列表和滾動條樣式
12.3.1設置表格樣式
12.3.2設置列表樣式
12.3.3設置滾動條樣式
12.4設置背景、邊框、邊距和補白
12.4.1設置背景
12.4.2設置邊框
12.4.3設置邊距
12.4.4設置補白
12.5控制元素布局
12.5.1塊級元素和內聯元素
12.5.2定位
12.5.3浮動
12.5.4溢出與剪切
12.5.5對象的顯示與隱藏
12.6綜合應用
12.6.1登錄界面
12.6.2花店Banner
第13章JavaScript
13.1JavaScript基礎
13.1.1JavaScript概述
13.1.2第一個JS程序
13.1.3編寫與規則
13.2JavaScript程序
13.2.1語句和語句塊
13.2.2代碼
13.2.3消息對話框
13.2.4注釋
13.3變量、數據類型和表達式
13.3.1變量
13.3.2數據類型
13.3.3運算符與表達式
13.4控制結構
13.4.1順序結構
13.4.2分支結構
13.4.3循環結構
13.5函數
13.5.1常用系統函數
13.5.2自定義函數
13.5.3用return返回函數的計算結果
13.5.4函數變量的作用域
13.6JavaScript事件和對象
13.6.1事件
13.6.2常用對象
13.6.3BOM
13.6.4DOM
13.7綜合應用
13.7.1顯示時間特效
13.7.2圖片特效
第14章Ajax
14.1Ajax概述
14.2Ajax原理
14.2.1Ajax的組成部分
14.2.2傳統Web應用和Ajax應用
14.3應用Ajax的步驟
14.4JSON
14.4.1JSON語法
14.4.2JSON對象
14.4.3在JavaScript中使用JSON
14.5綜合應用
第15章jQuery
15.1jQuery概述
15.1.1jQuery的起源
15.1.2jQuery的功能
15.1.3jQuery的應用
15.2jQuery選擇器
15.2.1jQuery選擇器的概念
15.2.2jQuery選擇器的分類
15.2.3基礎選擇器
15.2.4層次選擇器
15.2.5基本過濾器
15.2.6內容過濾器
15.2.7可見性過濾器
15.2.8屬性過濾器
15.2.9表單選擇器
15.2.10子元素過濾器
15.2.11表單過濾器
15.3查找與篩選元素
15.3.1過濾函數
15.3.2查找函數
15.3.3用jQuery操作DOM
15.4jQuery工具函數
15.4.1瀏覽器特性檢測
15.4.2數組和對象操作
15.4.3其他工具函數
15.5jQuery UI
15.5.1jQuery UI基礎
15.5.2Datepicker控件
15.5.3Button控件
15.6綜合應用
參考文獻