0916~0919_開學季語言展

學好跨平台網頁設計(第三版):HTML5、CSS3、JavaScript、jQuery與Bootstrap 5超完美特訓班(附範例/RWD影音教學)

  • 79 395
    500

活動訊息

想找書的時候,特別想偷看網友的書櫃... 原來大家都在看這本 ↓↓↓

用閱讀開啟視野,讓書成為照亮你人生的光
【金石堂選書】本月推薦您這些好書👉 快來看看

內容簡介

最熱門的跨平台網頁設計技術大集合!
6大主題、300個立即可套用範例,全新Bootstrap 5來襲,
最適合全面學習、現學現用的21堂經典關鍵課!

HTML5是最主流的跨平台網頁開發技術,書中以HTML5為主體,綜合當今最經典的跨平台網頁程式設計工具,完整解鎖各項技術,提供最佳學習途徑,現學現用!

【結合最新前端技術】
全面引進最新的前端框架與技術,無論是HTML5、CSS3、JavaScript、jQuery、jQuery Mobile或是Bootstrap 5,都能銜接學習而快速上手,打造符合新一代標準的跨平台網站。

全新Bootstrap 5更是新一代RWD網站開發中的熱門焦點,能讓網頁因應不同大小的螢幕自動改變內容的配置,確保每個平台的使用者都能得到最好的操作體驗。無論是框架的安裝方式、格線系統的使用、網頁的元件、表單及工具的應用,一直到網頁互動程式的開發,Bootstrap 5都能提供簡單但功能強大的幫助!

【徹底掌握開發語法】
透過詳細語法解說、大量圖表示意,引領了解各主題的核心概念與重點技術,並利用最適合的開發工具進行範例實作,徹底掌握語法與應用。

【立即套用海量範例】
提供大量範例應用,每個主題都依功能別加入實用範例,可依架構學習,也可以依功能主題立即尋找可套用的範例。

【跨越平台行動優先】
面對行動裝置的普及,網頁就必須跨越不同螢幕尺寸,因應不同作業平台。書中將RWD網頁建置技術徹底解構,進而掌握從電腦到手機版網頁的設計心法,讓跨平台網頁製作更簡單!

【超值RWD影音教學】
提供RWD(Responsive Web Design,響應式網頁設計)使用Bootstrap 5的實戰影音教學,利用Bootstrap 5引導您從無到有快速打造一個跨平台的RWD網站,快速強化開發實力!


【超值學習資源】範例程式檔、RWD網頁快速開發:使用Bootstrap 5實戰影音教學

作者

鄧文淵 總監製/文淵閣工作室 編著

一個致力於資訊圖書創作二十餘載的工作團隊,擅長用輕鬆詼諧的筆觸,深入淺出介紹難懂的 IT 技術,並以範例帶領讀者學習電腦應用的大小事。
我們不賣弄深奧的專有名辭,奮力堅持吸收新知的態度,誠懇地與讀者分享在學習路上的點點滴滴,讓軟體成為每個人改善生活應用、提昇工作效率的工具。
舉凡程式開發、文書處理、美工動畫、攝影修片、網頁製作,都是我們專注的重點,而不同領域有各自專業的作者組成,以進行書籍的規劃與編寫。一直以來,感謝許多讀者與學校老師的支持,選定為自修用書或授課教材。衷心期待能盡我們的心力,幫助每一位讀者燃燒心中的小宇宙,用學習的成果在自己的領域裡發光發熱!
我們期待自己能在每一本創作中注入快快樂樂的心情來分享, 也期待讀者能在這樣的氛圍下快快樂樂的學習。

官方網站:www.e-happy.com.tw
FB粉絲團:www.facebook.com/ehappytw

目錄

01HTML基礎入門
HTML5除了簡化了HTML語法的結構,提供了許多功能標籤能夠直接控制音效、影片等多媒體檔案的播放,並且進一步加入控管地理位置的GeolocationAPI、繪圖的CanvasAPI、本地端的資料庫、離線的儲存機制⋯等讓人期待的功能,讓網頁的呈現與應用提升到另一個不同的層次。
1.1HTML的出現
1.2HTML5的歷史
1.3HTML5的新功能
1.4HTML5的編輯與瀏覽

