Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,032 views

Published on

Weebly是一個提供使用者假設網站的服務。Weebly提供視覺化模組,以免撰寫程式的方式(*亦保留可撰寫html code的彈性),讓大多數人能快速進入並制作屬於自己的網站。

請註冊/登入 Weebly.com (http://www.weebly.com)

Published in: Business
  • Be the first to comment

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

  1. 1. + Website Solution Basic – 基礎概念與操作
  2. 2. + Outline  Basic  網際網路基礎概念  免費快速建立個人網站— Weebly.com  以各式頁面建構網站  以各式元件充實網站  成果展示與問答(15 min) YS, Fang. ys.fang@thinkinviz.com
  3. 3. + Web (World Wide Web, WWW) 全球資訊網 YS, Fang. ys.fang@thinkinviz.com 3 http://info.cern.ch/hypertext/WWW/TheProject.html
  4. 4. + 範例 超文字傳送協定(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 YS, Fang. ys.fang@thinkinviz.com 4 統一資源識別元(URL) 超文件標示語言(HTML) 作用是定義超文字文件的結構和格式
  5. 5. + Build Your very first Web in 5 minute. 5分鐘連結世界 YS, Fang. ys.fang@thinkinviz.com 5
  6. 6. + 快速開發網站—Weebly.com http://www.weebly.com/ YS, Fang. ys.fang@thinkinviz.com 6
  7. 7. + Weebly 提供了三項網際網路應用 一般網站(Website) 博客(Blog) 網路商店(Online Store) YS, Fang. ys.fang@thinkinviz.com 7 進階課程
  8. 8. + 點選Site 馬上建立屬於你自己的網站,免費! YS, Fang. ys.fang@thinkinviz.com 8 1
  9. 9. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 10 選擇樣板。
  10. 10. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 11 選擇樣板細節(色系)。
  11. 11. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 12 幫你的網站登記一個專屬地址(URL)
  12. 12. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 13 選擇類別(可忽略)
  13. 13. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 14
  14. 14. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 15 輸入手機號碼,不用加”0”
  15. 15. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 16 輸入驗證碼
  16. 16. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 17 已發佈上線
  17. 17. + 5分鐘創建一個屬於自己的網站* YS, Fang. ys.fang@thinkinviz.com 18 存取你的網站
  18. 18. + Hands on! 動手作吧 請將自己的網站 發表於FaceBook中  <!> 挑戰怎麼變更樣板呢? YS, Fang. ys.fang@thinkinviz.com 19
  19. 19. + Structure Your Website by page, blog, external link and more… 以各式頁面建構網站 YS, Fang. ys.fang@thinkinviz.com 20
  20. 20. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 21 點選頁面按鈕
  21. 21. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 22 點選Add Page  標準頁面 點
  22. 22. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 23 編輯標準頁面名稱、布局、Save & Edit
  23. 23. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 24 新增的頁面(NEW PAGE1)完成! 原本的那一頁在哪裡呢?HOME
  24. 24. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 25 新增網誌頁面 點
  25. 25. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 26 編輯網誌頁面名稱、布局、Save & Edit
  26. 26. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 27 網誌頁面
  27. 27. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 28 網誌頁面版面與細節
  28. 28. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 29 網誌頁面:來發文吧! 點
  29. 29. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 30 網誌頁面:第一則文章。
  30. 30. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 31 網誌頁面:發文完成! 如果要修改內文,怎麼做呢? Edit Post
  31. 31. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 32 新增外部頁面連結。 點
  32. 32. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 33 編輯外部頁面的名稱、連結與開啓方式。Save & Edit
  33. 33. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 34 外部頁面連結。 點擊,試試結果吧!
  34. 34. + 網站編輯基礎操作 YS, Fang. ys.fang@thinkinviz.com 35 要讓任何變更「生效」,請點選發佈! 點
  35. 35. + Hands on! 動手作吧 1. 新增標準頁面3個 2. 用網誌自我介紹 3. 外部連結到你的 FB主頁  <!> 挑戰如何做樹狀結構? YS, Fang. ys.fang@thinkinviz.com 36
  36. 36. + Enrich Your Web pages by text, image, slideshow, button, columns and more… 以各式元件充實網站 YS, Fang. ys.fang@thinkinviz.com 37
  37. 37. + Weebly元件- 文字標題、文字內容 YS, Fang. ys.fang@thinkinviz.com 編輯網頁的 內容與文字。 38
  38. 38. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 39 文字段落元件:標題(Title)、內文(Text) 從左邊Drag and Drop到右邊
  39. 39. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 40 文字段落元件:標題(Title)、內文(Text) 從左邊Drag and Drop到右邊
  40. 40. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 41 編輯內文,就像word一樣操作,改變顏色、大小、靠左 右對齊、清單、超連結等。
  41. 41. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 42 編輯內文,就像word一樣操作,改變顏色、大小、靠左 右對齊、清單、超連結等。
  42. 42. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 43 超連結效果、與再編輯或移除。
  43. 43. + Weebly元件– 圖片、相簿、幻燈片 YS, Fang. ys.fang@thinkinviz.com 網頁中放上 圖片與相簿 44
  44. 44. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 45 影像元件:單圖片(image)、相簿(Gallery)、幻燈片 (Slideshow) 。從左邊Drag and Drop到右邊
  45. 45. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 46 影像元件的畫面。
  46. 46. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 47 影像元件的上傳畫面。
  47. 47. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 48 影像上傳中。
  48. 48. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 49 編輯影像。
  49. 49. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 50 使用幻燈片(Slideshow)元件。
  50. 50. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 51 幻燈片(Slideshow)元件。 從左邊Drag and Drop到右邊
  51. 51. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 52 選好多個圖片後,開始上傳。
  52. 52. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 53 幻燈片(Slideshow)元件。上傳完成後的清單,可新增、 刪除,最後保存(Save)。
  53. 53. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 54 幻燈片(Slideshow)元件的效果,與進階編輯畫面。 可調整layout, 換場效果, 速度等。
  54. 54. + Weebly元件– 按鈕 YS, Fang. ys.fang@thinkinviz.com 吸引目光的 點擊按鈕! 55
  55. 55. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 56 按鈕(Button)元件,醒目的超連結。 從左邊Drag and Drop到右邊
  56. 56. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 57 點選按鈕(Button)元件,可編輯細節(對齊方式)、連 結的URL或是網站頁面等 從左邊Drag and Drop到右邊
  57. 57. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 58 按鈕(Button)元件,變更按鈕樣式。
  58. 58. + 網站元件基礎操作 YS, Fang. ys.fang@thinkinviz.com 59 按鈕(Button)元件,設定URL或是網站頁面的界面。 *還可以設定為寄送Email的按鈕。
  59. 59. + Hands on! 動手作吧 新增按鈕元件,設定 為寄送Email到你的 信箱  <!> 挑戰畫面排版? YS, Fang. ys.fang@thinkinviz.com 60
  60. 60. + Make Your Website Social and Mobile! 讓網站社群化以及行動化。 YS, Fang. ys.fang@thinkinviz.com 61
  61. 61. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 62 社群化,將網站連結到Facebook。點選「設置」。
  62. 62. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 63 社群化,將網站連結到Facebook。 在「普通(basic)」頁面下,往下拉。 點
  63. 63. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 64 社群化,將網站連結到Facebook。 可將Weebly網站串連到「個人頁面」或是「粉絲專 頁」。
  64. 64. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 65 社群化,將網站連結到Facebook。 允許Weebly所需要的存取權限。 連結 完成
  65. 65. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 66 社群化,將網站連結到Facebook。 更新網頁後,按下「發佈」,可將網站分享至FB。 連結 完成 點擊 發佈
  66. 66. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 67 行動化,讓手機瀏覽時看見特製化網站。 「設置下」 「移動」
  67. 67. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 68 行動化,讓手機瀏覽時看見特製化網站。 以手機觀看網站時將有特製化的版面。(預設勾選)
  68. 68. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 69 行動化,讓手機瀏覽時看見特製化網站。 切換至「mobile view」來編輯移動版網站。 點
  69. 69. + 網站基礎設定 YS, Fang. ys.fang@thinkinviz.com 70 行動化,讓手機瀏覽時看見特製化網站。 手機上看見的樣子。(*同一份網站,支援兩種模式)
  70. 70. + Hands on! 動手作吧 1. 變更「行動模式」 下,網站的樣式,如: 顏色、主題。  請用自己的手機拜訪一 次自己的Weebly網站  <?> 尋找在手機模式下,瀏覽 列在哪裡呢? (如何點選其他頁面) YS, Fang. ys.fang@thinkinviz.com 71
  71. 71. + Colorize Your Website with External Resources, GMAP, YOUTUBE, RSS feed and more… 讓網站增色! YS, Fang. ys.fang@thinkinviz.com 72
  72. 72. + Weebly元件– Google Map 地圖元件 YS, Fang. ys.fang@thinkinviz.com 你在哪裡? 73
  73. 73. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 74 Google Map 元件 由左邊拖拉至右邊。 拖拉 放開
  74. 74. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 75 Google Map 元件編輯畫面,預設在舊金山。 輸入新地址吧!
  75. 75. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 76 Google Map 元件編輯畫面,新地址:「臺北101」
  76. 76. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 77 Google Map 元件編輯畫面,以經緯度標記位置! Advanced Location.
  77. 77. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 78 Google Map 元件編輯畫面,以經緯度標記位置! 用Google map找尋地點經緯度再將數值填回。
  78. 78. + Weebly元件– Google Youtube 元件 YS, Fang. ys.fang@thinkinviz.com 來看影片吧! 79
  79. 79. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 80 Youtube元件 由左邊拖拉至右邊。
  80. 80. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 81 Youtube元件,編輯畫面 輸入你愛的Youtube影片網址吧!
  81. 81. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 82 Youtube元件,編輯畫面 打開Youtube,找到想嵌入的影片,複製網址。
  82. 82. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 83 Youtube元件,編輯畫面 貼上網址吧!完成!
  83. 83. + Weebly元件– RSS 訂閱元件 YS, Fang. ys.fang@thinkinviz.com 來看新聞吧! 84
  84. 84. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 85 RSS Reader元件 由左邊拖拉至右邊。
  85. 85. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 86 RSS Reader元件編輯畫面。 來訂閱一下商業周刊吧!
  86. 86. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 87 RSS Reader元件編輯畫面。 http://www.businessweekly.com.tw/RSS.aspx
  87. 87. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 88 商業周刊網站提供的最新文章RSS 複製RSS的URL貼回Weebly
  88. 88. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 89 RSS Reader元件編輯畫面。 訂閱完成!
  89. 89. + Weebly元件– Document 文件元件 YS, Fang. ys.fang@thinkinviz.com 網站中顯示 其他文件 Word, PDF… 90
  90. 90. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 91 Document元件(Scribd服務) 可將文件內嵌於網站中閱讀。
  91. 91. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 92 Document元件(Scribd服務) 可將文件內嵌於網站中閱讀。
  92. 92. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 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
  93. 93. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 94 「文件」元件 提供文件下載聯結,原則上任何檔案形式皆可。
  94. 94. + 網站元件進階操作 YS, Fang. ys.fang@thinkinviz.com 95 「文件」元件 提供文件下載聯結,原則上任何檔案形式皆可。
  95. 95. + 免費的Weebly 瑕不掩瑜的小小缺點… YS, Fang. ys.fang@thinkinviz.com 96
  96. 96. +  是一種免費雲端網站,需要網路操作,不用怕沒有軟體。  沒有UNDO(回復)的功能,但是大多功能套用後都還可調整。 若同一頁面想製作不同版型,請先複製一版。  刪除元件需要一個個點擊(祕技:垃圾桶頁面!) YS, Fang. ys.fang@thinkinviz.com 97
  97. 97. + 回家作業  http://www.apple.com/tw/iphone/ YS, Fang. ys.fang@thinkinviz.com 98
  98. 98. + 問答時間FAQ YS, Fang. ys.fang@thinkinviz.com 99

×