iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

從零開始自學HTML/CSS網頁設計 系列

一直都對於架設網站很有興趣,但學習到的相關資訊知識都是偏向後端的程式能力,因此想藉由這個機會,自我挑戰從未碰過的領域。在這三十天裡,我會以「成功架設一個網頁」為目標,期望自己能順利完成!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 21

用CSS配置副圖片並排版

上面是之前在HTML檔裡做的設定。 首先我想要讓聲演者的圖片置於文字左側,可以在選擇器「.actor img」指定float屬性來做設定: .acyor i...

2022-10-04 ‧ 由 H 分享
DAY 22

依照瀏覽器寬度來調整圖片

因為考慮到網頁會出現在電腦、智慧型手機、平板電腦等,且他們的螢幕大小皆不相同,為了確保顯示結果,我們可以變更瀏覽器的寬度來確認:我們可以發現,瀏覽器比較窄的時候...

2022-10-05 ‧ 由 H 分享
DAY 23

設定viewport

如果想要在手機或平板上依照螢幕尺寸來等比例顯示網頁,可以在HTML檔裡做以下的設定: <meta name="viewport"...

2022-10-06 ‧ 由 H 分享
DAY 24

了解伺服器

究竟什麼是網際網路(Internet)呢?我們可以想像,世界各地的電腦用纜線彼此串聯而成的網路即為網際網路(Internet)。當然,被稱為伺服器的電腦也互相連...

2022-10-07 ‧ 由 H 分享
DAY 25

了解網域

什麼是網域呢?網域就是網際網路上的地址,一般網站的URL和電子信箱都有網域: 如果想要有自己的網域,就必須花錢取得獨立網域,向網域代管商購買網址(EX:...

2022-10-08 ‧ 由 H 分享
DAY 26

發佈網站並確認

如果要將完成的檔案上傳到伺服器,就得使用FTP用戶端相關的應用軟體。這類型的軟體種類有很多種,而這邊介紹使用的是FileZilla: https://filez...

2022-10-09 ‧ 由 H 分享
DAY 27

調整圖片的大小並裁切

如果想要將自己拍的照片放到網路,很有可能會有圖片太大的問題,這時候就必須使用到影像編輯軟體來編輯圖片,而這邊介紹的是可以免費使用的線上影像編輯軟體「PIXLR...

2022-10-10 ‧ 由 H 分享
DAY 28

增加網站的頁面

當初只先製作了單頁的網頁,如需要增加內容就必須增加頁面,以下介紹要怎麼增加網頁。 首先先在www資料夾裡新增新的資料夾: 然後複製index.html到新資...

2022-10-11 ‧ 由 H 分享
DAY 29

重點回顧

在自學網頁設計上,我分成四個部分學習。 第一是前置作業的部分,在架設網站前要先決定架設網站的目標及目標讀者,並以線框圖來規劃網站的架構,這樣一來未來在寫網站...

2022-10-12 ‧ 由 H 分享
DAY 30

完賽心得

時間過得很快,不知不覺中已經到了鐵人賽最後一天呢,因為是第一次參加這種性質的比賽,內心有很多說不盡的想法想要分享,所以決定在最後一篇文章來打上我的完賽感想,有興...

2022-10-13 ‧ 由 H 分享