-
>
全國計算機等級考試最新真考題庫模擬考場及詳解·二級MSOffice高級應用
-
>
決戰行測5000題(言語理解與表達)
-
>
軟件性能測試.分析與調優實踐之路
-
>
第一行代碼Android
-
>
JAVA持續交付
-
>
EXCEL最強教科書(完全版)(全彩印刷)
-
>
深度學習
職業教育“十三五”改革創新規劃教材Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版) 版權信息
- ISBN:9787302501619
- 條形碼:9787302501619 ; 978-7-302-50161-9
- 裝幀:一般膠版紙
- 冊數:暫無
- 重量:暫無
- 所屬分類:>
職業教育“十三五”改革創新規劃教材Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版) 本書特色
本書以HTML 5和CSS 3的基礎知識作為重點講解對象,在W3C規范的指導下,將其分散在Dreamweaver軟件的講解之中,并將前端的思維模式融入到每個知識點中,配合免費的微課視頻,使讀者完全能夠自主的進行學習,掌握的**知識和技能。全書共分為12章,章節安排難度遞進,**知識無縫銜接,每章有理論,堂堂有案例,課后有實訓。主要內容包括:網頁設計基礎; HTML語言基礎; Dreamweaver基礎與CSS入門;文本與圖像;浮動、定位和列表;表格與表單;框架、模板與CSS 3新增布局;行為與Spry構件; CSS進階提高;站點測試、上傳與維護;綜合案例解析——電子商務網站;實訓指導書。本書可作為應用型本科、高職高專院校計算機相關專業的教材,也可供想從事網頁設計的讀者自學使用,還可作為IT類培訓機構的網頁設計培訓教程。
職業教育“十三五”改革創新規劃教材Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版) 內容簡介
本書以HTML 5和CSS 3的基礎知識作為重點講解對象,在W3C規范的指導下,將其分散在Dreamweaver軟件應用的講解之中,并將前端的思維模式融入每個知識點中,配合免費的微課視頻,使讀者完夠自主學習,掌握推薦的知識和技能。全書共分為12章,章節安排難度遞進,推薦知識無縫銜接,每章有理論,堂堂有案例,課后有實訓。 在理論知識方面,一方面講解Dreamweaver軟件的使用方法,另一方面注重與HTML 5和CSS 3相關的前端知識的補充,使學生理解更為透徹,能夠融會貫通。 在實踐操作方面,注重提高讀者的手寫代碼能力,每章除了小型案例以外,還提供模仿案例和自主提高案例,讀者可不斷強化所學知識。 本書可作為應用型本科及各層次職業院校計算機相關專業的教材,還可作為IT類培訓機構的網頁設計培訓教程。
職業教育“十三五”改革創新規劃教材Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版) 目錄
1.1Web時代的重要理念1
1.1.1Web標準簡介1
1.1.2表現與結構相分離3
1.1.3HTML 5時代5
1.2網站的入門知識6
1.2.1網頁、網站及其構成元素6
1.2.2網頁設計的原則、風格和潮流8
1.2.3網站建設的基本流程11
1.2.4開發與調試工具13
1.3習題14
第2章HTML語言基礎15
2.1HTML的歷史沿革15
2.1.1從HTML 4.01到XHTML15
2.1.2從XHTML到HTML 515
2.1.3HTML 5要解決的問題16
2.2文檔結構17
2.2.1標簽、元素、屬性和值17
2.2.2DOCTYPE聲明19
2.2.3html元素、head元素與body元素19
2.3HTML 5中常見的元素20
2.3.1塊級元素21
2.3.2內聯元素22
2.3.3列表類元素25
2.3.4表格類元素27
2.3.5表單類元素28
2.3.6多媒體類元素33
2.3.7HTML 5新增的結構類元素35
2.4過程指導——HTML 5元素的簡單運用37
2.5自主任務——使用記事本創建簡單頁面40
2.6習題40
Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版)目錄第3章Dreamweaver基礎與CSS入門42
3.1工作環境42
3.1.1文檔和編碼工具欄42
3.1.2屬性面板44
3.1.3常用面板介紹45
3.1.4常規設置46
3.2站點47
3.2.1站點的基本概念及其創建方法47
3.2.2“文件”面板的常用操作49
3.2.3管理站點51
3.3重要的div元素52
3.3.1div元素是什么53
3.3.2在Dreamweaver中創建DIV容器的方法53
3.4CSS入門55
3.4.1什么是CSS56
3.4.2CSS語法與鏈接方法56
3.4.3盒子模型58
3.5常見的CSS選擇器61
3.5.1通配符選擇器與類型選擇器62
3.5.2ID選擇器與類選擇器62
3.5.3包含選擇器與群組選擇器64
3.5.4屬性選擇器64
3.6過程指導——淘寶店鋪周年慶專題頁面66
3.6.1過程分析66
3.6.2步驟詳解66
3.7自主任務——“中秋茶相伴”淘寶店鋪專題銷售頁面72
3.8習題72
第4章文本與圖像74
4.1文本74
4.1.1插入文本74
4.1.2創建超鏈接75
4.1.3與文本相關的基礎屬性78
4.1.4行高與首行縮進81
4.1.5文本陰影83
4.1.6溢出文本與文本換行83
4.1.7CSS偽類在超鏈接方面的應用86
4.2圖像87
4.2.1插入圖像與圖像超鏈接88
4.2.2與圖像相關的CSS屬性92
4.2.3圖文混排94
4.3過程指導——使用HTML 5新增元素創建“燈塔漫畫背景博客”96
4.3.1過程分析96
4.3.2步驟詳解97
4.4自主任務——圖像與文本的簡單應用103
4.5習題104
第5章浮動、定位和列表106
5.1浮動106
5.1.1浮動的基本知識106
5.1.2清除浮動109
5.2定位110
5.2.1靜態定位與固定定位110
5.2.2相對定位與絕對定位112
5.3列表115
5.3.1與列表相關的CSS屬性115
5.3.2列表的圖像修飾符116
5.3.3縱向導航118
5.3.4橫向導航119
5.3.5圖文信息列表121
5.4過程指導——“五月美食節專場”網頁的設計與制作124
5.4.1過程分析124
5.4.2步驟詳解124
5.5自主任務——“手機專賣網”的制作129
5.6習題130
第6章表格與表單131
6.1表格的創建與編輯131
6.1.1創建表格131
6.1.2單元格屬性設置132
6.1.3單元格基本操作133
6.2CSS在表格中的應用135
6.2.1使用bordercollapse屬性制作細線表格135
6.2.2使用偽類選擇器制作隔行變色表格137
6.3表單的創建與編輯138
6.3.1表單域138
6.3.2常見表單對象140
6.4CSS在表單中的應用147
6.4.1文本域的美化147
6.4.2CSS 3按鈕147
6.4.3搜索框的美化149
6.5過程指導——“Yuze App注冊”頁面的制作150
6.5.1過程分析150
6.5.2步驟詳解150
6.6自主任務——“網站后臺登錄”頁面的制作154
6.7習題155
第7章框架、模板與CSS 3新增布局156
7.1框架156
7.1.1基本概念156
7.1.2使用iframe元素創建框架頁面157
7.2模板158
7.2.1模板是什么158
7.2.2使用模板快速創建頁面158
7.2.3模板的修改162
7.3CSS 3多列布局163
7.3.1使用columns屬性創建多列布局163
7.3.2多列布局的相關屬性164
7.4CSS 3彈性盒布局166
7.4.1使用盒布局166
7.4.2彈性盒布局相關屬性詳解166
7.5適合移動設備的響應式布局172
7.5.1響應式布局172
7.5.2使用CSS 3的media query實現響應式布局172
7.6過程指導——制作適合多種設備終端顯示的響應式頁面176
7.6.1過程分析176
7.6.2步驟詳解179
7.7自主任務——制作簡單響應式頁面185
7.8習題186
第8章行為與Spry構件187
8.1行為187
8.1.1事件與動作相關概念187
8.1.2“行為”面板188
8.1.3“彈出信息”行為189
8.1.4“打開瀏覽器窗口”行為190
8.1.5“改變屬性”行為190
8.2Spry構件193
8.2.1Spry菜單欄193
8.2.2Spry選項卡式面板193
8.2.3Spry折疊式構件194
8.3過程指導——精品課程網站的設計與制作195
8.3.1過程分析196
8.3.2步驟詳解196
8.4自主任務——精品課程網站主頁的制作211
8.5習題212
第9章CSS進階213
9.1CSS Sprite技術213
9.1.1CSS Sprite技術簡述213
9.1.2CSS Sprite技術詳解214
9.2CSS 3偽類選擇器217
9.2.1:root、:not、:target和∷selection選擇器217
9.2.2:firstchild、:lastchild和:onlychild選擇器219
9.3CSS 3漸變220
9.4CSS 3過渡222
9.4.1transition屬性簡介222
9.4.2CSS 3過渡動畫的實現223
9.5習題226
第10章站點測試、上傳與維護227
10.1站點測試227
10.1.1瀏覽器兼容性測試227
10.1.2鏈接的測試228
10.2站點上傳230
10.2.1注冊域名230
10.2.2申請網站空間232
10.2.3內容上傳233
10.3維護與推廣238
10.3.1站點維護238
10.3.2網站推廣239
10.4習題240
第11章綜合案例解析——電子商務網站241
11.1電子商務網站的簡易需求分析241
11.2電子商務網站的布局分析242
11.3實現過程245
11.3.1主頁的實現245
11.3.2檢索頁的實現253
11.3.3產品信息頁的實現256
11.4習題258
第12章實訓指導260
12.1實訓的意義和目的260
12.2實訓要求與步驟261
12.3考核標準261
參考文獻263
職業教育“十三五”改革創新規劃教材Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版) 節選
第3章 Dreamweaver基礎與CSS入門【本章導讀】 在工作中,常用Adobe Dreamweaver工具軟件構建網站和應用程序,該工具提供可視化布局功能,開發者能夠快速創建站點。本章除了介紹該款軟件的使用方法外,還將向讀者詳細介紹工作中必不可少的CSS內容。 【學習目標】 熟悉Dreamweaver的工作環境; 了解站點及其相關知識,能夠使用Dreamweaver創建和管理站點; 掌握CSS的基本語法,理解盒模型的內涵; 熟練掌握常用的CSS選擇器,能夠通過選擇器修改指定對象的CSS規則。 3.1工作環境 Adobe Dreamweaver CS6是一個全面的專業工具集,可用于設計并部署極具吸引力的網站和Web應用程序。在編輯文檔的狀態下,Dreamweaver CS6的工作環境如圖31所示,其中常用的區域含義如下。 圖31Dreamweaver CS6的工作環境 (1) 文檔工具欄: 該工具欄提供各種文檔窗口視圖,以及各種查看選項和方法。 (2) 代碼視圖: 用于編輯和查看當前編輯狀態下的網頁源代碼。 (3) 設計視圖: 用于可視化頁面布局、可視化編輯,提供快速應用程序開發的設計環境。在該視圖中,Dreamweaver顯示的文檔內容類似于在瀏覽器中查看頁面時的效果。 (4) 屬性面板: 用于查看和更改所選對象或文本的各種屬性,每種對象都具有不同的屬性,默認狀態下該面板是折疊狀態。 (5) 標簽選擇器: 用于顯示環繞當前選定內容所在標簽的層次結構。單擊該層次結構中的任何標簽,可以選擇該標簽及其全部內容。 (6) “文件”面板: 用于管理當前站點和本地的文件,類似于Windows資源管理器。 (7) “CSS樣式”面板: 用于管理和編輯選定對象的CSS樣式規則。 3.1.1文檔和編碼工具欄 Dreamweaver CS6包含了4種工具欄: 樣式呈現、文檔、標準、編碼。用戶可以通過執行“查看”→“工具欄”命令,打開或關閉某個工具欄。這里文檔工具欄和編碼工具欄較為常用,下面進行簡單介紹。 Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版)第3章Dreamweaver基礎與CSS入門1. 文檔工具欄 使用文檔工具欄所包含的按鈕可以在文檔的不同視圖之間進行快速切換。工具欄中還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令與選項,如圖32所示。 圖32文檔工具欄 (顯示代碼視圖): 單擊該按鈕后,文檔窗口中僅顯示頁面的代碼。 (顯示代碼視圖和設計視圖): 單擊該按鈕后,將文檔窗口拆分為代碼視圖和設計視圖。 (顯示設計視圖): 單擊該按鈕后,文檔窗口中僅顯示頁面的設計界面,用戶可以在此窗口中對網頁元素直接編輯。 (實時視圖): 顯示不可編輯的、交互式的、基于瀏覽器的文檔視圖。 (多屏幕): 可以使設計師在多個設備屏幕大小不同的狀態下預覽當前頁面。 (瀏覽器調試/預覽): 在瀏覽器中預覽或調試文檔。 (文件管理): 彈出文件管理菜單。 (W3C驗證): 方便設計師對當前頁面在線驗證是否符合W3C的標準。 (檢查瀏覽器兼容性): 用于檢查用戶的CSS是否對于各種瀏覽器均兼容。 (可視化助理): 可以使用各種可視化助理來設計頁面。 (刷新設計視圖): 在代碼視圖中對文檔進行更改后刷新文檔的設計視圖,可以使更改內容顯示在設計視圖中。 (文檔標題): 在此輸入的文字內容,將會作為網站標題出現在瀏覽器左上角。 2. 編碼工具欄 編碼工具欄垂直顯示在文檔窗口的左側,它包含可用于執行多種標準編碼操作的按鈕,如圖33所示。圖33編碼工具欄 (打開的文檔): 顯示當前打開的文檔。 (顯示代碼導航): 顯示代碼導航器。 (折疊整個標簽): 折疊一組標簽之間的內容。 (折疊所選): 折疊所選代碼。 (擴展全部): 還原所有折疊的代碼。 (選擇父標簽): 選擇當前標簽的父標簽。 (選取當前代碼段): 選取當前代碼段。 (行號): 顯示或隱藏代碼的行號。 (高亮無效代碼): 用黃色顯示無效代碼。 (自動換行): 自動換行。 (語法錯誤警報): 啟用或禁用語法錯誤警報。 (應用注釋): 在所選代碼兩側添加注釋標簽。 (刪除注釋): 刪除注釋。 (環繞標簽): 在所選代碼兩側自動添加某個標簽。 (*近的代碼片段): 從“代碼片段”面板中插入代碼。 (移動或轉換CSS): 移動CSS位置,或轉換CSS類別。 (縮進代碼): 將選定內容向右移動。 (凸出代碼): 將選定內容向左移動。 (格式化源代碼): 將代碼賦予標準格式。 3.1.2屬性面板 顯示屬性面板的快捷鍵是Ctrl+F3,用戶可以通過該面板檢查和編輯當前選定頁面元素(如文本和插入的對象)*常用的屬性。根據選定元素的不同,屬性面板所呈現的屬性也不盡相同,如圖34和圖35所示。 圖34屬性面板(選定對象為圖像) 圖35屬性面板(選定對象為文本) 通過屬性面板,用戶能夠快捷地修改、應用對象的基本屬性,使用頻率較高。 3.1.3常用面板介紹 Dreamweaver CS6為用戶提供了可自由組合的多功能面板,大量操作可以快捷地通過面板迅速完成。 1. “插入”面板 顯示或隱藏“插入”面板的快捷鍵是Ctrl+F2。該面板包含用于創建和插入對象(如表格、圖像和鏈接),其中包含多種按鈕。 這些按鈕按9種類別進行組織。 (1) “常用”類別: 用于創建和插入*常用的對象,如圖像和表格。 (2) “布局”類別: 用于插入表格、表格元素、標簽、框架和Spry構件。 (3) “表單”類別: 包含一些按鈕,用于創建表單和插入表單元素。 (4) “數據”類別: 用于插入Spry數據對象和其他動態元素,例如,記錄集、重復區域以及插入記錄表單和更新記錄表單。 (5) Spry 類別: 包含一些用于構建Spry頁面的按鈕,包括Spry數據對象和構件。 (6) jQuery Mobile類別: 可幫助用戶快速設計出適合大多數移動設備的Web應用程序,同時可使其自身適應設備的各種尺寸。 (7) InContext Editing類別: 包含供生成InContext編輯頁面的按鈕,包括用于可編輯區域、重復區域和管理CSS類的按鈕。 (8) “文本”類別: 用于插入各種文本格式和列表格式的標簽。 (9) “收藏夾”類別: 用于將“插入”面板中*常用的按鈕分組和組織到某一公共位置。 部分類別如圖36~圖38所示。 圖36“常用”類別 圖37“表單”類別 圖38jQuery Mobile類別 “常用”類別是“插入”面板中使用率非常高的類別,其中各按鈕的含義如下。 (超鏈接): 在網頁中插入超鏈接。 (電子郵件鏈接): 插入電子郵件鏈接。 (命名錨記): 用于頁面內定位。 (水平線): 在光標處插入水平線。 (表格): 插入表格。 (插入標簽): 插入標簽。 (圖像): 可插入圖像、占位符、熱點等對象。 (媒體): 可插入Flash、FLV等多媒體對象。 (構件): 由HTML、CSS和JavaScript組成的網頁組件。 (日期): 可插入多種格式的日期。 (服務器端包括): 選擇一個網頁文件,將其添加到當前站點中。 (注釋): 插入HTML注釋。 (文件頭): 設置文件頭不同的屬性。 (腳本): 插入腳本。 (模板): 創建和編輯模板。 (標簽): 插入置標語言的標簽,方便編輯代碼。 2. “CSS樣式”面板 “CSS樣式”面板的作用在于跟蹤影響當前所選頁面元素的CSS規則和屬性,打開或隱藏該面板的快捷鍵是Shift+F11,如圖39所示。對于初學圖39“CSS樣式”面板 者來講,“CSS樣式”面板可以用于查看和修改CSS規則,而隨著對CSS的熟悉,筆者建議讀者手動書寫CSS規則,這樣不但對各種屬性有進一步了解,而且編寫代碼的效率會大幅提升。 3.1.4常規設置〖*2〗1. 首選參數設置執行“編輯”→“首選參數”命令,或按Ctrl+U鍵,即可打開“首選參數”對話框,如圖310所示。 圖310“首選參數”對話框 在該設置界面中,包含“文檔選項”和“編輯選項”兩類設置,部分主要的設置含義如下。 (1) 啟用相關文件: 用于查看哪些文件與當前文檔相關(如CSS或JavaScript文件)。Dreamweaver在文檔頂部為每個相關文件顯示了一個按鈕,單擊該按鈕可打開相應文件。 (2) 移動文件時更新鏈接: 當移動、重命名或刪除站點中的文檔時所發生的操作,系 查看全部↓ 前言/序言 Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版)目前,針對移動互聯網開發領域的“Web前端工程師”可謂是熱門搶手的崗位,通過仔細分析崗位描述可知,該崗位大多要求應聘者擁有“精通W3C規范,熟練掌握CSS、HTML等Web技術”“能夠手寫符合W3C標準的前端頁面代碼”等崗位技能。本書在緊密結合市場需求的前提下,以HTML 5和CSS 3的基礎知識作為重點講解對象,在W3C規范的指導下,將前端的思維模式融入每個知識點中,再配合免費的微課視頻,使讀者完全能夠自主學習。 全書共分為12章,根據知識的難易程度和學習者的學習習慣,對HTML 5和CSS 3知識進行無縫銜接,使每章有理論,堂堂有案例,課后有實訓。本書主要內容包括: 網頁設計基礎,HTML語言基礎,Dreamweaver基礎與CSS入門,文本與圖像,浮動、定位和列表,表格與表單,框架、模板與CSS 3新增布局,行為與Spry構件,CSS進階,站點測試、上傳與維護,綜合案例解析——電子商務網站以及實訓指導。 本書具有以下特色。 微課視頻: 所有知識點均包含在許多短小的視頻中,不受時空限制,掃描二維碼就能預習或復習所學知識。 貼近崗位: 本書涉及的內容均是互聯網類崗位中必不可少的知識,通過學習讀者能夠獲得崗位需求的基本能力。 精選案例: 每章包含“過程指導”環節,通過精心挑選的實戰案例,以及詳略得當的過程指導,讀者在學習過程中能夠直觀、清晰地看到操作過程和效果。 自主任務: 每章包含“自主任務”環節,留出時間讓讀者參照“過程指導”進行實訓練習。 配套資源: 本書提供全套源文件、微課視頻、PPT課件、課時授課計劃和學期授課計劃,讀者可以從清華大學出版社網站(http: //www.tup.tsinghua.edu.cn)下載。 本書既可作為應用型本科以及各層次職業院校計算機相關專業的教材,也可作為IT類培訓機構的網頁設計培訓教程。 本書的參考學時為60學時,為了方便教學,這里提供各章任務的學時分配,詳見下表。第1章網頁設計基礎112第2章HTML語言基礎246第3章Dreamweaver基礎與CSS入門246第4章文本與圖像246第5章浮動、定位和列表246第6章表格與表單224第7章框架、模板與CSS 3新增布局448第8章行為與Spry構件112第9章CSS進階246第10章站點測試、上傳與維護112第11章綜合案例解析——電子商務網站134第12章實訓指導0.57.58合計60本書由吳豐編著,在編寫過程中,許多同仁給予了很大的幫助和支持,提出了許多中肯的建議,在此表示感謝。同時,還要感謝清華大學出版社的所有編審人員為本書的出版所付出的辛勤勞動。*后,還要感謝家人的理解和支持。本書的成功出版是大家共同努力的結果,謝謝你們! 另外,由于編著者水平有限,書中難免有不足之處,敬請廣大讀者批評、指正,以便修訂時使之更加完善。誠心希望與讀者共同交流、共同成長! 編著者聯系方式: 413101130@qq.com。 編著者 2018年3月Dreamweaver CS6+HTML 5+CSS 3網頁制作基礎教程(微課版) 查看全部↓
- >
李白與唐代文化
- >
伊索寓言-世界文學名著典藏-全譯本
- >
推拿
- >
詩經-先民的歌唱
- >
新文學天穹兩巨星--魯迅與胡適/紅燭學術叢書(紅燭學術叢書)
- >
山海經
- >
煙與鏡
- >
苦雨齋序跋文-周作人自編集