在 Dreamweaver CC 中建立 Bootstrap 4 空白頁面

閱讀時間約 2 分鐘
在 Dreamweaver 中要根據 Bootstrap 架構建立 HTML 檔案,可以選擇全新建立一組有著 Bootstrap 架構的檔案,或直接使用現有的檔案來修改。例如在Dreamweaver 中建立檔案後,使用【插入】面板加入 Bootstrap 組件,如收合式面板和導覽列等。

1.新增一個空白的 Bootstrap 4 頁面

Dreamweaver cc 2018 後的版本預設內建使用的是 Bootstrap 3.4(需更新為 Bootstrap 4),請由網站設定(【網站 > 新增或修改網站】命令)的【進階】設定中指定要使用的版本。若使用的是 Dreamweaver cc 2019,預設即為採用 Bootstrap 4。
STEP1.
新增一個網站(【網站 > 新增網站】命令),網站資料夾選擇為要建構 Bootstrap 網站的資料夾(請自行在電腦硬碟中新增資料夾即可),由左側切換至【Bootstrap】即可檢視版本,按下【儲存】完成新增網站設定。
若使用的是 Dreamweaver cc 2019,預設即為採用 Bootstrap 4,即不需版本設定,只需要新增網站即可。
STEP2.
在Dreamweaver執行【檔案>開新檔案】,於【新增文件】交談窗中直接選擇【架構 BOOTSTRAP】、 Bootstrap CSS 選擇【新建】、【設計】不勾選【包含預先建立的版面】項目,按下【建立】後,開啟的即是空白的 Bootstrap 架構頁面。
儲存檔案後,所有與 CSS 與 JS 相關的串聯位址即更新完成,並且自動於定義網站內產生 CSS 與 JS 資料夾。

2.包含預先建立的版面

