回首頁  
帳號
 
關於博碩 博碩好讀 校園圖書 MOCC認證 下載教學 元學堂

博碩好讀
  新書推薦
  出版預告
  名家名著
  iT達人祕笈
 

分類索引

 

出版總覽

 

讀者服務

  徵求作者
 
首頁 >> 書籍介紹
 
 
點我可放大圖片
 
書名:HTML/CSS/JavaScript與前端框架的完美結合:使用Bootstrap與PWA技術,新手從這開始!
書號:MP22262 作者:陳婉凌 著、ZCT 策劃 ISBN: 978-626-333-310-9
定價:NT$690元 印刷:單色 頁數:528頁
書籍規格:17*23 上市日:2022/11/26 譯者:(無)
學習定位:初階 本書附件:博碩官網下載範例檔   快速前往 範例 勘誤
前往購買 >> 蝦皮購物 類別:電腦技術  
       
快速前往 快速前往        

 

 

    掌握HTML/CSS/JavaScript技巧,
    搭配高效前端框架技術,輕鬆成為專業網頁設計師


    以淺顯易懂的方式從設計網站開始談起,從網站建置的過程、設計網站原型(prototyping)的工具以及取得各式網路資源,再循序漸進介紹Web前端三大核心技術:HTML、CSS及JavaScript,並加入前端框架Bootstrap技術,加上書中介紹好用的配色工具,就算沒有美工基礎,藉由Bootstrap工具模組以及配色表,也能快速建構出專業美觀的RWD網站。
    本書也安排了Progressive Web Application(PWA)技術,手把手教您逐步將網站優化為Web APP,讓網站能像Native App在手機等行動裝置建立桌面捷徑,瀏覽網頁時具有操作Native App相似的感受。
    本書共分三大單元,第一單元為前端開發觀念及HTML+CSS基礎到進階教學;第二單元安排JavaScript基礎的語法以及Web資料庫的應用;第三單元介紹前端框架工具,包括Bootstrap與PWA。各章節除了實用的範例之外,在每一單元安排了整合練習,讓讀者能加強學習並驗收學習成果,累積實作經驗,適合自修與教學使用。

    |重點特色|
    ✰以淺顯易懂的方式快速了解前端開發的觀念及技術。
    ✰熟悉網站原型(prototyping)並善用網路工具與資源加以實作。
    ✰循序漸進介紹Web前端三大核心技術:HTML、CSS及JavaScript。
    ✰活用前端框架Bootstrap技術以及工具模組,建構RWD網站。
    ✰使用Progressive Web Application(PWA)技術,逐步將網站優化為Web APP。

    |適用對象|
    ✰對前端技術有興趣卻不知從何入門的初學者
    ✰前端開發技術相關從業人員
    ✰大專院校網站設計相關課程教材
 
    CHAPTER 01 網站開發的觀念與技術
    1-1 網站開發的基礎觀念
        1-1-1 網站及網頁
        1-1-2 網頁開發的前端與後端
        1-1-3 網址的組成
    1-2 網站建置流程與技術
        1-2-1 擬定網站主題
        1-2-2 規劃網站架構與內容
        1-2-3 製作網頁工具
        1-2-4 上傳雲端
    1-3 網頁介面原型建構工具
        1-3-1 網站原型架構
        1-3-2 介面線框與原型工具
        1-3-3 實作網頁介面原型

    CHAPTER 02 HTML與CSS基礎
    2-1 學習HTML前的準備工作
        2-1-1 建立HTML文件
        2-1-2 自動生成HTML5架構程式碼
    2-2 HTML語法概念與架構
        2-2-1 HTML的標記型態
        2-2-2 HTML的組成
        2-2-3 標記屬性的運用
    2-3 HTML5文件結構與語意標記
        2-3-1 語意化的HTML標記
        2-3-2 HTML5宣告與編碼設定
    2-4 認識CSS基本架構
        2-4-1 使用CSS樣式表
        2-4-2 CSS基本格式
        2-4-3 認識CSS選擇器
        2-4-4 CSS的度量單位
        2-4-5 CSS的顏色表示法

    CHAPTER 03 HTML常用標記
    3-1 排版相關標記
        3-1-1 瀏覽器呈現網頁的過程
        3-1-2 標題標記
        3-1-3 段落及換行標記
    3-2 項目列表清單
        3-2-1 有序列表
        3-2-2 無序列表清單
        3-2-3 定義列表
    3-3 表格與表單
        3-3-1 表格
        3-3-2 表單
        3-3-3 表單元件
    3-4 插入圖片與超連結
        3-4-1 插入圖片
        3-4-2 超連結
        3-4-3 內置框架(iframe)
    3-5 div標記與span標記
        3-5-1 認識div標記
        3-5-2 認識span標記
        3-5-3 替程式碼加上註解
        3-5-4 使用特殊符號及Emoji字符集

    CHAPTER 04 CSS常用語法
    4-1 文字與段落樣式
        4-1-1 文字樣式
        4-1-2 文字段落樣式
        4-1-3 邊框
        4-1-4 文繞圖
    4-2 掌握CSS定位
        4-2-1 網頁元件的定位(position)
        4-2-2 立體網頁的定位
        4-2-3 好用的calc()函式

    CHAPTER 05 CSS Flexbox響應式排版
    5-1 Flexbox模型概念
        5-1-1 認識CSS盒子模型(Box Model)
        5-1-2 認識Flexbox彈性盒子
    5-2 Flexbox屬性
        5-2-1 fl¬ex container屬性
        5-2-2 ¬flex Items屬性

    CHAPTER 06 善用網路資源
    6-1 圖庫素材分享平台
        6-1-1 認識創用CC授權
        6-1-2 搜尋CC授權素材
        6-1-3 Icon nder-icon圖庫
        6-1-4 替網站加入Logo小圖示
    6-2 實用的網頁應用產生器
        6-2-1 CSS Layout產生器
        6-2-2 按鈕產生器
        6-2-3 網站配色

    CHAPTER 07 整合練習—詩詞展示網頁設計與實作
    7-1 網頁架構說明
        7-1-1 網頁架構圖
        7-1-2 選擇合適的HTML標記
    7-2 建立HTML與CSS程式碼
        7-2-1 建立網頁架構的HTML語法
        7-2-2 加入超連結
        7-2-3 加入CSS語法
        7-2-4 加入偽元素
        7-2-5 利用Icon Fonts產生社群圖示

    CHAPTER 08 JavaScript基礎
    8-1 認識JavaScript
        8-1-1 JavaScript基本觀念
        8-1-2 JavaScript運行環境
        8-1-3 瀏覽器主控台console
        8-1-4 JavaScript語法架構
    8-2 JavaScript基礎語法
        8-2-1 JavaScript語法架構
        8-2-2 JavaScript註解符號
        8-2-3 資料型別(Data Type)
    8-3 變數宣告與作用範圍
        8-3-1 全域變數與區域變數
        8-3-2 使用var關鍵字宣告變數
        8-3-3 var宣告的作用域
        8-3-4 使用Let關鍵字宣告變數
        8-3-5 使用const關鍵字宣告常數
        8-3-6 變數名稱的限制

    CHAPTER 09 函式與作用域
    9-1 自訂函式
        9-1-1 函式的定義與呼叫
        9-1-2 函式參數
        9-1-3 函式回傳值
    9-2 函式的多重用法
        9-2-1 函式宣告式(Function Declaration)
        9-2-2 函式表達式(Function Expressions)
        9-2-3 物件與this關鍵字
        9-2-4 立即執行函式(IIFE)

    CHAPTER 10 JavaScript操控DOM元素
    10-1 DOM物件的方法與屬性
         10-1-1 取得物件資訊
         10-1-2 處理物件節點
         10-1-3 屬性的讀取與設定
    10-2 DOM物件的操作
         10-2-1 Window物件
         10-2-2 DOM集合(Collection)
    10-3 DOM風格樣式
         10-3-1 查詢元素樣式
         10-3-2 設定元件樣式

    CHAPTER 11 前端資料儲存
    11-1 認識Web Storage
         11-1-1 Web Storage概念
         11-1-2 偵測瀏覽器是否支援Web Storage
    11-2 localStorage及sessionStorage
         11-2-1 存取localStorage
         11-2-2 刪除localStorage
         11-2-3 存取sessionStorage
    11-3 IndexedDB資料庫
         11-3-1 IndexedDB重要概念
         11-3-2 IndexedDB基本操作
         11-3-3 讀取資料
         11-3-4 刪除資料
         11-3-5 清空資料

    CHAPTER 12 整合練習—個人通訊錄實作
    12-1 網頁架構說明
         12-1-1 網頁功能架構圖及線框圖
         12-1-2 CSS Image Sprites
    12-2 IndexedDB的CURD
         12-2-1 建置資料庫物件及開啟交易
         12-2-2 設定事件的處理函式
         12-2-3 新增會員與新增完成
         12-2-4 動態產生資料列表
         12-2-5 修改與刪除單筆資料
         12-2-6 清空資料與刪除資料庫
         12-2-7 阻止事件傳遞與預設行為

    CHAPTER 13 響應式網頁框架—Bootstrap
    13-1 認識Bootstrap
         13-1-1 為什麼要使用Bootstrap
         13-1-2 下載Bootstrap
         13-1-3 RWD的設計理念
    13-2 Bootstrap排版
         13-2-1 斷點(Breakpoint)與容器(Container)
         13-2-2 了解Grid System
         13-2-3 Viewport與Media queries
    13-3 Bootstrap的樣式
         13-3-1 Bootstrap通用顏色
         13-3-2 Bootstrap間距
         13-3-3 Bootstrap寬度與高度
         13-3-4 Bootstrap文字
    13-4 圖片與表格
         13-4-1 響應式圖片
         13-4-2 邊框圓角
         13-4-3 建立Bootstrap表格

    CHAPTER 14 Bootstrap擴充元件庫
    14-1 導覽與選單
         14-1-1 導覽列(Navigation Bar)
    14-2 表單與按鈕
         14-2-1 表單控制元件
         14-2-2 表單排版
    14-3 輪播元件(Carousel)
         14-3-1 基本的輪播效果
         14-3-2 利用JavaScript控制輪播

    CHAPTER 15 PWA實作—我的記帳本Web App
    15-1 實作「我的記帳本」網頁
         15-1-1 「我的記帳本」網頁功能與介面
         15-1-2 下拉式選單
         15-1-3 按鈕群組
         15-1-4 互動視窗
         15-1-5 IndexedDB關鍵字查詢
         15-1-6 善用Bootstrap Icons製作小圖示
    15-2 將網頁轉換成PWA
         15-2-1 什麼是PWA
         15-2-2 製作各種尺寸的App圖示按鈕
         15-2-3 將網頁變成PWA
 
 

