第二類響應式網頁規劃設計能力極地動物建立 Bootstrap Step1 執行檔案 / 開新檔案, 開啟新增文件視窗, 點選架構下方 BOOTSTRAP 頁籤設定: Bootstrap CSS 點選新建選項鈕勾消包含預先建立的版面核取方塊按

Size: px

Start display at page:

Download "第二類響應式網頁規劃設計能力極地動物建立 Bootstrap Step1 執行檔案 / 開新檔案, 開啟新增文件視窗, 點選架構下方 BOOTSTRAP 頁籤設定: Bootstrap CSS 點選新建選項鈕勾消包含預先建立的版面核取方塊按"

宋计
5 years ago
Views:

1 第二類響應式網頁規劃設計能力 201. SSD 固態硬碟 202. Online Resume 203. 極地動物 204. TQC 軟體公司 205. TQC 企業人才技能認證網 206. 黑洞 207. TQCtube 208. Travel Gallery 209. Marathon 210. Login Register Form

點選新建選項鈕勾消包含預先建立的版面核取方塊按自訂鈕, 設定編輯格線欄值 12, 裝訂邊值為 30 px 螢幕的中繼檢視點小為 800 px,

2 第二類響應式網頁規劃設計能力極地動物建立 Bootstrap Step1 執行檔案 / 開新檔案, 開啟新增文件視窗, 點選架構下方 BOOTSTRAP 頁籤設定: Bootstrap CSS 點選新建選項鈕勾消包含預先建立的版面核取方塊按自訂鈕, 設定編輯格線欄值 12, 裝訂邊值為 30 px 螢幕的中繼檢視點小為 800 px, 中為 1024 px, 大為 1280 px 按建立鈕 Step2 執行視窗 / 屬性, 開啟屬性面板設定文件標題為極地動物 Step3 執行檔案 / 另存新檔, 將網頁儲存至 C:\ANS.CSF\DW02 資料夾中, 檔案名稱為 index.html

2-14 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) Step4 執行檔案 / 附加樣式表, 開啟

css 為新樣式表檔案, 畫面出現找不到指定樣式表警告視窗, 按是新增在頁面新增連結的樣式表檔案 203-2.

txt 文字檔, 分別複製標題及說明內容, 以滑鼠左鍵雙擊的方式取代 Jumbotron 組件中標題及說明內容 Dreamweaver 的即時

3 2-14 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) Step4 執行檔案 / 附加樣式表, 開啟附加現有的 CSS 檔案視窗, 設定 : 檔案/URL 為 css/style.css 增加成為點選連結按確定鈕 style.css 為新樣式表檔案, 畫面出現找不到指定樣式表警告視窗, 按是新增在頁面新增連結的樣式表檔案插入 Jumbotron Step1 執行插入 / Bootstrap 組件 / Jumbotron Step2 開啟 animal.txt 文字檔, 分別複製標題及說明內容, 以滑鼠左鍵雙擊的方式取代 Jumbotron 組件中標題及說明內容 Dreamweaver 的即時檢視支援以 Bootstrap 為基礎的多媒體互動網頁設計切換至即時模式以使用 Bootstrap Step3 點選頁面中標示 Learn more 文字的按鈕, 按滑鼠右鍵, 點選重製項目, 複製另一個按鈕

4 第二類響應式網頁規劃設計能力 2-15 Step4 滑鼠左鍵雙擊按鈕, 將按鈕上的文字依序修改為南極企鵝及北極熊 Step5 開啟 CSS 設計工具面板, 點選來源頁籤中的 style.css 後, 按選取器頁籤左方的新增選取器鈕, 新增 body 樣式規則, 並設定 font-family 屬性值為微軟正黑體插入 Carousel Step1 在 DOM 面板點選類別為.jumbotron 的 <div> 標籤, 執行插入 / Bootstrap 組件 / Carousel, 並點選在選取的標籤之後插入 Step2 在 DOM 面板中, 展開 Carousel 組件標籤, 重製二次 Carousel 組件中類別為.item 的 <div> 標籤, 增加輪播畫面為 5 個

