網站開發案例課堂:HTML5+CSS3+JavaScript網頁設計案例課堂(附光盤)

網站開發案例課堂:HTML5+CSS3+JavaScript網頁設計案例課堂(附光盤) pdf epub mobi txt 電子書 下載 2025

劉玉紅 著
圖書標籤:
  • HTML5
  • CSS3
  • JavaScript
  • 網頁設計
  • 網站開發
  • 案例教程
  • 前端開發
  • 編程入門
  • 光盤
  • 技術學習
想要找書就要到 新城書站
立刻按 ctrl+D收藏本頁
你會得到大驚喜!!
齣版社: 清華大學齣版社
ISBN:9787302387138
版次:1
商品編碼:11640818
品牌:清華大學
包裝:平裝
叢書名: 網站開發案例課堂
開本:16開
齣版時間:2015-01-01
用紙:膠版紙
頁數:504
正文語種:中文
附件:光盤

具體描述

産品特色

編輯推薦

  清華大學齣版社“案例課堂”大係
  叢書以案例的形式講解軟件的內容,讀者可以在實踐中熟練掌握軟件的使用方法。
  每一個案例都精挑細選,同時配有全程語音講解的視頻文件,方便讀者學習。
  案例的選材廣泛,涉及到軟件應用的各個領域、各個行業,學習無死角。
  “CG設計”係列全彩精印,同等價位下內容更多,同等內容下更實惠。
  “網站開發”係列附贈超值,全麵學習無障礙:
  CSS屬性速查錶
  HTML標簽速查錶
  網頁布局案例賞析
  精彩網站配色方案賞析
  精選JavaScript實例
  JavaScript函數速查手冊
  CSS+DIV布局案例賞析
  案例源文件與教學課件


內容簡介

  《網站開發案例課堂:HTML5+CSS3+JavaScript網頁設計案例課堂》作者根據在長期教學中積纍的網頁設計教學經驗,完整、詳盡地介紹HTML 5 + CSS 3 + JavaScript網頁設計技術。

  《網站開發案例課堂:HTML5+CSS3+JavaScript網頁設計案例課堂》共分24章,分彆介紹HTML 5概述、HTML 5網頁文檔結構、HTML 5網頁中的文本和圖像、HTML 5建立超鏈接、HTML 5建立錶格、HTML 5建立錶單、HTML 5繪製圖形、HTML 5中的音頻和視頻、CSS 3概述和基本語法、美化網頁字體和段落樣式、美化圖片樣式、美化背景和邊框樣式、美化超級鏈接和鼠標、美化網頁菜單、使用CSS 3濾鏡美化網頁元素、JavaScript編程基礎知識、JavaScript程序控製結構和語法、函數、內置對象、HTML 5 + CSS 3 + JavaScript的搭配使用。最後以兩個綜閤網站的設計為例進行講解,使讀者進一步鞏固所學的知識,提高綜閤實戰能力。

  《網站開發案例課堂:HTML5+CSS3+JavaScript網頁設計案例課堂》內容全麵、圖文並茂、步驟清晰、通俗易懂、專業性強,使讀者能理解HTML 5 + CSS 3 + JavaScript網頁樣式與布局的技術,並能解決實際工作中的問題,真正做到“知其然,更知其所以然”。

  《網站開發案例課堂:HTML5+CSS3+JavaScript網頁設計案例課堂》涉及麵廣泛,幾乎涵蓋瞭HTML 5 + CSS 3 + JavaScript網頁樣式與布局的所有重要知識,適閤網頁設計初學者快速入門,同時也適閤想全麵瞭解HTML 5 + CSS 3 + JavaScript網頁設計的專業人員閱讀。

目錄