STEP3.
再次開啟一個新檔,【設計】改勾選【包含預先建立的版面】項目,即可開啟包含了一部分 Bootstrap 預設架構的頁面內容。
開啟的頁面是有包含預設的頁面內容編排,即可先簡單參考頁面內容與預設可使用素材。
為什麼會看到廣告
    29會員
    161Content count
    藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
    留言0
    查看全部
    發表第一個留言支持創作者!
    哩老師的沙龍 的其他內容
    Step1. 開啟範例練習檔,路徑控制版上有三份路徑,請依序建立選取範圍由箱子圖層上複製貼上箱子的三個面,依序為蓋子、左面、右面。 Step2. 向下移動左面右面讓下角與下方箱子角銜接,點取左面圖層按下『Ctrl』『T』任意變形,按住『Ctrl』滑鼠在左側中間編輯點上垂直向下變形,讓左下角與下方
    Step1. 開啟範例練習檔,新增圖層1填入白色,複選白色與文字圖層並合併圖層,執行『濾鏡 > 模糊 > 高斯模糊』設定強度:4像素。 Step2. 執行『影像 > 調整 > 色階』調整左右控制點至中央,讓文字邊緣模糊部分實體化,使用魔術棒工具選到所有文字內容,新增空白霓虹燈圖層,執行『編輯 >
    Step1. 開啟範例練習檔,新增圖層1填入黑色並設定圖層不透明度:85%,為圖層1建立空白遮色片,使用筆刷尺寸:200、不透明:15%、黑色,修淡中央燈範圍附近。 Step2. 以路徑建立選取範圍,新增圖層光於燈之上,並填入黃色至透明的線性漸層,由燈中央向右下角填入漸層。 再使用多邊型套索
    Step1. 開啟範例練習檔,依序經由路徑控制版上路徑轉換為選取範圍,複製貼上側面、前輪、後輪、前面、前側面,並移動至汽車之下。 Step2. 前輪與後輪均執行『變形 > 垂直翻轉』並任意變形旋轉其方向至適合角度,側面圖層同樣垂直翻轉使用任意變形,移動變形編輯中心至前輪旁尖端處,再按住『Ctr
    Step1. 開啟範例練習檔,複製香檳色相機圖層為『香檳色倒影』,更改圖層順序至香檳色之下,執行『物件 >變形 > 垂直翻轉』,為香檳色倒影圖層建立空白遮色片,在遮色片編輯狀態之下,使用黑至白線性漸層,由倒影下方至上填入漸層,完成倒影淡出的效果,設定圖層不透明度:50。 Step2. 開啟範例練
    Step1. 開啟範例練習檔,複製人物圖層為『人物倒影』,更改圖層順序至人物之下,執行『物件 >變形 > 垂直翻轉』,為人物倒影圖層建立空白遮色片,在遮色片編輯狀態之下,使用黑至白線性漸層,由倒影下方至上填入漸層,完成倒影淡出的效果。 Step2. 複製畫框圖層為『畫框倒影』,更改圖層順序至畫框
    Step1. 開啟範例練習檔,路徑控制版上有三份路徑,請依序建立選取範圍由箱子圖層上複製貼上箱子的三個面,依序為蓋子、左面、右面。 Step2. 向下移動左面右面讓下角與下方箱子角銜接,點取左面圖層按下『Ctrl』『T』任意變形,按住『Ctrl』滑鼠在左側中間編輯點上垂直向下變形,讓左下角與下方
    Step1. 開啟範例練習檔,新增圖層1填入白色,複選白色與文字圖層並合併圖層,執行『濾鏡 > 模糊 > 高斯模糊』設定強度:4像素。 Step2. 執行『影像 > 調整 > 色階』調整左右控制點至中央,讓文字邊緣模糊部分實體化,使用魔術棒工具選到所有文字內容,新增空白霓虹燈圖層,執行『編輯 >
    Step1. 開啟範例練習檔,新增圖層1填入黑色並設定圖層不透明度:85%,為圖層1建立空白遮色片,使用筆刷尺寸:200、不透明:15%、黑色,修淡中央燈範圍附近。 Step2. 以路徑建立選取範圍,新增圖層光於燈之上,並填入黃色至透明的線性漸層,由燈中央向右下角填入漸層。 再使用多邊型套索
    Step1. 開啟範例練習檔,依序經由路徑控制版上路徑轉換為選取範圍,複製貼上側面、前輪、後輪、前面、前側面,並移動至汽車之下。 Step2. 前輪與後輪均執行『變形 > 垂直翻轉』並任意變形旋轉其方向至適合角度,側面圖層同樣垂直翻轉使用任意變形,移動變形編輯中心至前輪旁尖端處,再按住『Ctr
    Step1. 開啟範例練習檔,複製香檳色相機圖層為『香檳色倒影』,更改圖層順序至香檳色之下,執行『物件 >變形 > 垂直翻轉』,為香檳色倒影圖層建立空白遮色片,在遮色片編輯狀態之下,使用黑至白線性漸層,由倒影下方至上填入漸層,完成倒影淡出的效果,設定圖層不透明度:50。 Step2. 開啟範例練
    Step1. 開啟範例練習檔,複製人物圖層為『人物倒影』,更改圖層順序至人物之下,執行『物件 >變形 > 垂直翻轉』,為人物倒影圖層建立空白遮色片,在遮色片編輯狀態之下,使用黑至白線性漸層,由倒影下方至上填入漸層,完成倒影淡出的效果。 Step2. 複製畫框圖層為『畫框倒影』,更改圖層順序至畫框
    你可能也想看
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    依戀關係是一個心理學概念,指的是尋求親密的一種心理傾向。瞭解四大類型依戀關係的特徵及對應的情緒反應對於親密關係的修復挽回具有重要意義。
    Thumbnail
    拜拜對台灣人而言應該不會是件陌生的事。 (不知道非佛教基督教人是否也會拜拜) 一般拜拜的時候會準備很多供品, 拜完神明後, 那些供品大家會吃掉嗎? 我自己以為拜完了後的供品大家一起享用是件非常理所當然的事。 但在日本好像不是…。       事情是這樣的。    日本
    Thumbnail
    保持車輛直行:爆胎時轉彎或轉向會使車輛失去平衡。 如果您的車輛偏向一側,您可能需要將方向盤向相反方向拉動,以保持直行。 這一點至關重要,否則您可能會漂移到路隔或更糟糕的是對向車道。
    Thumbnail
    照顧者與當事人的經歷都充滿著壓力與挑戰,這篇分享了一位照顧者的親身經歷,以及書籍《你可以喘口氣》中的心路歷程。文章中探討了情緒的掙扎、負面情緒的應對,以及自我照顧的重要性,提供了許多實用建議。
    Thumbnail
    《開動之前》紀錄片揭露遠洋漁工的不合理苦難與心痛,讓人思考享受美食背後的可能剝削。鏡頭中展現遠洋漁工在船上面臨的種種困境,期待透過提高大眾對這些議題的關注,減少這片大海和遠洋移工的傷痕。
    Thumbnail
    服務、接待、款待 服務你的客戶,接待你的客戶,款待你的客戶,看似相同,卻又特別不同。 我們都聽過用過這個單詞,「謝謝您的熱情款待」。我們可能會說「感謝你們的服務」,但我們比較不會說「謝謝你們的熱情服務」。我們可能會說,「感謝您用心的接待」,但我們比較不會說「謝謝您的熱情接待」。 折床一台 收到前
    每個社會事件都是學習的範本,我們可以永遠不要遇到,但要有所防範。 人的一生中會不會和別人有所衝突?會不會遇到不開心的事?會不會遇到所謂突如其來的意外?其實我說這些都是廢話,可是這些東西學校會教嗎?會討論嗎?我上學時,沒有人告訴討論如何面對衝突。和同學之間的衝突該如何處理?該沉默?該反擊還是該如何面對
    Thumbnail
    以下為一位有緣人分享:   「感謝抱怨的人」─聖嚴法師《真正的快樂》   每個人的內心深處都希望知道自己有哪些缺點。只是有些人心量很小,只喜歡聽恭維、奉承的話,如果你對他說一些逆耳的忠言,他不但不會知錯,還會加以搪塞。你要是向他抱怨,他可能會反過來訓斥你一頓,認為問題不是出在他身上,而是你犯了錯誤,
    Thumbnail
    大家自認是有錢人,一般人,窮人,超級有錢人的哪一個? 這篇文章大嬸將帶你去探究一下,西班牙人超級有錢人士的秘辛,他們是如何越來越有錢的!而我們一般人在他們的眼中又是什麼樣子? 如果你支持的是西班牙右派經濟政策,或許你可以看看這篇文章,或許會帶給你不一樣的視野. 大家對大嬸免費文章的支持,就是努力轉傳
    做一件事,我們會想快速得到結果證明自己在做的時有效,這是正常,求快時你會帶心急,心急是會抹殺你做事成功率 有一句話: 心急吃不了熱豆腐,性急喝不了熱米粥 心急的人等不及,會製造恐慌,恐慌是一種病態,讓你不敢,讓你懷疑,讓你停滯前進,你便會中途放棄 在建立第二份收入你千萬不要: 眼高手低 一位博士生在
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    依戀關係是一個心理學概念,指的是尋求親密的一種心理傾向。瞭解四大類型依戀關係的特徵及對應的情緒反應對於親密關係的修復挽回具有重要意義。
    Thumbnail
    拜拜對台灣人而言應該不會是件陌生的事。 (不知道非佛教基督教人是否也會拜拜) 一般拜拜的時候會準備很多供品, 拜完神明後, 那些供品大家會吃掉嗎? 我自己以為拜完了後的供品大家一起享用是件非常理所當然的事。 但在日本好像不是…。       事情是這樣的。    日本
    Thumbnail
    保持車輛直行:爆胎時轉彎或轉向會使車輛失去平衡。 如果您的車輛偏向一側,您可能需要將方向盤向相反方向拉動,以保持直行。 這一點至關重要,否則您可能會漂移到路隔或更糟糕的是對向車道。
    Thumbnail
    照顧者與當事人的經歷都充滿著壓力與挑戰,這篇分享了一位照顧者的親身經歷,以及書籍《你可以喘口氣》中的心路歷程。文章中探討了情緒的掙扎、負面情緒的應對,以及自我照顧的重要性,提供了許多實用建議。
    Thumbnail
    《開動之前》紀錄片揭露遠洋漁工的不合理苦難與心痛,讓人思考享受美食背後的可能剝削。鏡頭中展現遠洋漁工在船上面臨的種種困境,期待透過提高大眾對這些議題的關注,減少這片大海和遠洋移工的傷痕。
    Thumbnail
    服務、接待、款待 服務你的客戶,接待你的客戶,款待你的客戶,看似相同,卻又特別不同。 我們都聽過用過這個單詞,「謝謝您的熱情款待」。我們可能會說「感謝你們的服務」,但我們比較不會說「謝謝你們的熱情服務」。我們可能會說,「感謝您用心的接待」,但我們比較不會說「謝謝您的熱情接待」。 折床一台 收到前
    每個社會事件都是學習的範本,我們可以永遠不要遇到,但要有所防範。 人的一生中會不會和別人有所衝突?會不會遇到不開心的事?會不會遇到所謂突如其來的意外?其實我說這些都是廢話,可是這些東西學校會教嗎?會討論嗎?我上學時,沒有人告訴討論如何面對衝突。和同學之間的衝突該如何處理?該沉默?該反擊還是該如何面對
    Thumbnail
    以下為一位有緣人分享:   「感謝抱怨的人」─聖嚴法師《真正的快樂》   每個人的內心深處都希望知道自己有哪些缺點。只是有些人心量很小,只喜歡聽恭維、奉承的話,如果你對他說一些逆耳的忠言,他不但不會知錯,還會加以搪塞。你要是向他抱怨,他可能會反過來訓斥你一頓,認為問題不是出在他身上,而是你犯了錯誤,
    Thumbnail
    大家自認是有錢人,一般人,窮人,超級有錢人的哪一個? 這篇文章大嬸將帶你去探究一下,西班牙人超級有錢人士的秘辛,他們是如何越來越有錢的!而我們一般人在他們的眼中又是什麼樣子? 如果你支持的是西班牙右派經濟政策,或許你可以看看這篇文章,或許會帶給你不一樣的視野. 大家對大嬸免費文章的支持,就是努力轉傳
    做一件事,我們會想快速得到結果證明自己在做的時有效,這是正常,求快時你會帶心急,心急是會抹殺你做事成功率 有一句話: 心急吃不了熱豆腐,性急喝不了熱米粥 心急的人等不及,會製造恐慌,恐慌是一種病態,讓你不敢,讓你懷疑,讓你停滯前進,你便會中途放棄 在建立第二份收入你千萬不要: 眼高手低 一位博士生在