5 2-16 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) Step3 在 DOM 面板展開第 1 個類別為.item 的 <div> 標籤 : 點選 <img> 標籤, 在頁面按 <img> 標籤左方編輯 HTML 屬性鈕啟 HTML 編輯視窗, 設定 src 為 images/animal_1.jpg, 開點選 <h3> 標籤, 滑鼠左鍵雙擊方式修改標題為北極熊後, 按頁面 <h3> 標籤左方編輯 HTML 屬性鈕, 開啟 HTML 編輯視窗, 變更格式為 h1 點選 <p> 標籤, 按 Delete 鍵刪除段落標籤及內容

並點選在選取的標籤之後插入 Step6 點選任一輪播的 h1 標籤, 開啟 CSS 設計工具面板, 點選來源頁籤中的 style.css 後, 按選取器頁籤左方的新增選取器鈕, 新增.item.

6 第二類響應式網頁規劃設計能力 2-17 Step4 依序按 Carousel 組件向右輪播指示器, 重複 Step3 內容, 在 DOM 面板展開類別為.item 的 <div> 標籤, 將輪播畫面 <img> 標籤來源依序設為 animal_2.jpg~animal_5.jpg, 對應的標題分別為南極企鵝北極狐北美馴鹿及海豹, 並將標題格式均修改為 h1, 最後刪除 <p> 標籤, 完成五個輪播畫面 Step5 點選 DOM 面板中 ID 為 carousel1 的 <div> 標籤, 執行插入 / HTML / 水平線, 並點選在選取的標籤之後插入 Step6 點選任一輪播的 h1 標籤, 開啟 CSS 設計工具面板, 點選來源頁籤中的 style.css 後, 按選取器頁籤左方的新增選取器鈕, 新增.item.carousel-caption h1 樣式規則, 並設定 color 屬性值為 rgba(0,255,255,1.00) 插入 Container-Fluid Step1 點選 DOM 面板的 <hr> 標籤, 執行插入 / Bootstrap 組件 / Container-fluid 後, 點選在選取的標籤之後插入

2-18 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版

Bootstrap 組件 / Grid Row with column, 開啟以欄

Step4 再執行插入 / Bootstrap 組件 / Grid Row with

7 2-18 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) Step2 切換為 sm - 小型裝置尺寸顯示網頁 Step3 執行插入 / Bootstrap 組件 / Grid Row with column, 開啟以欄插入列視窗, 點選插入列為巢狀化, 新增的欄數為 3, 按確定鈕 Step4 再執行插入 / Bootstrap 組件 / Grid Row with column, 在開啟的以欄插入列視窗, 點選插入列為之後, 新增的欄數為 3 Step5 點選 DOM 面板中新增的第 1 個類別為.col-sm-4 的 <div> 標籤, 執行插入 / Image, 按巢狀化鈕, 選擇插入 images 資料夾的 a1.jpg

第二類響應式網頁規劃設計能力 2-19 Step6 點選插入的圖片, 依序按新增類別 /ID 鈕, 新增.

txt, 複製 a1 圖片說明文字返回網頁, 在 DOM 面板確認點選新增的 <img> 標籤, 執行插入 / 標題 /

步驟, 將其他類別為.col-sm-4 的 <div> 標籤新增圖片及標題內容, 其中第一列圖片使用 a1.jpg~a3.

