選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HOW TO

HowTo Home

Menus

圖示欄 選單圖示 手風琴 選項卡 垂直選項卡 選項卡標題 全頁選項卡 懸停選項卡 頂部導航 響應式頂部導航 拆分導航 帶圖示的導航欄 搜尋選單 搜尋欄 固定側邊欄 側邊導航 響應式側邊欄 全屏導航 畫布外選單 懸停側邊導航按鈕 帶圖示的側邊欄 水平滾動選單 垂直選單 底部導航 響應式底部導航 底部邊框導航連結 右對齊菜單鏈接 居中菜單鏈接 等寬菜單鏈接 固定選單 滾動時下拉欄 滾動時隱藏導航欄 滾動時縮小導航欄 粘性導航欄 圖片上的導航欄 懸停下拉選單 點選下拉選單 級聯下拉選單 頂部導航中的下拉選單 側邊導航中的下拉選單 響應式導航欄下拉選單 子導航選單 向上展開選單 巨型選單 移動選單 幕布選單 摺疊側邊欄 摺疊側邊面板 分頁 麵包屑導航 按鈕組 垂直按鈕組 粘性社交欄 藥丸導航 響應式標題

圖片

幻燈片 幻燈片畫廊 模態影像 燈箱 響應式影像網格 影像網格 影像畫廊 可滾動影像畫廊 選項卡畫廊 影像覆蓋淡入 影像覆蓋滑動 影像覆蓋縮放 影像覆蓋標題 影像覆蓋圖示 影像效果 黑白影像 影像文字 影像文字塊 透明影像文字 全頁影像 影像上的表單 英雄影像 模糊背景影像 滾動時更改背景 並排影像 圓角影像 頭像影像 響應式影像 居中影像 縮圖 影像邊框 團隊介紹 粘性影像 翻轉影像 抖動影像 作品集畫廊 帶過濾器的作品集 影像縮放 影像放大鏡 影像比較滑塊 網站圖示

按鈕

警告按鈕 輪廓按鈕 拆分按鈕 動畫按鈕 漸隱按鈕 影像上的按鈕 社交媒體按鈕 閱讀更多/更少 載入按鈕 下載按鈕 藥丸按鈕 通知按鈕 圖示按鈕 下一/上一頁按鈕 導航中的“更多”按鈕 塊狀按鈕 文字按鈕 圓形按鈕 回到頂部按鈕

表單

登入表單 登錄檔單 結賬表單 聯絡表單 社交登入表單 登錄檔單 帶圖示的表單 新聞通訊 堆疊表單 響應式表單 彈出表單 內聯表單 清除輸入欄位 隱藏數字箭頭 複製文字到剪貼簿 動畫搜尋 搜尋按鈕 全屏搜尋 導航欄中的輸入欄位 導航欄中的登入表單 自定義複選框/單選按鈕 自定義選擇 切換開關 檢查複選框 檢測大寫鎖定 回車鍵觸發按鈕 密碼驗證 切換密碼可見性 多步表單 自動完成 關閉自動完成 關閉拼寫檢查 檔案上傳按鈕 空輸入驗證

Filters

篩選列表 篩選表格 篩選元素 篩選下拉選單 排序列表 排序表格

表格

斑馬條紋表 居中文件 全寬表 巢狀表 並排表 響應式表 對比表

More

全屏影片 模態框 刪除模態框 時間軸 滾動指示器 進度條 技能條 範圍滑塊 顏色選擇器 電子郵件欄位 工具提示 懸停顯示元素 彈出視窗 可摺疊 日曆 HTML 包含 待辦事項列表 載入器 徽章 星級評分 使用者評分 疊加效果 聯絡人標籤 卡片 翻轉卡片 個人資料卡片 產品卡片 警告 提示 筆記 標籤 絲帶 標籤雲 圓形 樣式 HR 優惠券 列表組 帶徽章的列表組 無專案符號的列表 響應式文字 鏤空文字 發光文字 固定頁尾 粘性元素 等高 清除浮動 響應式浮動 Snackbar 全屏視窗 滾動繪製 平滑滾動 漸變背景滾動 粘性標題 滾動時縮小標題 定價表 視差 縱橫比 響應式 iframe 切換喜歡/不喜歡 切換顯示/隱藏 切換黑暗模式 切換文字 切換類 新增類 移除類 更改類 活動元素 樹狀檢視 移除小數 移除屬性 離線檢測 查詢隱藏元素 重定向網頁 格式化數字 懸停縮放 翻轉框 垂直居中 DIV 中的居中按鈕 居中列表 懸停過渡 箭頭 形狀 下載連結 全高元素 瀏覽器視窗 自定義捲軸 隱藏捲軸 顯示/強制顯示捲軸 裝置外觀 Contenteditable 邊框 佔位符顏色 停用文字區域大小調整 停用文字選擇 文字選擇顏色 專案符號顏色 垂直線 分隔符 文字分隔符 動畫圖示 倒計時 打字機 即將上線頁面 聊天訊息 彈出聊天視窗 分屏 客戶評價 區塊計數器 引語幻燈片 可關閉列表項 典型裝置斷點 可拖動的 HTML 元素 JS 媒體查詢 語法高亮 JS 動畫 JS 字串長度 JS 指數運算 JS 預設引數 JS 隨機數 JS 排序數字陣列 JS 展開運算子 JS 滾動到檢視 獲取當前日期 獲取當前 URL 獲取當前螢幕尺寸 獲取 iframe 元素

