網頁設計入門知識

 html5 css js

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

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

安裝基本軟體

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

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

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

與各式各樣檔案打交道

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

HTML 基本概念

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

CSS 基本概念

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

JavaScript 基本概念

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

將你的網站發佈上線

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

網站的運作方式

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

 

本文來自:MDN Web docs https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web

 

HTML5 版面元素介紹

HTML 版面範例

下方是版面規劃範例之一,版面包括頁首、左側導覽選單、主要內容區、頁尾。

html layout 1

 

基本 HTML5 版面元素

HTML5使用新的標籤(Tags)來定義網頁內容,遵循這些規則,可容易判讀網頁各部份內容。

下方範例是使用最新的 HTNL5 標記語言來定義網頁內容版面。

 

HTML5 Semantic Elements

 上圖網頁版面的HTML原始碼,如下所示。


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用網頁版面</title>
</head>
<body>
<header>頁首</header>
<nav>導覽選單</nav>
<section>區段</section>
<article>文章</article>
<aside>側邊</aside>
<footer>頁尾</footer>
</body>
</html>

 

<header> 

頁首版面區塊,可包含網站logo、橫幅廣告圖片、搜尋、上方連結、重要資訊...等,版面區塊通常會出現在網站的每一頁中。

The HTML <header> tag represents a group of introductory or navigational aids.

Headers can contain headings, subheadings, version information, navigational controls, etc.

According to the HTML5 specification:

The <header> element is intended to usually contain the section's heading (an <h1>-<h6> element or an <hgroup> element), but this is not required. The <header>element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

The <header> tag cannot be placed within a <footer><address> or another <header> element.

 

<nav> 

網站導覽選單的版面區塊,此版面區塊通常會出現在網站的每一頁中。

The HTML <nav> tag is used for declaring a navigational section of the HTML document.

Websites typically have sections dedicated to navigational links - links that enable the user to navigate the site. These links should be placed inside a <nav> tag.

 

<main>

網頁主要內容的容器,一個網頁只能使用一個 main 標籤。

The HTML <main> tag is used to represent the main content area within an HTML document.

The <main> tag surrounds the main content of the page - content that is unique to that document and is obviously the "main" content for that page. This excludes any content that is repeated across multiple pages (such as navigation bars, headers, footers, etc).

An HTML document can have a maximum of one <main> element. It must not appear within the <article><aside><footer><header> or <nav> tags.

 

<section>

將網頁內容分成不同區段的標籤

The HTML <section> tag is used to represent a section within an article.

Any given web page or article could have many sections. For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.

 

<article> 

 一篇文章的版面區塊

The HTML <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content on the site (even though it could be related). By "independent" I mean that its contents could stand alone, for example in syndication.

Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.

 

<aside>

側邊版面區塊,通常使用於文章內容的側邊攔版面區塊,例如:放置文章列表版面、廣告、QR Code...等寬度比較小的版面區塊。

 

The HTML <aside> tag is used to represent content that is related to the surrounding content within an article or web page, but could still stand alone in its own right. This type of content is often represented in sidebars.

An example is a "pull quote" from a longer article. A pull quote (also known as a lift-out quote or a call-out) is a quotation or edited excerpt from an article that is placed in a larger typeface on the same page, serving to lead readers into an article and to highlight a key topic.

 

 

<footer>

使用於網頁的頁尾,或一篇文章的尾端。網頁中通常用於放置網站版權宣告、頁尾選單連結...等。 版面區塊通常會出現在網站的每一頁中。

The HTML <footer> tag is used for defining the footer of an HTML document or section.

Footers usually contain information such as the author of the document, copyright information, links to terms of use, privacy policy, etc.

Contact information within a <footer> tag should be marked up using the <address> tag

Although footers are typically located at the bottom of a document, this is not required (although it cannot be placed within a <header> or another <footer> element, and it cannot contain a <header> element).

A document/section can have more than one footer.

 

參考連結:

 

CSS Flexbox

Flexbox 是一個優化版面配置的盒子模型,用以取代過去複雜的版面配置方法,並適應不同螢幕尺寸的各類裝置。

詳情請看英文 CSS Flexbox 說明示範。

CSS Flexbox 中文介紹文章

常用 html 標籤

標題

標題標籤可以將文字格式化為標題文字,文字會加上粗體,文字大小可以從最大的 h1 至最小的 h6。

註:標籤英文字母,不分大小寫,皆是可以。

語法:

<h1>標題1:最大標題文字</h1>

<h2>標題2:標題文字</h2>

<h3>標題3:標題文字</h3>

<h4>標題4:標題文字</h4>

<h5>標題5:標題文字</h5>
<h6>標題6:最小標題文字</h6>

 

段落

將文字格式化為段落樣式。

語法:<p>這是一個文字段落 html 標籤的範例。</p>

 

插入圖片

將一個圖片檔案插入網頁中。

語法:<img src="/images\logo.png">

說明:

  • 圖片標籤不需要</img>
  • images 是資料夾名稱
  • logo.png 是圖片檔案名稱

 

超連結

將文字或圖片加入超連結

語法:

內部連結:<a href="/about.html">關於我們</a>

外部連結:<a href="/http://www.chimeimuseum.org">奇美博物館</a>

 

表格

下方範例語法是插入一個二欄三列的表格

語法:

 <table width="100%" border="1">

<tbody>

<tr>

<td>第1列第1欄儲存格</td>

<td>第1列第2欄儲存格</td>

</tr>

<tr>

<td>第2列第1欄儲存格</td>

<td>第2列第2欄儲存格</td>

</tr>

<tr>

<td>第3列第1欄儲存格</td>

<td>第3列第2欄儲存格</td>

</tr>

</tbody>

</table>

 上方表格語法產生的表格:

 第1列第1欄儲存格  第1列第2欄儲存格
 第2列第1欄儲存格  第2列第2欄儲存格
 第3列第1欄儲存格  第3列第2欄儲存格

 

 表單

 

下方是登入表單範例

語法:

<form id="form1" name="login" method="post">

<label for="textfield">帳號:</label>

<input type="text" name="id" id="id">

<label for="密碼">密碼:</label>

<input type="text" name="password" id="password">

<input type="submit" name="submit" id="submit" value="登入">

</form>



 

 

HTML文件的基本語法


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>My test page</title>

</head>

<body>

網頁圖文內容,就是製作在這裡。

下方的插入圖片的HTML語法:

<img src="/images/firefox-icon.png" alt="My test image">

</body>

</html>

 

html

 

 HTML學習資源

HTML 基礎

W3School 簡體中文 HTML 教學

W3Schools Online Web Tutorials 網頁設計線上教學(英文)

W3Schools HTML5 Tutorial 線上 HTML5 教學(英文)

 



版權所有 © 2016 JoyCat All Rights Reserved.