8 第二類響應式網頁規劃設計能力 2-19 Step6 點選插入的圖片, 依序按新增類別 /ID 鈕, 新增.img-responsive 及.img-circle 樣式規則 Step7 開啟 animal.txt, 複製 a1 圖片說明文字返回網頁, 在 DOM 面板確認點選新增的 <img> 標籤, 執行插入 / 標題 / H3, 並點選之後鈕, 新增 h3 標籤版面, 並將標題內容替換為複製的文字 Step8 重複 Step5~Step7 步驟, 將其他類別為.col-sm-4 的 <div> 標籤新增圖片及標題內容, 其中第一列圖片使用 a1.jpg~a3.jpg, 第二列圖片使用 b1.jpg~b3.jpg Step9 點選 a1.jpg 圖片, 按 <img> 標籤右方新增類別 /ID 鈕 #penguin, 新增 ID 為

9 2-20 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) Step10 點選廣告大屏幕中的南極企鵝按鈕, 按滑鼠右鍵, 點選快速標籤編輯器項目, 開啟編輯標籤方塊, 修改 <div> 標籤 href 屬性值為 #penguin Step11 重複 Step9~Step10 步驟, 新增 b1.jpg 圖片的 ID 為 #bear, 並在廣告大屏幕中編輯北極熊圖片連結標籤 href 屬性值為 #bear 插入 HTML5 Video Step1 點選 DOM 面板類別為.container-fluid 的 <div> 標籤, 執行插入 / HTML / HTML5 Video, 點選在選取的標籤之後插入 Step2 點選影片, 開啟屬性面板, 設定來源為 video/film.mp4, 並勾選 AutoPlay 核取方塊 Step3 按 <video> 標籤右方新增類別 /ID 鈕, 新增套用.img-responsive.img-circle 及.center-block 樣式規則儲存網頁 Step1 執行檔案 / 全部儲存, 儲存所有網頁及相關樣式檔案

10 第三類網頁特效設計能力 301. 花蓮景點 302. 彩虹路跑報名網 303. 星座分析 304. 天工開物 305. TQC 旅遊 306. TQC+ WebDesign 307. SAVE POLAROID 308. Travel Photo 309. Happy Valentine s Day 310. 浮光掠影相簿

3-2 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) 301. 花蓮景點 301-1. 編修 index.

插入 jquery Step1 分別將游標置於表格第二列的三個儲存中, 執行插入 / jquery UI / Button, 並依序變更名稱為太魯閣七星潭慶修院使用設計檢視模式進行設計 Step2 點選太魯閣的

11 3-2 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) 301. 花蓮景點編修 index.html Step1 執行檔案 / 頁面屬性, 開啟頁面屬性視窗, 在標題 / 編碼方式分類設定 : 標題為花蓮景點介紹文件類型選擇 HTML5 按確定鈕插入 jquery Step1 分別將游標置於表格第二列的三個儲存中, 執行插入 / jquery UI / Button, 並依序變更名稱為太魯閣七星潭慶修院使用設計檢視模式進行設計 Step2 點選太魯閣的 jquery Button, 開啟屬性視窗, 設定圖示的 Primary 及 Secondary 值皆為 ui-icon-link Step3 重複 Step2 步驟, 分別設定七星潭及慶修院的 jquery Button 圖示 Primary 及 Secondary 值皆為 ui-icon-star 及 ui-icon-heart 301. 花蓮景點

第三類網頁特效設計能力 3-3 Step4 開啟 JavaScript.txt 內容, 修改連結網址 http://tw.yahoo.com 為 a.

面板按新增行為鈕, 點選呼叫 JavaScript 項目, 開啟呼叫 JavaScript 視窗, 貼上複製的 JavaScript.

步驟, 新增其他兩個 jquery Botton 行為指令, 分別修改連結網址為 b.html 及 c.html 301-3.

12 第三類網頁特效設計能力 3-3 Step4 開啟 JavaScript.txt 內容, 修改連結網址為 a.html, 高度及寬度分別為 height=350 width=550, 然後複製內容 Step5 點選太魯閣 jquery Button, 在行為面板按新增行為鈕, 點選呼叫 JavaScript 項目, 開啟呼叫 JavaScript 視窗, 貼上複製的 JavaScript.txt 內容完成新增行為, 確認行為指令為 onclick 執行視窗功能可開啟 Dreamweaver 各項浮動式面板 Step6 重複 Step5 步驟, 新增其他兩個 jquery Botton 行為指令, 分別修改連結網址為 b.html 及 c.html 圖片增加效果 Step1 點選表格第四列第 1 張圖片, 按行為面板新增行為鈕果子項目的 Fade, 開啟 Fade 視窗, 按確定鈕, 點選效確認圖片新增行為事件為 onclick 301. 花蓮景點