02HTML結構與文字段落
HTML是一個很重要的語法,它能整合文字、圖片、聲音、動畫、影片等內容,藉由瀏覽器讓資訊能夠無遠弗屆,深入到每個角落。在這裡先介紹HTML的文字段落與超連結等標籤,扎實打好HTML的基礎。
2.1HTML文件結構
2.2段落
2.3文字格式
2.4HTML5的語意標籤

03超連結、圖片、音效與影片
超連結是HTML中很重要的一個元素,藉由超連結能夠將不同的網站連繫在一起,也能連結到不同的網站,甚至是不同的資源。除了文字之外,圖片、音效與影片更是HTML中很重要的內容。本章將要說明如何在網頁中加入圖片、音效與影片,並說明HTML5新增的元素與功能,讓多媒體的資源豐富您的網頁與內容。
3.1路徑的表示方法
3.2超連結
3.3圖片
3.4音效的使用
3.5影片的使用

04表格與表單
表格是網頁中資料展示的重要利器,本章將分析表格中各個部位,並說明相關的標籤與屬性。表單是網站與瀏覽者互動的窗口,不同的資料需要不同的表單元件來傳送。本章除了介紹HTML中原有的表單元件的建置方式,並會進一步說明HTML5新增的表單元件與使用方式。
4.1表格
4.2表單

05CSS基礎入門
CSS(CascadingStyleSheets)樣式表在網頁設計中占了十分重要的地位,HTML是將網頁進行結構化的製作,而CSS可以依照這個結構進行美化,提升網頁載入的速度,有系統的打造網站的風格。
CSS選擇器是套用樣式的基本功夫,除了一般的套用之外,還能使用屬性選擇器、虛擬類別選擇器、虛擬元素選擇器及組合選擇器,讓樣式的套用更靈活。
5.1認識CSS
5.2CSS3的新功能
5.3CSS的套用方式
5.4CSS基本語法
5.5CSS基本選擇器
5.6CSS屬性選擇器
5.7CSS虛擬類別選擇器
5.8CSS虛擬元素選擇器
5.9組合選擇器
5.10CSS選擇器的套用順序

06顏色與文字設定
網頁中顏色的使用相當重要,除了能提高閱讀的舒適度,善用顏色的搭配能讓頁面的表現更加分。文字是網頁中最基礎但也最重要的內容,使用CSS能快速的定義文字大小,粗細、字型、顏色...等樣式,讓文字的呈現不再一成不變。
6.1顏色的設定
6.2文字大小、字型及相關的樣式設定
6.3字型設定

07段落與表列設定
文字段落的樣式包括了行距、文字間距、對齊、縮排...等,對於網頁資訊的呈現也相當重要。表列資料的呈現分為項目符號及編號,對於資料的表現十分重要。CSS的設定能更完美的呈現表列資料。
7.1文字段落相關的樣式設定
7.2項目符號及編號的設定
7.3超連結的樣式設定
7.4CSS3:文字陰影

08背景與框線設計
在網頁中可以為元素設定背景,可以凸顯前景的內容。設定的方式十分多元,可以使用顏色、圖片,並能設定背景圖片的位置,背景圖片重複的方式,以及透明度,甚至使用漸層顏色。框線與背景設定的條件十分相似,只要是區塊的標籤元素都能設定框線。除了顏色、粗細,還能設定顯示的樣式,設定圓角,加上陰影。
8.1設定背景顏色及圖片
8.2設定透明度
8.3設定漸層
8.4框線的設定
8.5表格框線
8.6CSS3:圓角框線
8.7CSS3:區塊陰影

09盒子模型與版面定位
在網頁的版面上可以說是一個個盒子所組成的,只要能熟悉盒子模型的結構,即可準確的規劃版面中每個區塊的尺寸以及與其他區塊之間的排列狀態。float屬性能將元素設置到所在容器的最左方或最右方成為浮動元素,跟在該元素後方的內容就接著流動到剩下來的位置中。position屬性能精確的定位區塊元素的位置,並依不同特性安排區塊元素的展示方法。CSS3的媒體查詢能根據不同媒體、不同的特性給予不同的CSS樣式設定。
9.1使用元素結構的重要觀念
9.2認識盒子模型
9.3float的使用
9.4position的使用
9.5媒體查詢