網站

建立免費網站 製作網站 製作靜態網站 託管靜態網站 製作網站 (W3.CSS) 製作網站 (BS3) 製作網站 (BS4) 製作網站 (BS5) 建立和檢視網站 建立 Link Tree 網站 建立作品集 建立簡歷 製作餐廳網站 製作商務網站 製作 WebBook 居中網站 聯絡部分 關於頁面 大標題 示例網站

Grid

2 列布局 3 列布局 4 列布局 展開式網格 列表網格檢視 混合列布局 列卡片 鋸齒佈局 部落格佈局

Google

Google Charts Google Fonts Google Font 配對 Google 設定分析

Converters

轉換重量 轉換溫度 轉換長度 轉換速度

部落格

獲得開發人員工作 成為前端開發人員 聘請開發人員

如何建立作品集

作品集對於獲得關注至關重要。

建立作品集是提升線上形象的好方法。

作品集用於展示您的技能和專案。

它可以幫助您找到工作、獲得自由職業機會或實習機會。

免費建立我的作品集 »

什麼是作品集

作品集可以有與簡歷相同的目的。大多數簡歷都是用文字書寫,而作品集是為了展示,所以它是視覺化的,帶有影像,並且通常比簡歷更詳細。

這是一個可以展示您工作經驗並突出您最引以為傲的專案的地方。

您的線上作品集可以透過連結與公司、招聘經理和招聘人員分享,讓他們注意到您。

這關乎展示並讓他人瞭解您作為專業人士的身份。


為什麼建立作品集

這是提升線上形象和獲得關注的好方法。

它可以用於找工作或吸引客戶購買您的服務。

將其放在網上作為網站。使全世界的人都能找到您。

作品集的設計將給讀者留下關於您是誰的印象。確保它以良好且體面的方式呈現!


作品集是為誰準備的

建立作品集對您的職業生涯可能很重要。

在尋找工作、自由職業機會或向新客戶展示您的技能時,這會很有幫助。

通常使用作品集的典型角色包括但不限於以下專業人士:

  • 軟體開發人員
  • UX 設計師
  • 平面設計師
  • 攝影師
  • 營銷專業人士
  • 建築師
  • 作家

聽說過 W3Schools 網站空間嗎?您可以在這裡從零開始建立作品集,或使用模板。

立即免費開始 ❯

* 無需信用卡


作品集中最重要的部分是什麼

有許多不同的方法來建立作品集。

如何建立取決於您是哪種型別的專業人士、您為誰構建它以及您為何要建立它。

您必須 嘗試、失敗並學習 才能找到適合您的作品集型別!

以下總結了一些對所有型別作品集都至關重要的部分:

1. 英雄部分。

英雄部分是人們進入您的作品集時首先看到的內容。

它顯示在您的徽標和選單下方。

英雄部分幫助讀者瞭解您提供什麼、為什麼應該與您合作,以及您提供的服務所帶來的價值。

它通常包含一個號召性用語按鈕,如“聯絡我”、“預約會議”或類似的。

hero section

2. 關於我部分。

給讀者一個關於您自己的簡短總結。

包括您的教育、工作經驗、專案和興趣等主題。

幫助讀者瞭解您的熱情所在以及您的超能力(您擅長的事情)。

請記住保持簡短和簡潔。

about section

3. 專案部分。

列出您參與過的專案。最常用的方式是按日期排序列表,但在某些情況下,按其他邏輯方式排序也是有意義的。

為每個專案新增詳細資訊,包括您的角色、您做了什麼以及專案的結果。

新增圖片來展示您所構建的內容是加分項!展示您引以為豪的專案。

work experience section

4. 聯絡我部分。

讓讀者知道如何以及在哪裡可以聯絡到您。

新增您的聯絡方式和其他聯絡渠道,例如您的 GitHub 個人資料、LinkedIn、YouTube 等。

contact me section

作品集示例

檢視一些作品集示例。

您可以在 W3Schools 網站空間中載入作品集模板。只需點選幾下即可開始釋出您的作品集。

釋出我的作品集 ❯

* 無需信用卡

黑白作品集模板

