Weebly 架站教學網站
  • 架構網站 - Weebly
    • 網站的用途
    • 認識 Weebly >
      • 選擇 Weebly 七大原因
      • Weebly 的帳號種類
      • 網站管理
      • 網頁管理
    • Weebly 架站四步驟 >
      • Weebly 註冊 + 網域申請
      • 選擇/更換範本
      • 元件使用 - 網頁設計
      • 發佈/隱藏網站
    • Weebly 使用教學 >
      • Weebly 元件
      • 網站/網域設定
      • Weebly 部落格
      • 網頁標題
      • 網站安全 & SEO 優化
      • 第三方應用程式
    • Weebly 客服中心
  • 常見問題
  • 建立線上商城
  • 推薦工具
    • 多媒體工具
    • 多媒體素材
    • 網站/網頁工具
  • 關於我們
  • 公益/環保

Weebly 使用教學

圖像元件 - 完整的圖片功能

1/3/2021

1 評論

 
Weebly 除了可以用滑鼠拖拉的方式, 將圖片元件快速置入網頁之外, 也提供多種基本的圖片功能. 例如:​
  • 使用滑鼠輕鬆調整圖片大小.
  • 圖片連結功能: 設定圖片連結至特定網址、檔案下載、電子郵件信箱等等.
  • 圖片編輯功能: 剪裁、調整亮度/飽和度、加入文字、加入超連結等等
  • 圖像替代文字設定, SEO 優化 - 讓搜索引擎也能透過圖片找到你的網站
​

放入圖片至網頁

只要用滑鼠, 將圖片元件拖拉至想要置放的位置就可以了.
圖片

上傳圖片的方式有四種:
(1) 從電腦抓取圖片檔案​
圖片
(2) 按 "搜尋", 在 Weebly內尋找 Flickr 網站相關的圖片. 你可以直接選取該圖片, 也可以將圖片加入 "我的最愛".
(3) 從 "我的最愛" 選取圖片
圖片
(4) 直接輸入圖片網址
圖片


快速調整圖片大小

不論你的圖片的解析度有多大, 只要將滑鼠移到圖片的右下方, 就能透過滑鼠的移動調整圖片顯示的大小.
圖片


​圖片連結功能

用滑鼠點擊圖片時, 就會出現圖片元件的功能表 > 選擇 "連結" , 設定連結項目.
除了一般最常見的 "網址", 還能直接連結檔案的下載..等等.
圖片


圖片編輯功能

Weebly 的圖片元件內建基本的圖片編輯功能
例如: 圖片的剪裁、篩選器 (各種主題呈現: 復古風, 黑白等等)、調整 (亮度, 飽和度, 對比)、加入文字...
圖片

還可以設定焦點, 凸顯某個特定區塊.
基本上, 一些基本的圖片編輯功能就可以直接在 Weebly 操作, 不需要另外安裝/開啟其他的圖片編輯軟體了.
圖片

圖像替代標籤 (SEO 優化)

​相較於文字, 搜索引擎比較難判別圖片是否就是合適的資料. 所以,  為了讓搜索引擎也能透過圖片找到你的網站, 建議圖片檔名盡量與圖片內容有關. 除此之外, Weebly 也提供圖片替代文字功能, 讓用戶可以用簡短的文字描述這張圖片 (建議在 125字元以內). 
將圖片元件拉至頁面後, 在圖片上按右鍵, 在進階項目中, 就能設定圖片的替代文字了.
圖片
更多關於SEO 優惠的相關文章: ​Weebly - SEO 搜尋引擎關鍵字設定

架構網頁內容時, 我們總希望能用最有效率的方式, 完成一個有品質有內容的文章. 因此, "操作簡單順手" 是重要條件之一.  以 "圖像" 元件來說, 除了可以用拖拉方式隨意放置/調整圖片的位置, 也能隨意調整圖片大小, 確認各種大小/擺設位置呈現的視覺觀感, 真的非常方便....
圖片
1 評論
Ian Wu
5/22/2021 08:49:41 am

