# 產業資訊服務 12/20 [本頁連結](https://hackmd.io/@RogerChao/SkxG1WgwT) 今天的目標網頁，要把這一頁移植到我們的本機伺服器 ![image](https://hackmd.io/_uploads/Hyiu1-xPa.png) 使用右鍵檢查 ![image](https://hackmd.io/_uploads/r1y5kWxvT.png) 可以選取原始碼 ![image](https://hackmd.io/_uploads/HyBnJblDp.png) 然後全選該區段的HTML ![image](https://hackmd.io/_uploads/Byaa1-lvp.png) 接著可以到VSCode裡面貼上 ![image](https://hackmd.io/_uploads/HJhMxWgDa.png) 按下shift +alt+F 可以優化排版 ![image](https://hackmd.io/_uploads/Bk8YgWxwp.png) 再回到自己的頁面看看 ![image](https://hackmd.io/_uploads/SkvogZewT.png) 有圖有字了，但是都是亂碼，這是UTF-8無法解析的關係 有兩個做法 ## 1. 網頁上強制告訴瀏覽器要有UTF-8 像是這樣-> <meta charset="UTF-8"> ![image](https://hackmd.io/_uploads/HyaB-Wlw6.png) ## 2. 請在Apache/Conf/httpd.conf 新增一行 AddDefaultCharset "UTF-8" ![image](https://hackmd.io/_uploads/SkMNGZgvT.png) 右鍵檢查跳出的視窗太小嗎? 選擇彈出視窗的模式，就可以跟原本的網頁分開，變成獨立的視窗 ![image](https://hackmd.io/_uploads/r1EvFWgPT.png) ![image](https://hackmd.io/_uploads/Hy_93Wevp.png) ## HTML的關鍵元素 CSS 網頁長得還不像，我們從右邊的Styles裡面找到主要紀錄網頁格式的global.css ![image](https://hackmd.io/_uploads/rJJep-lDp.png) 點進去之後，可以 ==> 請將整個檔案複製貼上到這個標籤之中 ![image](https://hackmd.io/_uploads/rk5g2ZxDp.png) ==> ![image](https://hackmd.io/_uploads/rkkmC-lvp.png) ## RWD 網頁 RWD，英文原文為Responsive Web Design。RWD的中文意思是響應式網頁設計(也有人稱之為回應式網頁設計) ![image](https://hackmd.io/_uploads/Hye6cZewT.png)