深色作品集模板

人物作品集

我的作品集模板


我需要了解什麼才能建立自己的作品集?

HTML、CSS 和 JavaScript 是建立網站的基礎語言。

僅使用這三者,您就能走很遠!

  1. 使用 HTML 建立結構。 您需要學習的第一件事是 HTML,它是建立網頁的標準標記語言。
  2. 學習 HTML ❯
  3. 使用 CSS 設定樣式。 下一步是學習 CSS,用漂亮的顏色、字型等設定網頁的佈局。
  4. 學習 CSS ❯
  5. 使用 JavaScript 使其具有互動性。 在學習了 HTML 和 CSS 之後,您應該學習 JavaScript 來為您的使用者建立動態和互動式的網頁。
  6. 學習 JavaScript ❯


如何一步一步建立作品集

按照步驟從頭開始建立您的作品集。


準備工作

決定使用哪個程式碼編輯器並設定您的環境。

W3Schools 建立了一個易於使用的程式碼編輯器,稱為 W3Schools 網站空間。註冊即可輕鬆上手。

免費開始 ❯

建立您的 index.html 檔案。這樣您就可以開始輸入程式碼了。

一切準備就緒。出發!


第一步:新增 HTML 骨架

輸入 HTML 骨架程式碼,這是您網站的起點。它構成了程式碼的結構,並確保其在網際網路上得到正確顯示。

請閱讀此處瞭解如何建立基本的 HTML 骨架: 如何建立 HTML 骨架


第二步:新增導航欄

導航欄是網站內容的一份簡短概述。

它是訪問者首先看到的內容之一。

它有助於訪問者查詢和導航網站內容。建立結構良好的導航非常重要。這樣您的訪問者就能找到他們想要的東西。

以下是建立頂部導航欄的示例: 如何建立頂部導航欄


第三步:新增英雄部分

英雄部分與導航欄一起,是人們看到您作品集的第一部分。

它應該包含關於幾件事的簡簡訊息,例如:

  • 您是誰?
  • 您提供什麼?
  • 您的職業是什麼?
  • 人們為什麼要與您合作?
  • 您應該採取哪些行動?

使用第一人稱寫作,並保持簡短簡潔

英雄部分首選的其他內容包括:

  • 引人注目的圖形,可以是背景,也可以是文字旁邊的影像。
  • 一個操作按鈕,可以連結到您作品集中的內容或另一個網站的內容。

以下是建立英雄部分的示例: 如何建立英雄影像


第四步:新增“關於我”部分

在此部分,您可以發揮創意。這可以幫助您脫穎而出。

在這裡您可以個性化內容,並更深入地撰寫關於您自己的資訊。

此部分可包含的內容有:

  • 您的介紹
  • 您作為專業人士的身份
  • 您的教育
  • 您的技能
  • 您的工作經驗(當前和/或過去)
  • 您的愛好
  • 您的目標和抱負

某種程度上,您可以將“關於我”部分視為簡歷的簡短摘要。

您可以隨意用第一人稱寫作。

個性化並讓人們瞭解您這個人可能會引起更多關注。

以下是建立“關於我”部分的示例: 如何建立“關於我”部分


第五步:新增工作經驗部分

工作經驗部分突顯了您一路走來積累的經驗、知識和能力。

在這裡您可以新增:

  • 指向您專案的連結,附有專案名稱和/或關於專案內容的簡短描述。
  • 指向您撰寫過的部落格帖子的連結,附有標題和/或關於其內容的簡短描述。
  • 您的專業獎項或成就。
  • 突出您的工作和成就,是創造機會的一種方式。
  • 視覺表示,如影像或圖形。

第六步:新增聯絡部分

聯絡部分是讓您的訪問者能夠與您取得聯絡的部分。

您應該始終提供一種讓訪問者聯絡您的方式,無論是透過聯絡表單還是寫下您的聯絡資訊,例如:

  • Address
  • 郵箱
  • 電話號碼
  • 例如 GitHub 個人資料、LinkedIn 個人資料、YouTube 個人資料等。

以下是建立基本聯絡部分的示例: 如何建立聯絡部分


第七步:新增頁尾部分

頁尾可能被視為一個次要部分,但它是每個網站的重要組成部分。

它關乎根據您的網站目標和訪問者的需求展示關鍵資訊。

通常包含關於版權的技術資訊,但也可以包含其他資訊,例如:

  • 指向“隱私政策”頁面的連結
  • 指向“使用條款”頁面的連結
  • 聯絡資訊
  • 網站導航連結
  • 社交網路連結
  • 指向您商店的連結

以下是如何構建頁尾部分的示例: 如何建立頁尾部分


W3Schools Spaces

W3Schools Spaces

使用 W3Schools 網站空間構建和釋出您自己的作品集。

免費開始



×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援