close
Blogtrottr
♣梅問題‧教學網【Minwt】♣
Photoshop教學|影像後製精修|商品攝影|美食攝影 |網頁設計教學 
《Dreamweaver CC》製作HTML5.0與CSS3.0網頁更ez!
May 8th 2014, 01:30, by admin

梅問題-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!


引用網址: ※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜

    kko2d75ji0bkx 發表在 痞客邦 留言(0) 人氣()