我想詢問您一些問題,就是您第三方應用程式的樣式如何使用的,我也想像您一樣那樣圖框式顯示

回覆



發表回覆。


    圖片

    圖片

    認識 weebly

    ​選擇 Weebly -七大原因
    Weebly 的帳號種類及比較
    我該選擇哪種付費帳號?
    Weebly 拖拉放元件 - 新手上路

    網頁管理 (新增、複製、刪除、排列)
    ​
    網站管理 (新增、複製、刪除)

    Weebly 架站四步驟

    ​註冊 Weebly 帳號 + 網域申請
    選擇/更換範本
    編輯網頁 - Weebly 元件
    發佈/ 隱藏網站

    Weebly 使用教學


    提升網站安全性 - SSL 憑證
    ​
    Google Search Console - 驗證 Weebly 網站
    ​Weebly -SEO 搜尋引擎關鍵字設定
    ​如何更改網域?
    -------------------
    ​如何與他人共同編輯網站? ​
    如何備份 Weebly 網站? ​
    建立會員制度網站
    -------------------
    ​​更改字體大小、行距、間距
    ​圖片元件 - 完整的圖片功能
    ​​
    表單元件 - 聯絡、留言
    、回覆、調查
    影片元件
    ​音訊元件
    ​-------------------

    ​Weebly 提供哪些網頁標題類型?
    ​​網頁標題_背景樣式
    ​網頁標題_設計+編輯
    ​
    ​​​​-------------------
    ​
    ​如何建立 Weebly 部落格?

    ​部落格文章 (撰寫/儲存/發佈/刪除)
    ​備份 Weebly 網站+部落格
    ​Weebly 部落格側邊欄位設定
    ​
    ​​部落格文章分類/類別
    ​如何加寬 Weebly 部落格側邊欄位?​

    第三方應用程式

    結合第三方應用程式 - 功能更強大
    ​OctoMono-第三方應用程式組合包
    Ecwid 購物車

    ​垂直分隔線
    ​方形色塊
    ​Scroll To Top - 回到頁面頂端
    ​最新/ 輪播部落格貼文工具​​


    Weebly 內建購物車

    Weebly 內建購物車 - 簡介 
    ​
    Weebly 購物車功能 & 設定 (一)

    Weebly 購物車功能 & 設定 (二)

    Alt description for image
    Alt description for image
    Alt description for image

    RSS 訂閱

    類別

    全部
    Weebly 購物車
    元件
    會員制度
    網站安全 & SEO 優化設定
    網站/網域設定
    網頁標題

Weebly 架站教學


認識 Weebly
Weebly 架站四步驟
​Weebly 使用教學
第三方應用程式中心
Vertical Divider

Weebly 常見問題

Weebly 帳號
Weebly 付費/ 收據
Vertical Divider

推薦工具

線上平面設計工具
​多媒體工具
​多媒體素材
Vertical Divider

Weebly 客服中心

如何聯絡 Weebly 客服

Vertical Divider

關於我們

關於我們


版權聲明: 
本站發表的文章、圖片及電子書的版權均屬於本站所有, 如果有轉載需求, 請來信取得授權. 非經授權, 請勿轉載或轉貼. ​
Copyright © 2023
  • 架構網站 - Weebly
    • 網站的用途
    • 認識 Weebly >
      • 選擇 Weebly 七大原因
      • Weebly 的帳號種類
      • 網站管理
      • 網頁管理
    • Weebly 架站四步驟 >
      • Weebly 註冊 + 網域申請
      • 選擇/更換範本
      • 元件使用 - 網頁設計
      • 發佈/隱藏網站
    • Weebly 使用教學 >
      • Weebly 元件
      • 網站/網域設定
      • Weebly 部落格
      • 網頁標題
      • 網站安全 & SEO 優化
      • 第三方應用程式
    • Weebly 客服中心
  • 常見問題
  • 建立線上商城
  • 推薦工具
    • 多媒體工具
    • 多媒體素材
    • 網站/網頁工具
  • 關於我們
  • 公益/環保