●  章  網頁設計基礎  1 1.1  萬維網概述  2 1.2  HTML 語言  2 1.3  HTML 開發組織  2 1.4  網頁設計相關概念  2 1.4.1  超鏈接  3 1.4.2  統一資源定位器  3 1.4.3  網站  3 1.4.4  網頁  3 1.4.5  首頁  3 1.5  網頁的開發工具和瀏覽工具  3 1.5.1  網頁開發工具簡介  3 1.5.2  網頁瀏覽工具  5 1.5.3  Dreamweaver 的使用  6 1.6  網頁制作相關技術  7 1.6.1  客戶端應用技術  7 1.6.2  服務器端應用技術  9 小結  10 習題  10 第2  章 初識HTML5  11 2.1  HTML5 概述  12 2.1.1  HTML 發展歷史  12 2.1.2  什麼是HTML5  12 2.1.3  HTML5 文件基本結構  12 2.1.4  使用Dreamweaver 創建一個 HTML  5 頁面  13 實例：使用Dreamweaver  實現網頁 導航 2.2  文字標簽  15 2.2.1  顯示普通文字  15 2.2.2  輸入特殊符號  15 2.2.3  標題字標簽  16 2.2.4  修飾文字標簽  16 2.2.5  修飾字體標簽  16 實例：呈現網頁中的商品詳情信息 2.3  段落標簽  17 2.3.1  段落標簽
●
●  17 2.3.2  取消文字換行標簽  17 2.3.3  修飾段落的對齊屬性align  18 實例：顯示一則網頁中的打折促銷 廣告 2.3.4  保留原始排版標簽  18 實例：使用字母“o”旦 快樂” 2.4  圖片標簽和列表標簽  19 2.4.1  插入圖片標簽  19 2.4.2  建立有序列表  19 實例：制作網頁版心裡測試問卷 2.4.3  建立無序列表  22 實例：實現51  購商城中的商品 詳情簡介 2.4.4  建立定義列表  24 實例：顯示庫存商品信息 2.5  鏈接標簽  26 2.5.1  建立文本鏈接  26 2.5.2  建立書簽鏈接  26 實例：實現在網頁中添加書簽鏈接 小結  29 上機指導  29 習題  30 第3  章 HTML5 中的表格  31 3.1  繪制表格  32 3.1.1  設置表格的標題  32 3.1.2  設置表格的寬度和高度  32 3.1.3  設置表格的邊框色  33 3.1.4  設置表格的對齊方式  33 3.1.5  設置表格的背景顏色  33 實例：實現商品頁面 3.1.6  設置表格的背景圖片  34 實例：利用表格實現商品列表 3.2  行標簽的屬性  35 3.2.1  設置行的高度  35 3.2.2  設置行的邊框顏色  36 3.2.3  設置行的背景顏色  36 3.2.4  設置行的水平位置  36 3.2.5  設置行的垂直位置  37 實例：實現商城的商品布局 3.3 &nbs格標簽的屬性  38 3.3.1  格的大小  38 3.3.2  格的水平對齊屬性  39 3.3.3  格的垂直對齊屬性  39 3.3.4  格的水平跨度  39 3.3.5  格的垂直跨度  40 3.3.6  格的背景色  41 3.3.7  格的背景圖片  41 3.3.8 &nbs格屬性綜合運用  41 實例：商城的手機商品頁面 3.4  表頭標簽的屬性  42 3.5  表格的結構標簽  43 3.5.1  設置表首樣式  43 3.5.2  設置表主體樣式  45 3.5.3  設置表尾樣式  45 小結  46 上機指導  46 習題  48 第4  章 使用HTML 5 創建表單  49 4.1  表單概述  50 4.2  表單標簽  50 4.2.1  處理程序屬性—action  50 4.2.2  表單名稱屬性—name  51 4.2.3  傳送方法屬性—method  51 4.2.4  編碼方式屬性—enctype  52 4.2.5  目標顯示方式屬性—target  53 4.3  輸入標簽  53 4.3.1  文本框—text  53 實例：實現51  購商城的登錄界面 賬號文本框 4.3.2  密碼域—password  54 實例：實現51  購商城的登錄界面 的密碼域 4.3.3  “單選”按鈕—radio  56 實例：實現51  購商城的購買頁面 中選擇顏色的單選按鈕 4.3.4  復選框—checkbox  57 實例：實現51  購商城的購物車界 面選擇所要結算商品的復 選框 4.3.5  “普通”按鈕—button  58 實例：實現51  購商城購買頁面中 “加入購物車”和“立即購買” 按鈕 4.3.6  “提交”按鈕—submit  59 實例：實現51  購商城的購物車界面 4.3.7  “重置”按鈕—reset  60 實例：實現個人信息表重置 4.3.8  圖像域—image  61 實例：實現商城的客服中心頁面 “和我聯繫”按鈕 4.3.9  隱藏域—hidden  62 4.3.10  文件域—file  63 實例：實現商城的個人中心上傳頭像 4.4  文本域標簽—textarea  64 實例：實現商城評價頁面輸入評價框 4.5  列表/菜單標簽  65 實例：實現商城添加收貨地址頁面 輸入電話和地址的下拉菜單 4.6  新增表單屬性  66 小結  70 上機指導  70 習題  72 第5  章 使用HTML5 繪制圖形  73 5.1  認識HTML5 中的畫布—Canvas  74 5.1.1  什麼是Canvas  74 5.1.2  在HTML 裡創建畫布  74 5.1.3  使用Canvas 繪制圖形實例  74 5.2  繪制基本圖形  75 5.2.1  繪制直線  75 5.2.2  繪制矩形  77 5.2.3  繪制曲線  77 5.2.4  繪制圓形  78 實例：使用canvas  繪制木頭人 5.2.5  繪制漸變圖形  80 實例：使用canvas  繪制基本圖形 5.2.6  繪制平移效果的圖形  83 5.2.7  繪制縮放效果的圖形  83 5.2.8  繪制旋轉效果的圖形  83 實例：使用canvas  中實現手機圖片 的特效 5.3  使用圖像  84 5.3.1  引入圖像  84 5.3.2  平鋪圖像  85 5.3.3  裁剪圖像  86 實例：實現51  購商城中的商品放 大鏡效果 5.4  繪制文字  88 5.4.1  繪制輪廓文字  88 5.4.2  繪制填充文字  88 5.4.3  文字相關屬性  88 實例：使用canvas  中實現動態打字 特效 小結  89 上機指導  90 習題  93 第6  章 走進HTML5 的多媒體世界  94 6.1  設置滾動文字  95 6.1.1  滾動文字標簽—marquee  95 6.1.2  滾動方向屬性—direction  95 6.1.3  滾動方式屬性—behavior  96 實例：實現從不同方向，以不同方式 滾動的商城的促銷信息展示 6.1.4  滾動速度屬性—scrollamount  97 6.1.5  滾動延遲屬性—scrolldelay  97 6.1.6  滾動循環屬性—loop  98 實例：實現以不同的滾動速度，滾 動延遲以及滾動循環次數的 商城的促銷信息展示 6.1.7  滾動範圍屬性—width、height 98 6.1.8  滾動背景顏色屬性—bgcolor 99 實例：實現以不同的滾動範圍、滾 動背景顏色的商城的促銷信 息展示 6.1.9  滾動空間屬性—hspace、vspace 100 6.2  標簽和標簽  100 6.3  多媒體標簽的基本屬性及使用  101 6.3.1  多媒體標簽基本屬性  101 6.3.2  使用標簽播放音頻  105 實例：實現51  購商城商品詳情頁 面的音樂播放 6.3.3  使用標簽播放視頻  105 實例：使用標簽播放一段 廣告視頻 6.3.4  設置背景音樂—bgsound  106 6.4  多媒體標簽的方法  106 實例：實現通過多媒體標簽提供的 方法控制視頻的播放 6.5  多媒體標簽的事件  108 6.5.1  事件處理  108 6.5.2  事件介紹  108 小結  109 上機指導  109 習題  110 第7  章 CSS3 概述  111 7.1  CSS 的發展史  112 7.2  CSS3 概述  112 7.3  主流瀏覽器對CSS 的支持  113 7.4  一個簡單的CSS3 示例  114 實例：實現背景切換和鼠標滑過展 開圖片的效果 小結  116 習題  116 第8  章 CSS3 中的選擇器  117 8.1  選擇器概述  118 5.2.1  繪制直線  75 5.2.2  繪制矩形  77 5.2.3  繪制曲線  77 5.2.4  繪制圓形  78 實例：使用canvas  繪制木頭人 5.2.5  繪制漸變圖形  80 實例：使用canvas  繪制基本圖形 5.2.6  繪制平移效果的圖形  83 5.2.7  繪制縮放效果的圖形  83 5.2.8  繪制旋轉效果的圖形  83 實例：使用canvas  中實現手機圖片 的特效 5.3  使用圖像  84 5.3.1  引入圖像  84 5.3.2  平鋪圖像  85 5.3.3  裁剪圖像  86 實例：實現51  購商城中的商品放 大鏡效果 5.4  繪制文字  88 5.4.1  繪制輪廓文字  88 5.4.2  繪制填充文字  88 5.4.3  文字相關屬性  88 實例：使用canvas  中實現動態打字 特效 小結  89 上機指導  90 習題  93 第6  章 走進HTML5 的多媒體世界  94 6.1  設置滾動文字  95 6.1.1  滾動文字標簽—marquee  95 6.1.2  滾動方向屬性—direction  95 6.1.3  滾動方式屬性—behavior  96 實例：實現從不同方向，以不同方式 滾動的商城的促銷信息展示 6.1.4  滾動速度屬性—scrollamount  97 6.1.5  滾動延遲屬性—scrolldelay  97 6.1.6  滾動循環屬性—loop  98 實例：實現以不同的滾動速度，滾 動延遲以及滾動循環次數的 商城的促銷信息展示 6.1.7  滾動範圍屬性—width、height 98 6.1.8  滾動背景顏色屬性—bgcolor 99 實例：實現以不同的滾動範圍、滾 動背景顏色的商城的促銷信 息展示 6.1.9  滾動空間屬性—hspace、vspace 100 6.2  標簽和標簽  100 6.3  多媒體標簽的基本屬性及使用  101 6.3.1  多媒體標簽基本屬性  101 6.3.2  使用標簽播放音頻  105 實例：實現51  購商城商品詳情頁 面的音樂播放 6.3.3  使用標簽播放視頻  105 實例：使用標簽播放一段 廣告視頻 6.3.4  設置背景音樂—bgsound  106 6.4  多媒體標簽的方法  106 實例：實現通過多媒體標簽提供的 方法控制視頻的播放 6.5  多媒體標簽的事件  108 6.5.1  事件處理  108 6.5.2  事件介紹  108 小結  109 上機指導  109 習題  110 第7  章 CSS3 概述  111 7.1  CSS 的發展史  112 7.2  CSS3 概述  112 7.3  主流瀏覽器對CSS 的支持  113 7.4  一個簡單的CSS3 示例  114 實例：實現背景切換和鼠標滑過展 開圖片的效果 小結  116 習題  116 第8  章 CSS3 中的選擇器  117 8.1  選擇器概述  118 實例：實現51  購商城中商品詳情 裡滾動播出廣告 小結  178 上機指導  178 習題  179 1  章 JavaScript 概述  180 11.1  JavaScript 概貌  181 11.1.1  JavaScript 的歷史起源  181 11.1.2  JavaScript 的主要特點  181 11.1.3  JavaScript 成功案例  182 11.2  JavaScript 開發環境要求  184 11.2.1  硬件要求  184 11.2.2  軟件要求  184 11.3  JavaScript 在HTML 中的使用  184 11.3.1  在頁面中直接嵌入JavaScript 代碼  184 11.3.2  鏈接外部JavaScript 文件  185 實例：使用JavaScript  腳本顯示 當前的時間 小結  187 上機指導  187 習題  188 2  章 JavaScript 語言基礎  189 12.1  JavaScript 數據結構  190 12.1.1  標識符  190 12.1.2  關鍵字  190 12.1.3  常量  191 12.1.4  變量  191 12.2  數據類型  192 12.2.1  數字型數據  193 12.2.2  字符串型數據  194 12.2.3  布爾型數據  194 12.2.4  特殊數據類型  195 12.2.5  數據類型的轉換規則  195 實例：實現頁面中輸出JavaScript 語言的常用數據類型 12.3  運算符與表達式  198 12.3.1  算術運算符  198 12.3.2  比較運算符  199 12.3.3  賦值運算符  199 12.3.4  字符串運算符  200 12.3.5  布爾運算符  200 12.3.6  條件運算符  201 12.3.7  運算符優先級  201 12.3.8  表達式  201 實例：使用JavaScript  制作 一個簡單的計算器 12.4  流程控制語句  204 12.4.1  條件控制語句  204 實例：實現51  購商城的登錄界面 密碼是否輸入正確判斷 12.4.2  循環控制語句  209 實例：使用JavaScript  語法實現 九九乘法表 12.4.3  跳轉語句  213 12.5  函數  213 12.5.1  函數的定義  213 12.5.2  函數的調用  214 實例：實現51  購商城的商品詳情頁 面加入購物車按鈕調用函數 12.5.3  函數的使用  215 12.5.4  幾種特殊的函數  217 小結  219 上機指導  219 習題  221 3  章 JavaScript 對像編程  222 13.1  Window 對像  223 13.1.1  Window 對像概述  223 13.1.2  對話框  224 實例：使用HTML  語法在頁面中 顯示Window  對像常用對話框 13.1.3  窗口對像常用操作  227 13.2  Document 文檔對像  230 13.2.1  文檔對像概述  230 13.2.2  文檔對像的常用屬性、 方法與事件  230 13.2.3  Document 對像的應用  232 實例：使用HTML  語法講解 Document  文檔對像 13.3  JavaScript 與表單操作  238 13.3.1  在JavaScript 中訪問表單  238 13.3.2  在JavaScript 中訪問表單域  238 13.3.3  表單的驗證  238 實例：實現51  購商城注冊界面的 驗證 13.4  DOM 對像  240 13.4.1  DOM 概述  240 13.4.2  DOM 對像節點屬性  242 13.4.3  節點的幾種操作  243 13.4.4  獲取文檔中素  244 實例：實現51  購商城收貨地址界 面，收貨地址的刪除和復制 13.4.5  與DHTML 相對應的DOM  246 小結  247 上機指導  247 習題  249 4  章 JavaScript 中事件處理250 14.1  事件與事件處理概述  251 14.1.1  事件與事件名稱  251 14.1.2  JavaScript 的常用事件  251 14.1.3  事件處理程序的調用  253 實例：使用鍵盤事件實現隨機抽取 電話號碼 14.2  DOM 事件模型  255 14.2.1  事件流  255 14.2.2  主流瀏覽器的事件模型  255 14.2.3  事件對像  256 14.2.4  注冊與移除事件監聽器  256 14.3  鼠標鍵盤事件  258 14.3.1  鼠標的單擊事件  258 14.3.2  鼠標的按下或松開事件  258 14.3.3  鼠標的移入移出事件  258 14.3.4  鼠標的移動事件  258 14.3.5  鍵盤事件的使用  258 實例：測試JavaScript  中的鼠標 鍵盤事件 14.4  頁面事件  261 14.4.1  加載與卸載事件  261 14.4.2  頁面大小事件  261 實例：使用JavaScript  實現刮刮卡效果 14.5  表單事件  263 14.5.1  獲得焦點與失去焦點事件  263 14.5.2  焦點修改事件  263 14.5.3  表單提交與重置事件  263 實例：實現51  購商城中登錄時表 單事件的處理 小結  266 上機指導  266 習題  267 5  章 響應式網頁設計  268 15.1  概述  269 15.1.1  響應式網頁設計的概念  269 15.1.2  響應式網頁設計的優缺點  269 15.1.3  響應式網頁設計的技術原理  270 15.2  像素和屏幕分辨率  270 15.2.1  像素和屏幕分辨率  270 15.2.2  設備像素  271 15.2.3  CSS 像素  272 15.3  視口  272 15.3.1  視口  272 15.3.2  視口常用屬性  273 15.3.3  媒體查詢  274 15.4  響應式網頁的布局設計  275 15.4.1  常用布局類型  275 15.4.2  布局的實現方式  276 實例：主頁的響應式實現 （7  章遊戲公園網站） 15.4.3  響應式布局的設計與實現  277 實例：登錄頁面的響應式布局 （6  章51 購商城） 小結  280 上機指導  280 習題  281 6  章 綜合項目—51 購商城 （適配移動端）  282 16.1  項目的設計思路  283 16.1.1  項目概述  283 16.1.2  界面預覽  283 16.1.3  功能結構  284 16.1.4  文件夾組織結構  285 16.2  主頁的設計與實現  285 16.2.1  主頁的設計  285 16.2.2  頂部區和底部區功能的實現  287 16.2.3  商品分類導航功能的實現  288 16.2.4  輪播圖功能的實現  290 16.2.5  商品推薦功能的實現  292 16.2.6  適配移動端的實現  293 16.3  商品列表頁面的設計與實現  294 16.3.1  商品列表頁面的設計  294 16.3.2  分類選項功能的實現  295 16.3.3  商品列表區的實現  296 16.4  商品詳情頁面的設計與實現  297 16.4.1  商品詳情頁面的設計  297 16.4.2  商品概要功能的實現  299 16.4.3  商品評價功能的實現  300 16.4.4  猜你喜歡功能的實現  301 16.5  購物車頁面的設計與實現  303 16.5.1  購物車頁面的設計  303 16.5.2  購物車頁面的實現  303 16.6  付款頁面的設計與實現  305 16.6.1  付款頁面的設計  305 16.6.2  付款頁面的實現  305 16.7  登錄注冊頁面的設計與實現  307 16.7.1  登錄注冊頁面的設計  307 16.7.2  登錄頁面的實現  308 16.7.3  注冊頁面的實現  309 小結  311 7  章 課程設計—遊戲公園 網站  313 17.1  課程設計目的  314 17.2  遊戲公園網站概述  314 17.2.1  網站特點  314 17.2.2  功能結構  315 17.3  主頁的設計與實現  316 17.3.1  主頁的設計  316 17.3.2  頂部區和底部區功能的實現  317 17.3.3  推薦遊戲功能的實現  318 17.3.4  最新遊戲功能的實現  319 17.4  博客列表的設計與實現  321 17.4.1  博客列表的設計  321 17.4.2  博客列表的實現  321 17.5  博客詳情的設計與實現  323 17.5.1  博客詳情的設計  323 17.5.2  博客詳情的實現  324 17.6  關於我們的設計與實現  325 17.6.1  關於我們的設計  325 17.6.2  關於我們的實現  325 小結  327 附錄  實驗  328 實驗1  通過Dreamweaver 創建一個 網頁  328 實驗2  實現網頁中的買家評論信息  329 實驗3  通過表格制作商品列表  331 實驗4  通過表單實現酒店篩選  333 實驗5  鍵盤按鍵繪制不同圖形  334 實驗6  通過標簽添加視頻  336 實驗7  實現鼠標滑過圖片時的特效  338 實驗8  通過偽類選擇器實現側導航  340 實驗9  通過定位實現圖片移動  342 實驗10  通過2D 變換實現翻轉洗牌  343 實驗11  輸出一張圖片  345 實驗12  通過循環語句輸出年份 和月份  346 實驗13  在頁面指定位置顯示當前 日期  347 實驗14  圖片放大縮小  348 實驗15  制作響應式網頁主頁  349