Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

網頁設計學習路徑

在這個簡報裡,說明了網頁設計的學習路徑與每個階段的重點。
by

Chin-Hsiang Lin

on 26 August 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 網頁設計學習路徑

Road Map of Learning Web Design
網頁設計的路徑
HTML
HyperText Markup Language
Cascading Style Sheet
CSS
建立網頁的行為與動作
JavaScript
還有什麼招式?
Multimedia
<!doctype html>
<html>
<head>
</head>

<body>
</body>
</html>
<p></p>
<h1></h1>...
<ol></ol>
<ul></ul>
<dl></dl>
<li></li>
區塊標籤
<strong></strong>
<em></em>
<a></a>
<img />
<br />
大部份都是行間標籤
行間標籤
<table></table>
<pre></pre>
<form></form>
<div></div>
學習網頁設計並不困難,但過程與登山一樣,需要事前對學習路徑有一定的瞭解。再來就是要不斷的練習,讓自己對網頁的基礎語法熟悉,最後才是工具的使用。

這幾張slides便是就學習路徑給大家一些建議,請各位一起來把網頁學好。妳/你會發現這個能力將可以應用在許多領域上!

明志科大視傳系/林金祥
提供樣式給HTML,定義方式:
<head>
<style>
CSS全部都要定義在這裡面。
</style>
</head>
CSS與HTML的關係
標籤選擇器:
重新定義HTML標籤樣式
類別選擇器:
自行定義的樣式,在同一頁面中可重複使用。
id選擇器:
自行定義的樣式,在同一頁面中僅能使用一次。
CSS的選擇器
p {

font-family
: Arial, Verdana, sans-serif;

font-size
: 0.85em;

text-indent
: 2em;

line-height
: 1.5em;

color
: #443344;
}
CSS定義樣式的方式
HTML的標籤
結尾大括號
開頭大括號
樣式結尾分號
提供功能和互動機制給HTML,可以定義在<head>或<body>,但一定要被<script>包圍:

<script>
JavaScript要定義在這裡。
</script>
JavaScript與HTML的關係
變數:
設定程中式會使用的變數。
自定函數:
自行定義的函數,供程式重複使用。
標準函數:
JavaScript中的標準函數。並學習不同的屬性與類別等。
JavaScript的結構
windows.onload
= init
;
var
result = 4
;
function
myFunction()
{
document.getElementById("demo").innerHTML
="Hello Dolly"
;
document.getElementById("myDIV").innerHTML
="How are you?"
;
}
JavaScript的基本語法
涵數結尾大括號
自行定義的「涵數」
樣式結尾分號
操控網頁行為
插入動畫、影音物件,或是設計具資料庫功能的其它進階功能,讓網頁更精彩!
PHP, SQL
咦?結束啦?

Adobe Dreamweaver
呢?
就像登山時,最終靠的是自己的體力與技巧,而不是這個大背包。
Dreamweaver或其它好用的網頁軟體,他都不等於網頁,而應視為你做網頁時的工具。在妳/你的背包裡,可以藏有更多寶物;像是JavaScript或其他程式的原始碼片段(節省開發時間)、商業圖庫或音效庫(節省製作時間)。更包括其它支援妳/你製作網頁元素的軟體:Photoshop, Illustrator, Fireworks, Muse, Edge...等都是。
但記住,要登上山,最重要的是體力(對網頁設計的基本概念),以及...
這支登山杖--妳/你的文字編輯器(記事本)
好好熟悉它,就可以幫妳/你做好網頁
基本架構
Full transcript