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

+

Website SolutionYS Fang方毓賢[email protected]

Basic – 基礎概念與操作

YS, Fang. [email protected]

+

Outline

Basic 網際網路基礎概念

免費快速建立個人網站—Weebly.com 以各式頁面建構網站以各式元件充實網站

成果展示與問答 (15 min)


3

+ Web (World Wide Web, WWW)

全球資訊網http://info.cern.ch/hypertext/WWW/TheProject.html

http://info.cern.ch/hypertext/WWW/TheProject.html



4+範例

http://24h.pchome.com.tw/sign/nb.htm


https://tw.yahoo.com/

https://www.google.com.tw/?gws_rd=ssl

統一資源識別元（ URL ）

超文字傳送協定（ HTTP ）它負責規定瀏覽器和伺服器怎樣互相交流

超文件標示語言（ HTML ）作用是定義超文字文件的結構和格式












YS, Fang. [email protected] 5

+Build Your very first Web in 5 minute.

5 分鐘連結世界


6

+ 快速開發網站— Weebly.com

http://www.weebly.com/




7

+ Weebly 提供了三項網際網路應用

一般網站 (Website)博客 (Blog)網路商店 (Online Store)

進階課程


8

+ 點選 Site

馬上建立屬於你自己的網站，免費！

1


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


11+5 分鐘創建一個屬於自己的網站 *選擇樣板細節（色系）。


12+5 分鐘創建一個屬於自己的網站 *幫你的網站登記一個專屬地址（ URL ）


13+5 分鐘創建一個屬於自己的網站 *選擇類別（可忽略）


14+5 分鐘創建一個屬於自己的網站 *


15+5 分鐘創建一個屬於自己的網站 *輸入手機號碼，不用加” 0”


16+5 分鐘創建一個屬於自己的網站 *輸入驗證碼


17+5 分鐘創建一個屬於自己的網站 *已發佈上線


18+5 分鐘創建一個屬於自己的網站 *存取你的網站

+


19

Hands on!

動手作吧請將自己的網站發表於 FaceBook 中

<!> 挑戰怎麼變更樣板呢？


+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+網站編輯基礎操作要讓任何變更「生效」，請點選發佈！

點

+


36

Hands on!

動手作吧1. 新增標準頁面 3個2. 用網誌自我介紹3. 外部連結到你的FB 主頁

<!> 挑戰如何做樹狀結構？


+Enrich Your Web pages by text, image, slideshow, button, columns and more…

以各式元件充實網站


+

Weebly 元件 - 文字標題、文字內容

Click icon to add picture

Click icon to add picture編輯網頁的內容與文字。

38


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

拖拉放開


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


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


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


43+網站元件基礎操作超連結效果、與再編輯或移除。


+

Weebly 元件 – 圖片、相簿、幻燈片


Click icon to add picture網頁中放上圖片與相簿

44


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

拖拉放開


46+網站元件基礎操作影像元件的畫面。

拖拉放開


47+網站元件基礎操作影像元件的上傳畫面。


48+網站元件基礎操作影像上傳中。

拖拉放開


49+網站元件基礎操作編輯影像。

拖拉放開


50+網站元件基礎操作使用幻燈片 (Slideshow) 元件。

拖拉放開


51+網站元件基礎操作幻燈片 (Slideshow) 元件。從左邊 Drag and Drop 到右邊

拖拉放開


52+網站元件基礎操作選好多個圖片後，開始上傳。


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


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


+

Weebly 元件 – 按鈕


Click icon to add picture吸引目光的點擊按鈕！

55


56+網站元件基礎操作按鈕 (Button) 元件，醒目的超連結。從左邊 Drag and Drop 到右邊

拖拉放開


57+網站元件基礎操作點選按鈕 (Button) 元件，可編輯細節（對齊方式）、連結的 URL 或是網站頁面等從左邊 Drag and Drop 到右邊


58+網站元件基礎操作按鈕 (Button) 元件，變更按鈕樣式。


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

+


60

Hands on!

動手作吧新增按鈕元件，設定為寄送 Email 到你的信箱

<!> 挑戰畫面排版？


+Make Your Website Social and Mobile!

讓網站社群化以及行動化。


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


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

點


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


65+網站基礎設定社群化，將網站連結到 Facebook 。允許Weebly所需要的存取權限。

連結完成


66+網站基礎設定社群化，將網站連結到 Facebook 。更新網頁後，按下「發佈」，可將網站分享至 FB 。

連結完成

點擊發佈


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


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


69+網站基礎設定行動化，讓手機瀏覽時看見特製化網站。切換至「 mobile view 」來編輯移動版網站。

點


70+網站基礎設定行動化，讓手機瀏覽時看見特製化網站。手機上看見的樣子。（ *同一份網站，支援兩種模式）

+


71

Hands on!

動手作吧1. 變更「行動模式」下，網站的樣式，如：顏色、主題。

請用自己的手機拜訪一次自己的 Weebly 網站

<?> 尋找在手機模式下，瀏覽列在哪裡呢？（如何點選其他頁面）


+Colorize Your Website with External Resources, GMAP, YOUTUBE, RSS feed and more…

讓網站增色！


+

Weebly 元件 – Google Map 地圖元件


Click icon to add picture你在哪裡？

73


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

拖拉放開


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


76+網站元件進階操作Google Map 元件編輯畫面，新地址：「臺北 101 」


77+網站元件進階操作Google Map 元件編輯畫面，以經緯度標記位置！Advanced Location.


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


+

Weebly 元件 – Google Youtube 元件


Click icon to add picture來看影片吧！

79


80+網站元件進階操作Youtube 元件由左邊拖拉至右邊。

拖拉放開


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

拖拉放開


82+網站元件進階操作Youtube 元件，編輯畫面打開 Youtube ，找到想嵌入的影片，複製網址。


83+網站元件進階操作Youtube 元件，編輯畫面貼上網址吧！完成！

拖拉放開


+

Weebly 元件 – RSS 訂閱元件


Click icon to add picture來看新聞吧！

84


85+網站元件進階操作RSS Reader 元件由左邊拖拉至右邊。

拖拉放開


86+網站元件進階操作RSS Reader 元件編輯畫面。來訂閱一下商業周刊吧！

拖拉放開


87+網站元件進階操作RSS Reader 元件編輯畫面。http://www.businessweekly.com.tw/RSS.aspx


88+網站元件進階操作商業周刊網站提供的最新文章 RSS複製 RSS 的 URL貼回Weebly


89+網站元件進階操作RSS Reader 元件編輯畫面。訂閱完成！


+

Weebly 元件 – Document 文件元件


Click icon to add picture網站中顯示其他文件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

瑕不掩瑜的小小缺點…


97+

是一種免費雲端網站，需要網路操作，不用怕沒有軟體。

沒有 UNDO(回復 ) 的功能，但是大多功能套用後都還可調整。若同一頁面想製作不同版型，請先複製一版。

刪除元件需要一個個點擊（祕技：垃圾桶頁面！）


98+回家作業

http://www.apple.com/tw/iphone/




99

+ 問答時間 FAQ

Business

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