最近常常會用到的google字型,先記錄下來,之後再整理~
閱讀全文 網頁一定要用的google中文字型
分類彙整: Dreamweaver
物件左右置中:text-align:center;、margin:0 auto; 的區別
網頁裡物件要置中對齊的方法主要有2種,margin:0 auto 與 text-align:center,這兩種方式有什麼不同,下面用範例來解說
閱讀全文 物件左右置中:text-align:center;、margin:0 auto; 的區別
RWD網頁切版(三){CSS控制div,用id、class選取器}
雖然html5新增了很多專用的標籤,但整個網頁的構成,主要還是依靠一層又一層的div標籤來完成的,這一篇來瞭解最基本的div控制方式。
閱讀全文 RWD網頁切版(三){CSS控制div,用id、class選取器}
Dreamweaver 開新檔案、存檔、在瀏覽器預覽結果
編輯完成或是正在編輯的檔案,都需要用瀏覽器(Browser)來預覽製作的效果,雖然Dreamweaver 是所見即所得的網頁編輯器,但因為各家瀏覽器也有不同的相容性,所以還是在瀏覽器上預覽所得的結果才會比較準確。
閱讀全文 Dreamweaver 開新檔案、存檔、在瀏覽器預覽結果
RWD網頁切版(零){HTML網頁架構、常用標籤}
Dreamweaver CC 2017 工作介面介紹、同時檢示程式碼與設計結果
Dreamweaver是一套所見即所得的網頁編輯軟體,在剛開始學網頁語法的階段,不妨選用這樣的軟體,編輯時可以隨時檢視網頁完成時的狀態,以減少不必要的測試時間。
以下先介紹工作介面:
閱讀全文 Dreamweaver CC 2017 工作介面介紹、同時檢示程式碼與設計結果
RWD概論
RWD概論分成幾個部份,這一篇當目錄
- RWD的缺點
- 手機/平板/桌機 常見尺寸
- DPI vs PPI
- 像素密度
- Media Queries 媒體查詢
- 版⾯配置重點
- 不同平台的圖片比例
- 彈性圖片
- 網頁字型
- 表單
- 表格
- 在電腦上預覽手機畫面
- HTML5 繪圖物件
- HTML5 多媒體物件
- CSS動畫 vs JS動畫
手機/平板/桌機 常見尺寸
手機尺寸似乎有越來越大的趨勢,都快跟電腦螢幕一樣大了
根據統計網站 StatCounter 2016/03 – 2017/03 統計資料整理出來的圖表 閱讀全文 手機/平板/桌機 常見尺寸
RWD網頁切版(二){CSS如何控制HTML物件、常用css屬性}
寫css的地方
1.<head></head>
在<head></head>之間寫<style></style>,就可以把css寫在<style></style>裡了~

閱讀全文 RWD網頁切版(二){CSS如何控制HTML物件、常用css屬性}
css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)
CSS需要寫四個邊向數位的屬性常用的有三個,padding (內距)、margin (外距)、border (邊框),寫四邊向數值的時候可以用不同的方式來寫,可以更快更好~
屬性加方向:
最簡單的寫法就是在這三個屬性的後面加上方向就可以,這是用在單純想指定某一邊向數值的時候。
padding-top: 5px; (上內距)
padding-bottom: 5px; (下內距)
padding-left: 5px; (左內距)
padding-right: 5px; (右內距)
margin-top: 5px; (上外距)
margin-bottom: 5px; (下外距)
margin-left: 5px; (左外距)
margin-right: 5px; (右外距)
border-top: 5px; (上邊框)
border-bottom: 5px; (下邊框)
border-left: 5px; (左邊框)
border-right: 5px; (右邊框)
閱讀全文 css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)