從0學起的...圖文、網頁、設計筆記

發表文章

[HTML/CSS] 線上課程筆記(HTML與CSS差異、插入CSS、認識選擇器、CSS常見錯誤)

11月 29, 2022

HTML與CSS差異 HTML是結構(例如標題、段落、列表ul/li) CSS是樣式(顏色、大小、美化的工作) 如何插入CSS? 1.建立網頁先儲存成index.html再按驚嘆號+TAB或是ENTER鍵插入CSS>>熱鍵 link:css < link rel = "stylesheet" href = "style.css" > *rel 和 herf 分別表示 2.建立CSS 儲存成style.css後再撰寫 3.選擇器(挑選html標籤做設定) >>此處為html標籤選擇器選擇器{ 屬性:設定值屬性:設定值 } h1 { Color : orange ; font-size : 24px ; } CSS常見錯誤 1.檢查小工具:使用chrome的檢查工具 (打開寫好的網頁，右鍵選擇檢查，觀看elememt) 可看見html和CSS間的結構關係是否正確 2.常見錯誤單字拼錯(font拼成front...) 路徑錯誤(herf後所連結的路徑是錯的..) 格式錯誤(少了分號做中斷、或是少了大括號等等) 認識檢查工具可協助自己判斷、解決問題

閱讀完整內容

[HTML/CSS] 線上課程筆記(3-16~3-15)

11月 24, 2022

3-16 在網頁上加上a連結標籤一般的文字連結(藍字有底線的那個) < a href ="外部網頁連結">文字說明< /a > 開啟網頁是開啟在新的分頁(新增a標籤的target屬性) <a target =" _blank " href="外部網頁連結">文字說明</a> 新增文字說明(a標籤的title屬性) <a target ="_blank" href="外部網頁連結" title ="顯示說明的文字小標">顯示文字</a> 3-17 段落 p 與連結 a 的混合應用使用段落中文字作為連結依樣要把顯示的文字放在a標籤的起始與結束之間，這邊我是放「美國媒體」也順便連結外部圖片的img標籤進行練習 3-18 認識 ul li 列表標籤 ul、il的應用比想像中要廣泛些應用補充 ul : unorder list li : list item ol : order list

閱讀完整內容

[HTML/CSS] 線上課程筆記(3-12~3-15)

7月 11, 2021

7/2 3-13 Emmet 載入環境語法每一次都需要輸入標籤，有沒有比較便捷的小工具呢 ? 單元介紹Emmet Emmet近期的編輯器中皆有預設了，原因無他就是使用者愛用~ (先前使用過其他編輯器需要手動安裝的~現在的編輯器好先進) 使用方式 : 輸入一下驚嘆號「 !」+Enter或是Tab鍵解釋一下意思網頁格式UTF-8編碼配合舊版IE進行設計手機版、平板響應式版本、調整螢幕解析度使用方式：生成兩個段落的標籤：p*2 7/2、7/8 3-14 插入圖片，了解圖片路徑規則網頁檔含有所有資料與圖檔皆可放在同一個資料夾內介紹 < img src = "img/logo.png" alt = "六角logo" > src="檔案路徑"、alt="圖片的顯示名稱" alt為替代的播報工具 src = "img/logo.png" 表示圖片於img資料夾項下內(本地端下載) 路徑放錯了可是會影響圖片的呈現唷可能變成破圖 ~ 3-15 載入外部圖片方式當不想下載圖片到本地端(自己的電腦上)時又該怎麼辦呢 ? 於想要連結的網頁圖片上複製圖片位址可適用別人伺服器上的圖片位置標籤使用方式相同 < img src = " " alt = " " > ^ ^ 複製好的圖片位址破圖時要顯示的說明文字

閱讀完整內容

[HTML/CSS] 線上課程筆記(3-8~3-11)

7月 02, 2021

6/17 3-8開始撰寫HTML 安裝並使用VScode編輯器建立新文件Hello World 並另存為作為首頁的 index.html 如何開起儲存的html網頁 ? 開啟頁面方式為兩種 A .於Chrome開啟新分頁後，拖曳html檔案至新分頁 B .或直接點及html當按兩下即可 6/19、6/28、7/1 3-9撰寫 h1標籤 p段落了解<h1></h1>及<p></p>的html標籤概念 h1 網頁中最重要的內容、文字標題而一個網頁中只會有一個h1 從chrome中去檢查認識左上角按鍵可以點一下就知道頁面中，藍色區域對應的程式碼為何 Q : 打完的字預設出來的字體是不一樣的 ?? 讓我們繼續看下去 ~~ 註冊Codepen(免費版)寫作業提交助教修改類似這樣、記得案SAVE儲存唷(SETTING可更改文件名稱) 7/1 3-11建立HTML環境介紹標籤、手打html格式環境標籤 html中會有兩個標籤一個是head、一個是body 要讓使用者觀看的內容都要放在 body 裡面如 h1、p 而 head 中先介紹 title 這個標籤，是網頁的標題 head的概念、地位如同word中檔案下的資訊欄位顯示此文件的各種摘要(大小、字數、作者)等等的詳細、細部資訊 <!DOCTYPE html> 顯示的格式，如同WORD要另存新檔時要儲存的副檔名(DOC、DOCX)決定網頁以哪種格式去做顯示 Q : 為什麼需要使用標籤 ? 使用標籤的意義是什麼 ? 作業練習

閱讀完整內容

[ 練習傳達 ] 歷史

6月 23, 2021

從主題來賦予認知進而透過圖像的呈現感覺似乎可以這樣的方式，更有內涵的去表達舉例來說以「歷史」作為主題練習發揮.... 在初階段我想到的是軍人、戰爭、古代人、旗幟、生活文化、汴京上河圖會有斑駁的視覺感去呈現色調的話會有白色、土色與磚紅在更深入是動見觀瞻(這個實在不易傳達) 歷史可以是紀錄是卷軸也可以是一種傳承靜態的呈現以動態的表現都不同後來再回來看歷史是時間、是紀錄、是研究也是前進的基石參考前人試著調整與思考分析顏色採用斑駁的灰與紅做完後自己感覺像個書本的封面..?要看大家的想法了~ 希望愈來愈清楚吧~