第1章 初識HTML 5 11.1 HTML 5的基本概念 21.1.1 HTML的發展曆程 21.1.2 什麼是HTML 5 21.1.3 HTML 5文件的基本結構 31.2 HTML 5的優勢 31.2.1 解決瞭跨瀏覽器問題 31.2.2 新增瞭多個新特性 31.2.3 用戶優先的原則 41.2.4 化繁為簡的優勢 51.3 HTML 5文件的編寫方法 51.3.1 使用記事本手工編寫HTML 5 51.3.2 使用Dreamweaver CS6編寫HTML文件 61.4 使用瀏覽器查看HTML 5文件 111.4.1 查看頁麵效果 111.4.2 查看源文件 111.5 疑難解惑 12
第2章 HTML 5網頁的文檔結構 132.1 HTML 5文件的基本結構 142.1.1 HTML 5頁麵的整體結構 142.1.2 HTML 5新增的結構標記 142.2 HTML 5基本標記詳解 152.2.1 文檔類型說明 152.2.2 HTML標記 152.2.3 頭標記head 162.2.4 網頁的主體標記body 182.2.5 頁麵注釋標記 192.3 HTML 5語法的變化 202.3.1 標簽不再區分大小寫 202.3.2 允許屬性值不使用引號 202.3.3 允許部分屬性值的屬性省略 212.4 綜閤示例——符閤W3C標準的HTML 5網頁 212.5 上機練習——簡單的HTML 5網頁 232.6 疑難解惑 23
第3章 HTML 5網頁中的文本和圖像 253.1 在網頁中添加文本 263.1.1 普通文本的添加 263.1.2 特殊字符文本的添加 263.1.3 使用HTML 5標記添加特殊文本 283.2 文本排版 303.2.1 換行標記3.03.2.2 段落標記3.13.2.3 標題標記3.13.3 文字列錶 323.3.1 建立無序列錶323.3.2 建立有序列錶3.43.3.3 建立不同類型的無序列錶 353.3.4 建立不同類型的有序列錶 363.3.5 建立嵌套列錶 363.3.6 自定義列錶 373.4 網頁中的圖像 383.4.1 在網頁中插入圖像 383.4.2 設置圖像的寬度和高度 403.4.3 設置圖像的提示文字 413.4.4 將圖片設置為網頁背景 423.4.5 排列圖像 423.5 綜閤示例——圖文並茂的房屋裝飾裝修網頁 433.6 上機練習——在綫購物網站的産品展示效果 443.7 疑難解惑 45
第4章 用HTML 5建立超鏈接 474.1 URL的概念 484.1.1 URL的格式 484.1.2 URL的類型 484.2 超鏈接標記 494.2.1 設置文本和圖片的超鏈接 494.2.2 創建指嚮不同目標類型的超鏈接 504.2.3 設置以新窗口顯示超鏈接頁麵 524.2.4 鏈接到同一頁麵的不同位置 534.3 創建熱點區域 544.4 創建浮動框架 564.5 綜閤示例——用Dreamweaver精確定位熱點區域 574.6 上機練習——創建熱點區域 594.7 疑難解惑 60
第5章 用HTML 5創建錶格 615.1 錶格的基本結構 625.2 創建錶格 635.2.1 創建普通錶格 635.2.2 創建一個帶有標題的錶格 645.3 編輯錶格 655.3.1 定義錶格的邊框類型 655.3.2 定義錶格的錶頭 665.3.3 設置錶格背景 675.3.4 設置單元格的背景 695.3.5 閤並單元格 705.3.6 排列單元格中的內容 745.3.7 設置單元格的行高與列寬 755.4 完整的錶格標記 765.5 綜閤示例——製作計算機報價錶 775.6 上機練習——製作學生成績錶 795.7 疑難解惑 82
第6章 使用HTML 5創建錶單 856.1 錶單概述 866.2 錶單基本元素的使用 866.2.1 單行文本輸入框text 876.2.2 多行文本輸入框textarea 876.2.3 密碼域password 886.2.4 單選按鈕radio 896.2.5 復選框checkbox 906.2.6 列錶框select 916.2.7 普通按鈕button 916.2.8 提交按鈕submit 926.2.9 重置按鈕reset 936.3 錶單高級元素的使用 946.3.1 url屬性的使用 946.3.2 email屬性的使用 956.3.3 date和time屬性的使用 966.3.4 number屬性的使用 976.3.5 range屬性的使用 976.3.6 required屬性的使用 986.4 綜閤示例——創建用戶反饋錶單 996.5 上機練習——製作用戶注冊錶單 1006.6 疑難解惑 101
第7章 使用HTML 5繪製圖形 1037.1 添加canvas的步驟 1047.2 繪製基本形狀 1047.2.1 繪製矩形 1057.2.2 繪製圓形 1067.2.3 使用moveTo與lineTo繪製直綫 1077.2.4 使用bezierCurveTo繪製貝濟埃麯綫 1087.3 繪製漸變圖形 1097.3.1 繪製綫性漸變 1097.3.2 繪製徑嚮漸變 1117.4 繪製變形圖形 1127.4.1 繪製平移效果的圖形 1127.4.2 繪製縮放效果的圖形 1137.4.3 繪製鏇轉效果的圖形 1147.4.4 繪製組閤效果的圖形 1157.4.5 繪製帶陰影的圖形 1177.5 使用圖像 1187.5.1 繪製圖像 1187.5.2 平鋪圖像 1207.5.3 裁剪圖像 1217.5.4 圖像的像素化處理 1237.6 繪製文字 1257.7 圖形的保存與恢復 1267.7.1 保存與恢復狀態 1267.7.2 保存文件 1287.8 綜閤示例——繪製火柴棒人物 1297.9 上機練習——繪製商標 1327.10 疑難解惑 133
第8章 HTML 5中的音頻和視頻 1358.1 audio標簽概述 1368.1.1 audio標簽概述 1368.1.2 audio標簽的屬性 1378.1.3 audio標簽瀏覽器的支持情況 1378.2 在網頁中添加音頻文件 1388.2.1 添加自動播放音頻文件 1388.2.2 添加帶有控件的音頻文件 1388.2.3 添加循環播放的音頻文件 1398.2.4 添加預播放的音頻文件 1398.3 video標簽概述 1408.3.1 video標簽概述 1408.3.2 video標簽的屬性 1418.3.3 瀏覽器對video標簽的支持情況 1428.4 在網頁中添加視頻文件 1428.4.1 添加自動播放的視頻文件 1428.4.2 添加帶有控件的視頻文件 1438.4.3 添加循環播放的視頻文件 1438.4.4 添加預播放的視頻文件 1448.4.5 設置視頻文件的高度與寬度 1458.5 疑難解惑 146
第9章 CSS 3概述與基本語法 1479.1 CSS 3概述 1489.1.1 CSS 3的功能 1489.1.2 瀏覽器與CSS 3 1489.1.3 CSS 3的基礎語法 1499.1.4 CSS 3的常用單位 1499.2 編輯和瀏覽CSS 3 1549.2.1 手工編寫CSS 3 1549.2.2 用Dreamweaver編寫CSS 1559.3 在HTML 5中使用CSS 3的方法 1569.3.1 行內樣式 1569.3.2 內嵌樣式 1579.3.3 鏈接樣式 1599.3.4 導入樣式 1609.3.5 優先級問題 1619.4 CSS 3的常用選擇器 1639.4.1 標簽選擇器 1649.4.2 類選擇器 1649.4.3 ID選擇器 1659.4.4 全局選擇器 1669.4.5 組閤選擇器 1679.4.6 選擇器繼承 1689.4.7 僞類選擇器 1699.5 選擇器聲明 1709.5.1 集體聲明 1709.5.2 多重嵌套聲明 1719.6 綜閤示例——製作炫彩網站Logo 1729.7 上機練習——製作學生信息統計錶 1759.8 疑難解惑 176
第10章 使用CSS 3美化網頁字體與段落 17910.1 美化網頁文字 18010.1.1 設置文字的字體 18010.1.2 設置文字的字號 18110.1.3 設置字體風格 18210.1.4 設置加粗字體 18310.1.5 將小寫字母轉為大寫字母 18410.1.6 設置字體的復閤屬性 18510.1.7 設置字體顔色 18610.2 設置文本的高級樣式 18710.2.1 設置文本陰影效果 18710.2.2 設置文本的溢齣效果 18810.2.3 設置文本的控製換行 18910.2.4 保持字體尺寸不變 19010.3 美化網頁中的段落 19110.3.1 設置單詞之間的間隔 19110.3.2 設置字符之間的間隔 19210.3.3 設置文字的修飾效果 19310.3.4 設置垂直對齊方式 19410.3.5 轉換文本的大小寫 19610.3.6 設置文本的水平對齊方式 19710.3.7 設置文本的縮進效果 19810.3.8 設置文本的行高 19910.3.9 文本的空白處理 20010.3.10 文本的反排 20110.4 綜閤示例——設置網頁標題 20310.5 上機練習——製作新聞頁麵 20410.6 疑難解惑 205
第11章 使用CSS 3美化網頁圖片 20711.1 圖片縮放 20811.1.1 通過描述標記width和height縮放圖片 20811.1.2 使用CSS 3中的max-width和max-height縮放圖片 20811.1.3 使用CSS 3中的width和height縮放圖片 20911.2 設置圖片的對齊方式 21011.2.1 設置圖片的橫嚮對齊 21011.2.2 設置圖片縱嚮對齊 21111.3 圖文混排 21311.3.1 設置文字環繞效果 21311.3.2 設置圖片與文字的間距 21411.4 綜閤示例——製作學校宣傳單 21611.5 上機練習——製作簡單的圖文混排網頁 21811.6 疑難解惑 219
第12章 使用CSS 3美化網頁背景與邊框 22112.1 使用CSS 3美化背景 22212.1.1 設置背景顔色 22212.1.2 設置背景圖片 22312.1.3 背景圖片重復 22412.1.4 背景圖片顯示 22612.1.5 背景圖片的位置 22712.1.6 背景圖片的大小 22912.1.7 背景的顯示區域 23012.1.8 背景圖像的裁剪區域 23212.1.9 背景復閤屬性 23312.2 使用CSS 3美化邊框 23412.2.1 設置邊框的樣式 23412.2.2 設置邊框的顔色 23612.2.3 設置邊框的綫寬 23712.2.4 設置邊框的復閤屬性 23812.3 設置邊框的圓角效果 23912.3.1 設置圓角邊框 23912.3.2 指定兩個圓角半徑 24012.3.3 繪製四個不同角的圓角邊框 24112.3.4 繪製不同種類的邊框 24312.4 綜閤示例——製作簡單的公司主頁 24512.5 上機練習——製作簡單的生活資訊主頁 24812.6 疑難解惑 249
第13章 使用CSS 3美化超級鏈接和鼠標 25113.1 使用CSS 3來美化超鏈接 25213.1.1 改變超級鏈接的基本樣式 25213.1.2 設置帶有提示信息的超級鏈接 25313.1.3 設置超級鏈接的背景圖 25413.1.4 設置超級鏈接的按鈕效果 25513.2 使用CSS 3美化鼠標特效 25613.2.1 使用CSS 3控製鼠標箭頭 25613.2.2 設置鼠標變幻式超鏈接 25813.2.3 設置網頁頁麵滾動條 25913.3 綜閤示例1——圖片版本的超級鏈接 26113.4 綜閤示例2——關於鼠標特效 26213.5 上機練習——製作一個簡單的導航欄 26413.6 疑難解惑 266
第14章 使用CSS 3美化錶格和錶單的樣式 26714.1 美化錶格的樣式 26814.1.1 設置錶格邊框的樣式 26814.1.2 設置錶格邊框的寬度 27014.1.3 設置錶格邊框的顔色 27114.2 美化錶單樣式 27214.2.1 美化錶單中的元素 27214.2.2 美化提交按鈕 27414.2.3 美化下拉菜單 27614.3 綜閤示例——製作用戶登錄頁麵 27714.4 上機練習——製作用戶注冊頁麵 27914.5 疑難解惑 281
第15章 使用CSS 3美化網頁菜單 28315.1 使用CSS 3美化項目列錶 28415.1.1 美化無序列錶 28415.1.2 美化有序列錶 28515.1.3 美化自定義列錶 28715.1.4 製作圖片列錶 28815.1.5 縮進圖片列錶 28915.1.6 列錶的復閤屬性 29115.2 使用CSS 3製作網頁菜單 29215.2.1 製作無需錶格的菜單 29215.2.2 製作水平和垂直菜單 29415.3 綜閤示例——模擬soso導航欄 29715.4 上機練習——將段落轉變成列錶 29915.5 疑難解惑 301
第16章 使用CSS 3濾鏡美化網頁元素 30316.1 濾鏡概述 30416.2 基本濾鏡 30416.2.1 通道(Alpha)濾鏡 30516.2.2 模糊(Blur)濾鏡 30716.2.3 色彩(Chroma)濾鏡 30816.2.4 投影(DropShadow)濾鏡 30916.2.5 水平翻轉(FlipH)濾鏡 31116.2.6 垂直翻轉(FlipV)濾鏡 31116.2.7 光暈(Glow)濾鏡 31216.2.8 灰度(Gray)濾鏡 31316.2.9 反相(Invert)濾鏡 31416.2.10 遮罩(Mask)濾鏡 31516.2.11 波浪(Wave)濾鏡 31516.2.12 陰影(Shadow)濾鏡 31716.2.13 X-ray濾鏡 31816.3 高級濾鏡 31816.3.1 光照(Light)濾鏡 31916.3.2 漸隱(BlendTrans)濾鏡 32016.3.3 切換(RevealTrans)濾鏡 32216.4 疑難解惑 324
第17章 JavaScript編程基本知識 32517.1 認識JavaScript 32617.1.1 什麼是JavaScript 32617.1.2 JavaScript的特點 32617.1.3 JavaScript與Java的區彆 32717.1.4 JavaScript的版本 32817.2 JavaScript基本語法的應用 32917.2.1 注釋的應用 32917.2.2 語句的應用 33117.2.3 語句塊的應用 33217.3 JavaScript的數據結構 33317.3.1 認識標識符 33317.3.2 認識關鍵字 33317.3.3 認識常量 33417.3.4 認識變量及其應用 33417.4 JavaScript數據類型的使用 33617.4.1 typeof運算符的使用 33617.4.2 undefined類型的使用 33817.4.3 null類型的使用 33817.4.4 Boolean類型的使用 33917.4.5 Number類型的使用 34017.4.6 String類型的使用 34117.4.7 Object類型的使用 34217.5 JavaScript運算符的使用 34217.5.1 算術運算符 34217.5.2 比較運算符 34417.5.3 位運算符 34517.5.4 邏輯運算符 34617.5.5 條件運算符 34717.5.6 賦值運算符 34817.5.7 運算符的優先級 35017.6 綜閤示例——一個簡單的JavaScript程序 35117.7 疑難解惑 352
第18章 JavaScript的程序控製結構與語句 35318.1 賦值語句 35418.2 條件判斷語句 35418.2.1 if語句 35418.2.2 if-else語句 35518.2.3 if ... else if語句 35618.2.4 if語句的嵌套 35718.2.5 switch語句 35918.3 循環控製語句 36018.3.1 while語句 36018.3.2 do-while語句 36118.3.3 for語句 36318.4 跳轉語句 36418.4.1 break語句 36418.4.2 continue語句 36518.5 綜閤示例——在頁麵中顯示距離2015年元旦的天數 36618.6 上機練習——製作一個簡易乘法錶 36718.7 疑難解惑 368
第19章 JavaScript中的函數 36919.1 函數的簡介 37019.2 調用函數 37019.2.1 函數的簡單調用 37019.2.2 在錶達式中調用 37119.2.3 在事件響應中調用函數 37219.2.4 通過鏈接調用函數 37319.3 JavaScript中常用的函數 37419.3.1 嵌套函數 37419.3.2 遞歸函數 37519.3.3 內置函數 37619.4 綜閤示例——購物簡易計算器 38419.5 上機練習——製作閃爍圖片 38619.6 疑難解惑 387
第20章 JavaScript的內置對象 38920.1 字符串對象 39020.1.1 創建字符串對象的方法 39020.1.2 字符串對象常用屬性的應用 39020.1.3 字符串對象常用方法的應用 39120.2 數學對象 39420.2.1 創建Math對象的方法 39420.2.2 數學對象屬性的應用 39420.2.3 數學對象方法的使用 39520.3 日期對象 39720.3.1 創建日期對象 39720.3.2 日期對象常用方法的應用 39820.3.3 日期間的運算 40120.4 數組對象 40220.4.1 創建數組對象 40220.4.2 數組對象屬性的應用 40220.4.3 數組對象常用方法的應用 40520.5 綜閤示例——製作網頁隨機驗證碼 40920.6 上機練習——動態顯示當前時間 41020.7 疑難解惑 412
第21章 JavaScript對象編程 41521.1 文檔對象模型(DOM) 41621.1.1 文檔對象模型(DOM)介紹 41621.1.2 在DOM模型中獲得對象 41621.1.3 事件驅動的應用 41721.2 窗口(window)對象 41921.2.1 創建窗口(window) 41921.2.2 創建對話框 42121.2.3 窗口的相關操作 42321.3 文檔(document)對象 42421.3.1 文檔屬性的應用 42421.3.2 文檔中圖片的使用 42621.3.3 顯示文檔中的所有超鏈接 42721.4 錶單對象 42921.4.1 創建form對象 42921.4.2 form對象屬性與方法的應用 43021.4.3 單選按鈕與復選框的使用 43121.4.4 下拉菜單的使用 43221.5 綜閤示例——錶單注冊與錶單驗證 43321.6 上機練習——省市聯動效果 43821.7 疑難解惑 441
第22章 HTML 5、CSS 3和JavaScript的搭配使用 44322.1 常見的JavaScript編寫工具 44422.1.1 記事本 44422.1.2 Dreamweaver 44522.2 JavaScript在HTML中的使用 44622.2.1 在HTML網頁頭中嵌入JavaScript代碼 44622.2.2 在HTML網頁中嵌入JavaScript代碼 44722.2.3 在HTML網頁的元素事件中嵌入JavaScript代碼 44822.2.4 在HTML中調用已經存在的JavaScript文件 44922.2.5 通過JavaScript僞URL引入JavaScript腳本代碼 45022.3 JavaScript與CSS 3的結閤使用 45122.3.1 動態添加樣式 45122.3.2 動態改變樣式 45222.3.3 動態定位網頁元素 45322.3.4 設置網頁元素的顯示與隱藏 45622.4 HTML 5、CSS 3和JavaScript的搭配應用 45722.4.1 設定左右移動的圖片 45722.4.2 製作顔色選擇器 46022.4.3 製作跑馬燈效果 46222.5 綜閤示例——製作樹形導航菜單 46422.6 上機練習——製作滾動的菜單 46822.7 疑難解惑 470
第23章 製作企業門戶類網頁 47323.1 構思布局 47423.1.1 設計分析 47423.1.2 排版架構 47423.2 內容設計 47523.2.1 使用JavaScript技術實現Logo與導航菜單 47523.2.2 Banner區 47623.2.3 資訊區 47723.2.4 版權信息 47923.3 設置鏈接 48023.4 疑難解惑 480
第24章 製作在綫購物類網頁 48124.1 整體布局 48224.1.1 設計分析 48224.1.2 排版架構 48224.2 模塊分割 48324.2.1 Logo與導航區 48324.2.2 Banner與資訊區 48524.2.3 産品類彆區域 48624.2.4 頁腳區域 48824.3 設置鏈接 48824.4 疑難解惑 488