13 3-4 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) Step2 重複 Step1 步驟, 分別點選第 2 張及第 3 張圖片, 由行為面板新增 Fold 及 Puff 效果, 並確認新增行為事件均為 onclick 圖片增加效果 Step1 點選表格第六列第 1 張圖片, 按行為面板新增行為鈕換影像項目, 開啟調換影像視窗設定 :, 點選調設定原始檔為 images/a1.jpg 勾消滑鼠滑開時恢復影像核取方塊按確定鈕確認圖片新增行為事件為 onmoseover 301. 花蓮景點

onmouseout Step4 重複 Step1~Step3 步驟, 點選表格第六列第 2 張圖片, 在行為新增調換影像 Shake 及 Bounce 效果, 其中 :

14 第三類網頁特效設計能力 3-5 Step2 再按行為面板新增行為鈕, 點選效果子項目的 Shake, 按確定鈕, 並確定新增行為事件為 onclick Step3 再按行為面板新增行為鈕, 點選效果子項目的 Blind, 開啟 Blind 視窗設定: 作用期間為 2000 ms 按確定鈕變更新增行為事件為 onmouseout Step4 重複 Step1~Step3 步驟, 點選表格第六列第 2 張圖片, 在行為新增調換影像 Shake 及 Bounce 效果, 其中 : 開啟調換影像視窗時, 設定原始檔為 images/b1.jpg, 勾消滑鼠滑開時恢復影像核取方塊開啟 Bounce 視窗時, 設定作用時間為 2000 ms 301. 花蓮景點

3-6 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) 確認並修改調換影像行為的事件為

Step1~Step3 步驟, 點選表格第六列第 3 張圖片, 在行為新增調換影像 Shake 及 Clip 效果, 其中 : 開啟

jpg, 勾消滑鼠滑開時恢復影像核取方塊開啟 Clip 視窗時, 設定作用時間為 2000 ms 確認並修改調換影像

15 3-6 TQC+ 網頁設計認證指南解題秘笈 -Dreamweaver CC( 第二版 ) 確認並修改調換影像行為的事件為 onmouseover, Shake 效果的事件為 onclick, Bounce 效果的事件為 onmouseout Step5 重複 Step1~Step3 步驟, 點選表格第六列第 3 張圖片, 在行為新增調換影像 Shake 及 Clip 效果, 其中 : 開啟調換影像視窗時, 設定原始檔為 images/c1.jpg, 勾消滑鼠滑開時恢復影像核取方塊開啟 Clip 視窗時, 設定作用時間為 2000 ms 確認並修改調換影像行為的事件為 onmouseover, Shake 效果的事件為 onclick, Clip 效果的事件為 onmouseout 儲存檔案 Step1 執行檔案 / 儲存檔案, 複製相關檔案並儲存已完成編輯網頁檔案 301. 花蓮景點

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling

第二類響應式網頁規劃設計能力 極地動物 建立 Bootstrap Step1 執行 檔案 / 開新檔案, 開啟 新增文件 視窗, 點選 架構 下方 BOOTSTRAP 頁籤設定: Bootstrap CSS 點選 新建 選項鈕 勾消 包含預先建立的版面 核取方塊 按

第二類響應式網頁規劃設計能力極地動物建立 Bootstrap Step1 執行檔案 / 開新檔案, 開啟新增文件視窗, 點選架構下方 BOOTSTRAP 頁籤設定: Bootstrap CSS 點選新建選項鈕勾消包含預先建立的版面核取方塊按