blob: f2629247fc48f9897e4a24ef49ae936a43bae12a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
---
title: Web 入門
slug: Learn/Getting_started_with_the_web
tags:
- Beginner
- CSS
- Design
- Guide
- HTML
- Index
- NeedsTranslation
- TopicStub
- publishing
- theory
translation_of: Learn/Getting_started_with_the_web
---
<div>{{LearnSidebar}}</div>
<div class="summary">
<p><em>〈Web 入門〉</em>是一系列簡潔的文章，介紹網頁開發的實用範例。你將運用相關工具建構簡易網頁並發布自己的程式碼。</p>
</div>
<h2 id="替你的第一個網站說故事">替你的第一個網站說故事</h2>
<p>建立個人網站需要很多功夫。如果你才剛開始接觸網頁設計，我們建議大家可以先從小地方著手。不是要你立刻就寫出跟「Facebook」一樣規模的網站，但自己架一個上線的網站一點都不難，現在就開始吧！</p>
<p>只要依序看過以下的系列文章，你將初學者蛻變成會架設自己的第一個上線網頁，Let's go！</p>
<h3 id="安裝基本軟體"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></h3>
<p>現有許多工具可建構網站。如果你剛起步，你可能不知從何選擇程式碼編輯器、框架、測試工具等等。我們將透過〈<a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a>〉逐步引領你安裝基本的網頁開發軟體。</p>
<h3 id="你的網站看起來會是什麼樣子？"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></h3>
<p>在開始為自己的網站寫程式碼之前，你應該先規劃要呈現哪些資訊？要採用哪種字體與顏色？你可依照〈<a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a>〉所提供的簡易方法，照著來規劃網站的內容與設計。</p>
<h3 id="與各式各樣檔案打交道"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></h3>
<p>一個網站包含許多檔案：文字內容、程式碼、樣式表、多媒體內容等等。當建立網站時，你需要將這些檔案組合成清晰的架構，並確保它們能彼此互動溝通。〈<a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a>〉將引領你安排合理的檔案架構，以及你應該注意的問題。</p>
<h3 id="HTML_基本概念"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a></h3>
<p>超文字標籤語言 (Hypertext Markup Language；HTML) 可用以建構網頁內容，並賦予其含意和用途。例如某段內容要分為多個段落，或是用項目符號列成幾個重點？要在網頁插入圖片？這裡需要以資料表格整理嗎？如果這些沒有嚇到你，〈<a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a>〉將提供足夠的資訊。</p>
<h3 id="CSS_基本概念"><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></h3>
<p>串接樣式表 (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？〈<a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a>〉帶你入門。</p>
<h3 id="JavaScript_基本概念"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a></h3>
<p>程式設計語言 JavaScript 可為你的網站增加互動功能，例如動畫、遊戲、按下按鈕的後續動作、將資料輸入表單、動態套用樣式的效果等等。〈<a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a>〉將帶你瞭解此一有趣的程式語言及其能耐，並讓你快速入門。</p>
<h3 id="將你的網站發佈上線"><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></h3>
<p>在寫完程式碼並整理好檔案之後，接著就是將網站發佈上線，讓其他人可以瀏覽、欣賞內容。〈<a href="/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a>〉將帶領你以最輕鬆的方法發佈你的範例程式碼。</p>
<h3 id="網站的運作方式"><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a></h3>
<p>在瀏覽喜愛的網站時，你可能未意識到瀏覽器正於背景中運作著許多複雜事情。〈<a href="/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a>〉將簡略說明網頁瀏覽時所發生的大小事。</p>
|