精彩書摘

  第1章 HTML基礎語法

  自從網頁技術誕生以來,構建網頁的語言一直在不斷地演化。現在,一係列最佳實踐已經齣現,用戶在設計網頁時,通常會將HTML、CSS和JavaScript技術結閤運用:使用HTML創建一些基本的網頁內容,使用CSS控製網頁內容的外觀,讓它們更加引人注目,使用JavaScript添加具有很強動態感的功能。本書會詳細地嚮讀者介紹HTML、CSS和JavaScript的知識。本章將主要介紹HTML語言。

  通過對本章的學習,讀者不僅可以瞭解HTML的特點、發展曆史和開發工具,還可以掌握HTML的語法結構、一些常用的標記,以及編寫HTML的注意事項。

  本章學習目標如下:

  熟悉HTML的特點和發展曆史。

  瞭解HTML的編輯器。

  掌握Dreamweaver工具的使用。

  掌握HTML的標記語法和屬性語法。

  瞭解HTML中常用的全局屬性。

  掌握頭部內容的一些常用標記。

  掌握bgcolor屬性的使用。

  熟悉與頁麵邊距有關的屬性設置。

  掌握段落標記和超鏈接標記的使用。

  掌握圖像標記和標題顯示標記。

  掌握HTML文件中的注釋。

  瞭解編寫HTML文件的注意事項。

  1.1 瞭解HTML語言

  HTML是HyperText Markup Language的縮寫,通常被譯為“超文本標記語言”,它是標準通用標記語言下的一個應用。“超文本”就是指頁麵內可以包含圖片、鏈接,甚至是音樂和程序等的非文字元素。

  下麵我們來簡單瞭解HTML語言的基本知識,包括HTML語言的特點、發展曆史和編輯工具等內容。

  1.1.1 HTML概述

  HTML是用來描述網頁的一種標記語言,它使用標記來描述網頁。例如,下麵的代碼是一段簡單的HTML內容:

  我的HTML網頁示例

  第一次進行測試,謝謝大傢包容。

  將上述內容復製到一個記事本文件中,並且將記事本文件的後綴名更改為“.html”或者是“.htm”,然後在瀏覽器(例如Chrome瀏覽器)的地址欄中輸入路徑進行測試,效果如圖1-1所示。

  圖1-1 簡單的HTML例子

  從上麵的例子可以看齣,HTML網頁的製作很簡單。

  HTML有多種特點,說明如下。

  升級簡單性:HTML版本升級采用超集方式,從而更加靈活、方便。所謂超集,可以這樣理解,如果一個集閤V1中的每一個元素都在集閤V2中,且集閤V2中可能包含V1中沒有的元素,則集閤V2就是V1的一個超集。若V2是V1的超集,則V1是V2的真子集。

  可擴展性:HTML的應用非常廣泛,它帶來瞭加強的功能。HTML采取子類元素的方式,為係統擴展帶來保證。

  平颱無關性:雖然個人計算機被廣泛應用,但是使用其他計算機(例如Mac)的也大有人在。HTML可以廣泛應用在多種平颱上,都能獲得一緻的效果。

  通用性:HTML是網絡的通用語言,它允許網頁製作者建立文本與圖片相結閤的復雜頁麵,這些頁麵可以被網上的任何用戶瀏覽到,無論使用的是什麼類型的計算機或者瀏覽器。

  1.1.2 HTML發展曆史

  在整個20世紀90年代,網絡呈爆炸式增長,越來越多的網頁設計者和瀏覽器開發者參與到網絡中來,每一個人都有不同的想法和目標,每一個人都會按照自己的想法和目標參與到網絡中來。網頁設計者會按照自己的想法和目標去編寫網頁,而瀏覽器的開發者則可能與網頁設計者的想法不同,它會按照自己的方式去呈現網頁。

  當網頁的設計者和瀏覽器的開發者發生分歧時,必然會帶來非常不同的呈現。這時,設計者要麵嚮所有的用戶,就必須為每種瀏覽器創作不同的網頁,來實現相同的呈現。這就必然要增加創作的成本,從而導緻萬維網的分裂。因此,隻有網頁的設計者和瀏覽器的開發者都按照同一個規範來編寫和呈現網頁時,纔會避免萬維網的分裂。正是這個原因促使各瀏覽器開發商協調起來,共同實現瞭同一個HTML規範。

  HTML沒有1.0版本,這是因為一開始有多種不同版本的HTML,當時W3C還沒有成立,HTML在1993年6月作為互聯網工程工作小組(Internet Engineering Task Force,IETF)的第一份草案發布,但是並未被推薦為正式規範。

  在IETF的支持下,根據以往的通用實踐,在1995年整理和發布瞭HTML 2.0。

  但HTML 2.0是作為RFC(Request For Comments)1866發布的,其後又經過瞭多次修改。後來的HTML+和HTML 3.0也提齣瞭很多好的建議,並且增加瞭大量的內容,然而這些版本還未能上升到創建一個規範的程度,許多商傢實際上並未嚴格遵守這些版本的格式。

  1996年,W3C的HTML工作組編撰瞭通用的實踐,並在第二年公布瞭HTML 3.2規範。同期,IETF宣布關閉HTML工作組,開始由W3C負責開發和維護HTML規範。

  1997年12月,HTML 4.0被W3C正式推薦為規範,並且在1999年12月推齣瞭一個修訂版——HTML 4.01,該版本引入瞭樣式錶、腳本、框架、嵌入對象、錶格以及錶單等多種內容。

  此後,W3C解散瞭HTML工作組,HTML規範長時間處於停滯狀態,並轉而開發XHTML,直到發布XHTML 1.0規範和XHTML 2.0規範。但由於XHTML規範越來越復雜,這導緻其長期不能被瀏覽器商傢接受。

  與此同時,WHATWG認為XHTML並不是用戶所需要的,於是繼續開發HTML的後續版本,並將其定名為HTML 5.0。隨著萬維網的發展,WHATWG的工作取得瞭很多廠商的支持,並最終使W3C認可,終止瞭XHTML的開發,重新啓動瞭HTML工作組,在WHATWG工作的基礎上開發HTML 5,並最終發布瞭HTML 5規範。

  1.1.3 HTML編輯器

  編輯HTML代碼時可以使用記事本,通過記事本,可以按照以下幾個步驟來創建網頁。

  (1) 啓動記事本。啓動記事本最簡單的一種辦法是,直接單擊計算機“開始”菜單中的“運行”命令,然後在彈齣的對話框中輸入“notepad”,即可直接打開記事本窗口。

  (2) 在打開的記事本窗口中可以編寫HTML代碼。

  (3) 需要把HTML代碼保存為HTML格式的網頁文件。在記事本窗口的菜單欄中選擇“文件”→“另存為”命令,在彈齣的“另存為”對話框中設置保存類型為“所有文件”;設置HTML文件的擴展名為“.html”或者“.htm”,這兩種擴展名沒有區彆,可以根據讀者的喜好進行選擇。

  經過上述步驟編輯並保存好HTML文件後,即可在瀏覽器中運行瞭。

  上麵的例子隻是說明瞭如何在記事本中編寫HTML代碼。其實,任何文本編輯器都可以編寫HTML代碼,例如寫字闆、Word、WPS等編輯程序。除瞭這些程序外,還可以使用更加專業化的工具來編輯HTML。

  錶1-1對各種HTML開發工具進行瞭分類。

  錶1-1 HTML開發工具分類

  分 類說 明代錶工具不 足

  所見即所得的工具所謂“所見即所得”,是指在編輯網頁時即能同步地看到效果,與使用瀏覽器時看到的效果基本一緻Drumbeat、NetobjectFusion容易産生廢代碼

  續錶

  分 類說 明代錶工具不 足

  HTML

  代碼編輯工具用純粹的HTML代碼編輯工具,用戶可以對頁麵進行完全的控製記事本等用戶必須掌握

  HTML語言

  混閤型

  工具介於上述兩種工具之間,混閤型工具可以在所見即所得的工作環境下完成主要的工作,同時也能切換到代碼編輯器Adobe Dreamweaver、

  FrontPage、CutePage、

  QuickSiteaver通常也不能完全控製HTML頁麵的代碼,也容易産生廢代碼

  1.1.4 認識Dreamweaver工具

  Adobe Dreamweaver,簡稱DW,是美國Macromedia公司開發的集網頁製作和管理網站於一身的所見即所得型的網頁編輯器,它是一種為專業的網頁設計師特彆開發的可視化網頁設計工具,利用它,可以輕而易舉地製作齣跨平颱、跨瀏覽器的充滿動感的網頁。

  1.Dreamweaver的版本

  Dreamweaver 1.0版本於1997年12月由Macromedia公司發布。目前,Dreamweaver CC是其最新版本。

  錶1-2給齣瞭Dreamweaver版本發布的曆史情況。

  錶1-2 Dreamweaver的曆史版本

  所處時期版 本

  Macromedia時期Dreamweaver 1.0、Dreamweaver 2.0、Dreamweaver 2.01、Dreamweaver 3、Dreamweaver 4、Dreamweaver 5、Dreamweaver MX、Dreamweaver MX 2004和Dreamweaver 8.0

  Adobe時期Dreamweaver CS3、Dreamweaver CS4、Dreamweaver CS5、Dreamweaver CS5.5和Dreamweaver CS6

  2013Dreamweaver Creative Cloud,即Dreamweaver CC

  2.係統要求

  對於Windows操作係統來說,使用Dreamweaver工具時,需要滿足以下幾個要求:

  Intel Pentium 4或者AMD Athlon 64處理器。

  Microsoft Windows XP(帶有Service Pack 2,推薦Service Pack 3);Windows Vista Home Premium、Business、Ultimate或Enterprise(帶有Service Pack 1);Windows 7和Windows 8。

  512MB內存。

  1GB可用硬盤空間,用於安裝;安裝過程中還需要額外的可用空間(無法安裝在可移動閃存設備上)。

  1024×768屏幕,16位顯卡。

  DVD-ROM驅動器。

  在綫服務需要寬帶Internet連接,並不斷驗證訂閱版本(如果適用)。

  3.操作界麵

  雖然Dreamweaver CC是最新的版本,但是目前Dreamweaver CS4和Dreamweaver CS5版本經常使用。本書以Dreamweaver CS5工具進行編輯,使用該工具之前,需要從網絡下載,下載成功後進行安裝,由於很簡單,這裏不再給齣具體的安裝步驟。

  安裝成功後,直接打開,初始界麵如圖1-2所示。

  圖1-2 Dreamweaver的界麵效果

  用戶可以在如圖1-2所示的界麵中編輯HTML代碼,也可以執行其他的操作。通常情況下,為瞭利於HTML文件的維護和修改,可以首先在Dreamweaver中創建一個站點,然後在該站點下創建其他文件(例如.html文件、.txt文件和文件夾等)。

  【例1-1】

  本例演示如何創建一個站點,以及如何嚮站點中添加文件。實現步驟如下。

  (1) 在打開的Dreamweaver界麵的菜單欄中選擇“站點”→“新建站點”命令,這時會彈齣如圖1-3所示的對話框。在該對話框中,輸入站點名稱並選擇或輸入站點文件夾,然後單擊“保存”按鈕即可。

  (2) 創建成功後,會在“文件”選項卡中顯示站點名稱,然後選擇當前站點,並單擊鼠標右鍵,從快捷菜單中選擇要執行的命令,例如“新建文件”、“新建文件夾”、“打開”等多個命令。

  (3) 直接選擇要執行的命令。這裏在新站點下添加一個image文件夾和一個test.html文件,效果如圖1-4所示。

  圖1-3 新建站點

  圖1-4 創建文件夾和文件

  (4) 嚮test.html文件中添加一段文本字符串,添加完畢後,單擊如圖1-5所示的按鈕,選擇在瀏覽器中瀏覽網頁效果。在圖1-5中,用戶選擇“編輯瀏覽器列錶”命令可以添加或者編輯瀏覽器。

  圖1-5 選擇在瀏覽器中預覽/調試

  ……

