全國勞工總會─網頁設計與網拍 2019.05.25

全國勞工總會108上第五天課程
CSS 樣式設計與 Google Sites 的網頁製作

今天開始介紹 CSS 樣式表，可以針對原來的 HTML 標籤，改變樣式；亦可以自訂樣式規則名稱，然後套用。

製作網頁橫幅時，可以採用專業的 Photoshop，也可以簡單的使用小畫家、甚至可以用 PowerPoint 來製作；而有安裝漂亮的字型，可以讓橫幅製作的更加漂亮。

下午半天來介紹 Google 免費且相當容易製作網頁的應用程式：Google Sites，而且製作出來的網站相當有質感，而且還是 RWD ( Responsive Web Design 響應式網頁 ) 的格式，符合現在的製作模式。

做了一下午以後，看得出一半以上相當接受 Google Sites 的製作方式與成果呢！

本周六小時的上課內容有：

1. Brackets 加入外掛，讓一鍵可以快速調整好網頁 HTML 的格式
2. Brackets 編輯時，即時預覽的好處，以及加入 CSS 樣式表
3. Brackets 編輯修改 a 標籤的 CSS 樣式表
4. 去除超連結的底線、查詢 w3school 網站、Chrome 加入 google 翻譯外掛
5. 設定超連結呈現不同的字體
6. CSS 設定自訂屬性規則，並在標籤中用 class 來套用
7. 設定邊框屬性
8. 補充說明 a 的 visited 特性
9. 網站製作橫幅
10. 運用 PowerPoint 製作橫幅與網站中的使用的圖片
11. PowerPoint 安裝字體，讓設計橫幅可以有更漂亮的字
12. Google Sites 來快速製作一個響應式網站，先編輯橫幅
13. Google Sites 插入文字
14. Google Sites 加入新聞、加入超連結等
15. Google Sites 插入圖片
16. Google Sites 建立網址，讓網路上的人可以看得到
17. Google Sites 加入 Google 地圖，讓瀏覽者可知公司行號的位置
18. Google Sites 加入新的頁面，以版面配置製作公司成員介紹
19. Google Sites 加入新的頁面，變成有下拉式選單的形式
20. Google Sites 插入 Youtube 影音