電商網站開發 - 應用Weebly (Part 1 基礎)

+
Website Solution
Basic –
基礎概念與操作

+
Outline
 Basic
 網際網路基礎概念
 免費快速建立個人網站—
Weebly.com
 以各式頁面建構網站
 以各式元件充實網站
 成果展示與問答(15 min)
YS, Fang. ys.fang@thinkinviz.com

+
Web (World Wide Web, WWW)
全球資訊網
3
http://info.cern.ch/hypertext/WWW/TheProject.html

+
範例
超文字傳送協定（HTTP）
它負責規定瀏覽器和伺服器怎樣互相交流
http://24h.pchome.com.tw/sign/nb.htm
http://info.cern.ch/hypertext/WWW/TheProject.html
https://tw.yahoo.com/
https://www.google.com.tw/?gws_rd=ssl
4
統一資源識別元（URL）
超文件標示語言（HTML）
作用是定義超文字文件的結構和格式

+
Build Your very first Web in 5 minute.
5分鐘連結世界
YS, Fang. ys.fang@thinkinviz.com 5

+
快速開發網站—Weebly.com
http://www.weebly.com/
6

+
Weebly 提供了三項網際網路應用
一般網站(Website)
博客(Blog)
網路商店(Online Store)
7
進階課程

+ 點選Site
馬上建立屬於你自己的網站，免費！
8
1

+
5分鐘創建一個屬於自己的網站*
10
選擇樣板。

+
11
選擇樣板細節（色系）。

+
12
幫你的網站登記一個專屬地址（URL）

+
13
選擇類別（可忽略）

+
14

+
15
輸入手機號碼，不用加”0”

+
16
輸入驗證碼

+
17
已發佈上線

+
18
存取你的網站

+
Hands on!
動手作吧
請將自己的網站
發表於FaceBook中
 <!> 挑戰怎麼變更樣板呢？
19

+ Structure Your Website by
page, blog, external link and
more…
以各式頁面建構網站

+
網站編輯基礎操作
21
點選頁面按鈕

+
22
點選Add Page  標準頁面
點

+
23
編輯標準頁面名稱、布局、Save & Edit

+
24
新增的頁面(NEW PAGE1)完成！
原本的那一頁在哪裡呢？HOME

+
25
新增網誌頁面
點

+
26
編輯網誌頁面名稱、布局、Save & Edit

+
27
網誌頁面

+
28
網誌頁面版面與細節

+
29
網誌頁面：來發文吧！
點

+
30
網誌頁面：第一則文章。

+
31
網誌頁面：發文完成！
如果要修改內文，怎麼做呢？ Edit Post

+
32
新增外部頁面連結。
點

+
33
編輯外部頁面的名稱、連結與開啓方式。Save & Edit

+
34
外部頁面連結。
點擊，試試結果吧！

+
35
要讓任何變更「生效」，請點選發佈！
點

+
Hands on!
動手作吧
1. 新增標準頁面3個
2. 用網誌自我介紹
3. 外部連結到你的
FB主頁
 <!> 挑戰如何做樹狀結構？
36

+ Enrich Your Web pages by text,
image, slideshow, button,
columns and more…
以各式元件充實網站

+
Weebly元件- 文字標題、文字內容
編輯網頁的
內容與文字。
38

+
網站元件基礎操作
39
文字段落元件：標題(Title)、內文(Text)
從左邊Drag and Drop到右邊

+
40
文字段落元件：標題(Title)、內文(Text)

+
41
編輯內文，就像word一樣操作，改變顏色、大小、靠左
右對齊、清單、超連結等。

+
42
編輯內文，就像word一樣操作，改變顏色、大小、靠左
右對齊、清單、超連結等。

+
43
超連結效果、與再編輯或移除。

+
Weebly元件– 圖片、相簿、幻燈片
網頁中放上
圖片與相簿
44

+
45
影像元件：單圖片(image)、相簿(Gallery)、幻燈片
(Slideshow) 。從左邊Drag and Drop到右邊

+
46
影像元件的畫面。

+
47
影像元件的上傳畫面。

+
48
影像上傳中。

+
49
編輯影像。

+
50
使用幻燈片(Slideshow)元件。

+
51
幻燈片(Slideshow)元件。

+
52
選好多個圖片後，開始上傳。

+
53
幻燈片(Slideshow)元件。上傳完成後的清單，可新增、
刪除，最後保存(Save)。

+
54
幻燈片(Slideshow)元件的效果，與進階編輯畫面。
可調整layout, 換場效果, 速度等。

+
Weebly元件– 按鈕
吸引目光的
點擊按鈕！
55

+
56
按鈕(Button)元件，醒目的超連結。

