網頁配色 !

第一步! 明確的定義網站主題

確定自己所做的主題以及網頁想要呈現的風格來決定大致上的配色，良好的配色能讓閱覽人留下深刻印象。

第二步! 進行網頁配色規劃

(以下將直接擷取重點)

主色 : 占網頁最大面積，奠定主要基調

輔助色 : 襯托主色，約占網頁30%~40%，能見度較主色低 ( 我會用於文字 )

點綴色 : 讓重點更加醒目

注意! 盡量不超過三種顏色搭配

左圖是在測試程式碼的過程中

所寫的網頁，其顏色分布複

雜，容易令閱覽者抓不到所要

表達的焦點，為錯誤示範。

第三步! 網頁配色種類 1.

• 企業識別色 : 讓網頁和品牌可相呼應，就像是素食店的招牌

• 無彩色系 : 增加對比度，使易讀性提升，常用的有黑、白、灰等顏色，此簡報也是採這類的配色

第三步! 網頁配色種類 2.

• 同色系 : 指主色與輔助色階在同一個色系上，色環相距不超過45°角

• 撞色系 : 又稱為互補色或對比色，由色相環對角的兩色組成，有助於引人注目，但若對比色調配不平衡，易令人產生眼睛疲勞感

參考資料

Da-vinci :

https://www.da-vinci.com.tw/tw/blog/web_color_matching#outline-2-h2

以下是他的配色推薦網站 :

• Color picker

• Color Hunt

• Khroma

• Coolors

• Adobe Color

網頁製作 !

網頁名and縮圖

( 格式如下 ) Josh學長的簡報講過

讓我水一下對不起(X

• 可能會遇到的 Trouble :

要怎麼把圖片弄出來??

丟到同一個資料夾就好囉~

謝謝小畫家:)

網頁背景色與預設字體

背景顏色

預設字體的顏色(?

這裡是預設字體的字形

小提醒 : 如果以黑色當背景的話建議不要調最黑，可以有點灰灰的這樣，不然對比度會太強

Josh學長被我偷來的框框

經歷了一番修改之後，長這樣!

這是全部的程式碼，讓我們來分解一下 ~

拆解(1)!

列表風格種類

margin : 調動表格與上邊界的距離

 padding : 調動表格Y軸的長度

overflow : 類似調整表種類 (hidden文字不溢出)

background-color : 淺顯易懂 適用於前面介紹到的輔助色

height : 有點像padding 從表格下方改變表格延伸長度

深入研究 !

iT邦幫忙 : https://ithelp.ithome.com.tw/articles/10205322

裡面有padding、margin、border、box-sizing 的詳細介紹!

拆解(2)!

後來改成白色

float : 用來改變文字列的相對位置

紅底線處，可以決定文字列靠左靠右等...

這裡是字體設定(包括大小、字形)

拆解(2)!

後來改成白色

鼠標移動到連結上時，底框變色了!?

display : 深灰色底部的形狀

color : 此處的color為字的顏色

text-align : 文字對齊，要對齊在深灰色框框的哪裡

padding - left or right : 深灰色底部的左右延伸

text - decoration :  (字面上的意思)

拆解(2)!

後來改成白色

background-color : 這裡背景顏色指的是深灰色底部的區域，顏色可任意更改。

color : 鼠標移到範圍內時，字的顏色會改變，如果不想讓它改變的話就設成跟字體一樣的顏色，像我設成白色。

拆解(3)!

為css的美化系統

套用到這裡！

下面的字體就都有囉～

在<a href>後貼上網址或是資料夾裡的位置，就可以變成神奇傳送門了。

小提醒：加上 target="blank" 可以變成開啟新分頁

就像醬子~

內容撰寫！

（因為時間問題，以下不會有內容，只會提供撰寫時可能會用到的內容）

同網頁段落連結！

條件（觸發裝置）

傳送門

不一定只能回到頁首，如果文章寫很長的話可以整理這些連結放在開頭，讓閱覽者直接跳到想要的段落

好了我只想到這個，應該結束了

我的成品！

ok雖然它看起來很空虛，但是只要加上內容文字，和一些圖片（還要另外研究），就可以變得很像電子書了。

心得！

從一開始碰到對於python的不了解，上課都聽不太懂，想說自己是不是選錯社團（X，到後來決心要把程式學好，上完課回家複習今天學到的東西，後面還有html等等，突然發覺寫程式好像還滿好玩的。到後來成發，學長給了我們將近一個月的時間，這段時間裡，除了社課以外，幾乎沒有研究甚麼太多的東西，主要都是課前先想好成發主題可能會用到的元素，利用社課的時間查或問學長，將程式碼保留好做成今天的報告，不知道會不會看起來有點水（? ，但我也是做滿久的哈哈，之後也會繼續留在電研，希望可以認識更多的朋友～

然後真的非常感謝上社課的兩位學長，你們的課還滿有趣的（但也是講得有點快，畢竟時間少），也謝謝你們做的簡報，回家複習的時候非常有用！

還有常常幫我解惑的學長，一些課程外的東西很多都要問你們，謝謝你們很有耐心的在幫忙研究和指導～

我的成發結束了

謝謝各位❤