10變形、轉換與動畫
在CSS3中可以使用transform屬性來設定元素的變形效果,進行移動、縮放、旋轉、傾斜等變化。transition轉換效果是指元素由一種樣式轉換到另一種樣式的動作,可由播放時間、轉換屬性、轉換方法及延遲時間的屬性進行設定。animation動畫效果就是由播放的起點到終點設定多個關鍵影格,接著指定元素在每個關鍵影格中屬性有不同的變化所呈現的動畫。
10.1變形效果
10.2轉換效果
10.3動畫效果

11JavaScript語法與結構
JavaScript是一種腳本(Script)式的程式語言,其原始碼在客戶端執行之前不需經過編譯,而是將文字格式的字元代碼發送給瀏覽器再由瀏覽器解譯執行。所以JavaScript在撰寫、測試到除錯都很容易,只要在編輯之後儲存,就能在瀏覽器觀看結果。JavaScript因為瀏覽器的支援而能夠輕鬆跨越不同平台而大行其道,並隨著新的JavaScript引擎及框架技術的發展,利用事件驅動與非同步寫入讀出等特性,JavaScript竟然也逐漸被應用到開發伺服器端程式。
11.1認識JavaScript
11.2變數的使用
11.3運算子
11.4流程控制

12JavaScript函式、陣列與物件
函式即是將程式碼中重複使用的部分單獨出來,在應用時只要呼叫即可使用,提高程式開發的效率。陣列可說是一群性質相同變數的集合,能大量降低變數宣告的數量,提高程式開發時的彈性。物件可以說是屬性與方法的組合,每個物件上都有它的特徵與功能,化為程式的屬性與方法。
12.1函式的使用
12.2陣列的使用
12.3物件
12.4Javascript與DOM

13jQuery基礎入門
jQuery是目前最多人使用、開發維護及延伸應用的JavaScript函式庫,除了可以簡化開發者的程式語法,也能幫助使用者獲得更好的互動經驗,為網頁程式設計者省下了大量的開發時間,也為使用者互動帶來了便利,更帶來許多讓人驚豔的強大功能!
13.1認識jQuery
13.2jQuery選擇器

14jQuery的事件與特效
jQuery可以使用選擇器輕易的選取頁面上的內容,包含了CSS與DOM裡的結構,在選取後就能根據事件來進行互動,或是加上特效。jQuery的事件處理是互動程式很重要的一環,許多程式的執行必須依靠事件來觸發才能夠進行。jQuery提供了許多設定簡單,但效果驚人的特效。只要善用這些功能,就能讓您的頁面更加吸引人。
14.1jQuery與CSS、DOM的處理
14.2jQuery的事件
14.3jQuery的特效

15jQueryMobile入門
jQueryMobile是一個行動裝置網頁介面的開發框架,不同於傳統網頁,它提供了許多工具讓您可以開發出如同行動裝置App應用程式的使用畫面。例如頁面的切換、智慧型手機的操作介面、觸控操作的使用...等。jQueryMobile的基底技術是jQuery,它能讓網頁的HTML標籤,藉由JavaScript、CSS的幫助呈現出如行動裝置一樣的頁面。
15.1認識jQueryMobile
15.2jQueryMobile的安裝與使用
15.3jQueryMobile的頁面連結

16jQueryMobile常用元件
jQueryMobile提供了許多常用元件,讓行動裝置的畫面與一般原生程式的操作更接近。其中包含了按鈕、群組按鈕、導覽列、檢視清單、版面格點、可摺疊內容區塊、可摺疊內容區塊組、對話方塊及側邊欄面板。只要能善用這些元件,即可快速製作出精美而實用的使用介面。
16.1按鈕、按鈕群組與導覽元件
16.2清單元件
16.3版面格點元件
16.4版面格點元件
16.5對話方塊元件
16.6側邊欄面板元件

17jQueryMobile互動
使用jQueryMobile與使用者互動,就必須使用表單、事件與方法。jQueryMobile表單能提供使用者輸入的資料介面,並檢視資料的正確性,再送到指定的程式進行處理。jQueryMobile提供了頁面、觸控、捲動及方向切換等事件,幫助使用者與頁面的內容進行互動。jQueryMobile提供了頁面切換及預載頁面的方法,幫助使用者在頁面之間切換並傳遞資料,或是以預載的方式增進頁面顯示效能。
17.1jQueryMobile表單
17.2jQueryMobile事件

