《Dreamweaver CC》製作HTML5.0與CSS3.0網頁更ez!

梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
   許多從事網頁設計的朋友,應該相當習慣使用Dreamweave,但隨著網頁技術不斷的推層出新後,使得有些頁面都無法在Dreamweaver中編輯,因此現在比較有經驗的網頁設計師,大部分不是使用Nopad++就是Sublime Text,但即便Sublime Text與Dreamweaver也有智能提示功能,但說真的CSS3新屬性的設定還是落落長,再加上各瀏覽器的前綴詞,光一個屬性就要重覆寫三、四次,若使用漸層背景時,只有二色就還好,若很多顏色時,這下就TT了光是CSS的碼就比js還多,因此大部分梅干都會使用一些線上CSS3.0的產生器,而這些網站都是Free且是有網友自發性的架設,所以有些用一陣子後,就會發現網站無預警的關閉,其實Dreamweaver CC版本已全面性的支援HTML5.0與 CSS3.0, 讓在製作HTML5.0與CSS3.0的網頁,更加的方便與快速,不但完全不用背任何CSS3.0的語法與HTML5.0的標籤,只要點一點立即就可快速的打造出HTML5.0與CSS3.0的網頁,至於要怎麼用呢?現在就來看看吧!

首先新增檔案,並將網頁類型設為HTML5
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
接著就會產生HTML5的網頁結構。
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
這時右手邊,就會看到HTML5.0的標籤語法,點一下後設定好ClassID後,再按一下New CSS Rule鈕。
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
接著什麼都不用設定,再按OK鈕。
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
這時在右手邊,就可依續的設定CSS3.0的樣式,像是基本的寬、高,或是圓角、陰影、漸層....等。
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
當右邊設定好後,左邊的原始碼中,就會自動產生CSS的樣式碼。
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
都設定好後,在設計模式是看不到結果畫面,只能透過瀏覽器來觀看結果畫面囉!
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!
哈~這樣就可看到,剛所設定的CSS3.0樣式啦!包含了漸層背景、文字陰影、圓角。
梅問題-Dreamweaver CC製作Html5.0與CSS3.0網頁更ez!

相關文章

Adobe Dreamweaver CS6以上版本全面支援Bootstrap

Adobe Dreamweaver CS6以上版本全面支援Bootstrap

Adobe Dreamweaver CC 2017-beta測試版搶先用

Adobe Dreamweaver CC 2017-beta測試版搶先用

Dreamweaver CC2015限定-與PSD檔更緊密結合,網頁切版排版更快速

Dreamweaver CC2015限定-與PSD檔更緊密結合,網頁切版排版更快速

Dreamweaver CC安裝Emmet套件,實現在Dreamweaver下也可使用Emmet

Dreamweaver CC安裝Emmet套件,實現在Dreamweaver下也可使用Emmet

Dreamweaver 視覺化的編輯與設計 WordPress 佈景主題

Dreamweaver 視覺化的編輯與設計 WordPress 佈景主題





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    YC DAI 說道:

    想請問老師~ 最近想做個形象網站
    要用到HTML5+CSS

    有看到這篇文章
    用CC 版的優勢

    請問CS6是否也能達到這樣的效果?

    回應:
    一樣也是可以,但建議用css framework比較方便處理
  • 第1梅
    許小la 說道:

    老師您好!有個問題不知可否請教~目前用Dreamweaver cs5做網頁!智慧手機或平版看也都沒問題!為什麼還需要HTML5+CSS3做呢??其中差別是??~~非常感謝

    回應:
    手機對於CSS3的支援更多,因此更可靈活運用,讓版面更漂亮