MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

〈Web 入門〉是一系列簡潔的文章,介紹網頁開發的實用範例。你將運用相關工具建構簡易網頁並發布自己的程式碼。

替你的第一個網站說故事

建立個人網站需要很多功夫。如果你才剛開始接觸網頁設計,我們建議大家可以先從小地方著手。不是要你立刻就寫出跟「Facebook」一樣規模的網站,但自己架一個上線的網站一點都不難,現在就開始吧!

只要依序看過以下的系列文章,你將初學者蛻變成會架設自己的第一個上線網頁,Let's go!

安裝基本軟體

現有許多工具可建構網站。如果你剛起步,你可能不知從何選擇程式碼編輯器、框架、測試工具等等。我們將透過〈安裝基本軟體〉逐步引領你安裝基本的網頁開發軟體。

你的網站看起來會是什麼樣子?

在開始為自己的網站寫程式碼之前,你應該先規劃要呈現哪些資訊?要採用哪種字體與顏色?你可依照〈你的網站看起來會是什麼樣子?〉所提供的簡易方法,照著來規劃網站的內容與設計。

與各式各樣檔案打交道

一個網站包含許多檔案:文字內容、程式碼、樣式表、多媒體內容等等。當建立網站時,你需要將這些檔案組合成清晰的架構,並確保它們能彼此互動溝通。〈與各式各樣檔案打交道〉將引領你安排合理的檔案架構,以及你應該注意的問題。

HTML 基本概念

超文字標籤語言 (Hypertext Markup Language;HTML) 可用以建構網頁內容,並賦予其含意和用途。例如某段內容要分為多個段落,或是用項目符號列成幾個重點?要在網頁插入圖片?這裡需要以資料表格整理嗎?如果這些沒有嚇到你,〈HTML 基本概念〉將提供足夠的資訊。

CSS 基本概念

串接樣式表 (Cascading Stylesheets;CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色,或是改用紅色標明重點?某段重要內容應該置於畫面的何處?想用什麼背景圖片及顏色裝飾你的網站?〈CSS 基本概念〉帶你入門。

JavaScript 基本概念

程式設計語言 JavaScript 可為你的網站增加互動功能,例如動畫、遊戲、按下按鈕的後續動作、將資料輸入表單、動態套用樣式的效果等等。〈JavaScript 基本概念〉將帶你瞭解此一有趣的程式語言及其能耐,並讓你快速入門。

將你的網站發佈上線

在寫完程式碼並整理好檔案之後,接著就是將網站發佈上線,讓其他人可以瀏覽、欣賞內容。〈將你的網站發佈上線〉將帶領你以最輕鬆的方法發佈你的範例程式碼。

網站的運作方式

在瀏覽喜愛的網站時,你可能未意識到瀏覽器正於背景中運作著許多複雜事情。〈網站的運作方式〉將簡略說明網頁瀏覽時所發生的大小事。

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo, SecondSpirit, MashKao, afutseng, lynn456, arbatskiy
 最近更新: jackblackevo,