範例下載
 
  1. 範例 (3.1MB)
書籍勘誤
 
  1. 勘誤表 (53.6KB)
 
 
     

博碩文化客服信箱
 

[email protected]

 
文教業務團隊
台北、新北、桃園、基隆、宜蘭、花蓮、金門
汪 玉 鳳
LINE ID:0925177716
0925-177716
[email protected]
郭 南 彤
LINE ID:rgtech101
0917-727778
[email protected]
助理分機 519
新竹、苗栗、台中、彰化、南投、雲林
林 世 昌
LINE ID:0925275775
0925-275775
[email protected]
助理分機 519
嘉義、台南、高雄、屏東、台東、澎湖
林 月 玲
LINE ID:0926858627
0926-858627
[email protected]
助理分機 238
 
MOCC 認證小組
 
  林 雯 玲 電話:02-2696-2869 分機:623 [email protected]

 

 
 

 

博碩文化股份有限公司 DrMaster Press Co., Ltd.
台灣新北市汐止區新台五路一段112號10樓A棟
Building A, 10F, No.112, Xintai 5th Rd., Sec.1,Xizhi Dist., New Taipei City 221, Taiwan
Tel:02-2696-2869 Fax:02-2696-2867 劃撥帳號:17484299

Copyright© DrMaster Press Co., Ltd. All Rights Reserved.