最近常常會用到的google字型，先記錄下來，之後再整理~
閱讀全文 網頁一定要用的google中文字型
分類彙整: RWD
手機版網頁一按撥號 | RWD Mobile Website Click to Call
現在大家都用手機開網頁，「聯絡我們」的欄位如果可以按下就直接發話對使用者來說是比較方便的操作方法，作法很簡單，來看看吧~
閱讀全文 手機版網頁一按撥號 | RWD Mobile Website Click to Call
物件左右置中：text-align:center;、margin:0 auto; 的區別
網頁裡物件要置中對齊的方法主要有2種，margin:0 auto 與 text-align:center，這兩種方式有什麼不同，下面用範例來解說
閱讀全文 物件左右置中：text-align:center;、margin:0 auto; 的區別
純css控制div, iframe物件(youtube, google map…)長寬比， RWD 等比例縮放 | pure CSS make div, iframe element keep aspect ratio with RWD
iframe物件通常會在html裡直接設定尺寸，但製作RWD網頁時都是在css裡根據不同media制定Media Queries 媒體查詢，因此大家常常會用jQuery的方式直接計算寬高比，只是這個方法會讓網頁載入的時間延遲一點點，這一篇就介紹如何只用CSS來控制iframe物件的寬高比。
閱讀全文 純css控制div, iframe物件(youtube, google map…)長寬比， RWD 等比例縮放 | pure CSS make div, iframe element keep aspect ratio with RWD
RWD網頁切版(六){CSS float屬性：物件全部靠右且不併排}
想要製作全部靠右且不併排的區塊，只要加上float屬性之後再做一些調整就可以了
閱讀全文 RWD網頁切版(六){CSS float屬性：物件全部靠右且不併排}
RWD網頁切版(五){CSS float屬性：2欄排版3種設定方式}
2欄式網頁是最常見的排版之一，常用的方式有float和inline-block這種方式，這一篇介紹float的3種不同設定方法。
閱讀全文 RWD網頁切版(五){CSS float屬性：2欄排版3種設定方式}
Dreamweaver 開新檔案、存檔、在瀏覽器預覽結果
編輯完成或是正在編輯的檔案，都需要用瀏覽器(Browser)來預覽製作的效果，雖然Dreamweaver 是所見即所得的網頁編輯器，但因為各家瀏覽器也有不同的相容性，所以還是在瀏覽器上預覽所得的結果才會比較準確。
閱讀全文 Dreamweaver 開新檔案、存檔、在瀏覽器預覽結果
RWD網頁切版(零){HTML網頁架構、常用標籤}
RWD網頁切版
RWD網頁切版可以分成幾個部份慢慢學習，這一篇當目錄
- RWD網頁切版(零){HTML網頁架構、常用標籤}
- RWD網頁切版(一){HTML5網頁框架}
- RWD網頁切版(二){CSS如何控制HTML物件、常用css屬性}
- RWD網頁切版(三){CSS控制div，用id、class選取器}
- RWD網頁切版(四){CSS float屬性：浮動 / 併排}
- RWD網頁切版(五){CSS float屬性：2欄排版3種設定方式}
- RWD網頁切版(六){CSS float屬性：物件全部靠右且不併排}
- RWD網頁切版(七){物件左右置中：text-align、margin: 0 auto;}
- RWD網頁切版(八){認識絕對路徑和相對路徑}
- RWD網頁切版(){CSS position屬性 – 打破html排序的物件}
- RWD網頁切版(){CSS overflow屬性 – 隱藏超出的範圍、顯示捲軸}
- RWD網頁切版(){物件併排 – display: inline-block;}
- RWD網頁切版(){nav選單 – nav ul li}
- RWD網頁切版(){nav選單：多層選單 – 垂直}
- RWD網頁切版(){nav選單：多層選單 – 水平}
- RWD網頁切版(){手機版選單：上方選單}
- RWD網頁切版(){手機版選單：側欄選單}
網頁框架切版練習
- RWD網頁切版 – 基本網頁框架練習(一)
- RWD網頁切版 – 在頁面上固定位置的廣告欄位
Dreamweaver基本操作部份：
- Dreamweaver CC 2017 工作介面介紹、同時檢示程式碼與設計結果
- Dreamweaver 開新檔案、存檔、在瀏覽器預覽結果
- Dreamweaver 建立管理網站 – 不用再記相對路徑
- Dreamweaver 套用原始碼格式 – 輕鬆整理網頁原始碼
- Dreamweaver CSS設計工具 連結css檔
- Dreamweaver CC CSS設計工具面板中文
相關文章：
css 文字強制換行、強制不換行 | css word break, word wrap
強制不換行
div{
white-space:nowrap;
}
自動換行(依英文單字斷行)
div{
word-wrap:break-word;
word-break:normal;
}
強制英文單字斷行
div{
word-break:break-all;
}
pre物件
pre {
width:640px;/* 下面沒效的話可以再設定寬度 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
width:640px;/* 下面沒效的話可以再設定寬度 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}