序/導讀



近幾年因為HTML5、CSS3的流行普及,JavaScript、jQuery的歷久不衰,讓許多知名的網路服務平台如Google、Facebook、YouTube... 等爭相採用相關的技術開發出互動性極佳的網站。而人手一台的智慧型手機、平板電腦,宣告了跨平台的世代來臨,網頁的應用首當其衝:讓一個網站能正確適當的展現在不同作業系統、不同螢幕大小的設備上,就成為現代網頁開發者最新的挑戰。

而這些技術是相互關聯的,在學習的連結上似乎無法完整切割,也無從逃避,但也因此讓許多人徘徊在入門的關口外,不知所措。在本書中針對這個問題,我們精心規劃了學習新一代網頁設計時必修的課程。

由HTML、CSS開始,再進入HTML5/CSS3的新領域,讓學習者能對於網頁的建構與設定有全面性的認識與熟悉。接著再由基本的JavaScript學習網頁互動,進而利用jQuery深入應用的層面。

最後的重點是二個近年來討論度高的跨平台框架:jQuery Mobile及Bootstrap。jQuery Mobile是基於jQuery技術發展出來的行動裝置使用者介面框架,能在簡易的設定與操作下快速打造出行動裝置的使用介面。

Bootstrap更是新一代RWD網站開發中的熱門焦點,能讓網頁因應不同大小的螢幕自動改變內容的配置,確保每個平台的使用者都能得到最好的操作體驗。這次因應Bootstrap 5的改版進行一次內容的編修,由框架的安裝方式,格線系統的使用、網頁的元件、表單及工具的使用,一直到網頁互動程式的開發,全面採用最新的語法進行教學,體驗這次改版帶來的全新感受。

配送方式

  • 台灣
    • 國內宅配:本島、離島
    • 到店取貨:
      金石堂門市 不限金額免運費
      7-11便利商店 ok便利商店 萊爾富便利商店 全家便利商店
  • 海外
    • 國際快遞:全球
    • 港澳店取:
      ok便利商店 順豐 7-11便利商店

詳細資料

詳細資料

    • 語言
    • 中文繁體
    • 裝訂
    • 紙本平裝
    • ISBN
    • 9789865029074
    • 分級
    • 普通級
    • 頁數
    • 512
    • 商品規格
    • 18開17*23cm
    • 出版地
    • 台灣
    • 適讀年齡
    • 全齡適讀
    • 注音
    • 級別

商品評價

訂購/退換貨須知

加入金石堂 LINE 官方帳號『完成綁定』,隨時掌握出貨動態:

加入金石堂LINE官方帳號『完成綁定』,隨時掌握出貨動態
金石堂LINE官方帳號綁定教學

提醒您!!
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機,請不要聽從指示,以免受騙上當!

退換貨須知:

**提醒您,鑑賞期不等於試用期,退回商品須為全新狀態**

  • 依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」,以下商品購買後,除商品本身有瑕疵外,將不提供7天的猶豫期:
    1. 易於腐敗、保存期限較短或解約時即將逾期。(如:生鮮食品)
    2. 依消費者要求所為之客製化給付。(客製化商品)
    3. 報紙、期刊或雜誌。(含MOOK、外文雜誌)
    4. 經消費者拆封之影音商品或電腦軟體。
    5. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,經消費者事先同意始提供。(如:電子書、電子雜誌、下載版軟體、虛擬商品…等)
    6. 已拆封之個人衛生用品。(如:內衣褲、刮鬍刀、除毛刀…等)
  • 若非上列種類商品,均享有到貨7天的猶豫期(含例假日)。
  • 辦理退換貨時,商品(組合商品恕無法接受單獨退貨)必須是您收到商品時的原始狀態(包含商品本體、配件、贈品、保證書、所有附隨資料文件及原廠內外包裝…等),請勿直接使用原廠包裝寄送,或於原廠包裝上黏貼紙張或書寫文字。
  • 退回商品若無法回復原狀,將請您負擔回復原狀所需費用,嚴重時將影響您的退貨權益。
※ 網友掛保證,絕不踩雷書單如下 ↓↓↓
預計 2025/09/20 出貨 參考庫存量:1 
金石堂門市 全家便利商店 ok便利商店 萊爾富便利商店 7-11便利商店
World wide
活動ing