iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

從0到有做出一個商家網頁 系列

透過這次30天的資訊競賽,來刺激自己的學習能力,並且訓練自律能力,所以我要透過網路以及書籍來自學並使用HTML程式語言來幫親戚的店家製作出一個提供民眾瀏覽的販賣花生糖的網頁。

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

Day1:開賽前言

這是我第一次參加網路上的資訊競賽,這次是為了激勵自己的學習動力,才會報名此比賽,順便可以累積一點比賽經歷,會選擇製作網頁是因為自己本身對製作網頁有點興趣,而且覺...

2025-08-03 ‧ 由 Bruce 分享
DAY 2

Day2:網頁雛形

今天要開始製作網頁,會從頭開始介紹Step1.打開vscode按開啟資料夾 Step2.新增新的資料夾並命名 Step3.打開新的命名完的資料夾 Step4.打...

2025-08-04 ‧ 由 Bruce 分享
DAY 3

Day3:做出網頁框架

今天要做出網頁的主要架構網頁的架構有兩個部分第一個網頁的架構 第一行是設定HTML的版本 第二行是利用屬性將網頁的語言設定為繁體中文 第三行<head&...

2025-08-05 ‧ 由 Bruce 分享
DAY 4

Day4:添加網頁內容物

今天要開始編輯網頁的內容1.首先把網頁名稱加上商家標題 2.在網頁裡加上商家名稱和商品內容,記得程式中要適當的縮排,這樣不僅可以增加程式的可讀性,還可以減少程式...

2025-08-06 ‧ 由 Bruce 分享
DAY 5

Day5:賦予網頁多種色彩的工具CSS

在繼續編輯網頁內容之前,要先介紹賦予網頁多種色彩的工具CSS什麼是CSS?HTML具有「賦予字串意義」的功用。而CSS的作用是用來「設定網頁的外觀」,例如改變文...

2025-08-07 ‧ 由 Bruce 分享
DAY 6

Day6:在網頁內嵌入影片和加入網頁圖示

今天要在網頁內加入已經製作完成的介紹影片 1.嵌入影片嵌入影片需要這段程式<video width="640" height=&quo...

2025-08-08 ‧ 由 Bruce 分享
DAY 7

Day7:網頁的導覽列

今天我們要製作網頁的導覽列就是網頁上半部固定不動有多個選單的區塊 1.首先要加入這段程式來新增導覽列的選項和圖示HTML程式方面在<a href=&quo...

2025-08-09 ‧ 由 Bruce 分享
DAY 8

Day8:網頁導覽列的固定

今天在將網頁的導覽列固定在頁首 1.接續昨天的進度,我們要將網頁的導覽頁固定在頁首上,所以我們需要這段程式來導覽頁來固定,並更改導覽頁的顏色,position:...

2025-08-10 ‧ 由 Bruce 分享
DAY 9

Day9:繼續修改網頁內容

今天要繼續修改網頁內部的內容 1.修改主畫面大圖片的寬度和高度使用這段程式來修改 css程式 網頁方面 2.放置商品圖片這裡我們使用<ul><...

2025-08-11 ‧ 由 Bruce 分享
DAY 10

Day10:繼續修改網頁內文

今天繼續編輯網頁內文 1.修改一下最新消息、FB和訂購專線的文字顏色、粗細和大小這裡使用這段程式 css程式 網頁方面圖一圖二 2.製作頁尾的顏色區塊這裡我們先...

2025-08-12 ‧ 由 Bruce 分享