前言/序言

  目前,HTML 5和CSS 3的齣現,大大減輕瞭前端開發者的工作量,降低瞭開發成本,所以HTML 5在未來的技術市場中將更有競爭力。因此學習流行的HTML 5 + CSS 3 + JavaScript黃金搭檔可以讓讀者掌握目前最新的前端技術,使前端設計從外觀上變得更炫、技術上更簡易。本書從易到難,詳細、透徹地講解各個知識點,非常適閤沒有基礎的讀者學習,同時也可以讓有HTML 4基礎的讀者學會HTML 5技術。

  1. 本書特色

  (1)知識全麵:涵蓋瞭所有的HTML 5 + CSS 3 + JavaScript知識點,可以幫助讀者由淺入深地掌握網頁設計方麵的技能。

  (2)圖文並茂:在介紹案例的過程中,每一個操作均有對應的插圖。這種圖文結閤的方式使讀者在學習過程中能夠直觀、清晰地看到操作的過程及效果,便於更快地理解和掌握。

  (3)易學易用:顛覆傳統的“看”書觀念,變成一本能“操作”的圖書。

  (4)案例豐富:把知識點融會於係統的案例實訓中,並且結閤經典案例進行講解和拓展,進而實現“知其然,並知其所以然”的效果。

  (5)提示周到:本書對讀者在學習過程中可能會遇到的疑難問題以“提示”和“注意”等形式進行說明,避免讀者在學習的過程中走彎路。

  (6)超值贈送:除瞭本書的素材和結果外,還將贈送封麵所述的大量資源,使讀者可以全麵掌握網頁設計方方麵麵的知識。

  2. 讀者對象

  本書不僅適閤網頁設計初級讀者入門學習,還可作為中、高級用戶的參考手冊。書中大量的示例模擬瞭真實的網頁設計案例,對讀者的工作有現實的藉鑒意義。

  3. 作者團隊

  本書作者劉玉紅長期從事網站設計與開發工作。另外,鬍同夫、梁雲亮、王攀登、王婷婷、陳偉光、包慧利、孫若淞、肖品、王維維和劉海鬆等人參與瞭編寫工作。

  本書雖然傾注瞭作者的心血,但由於水平有限,書中難免有錯漏之處,懇請讀者諒解。讀者如果遇到問題或有意見和建議,敬請與我們聯係,我們將全力提供幫助。

  編 者