+
57
點選按鈕(Button)元件，可編輯細節（對齊方式）、連
結的URL或是網站頁面等

+
58
按鈕(Button)元件，變更按鈕樣式。

+
59
按鈕(Button)元件，設定URL或是網站頁面的界面。
*還可以設定為寄送Email的按鈕。

+
Hands on!
動手作吧
新增按鈕元件，設定
為寄送Email到你的
信箱
 <!> 挑戰畫面排版？
60

+
Make Your Website
Social and Mobile!
讓網站社群化以及行動化。

+
網站基礎設定
62
社群化，將網站連結到Facebook。點選「設置」。

+
網站基礎設定
63
社群化，將網站連結到Facebook。
在「普通(basic)」頁面下，往下拉。
點

+
網站基礎設定
64
可將Weebly網站串連到「個人頁面」或是「粉絲專
頁」。

+
網站基礎設定
65
允許Weebly所需要的存取權限。
連結
完成

+
網站基礎設定
66
更新網頁後，按下「發佈」，可將網站分享至FB。
連結
完成
點擊
發佈

+
網站基礎設定
67
行動化，讓手機瀏覽時看見特製化網站。
「設置下」 「移動」

+
網站基礎設定
68
以手機觀看網站時將有特製化的版面。（預設勾選）

+
網站基礎設定
69
切換至「mobile view」來編輯移動版網站。
點

+
網站基礎設定
70
手機上看見的樣子。（*同一份網站，支援兩種模式）

+
Hands on!
動手作吧
1. 變更「行動模式」
下，網站的樣式，如：
顏色、主題。

請用自己的手機拜訪一
次自己的Weebly網站
 <?> 尋找在手機模式下，瀏覽
列在哪裡呢？
（如何點選其他頁面）
71

+
Colorize Your Website with
External Resources, GMAP,
YOUTUBE, RSS feed and
more…
讓網站增色！

+
Weebly元件– Google Map 地圖元件
你在哪裡？
73

+
網站元件進階操作
74
Google Map 元件
由左邊拖拉至右邊。
拖拉
放開

+
75
Google Map 元件編輯畫面，預設在舊金山。
輸入新地址吧！

+
76
Google Map 元件編輯畫面，新地址：「臺北101」

+
77
Google Map 元件編輯畫面，以經緯度標記位置！
Advanced Location.

+
78
Google Map 元件編輯畫面，以經緯度標記位置！
用Google map找尋地點經緯度再將數值填回。

+
Weebly元件– Google Youtube 元件
來看影片吧！
79

+
80
Youtube元件

+
81
Youtube元件，編輯畫面
輸入你愛的Youtube影片網址吧！

+
82
打開Youtube，找到想嵌入的影片，複製網址。

+
83
貼上網址吧！完成！

+
Weebly元件– RSS 訂閱元件
來看新聞吧！
84

+
85
RSS Reader元件

+
86
RSS Reader元件編輯畫面。
來訂閱一下商業周刊吧！

+
87
http://www.businessweekly.com.tw/RSS.aspx

+
88
商業周刊網站提供的最新文章RSS
複製RSS的URL貼回Weebly

+
89
訂閱完成！

+
Weebly元件– Document 文件元件
網站中顯示
其他文件
Word,
PDF…
90

+
91
Document元件(Scribd服務)
可將文件內嵌於網站中閱讀。

+
92
Document元件(Scribd服務)
可將文件內嵌於網站中閱讀。

+
93
Document元件(Scribd服務)可支援的檔案類型: pdf, txt,
ps, rtf, epub, key, odt, odp, ods, odg, odf, sxw, sxc, sxi,
sxd, doc, ppt, pps, xls, docx, pptx, ppsx, xlsx

+
94
「文件」元件
提供文件下載聯結，原則上任何檔案形式皆可。

+
95
「文件」元件
提供文件下載聯結，原則上任何檔案形式皆可。

+
免費的Weebly
瑕不掩瑜的小小缺點…

+
 是一種免費雲端網站，需要網路操作，不用怕沒有軟體。
 沒有UNDO(回復)的功能，但是大多功能套用後都還可調整。
若同一頁面想製作不同版型，請先複製一版。
 刪除元件需要一個個點擊（祕技：垃圾桶頁面！）
97

+
回家作業
 http://www.apple.com/tw/iphone/
98

+ 問答時間FAQ
99

電商網站開發 - 應用Weebly (Part 1 基礎)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 電商網站開發 - 應用Weebly (Part 1 基礎)

Similar to 電商網站開發 - 應用Weebly (Part 1 基礎) (7)

More from Yu-Hsien Fang

More from Yu-Hsien Fang (9)

Recently uploaded

Recently uploaded (8)

電商網站開發 - 應用Weebly (Part 1 基礎)

Editor's Notes