洞悉網頁交互的奧秘:掌握現代前端開發的藝術 在這瞬息萬變的數字時代,一個引人入勝、功能強大的網站早已不是奢侈品,而是信息傳播、品牌展示、用戶互動乃至商業驅動的核心。而構建這一切的基石,正是那些構成網頁靈魂的語言:HTML5、CSS3 和 JavaScript。它們如同建築師手中的藍圖、藝術傢手中的調色闆和程序員手中的魔法棒,共同雕琢齣我們在屏幕上所見的每一個精彩瞬間。 本書並非簡單的語法羅列,而是一場深入淺齣的實戰演練,旨在帶領讀者穿越前端開發的迷霧,抵達精通的彼岸。我們相信,真正的學習源於實踐,而理解技術的最佳途徑,莫過於在真實的項目中加以運用。因此,本書將以一係列精心設計的、貼近實際需求的案例為載體,讓讀者在動手實踐的過程中,循序漸進地掌握 HTML5 的語義化構建、CSS3 的視覺美學以及 JavaScript 的交互邏輯。 HTML5:構建清晰、語義化的網頁骨架 HTML5 作為網頁內容的結構層,其重要性不言而喻。它不僅僅是標記文本,更是賦予網頁生命和意義的關鍵。本書將從 HTML5 最核心的語義化標簽入手,教你如何清晰地錶達頁麵內容,讓搜索引擎更容易理解你的網站,也讓屏幕閱讀器等輔助技術更好地服務於所有用戶。我們將深入探討 `
`, `
`, `

用戶評價

評分

我是一個對網頁美學有很高追求的學習者,總是希望自己的作品既有功能性,又有視覺衝擊力。這本書恰恰在這一點上給瞭我很大的啓發。它在講解HTML5和CSS3的時候,非常注重細節和錶現力。例如,在CSS部分,不僅講瞭基本的樣式屬性,還深入探討瞭如何運用色彩理論、排版技巧、以及響應式設計來打造齣既美觀又實用的網頁布局。我特彆喜歡書中關於“視覺層次”和“用戶引導”的講解,通過案例展示瞭如何巧妙地運用顔色、大小、間距等元素,引導用戶的注意力,讓他們更容易找到他們想要的信息。JavaScript部分也很有意思,它沒有把JavaScript寫成純粹的功能實現工具,而是強調如何用JavaScript來增強網頁的交互性和動態美感,比如平滑的滾動效果、視差滾動、以及一些微妙的動畫反饋。這本書讓我意識到,美學和技術是可以完美結閤的,並且在現代網頁設計中,這種結閤是至關重要的。光盤裏的案例代碼,讓我有機會去拆解那些令人驚艷的視覺效果是如何實現的,這比單純看圖更能學到東西。

評分

作為一個經常需要與開發團隊溝通的項目經理,我一直想更深入地瞭解前端開發的具體流程和技術細節,以便更好地協調項目和評估技術可行性。這本書為我打開瞭一扇窗。它用一種非常清晰和結構化的方式,展示瞭HTML5、CSS3和JavaScript是如何協同工作的,以及它們在不同類型的網站開發中扮演的角色。我通過閱讀這本書,對前端開發的整個技術棧有瞭更宏觀的認識,也理解瞭為什麼某些設計在技術上是可行的,而另一些則可能需要額外的開發成本。書中對案例的講解,就像是在模擬一個真實的項目開發過程,讓我能夠站在開發者的角度去思考問題。例如,在講解如何實現一個在綫錶單的時候,書裏不僅介紹瞭HTML的錶單元素,還詳細說明瞭如何用JavaScript進行客戶端驗證,以及如何用CSS來美化錶單樣式,這讓我理解瞭前端開發的細緻性和對用戶體驗的重視。光盤裏的資源,雖然我不會親自去寫代碼,但瞭解源碼的結構和邏輯,有助於我與開發團隊進行更有效的溝通,也能更好地理解他們的工作內容和遇到的挑戰。

評分

我是一名有幾年經驗的前端開發者,一直在尋找一本能夠係統梳理並深入講解HTML5、CSS3和JavaScript在實際項目中的應用的書籍。市麵上很多書要麼過於理論化,要麼案例陳舊。這本書正好滿足瞭我的需求。它不僅僅是羅列技術點,而是通過一個個精心設計的案例,展示瞭如何將這些技術融會貫通,構建齣功能完善、用戶體驗良好的網頁。我尤其欣賞書中對CSS3新特性的運用,比如Flexbox和Grid布局在實際頁麵結構中的妙用,以及CSS變量和自定義屬性如何提升代碼的可維護性。JavaScript部分,本書涵蓋瞭DOM操作、事件處理、AJAX異步請求等核心內容,並結閤實際案例講解瞭如何實現動態效果和數據交互,比如用戶登錄驗證、商品搜索過濾等,這些都是前端開發中非常實用的技能。光盤裏提供的案例源碼,結構清晰,注釋詳細,這對於我們這些有一定基礎的開發者來說,是非常寶貴的學習資料,可以直接參考其中的實現思路和代碼組織方式。更重要的是,書中的案例並沒有止步於簡單的頁麵展示,而是涉及到瞭一些更復雜的交互邏輯和用戶體驗優化,這幫助我拓寬瞭思路,也學習到瞭很多提升開發效率和代碼質量的技巧。

評分

這本書給我最大的驚喜在於它的“案例驅動”學習模式。作為一名平麵設計師,我對網頁開發一直有點畏懼,覺得那些代碼太抽象瞭。但是這本書通過大量的真實案例,把那些抽象的代碼變得可視化,讓我在設計的過程中,能夠直觀地感受到代碼是如何轉化為視覺元素的,以及如何通過代碼實現交互效果。書中每一個案例都像是一個小小的項目,從需求分析到最終實現,都講解得非常細緻。我記得有一個案例是做一個創意相冊展示,書裏詳細講解瞭如何使用CSS的動畫屬性,讓圖片切換效果更加生動有趣,還用JavaScript實現瞭圖片的懶加載,這樣在大圖多的頁麵也不會加載很慢,用戶體驗一下子就提升瞭。而且,書中的案例都比較貼近實際應用場景,不像有些書裏的例子那樣,脫離實際,學瞭也用不上。它讓我明白,原來網頁開發不僅僅是寫代碼,更是將創意和功能通過技術完美結閤的過程。光盤裏的素材和源碼,對我這個設計背景的人來說,簡直是雪中送炭,我可以直接在設計稿的基礎上,嘗試用書中的代碼來實現,大大縮短瞭從設計到實現的距離。

評分

這本書真的太棒瞭!作為一個對網頁開發完全陌生的新手,我原本以為會像讀天書一樣,結果卻被這本書的循序漸進和通俗易懂深深吸引。從最基礎的HTML標簽講解,到CSS的樣式美化,再到JavaScript的交互邏輯,作者都用瞭大量貼閤實際的案例來演示,而不是枯燥的理論堆砌。我最喜歡的是它沒有直接給你一堆代碼讓你模仿,而是先告訴你這個案例要實現什麼功能,然後一步步拆解,告訴你為什麼這麼做,每行代碼的作用是什麼。就好像老師在旁邊手把手教你一樣,非常有成就感。而且,書中的案例涵蓋瞭從簡單的個人博客到稍微復雜的電商産品展示頁麵,這些都是我日常上網經常能接觸到的,所以學習起來覺得特彆有意義,也更有動力去實踐。我記得有一個案例是做一個響應式導航欄,我之前看網上的教程覺得很復雜,書裏卻用一種非常巧妙的方式解釋瞭如何讓導航欄在不同屏幕尺寸下都能良好顯示,我跟著做瞭一遍,瞬間就明白瞭其中的原理。光盤裏的資源也很豐富,包含瞭案例的源碼和一些額外的素材,下載下來直接就可以跟著書本的步驟來操作,這大大節省瞭我去找素材的時間,也保證瞭學習的順暢性。總的來說,這本書就像一座橋梁,將我從一個對代碼一無所知的人,引嚮瞭一個能夠獨立構建網頁的開發者。

評分

還沒來得及看,不過包裝很不錯

評分

還沒看,看後追評

評分

質量好,品味高,價格實惠,值得購買

評分

書不錯,通俗易懂,入門很實用

評分

還沒拆封,基本跟宣傳圖一樣。內容沒看。先習慣性給個好評。

評分

給部門買的,很有用贊?

評分

還可以適閤初學者。

評分

慢慢看吧,好好提高一下自己

評分

很給力的書,看起來很滿意,抽時間重新復習一下還是不錯的。

相關圖書

本站所有內容均為互聯網搜尋引擎提供的公開搜索信息,本站不存儲任何數據與內容,任何內容與數據均與本站無關,如有需要請聯繫相關搜索引擎包括但不限於百度google,bing,sogou

© 2025 book.cndgn.com All Rights Reserved. 新城书站 版權所有