###### tags: `Office` # 資源分享 :::warning <span class="textc" style="font-weight:bold; font-size:1.2em">課程講師資訊</span>巨匠電腦講師:呂心怡 E-mail:zoego99@gmail.com ::: # 一、Chrome擴充功能 ## <span class="h2">A. 加入方法</span> ### 1. Chrome擴充功能連結方法 <a href="https://hackmd.io/_uploads/BkckZHCa5.png"><span class="img100">![](https://hackmd.io/_uploads/BkckZHCa5.png)</span></a> ### 2. 連結位置 <a href="https://hackmd.io/_uploads/Sy4XbHAa5.png"><span >![](https://hackmd.io/_uploads/Sy4XbHAa5.png)</span></a>https://chrome.google.com/webstore/category/extensions?hl=zh-TW ## <span class="h2">B. 螢幕擷取/錄影</span> ### 1. 捕捉網頁擷圖 - FireShot <span class="urll" style="display:inline">[【👆連結 捕捉網頁擷圖 - FireShot】](https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg/related?hl=zh-TW) </span> <a href="https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg/related?hl=zh-TW"><span class="img40" >![](https://hackmd.io/_uploads/HJUGHoGA9.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/BkvVDizRq.png"><span class="img100" >![](https://hackmd.io/_uploads/BkvVDizRq.png)</span></a> ### 2. 螢幕錄製 Screenity - Screen Recorder & Annotation Tool <span class="urll" style="display:inline">[【👆連結 Screenity - Screen Recorder & Annotation Tool】](https://chrome.google.com/webstore/detail/screenity-screen-recorder/kbbdabhdfibnancpjfhlkhafgdilcnji?hl=zh-TW) </span> <a href="https://chrome.google.com/webstore/detail/screenity-screen-recorder/kbbdabhdfibnancpjfhlkhafgdilcnji?hl=zh-TW"><span class="img40" >![](https://hackmd.io/_uploads/ByFoYiz09.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/rJheV3G0q.png"><span class="img100" >![](https://hackmd.io/_uploads/rJheV3G0q.png)</span></a> ### 3. 螢幕錄製 Loom – Free Screen Recorder & Screen Capturel <span class="urll" style="display:inline">[【👆連結 Loom – Free Screen Recorder & Screen Capture】](https://chrome.google.com/webstore/search/Loom%20%E2%80%93%20Free%20Screen%20Recorder%20%26%20Screen%20Capture?hl=zh-TW) </span> <a href="https://chrome.google.com/webstore/search/Loom%20%E2%80%93%20Free%20Screen%20Recorder%20%26%20Screen%20Capture?hl=zh-TW"><span class="img40" >![](https://hackmd.io/_uploads/B17auhGC9.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/SkG1OnfCc.png"><span class="img100" >![](https://hackmd.io/_uploads/SkG1OnfCc.png)</span></a> ## <span class="h2">C. 其他</span> ### 1. Youtube畫面擷取 <span class="urll" style="display:inline">[【👆連結 Screenshot YouTube】](https://chrome.google.com/webstore/detail/screenshot-youtube/gjoijpfmdhbjkkgnmahganhoinjjpohk) </span> <a href="https://chrome.google.com/webstore/detail/screenshot-youtube/gjoijpfmdhbjkkgnmahganhoinjjpohk"><span class="img40" >![](https://hackmd.io/_uploads/Hk2XD6M0c.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/SkTWwTM0c.png"><span class="img100" >![](https://hackmd.io/_uploads/SkTWwTM0c.png)</span></a> ### 2. YouTube™ 雙字幕 <span class="urll" style="display:inline">[【👆連結 YouTube™ 雙字幕】](https://chrome.google.com/webstore/detail/youtube-dual-subtitles/hkbdddpiemdeibjoknnofflfgbgnebcm) </span> <a href="https://chrome.google.com/webstore/detail/youtube-dual-subtitles/hkbdddpiemdeibjoknnofflfgbgnebcm"><span class="img40" >![](https://hackmd.io/_uploads/rkzlfpGRq.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/S1EaQ6fAq.png"><span class="img100" >![](https://hackmd.io/_uploads/S1EaQ6fAq.png)</span></a> ### 3. 多索引標籤頁合併 <span class="urll" style="display:inline">[【👆連結 OneTab】](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall) </span> <a href="https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall"><span class="img40" >![](https://hackmd.io/_uploads/BkO7xpGCq.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/BJ4yZaMC9.png"><span class="img100" >![](https://hackmd.io/_uploads/BJ4yZaMC9.png)</span></a> ### 4. 短網址連結:Bitly <span class="urll" style="display:inline">[【👆連結 Bitly | Short links and QR Codes】](https://chrome.google.com/webstore/detail/bitly-short-links-and-qr/iabeihobmhlgpkcgjiloemdbofjbdcic?hl=zh-TW) </span> <a href="https://chrome.google.com/webstore/detail/bitly-short-links-and-qr/iabeihobmhlgpkcgjiloemdbofjbdcic?hl=zh-TW"><span class="img40" >![](https://hackmd.io/_uploads/HJjKnnMR9.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/B1ya3hzA5.png"><span class="img100" >![](https://hackmd.io/_uploads/B1ya3hzA5.png)</span></a> ### 5. 短網址連結:Url Shortener <span class="urll" style="display:inline">[【👆連結 Url Shortener】](https://chrome.google.com/webstore/detail/url-shortener/oodfdmglhbbkkcngodjjagblikmoegpa?hl=zh-TW) </span> <a href="https://chrome.google.com/webstore/detail/url-shortener/oodfdmglhbbkkcngodjjagblikmoegpa?hl=zh-TW"><span class="img40" >![](https://hackmd.io/_uploads/Hyl_UU7A9.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/BJBkvImRq.png"><span class="img40" >![](https://hackmd.io/_uploads/BJBkvImRq.png)</span></a> ### 5. 滑鼠靠於圖片時,放大圖片工具 <span class="urll" style="display:inline">[【👆連結 Imagus】](https://chrome.google.com/webstore/detail/imagus/immpkjjlgappgfkkfieppnmlhakdmaab?hl) </span> <a href="https://chrome.google.com/webstore/detail/imagus/immpkjjlgappgfkkfieppnmlhakdmaab?hl"><span class="img40" >![](https://hackmd.io/_uploads/Sybkk6MAc.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/rkDNJazCc.png"><span class="img100" >![](https://hackmd.io/_uploads/rkDNJazCc.png)</span></a> ### 6. 免費在線文件轉換器 (1) 連結網址:https://www.online-convert.com/ (2) Chrome外擴功能 <span class="urll" style="display:inline">[【👆連結 File Converter - By Online-Convert.com】](https://chrome.google.com/webstore/detail/file-converter-by-online/dicgkflojhbopmagcacdklcpdfdcnhko/related) </span> <a href="https://chrome.google.com/webstore/detail/file-converter-by-online/dicgkflojhbopmagcacdklcpdfdcnhko/related"><span class="img40" >![](https://hackmd.io/_uploads/HkboNTzC9.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/By25SazR9.png"><span class="img100" >![](https://hackmd.io/_uploads/By25SazR9.png)</span></a> ### 7. 圖片類型變更 <span class="urll" style="display:inline">[【👆連結 Save image as Type】](https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd) </span> <a href="https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd"><span class="img40" >![](https://hackmd.io/_uploads/BJ4XcpGRq.png)</span></a> 畫面呈現 <a href="https://hackmd.io/_uploads/BJ4XcpGRq.png"><span class="img100" >![](https://hackmd.io/_uploads/BJ4XcpGRq.png)</span></a> # 二、 網站分享 ## <span class="h2">A. 圖片相關資訊</span> ### 1. 常用圖檔格式 <span style="text-align:center; display:block;color:#766161;font-size:1.2em;font-weight:bold;">🔹點陣圖🔹</span> |類型|說明| |-|-| |<span class="red">Webp</span>|1.WebP是Google新推出影像技術,讓網頁圖檔有效進行壓縮,又不影響圖片實際清晰度,讓網頁下載速度加快<br>2.目前許多軟體不支援,需要藉由工具轉換為常用圖檔格式<br>(1) 方法1:加入 [Chrome 套件](https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd/related)<br>【圖片另存為JPG/PNG/WebP】,加入後針對想下載圖片,按右鍵即可選擇轉換格式<br>(2)方法2:線上轉檔網站,例如:[iLoveIMG](https://www.iloveimg.com/zh-tw/convert-to-jpg/webp-to-jpg)| |<span class="red">jpg、jpeg</span>|主要儲存照片、支援全彩、不支援透明及動畫、網頁圖片由Webp取代趨勢| |<span class="red">png</span>|取jpg與gif優點,全彩、透明,但不支援動畫| |GIF|多張圖片依序顯示,營造動畫效果、圖片色彩少、支援透明及動畫| |tiff、tif|傳統影像印刷、掃瞄檔| |BMP|點陣圖、支援全彩、檔案大、早期圖檔格式| |PSD|PhotoShop檔案,需要專業軟體開啟| <span style="text-align:center; display:block;color:#766161;font-size:1.2em;font-weight:bold;">🔹向量圖🔹</span> |類型|說明| |-|-| |<span class="red">SVG</span>|可縮放向量圖形,可由瀏覽器檢視圖檔,現階段流行格式| |WMF|向量圖檔、任意放大縮小品質不失真、早期圖檔格式,由SVG取代| |EPS、Ai|需要Adobe illustrator專業軟體開啟| |swf|需要Adobe Flash專業軟體開啟,已被程式語法取代| ### 2. 圖片素材</span> <span class="red">「無著作權(CC0)」高解析度圖片網站,</span> 使用者可以將圖片運用在各種用途,無需支付任何費用、標記原作者名稱。 |<span style="text-align:center; display:block;">連結網址</span>|<span style="text-align:center; display:block;">logo</span>|<span style="text-align:center; display:block;">說明</span>| |-|-|-| |https://pixabay.com/zh/|![](https://hackmd.io/_uploads/SyW4oJD4F.png)|JPG、Video| |https://librestock.com/|![](https://hackmd.io/_uploads/ry5Vsyv4F.png)|JPG、Video| |https://www.foodiesfeed.com/|![](https://hackmd.io/_uploads/HkzHj1w4Y.png)|食物圖片||https://stocksnap.io/|![](https://hackmd.io/_uploads/SJ8Yi1D4t.png)|JPG| |https://zh.pngtree.com/|![](https://hackmd.io/_uploads/BJhqoyPNt.png)|PNG| |https://favpng.com/|![](https://hackmd.io/_uploads/HJrioyv4F.png)|PNG| ### 3. 圖形素材</span> <span style="text-align:center; display:block;color:#766161;font-size:1.2em;font-weight:bold;">🔹 常用圖形 🔹</span> |<span style="text-align:center; display:block;">連結網址</span>|<span style="text-align:center; display:block;">logo</span>|<span style="text-align:center; display:block;">說明</span>| |-|-|-| |http://undraw.co/illustrations|![](https://hackmd.io/_uploads/rkPni1D4F.png)|JPG、SVG| |https://www.manypixels.co/gallery/|![](https://hackmd.io/_uploads/rkeaoJvNt.png)|JPG、SVG| |https://www.flaticon.com/|![](https://hackmd.io/_uploads/B1dTjyPVY.png)|ICON、SVG| |https://www.iconfinder.com/|![](https://hackmd.io/_uploads/H1g0j1vVF.png)|ICON、SVG| |https://www.svgrepo.com/|<span class="img40">![](https://hackmd.io/_uploads/HyJscrC69.png)</span></a>|ICON、SVG| SVG網站參考:<span class="urll" style="display:inline">[【👆中央氣象局(首頁)】](https://www.cwb.gov.tw/V8/C/) </span> <br> <span style="text-align:center; display:block;color:#766161;font-size:1.2em;font-weight:bold;">🔹 需要Adobe illustrator 專業軟體 🔹</span>※需註明出處 |<span style="text-align:center; display:block;">連結網址</span>|<span style="text-align:center; display:block;">logo</span>|<span style="text-align:center; display:block;">說明</span>| |-|-|-| |https://www.freepik.com/|![](https://hackmd.io/_uploads/HyXJnkPNK.png)|Ai檔、圖片| |https://www.vecteezy.com/|![](https://hackmd.io/_uploads/HJ5J31DVK.png)|Ai檔、圖片| ## <span class="h2">B. 圖片類</span> ### 1. 線上圖片編輯器 連結網址:https://edit.photo/ <a href="https://hackmd.io/_uploads/Bk5YO6MR9.png"><span class="img100" >![](https://hackmd.io/_uploads/Bk5YO6MR9.png)</span></a> ### 2. 線上圖片壓縮 連結網址:https://tinypng.com/ <a href="https://hackmd.io/_uploads/S1vMoazC9.png"><span class="img100" >![](https://hackmd.io/_uploads/S1vMoazC9.png)</span></a> # 三、軟體分享 ## <span class="h2">A. 圖片軟體</span> ### 1. 圖片編輯軟體:Gimp 連結網址:https://www.gimp.org/ <a href="https://hackmd.io/_uploads/HJjt6TMCq.png"><span class="img100" >![](https://hackmd.io/_uploads/HJjt6TMCq.png)</span></a> ### 2. 螢幕擷取工具:PicPick 連結網址:https://picpick.app/zh-tw/ <a href="https://hackmd.io/_uploads/SJq6CTMRc.png"><span class="img100" >![](https://hackmd.io/_uploads/SJq6CTMRc.png)</span></a> ### 3. 螢幕畫筆工具:ZoomIt v6.01 連結網址:https://docs.microsoft.com/zh-tw/sysinternals/downloads/zoomit <br>ZoomIt 是螢幕縮放、注釋和錄製工具,適用于包含應用程式示範的技術簡報。 ZoomIt 在匣中不具干擾地執行,並使用可自訂的熱鍵啟動,以放大螢幕區域、在縮放時四處移動,以及繪製縮放的影像。 <a href="https://hackmd.io/_uploads/Sy5ryCMR5.png"><span class="img100" >![](https://hackmd.io/_uploads/Sy5ryCMR5.png)</span></a> 常用快速鍵 〔Ctrl〕 + 上下方向鍵:調整畫筆粗細,上鍵粗,下鍵變細,可有筆畫模式的點來判斷粗細。 〔Ctrl〕 + e :刪除所有筆畫內容。 〔Ctrl〕+ 顏色代稱替 : 更換畫筆的顏色, r 是紅色、 y 是黃色、 g 是綠色、 b 是藍色。 〔Ctrl〕+〔Shift〕: 使用滑鼠左鍵拖曳出箭頭。 〔Shift〕+ 滑鼠左鍵拖曳 : 畫直線。 〔Ctrl〕+ 滑鼠左鍵拖曳 : 畫方塊。 〔Tab〕+ 滑鼠左鍵拖曳 : 畫圓圈。 〔Esc〕: 離開畫筆模式,並會清除所有的筆劃。 〔Ctrl〕+ c : 將畫面複製到剪貼簿上。 〔Ctrl〕+ s : 將畫面儲存到檔案。 ## <span class="h2">B. 影片軟體</span> ### 1. 影片播放軟體:PotPlayer 連結網址:https://potplayer.daum.net/ <a href="https://hackmd.io/_uploads/HknQWAz0q.png"><span class="img100" >![](https://hackmd.io/_uploads/HknQWAz0q.png)</span></a> ### 2. 螢幕錄製軟體:OBS 連結網址:https://obsproject.com/ <a href="https://hackmd.io/_uploads/HJKUxCM0q.png"><span class="img100" >![](https://hackmd.io/_uploads/HJKUxCM0q.png)</span></a> ### 3. 螢幕錄製軟體:oCam 連結網址:https://ohsoft.net/eng/ocam/download.php?cate=1002 <a href="https://hackmd.io/_uploads/rkDsXAG0q.png"><span class="img100" >![](https://hackmd.io/_uploads/rkDsXAG0q.png)</span></a> ### 4. 影片分割:LosslessCut 連結網址:https://github.com/mifi/lossless-cut <a href="https://hackmd.io/_uploads/S1R-ERfC5.png"><span class="img100" >![](https://hackmd.io/_uploads/S1R-ERfC5.png)</span></a> ### 5. 影片編輯軟體:Openshot 連結網址:https://www.openshot.org/zh-hant/ <a href="https://hackmd.io/_uploads/SysOECMCc.png"><span class="img80" >![](https://hackmd.io/_uploads/SysOECMCc.png)</span></a> ### 6. 影片編輯軟體:Shotcut 連結網址:https://www.openshot.org/zh-hant/ <a href="https://hackmd.io/_uploads/SJwa40MCq.png"><span class="img100" >![](https://hackmd.io/_uploads/SJwa40MCq.png)</span></a> ### 7. 影片轉檔工具:HandBrake 連結網址:https://handbrake.fr/ <a href="https://hackmd.io/_uploads/BJmfr0G05.png"><span class="img100" >![](https://hackmd.io/_uploads/BJmfr0G05.png)</span></a> ### 8. 影片轉檔工具:格式工廠 連結網址:http://www.pcfreetime.com/formatfactory/cn/index.html #### <span class="h4" >安裝程序</span> <a href="https://hackmd.io/_uploads/HyUOwRMR9.png"><span class="img100" >![](https://hackmd.io/_uploads/HyUOwRMR9.png)</span></a> #### <span class="h4" >畫面情形</span> <a href="https://hackmd.io/_uploads/H11edAzRq.png"><span class="img100" >![](https://hackmd.io/_uploads/H11edAzRq.png)</span></a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <style> /* 加入Logo */ .toc:{position: relative;} .toc:before{ content: url(https://zoego.tech/img/logo.svg); width:200px; position:fixed; top:0 ; left:0; } /* 調整 左側NAV */ .markdown-body { max-width: 900px !important;} .markdown-body h1,.markdown-body h2{border-bottom: none;} .ui-toc-dropdown .nav>li>a{ color: #000;} .ui-toc-dropdown .nav>.active:focus>a, .ui-toc-dropdown .nav>.active:hover>a, .ui-toc-dropdown .nav>.active>a{ color:#C00000;} /* h1~H5 修改 */ h1{ color:#4C4C6D; } .h2{ color:#52006A; background-color:#A2DBFA; line-height:1.8em;font-size:.9em;display:block; padding-left:10px;border-radius:5px;} h3{ color:#BF1363; } .h4{color:#000099; font-size:1.2em;} .h5{color:#7030A0; font-size:1.2em;} /* 講師資訊 美化 */ .alert-warning { border-width: 2px; width: 60%; margin: auto;} /* 指令 縮圖 ICON圖設定 */ .img3{ width:30px; display:inline-block;margin:0 5px;} .img4{ width:40px; display:inline-block;margin:0 5px;} .img5{ width:50px; display:inline-block;margin:0 5px;} .img6{ width:60px; display:inline-block;margin:0 5px;} /* 圖片尺寸 設定 */ .img20{ width:20%; margin:20px auto; display:block; text-align: center;} .img30{ width:30%; margin:20px auto; display:block; text-align: center;} .img40{ width:40%; margin:20px auto; display:block; text-align: center;} .img50{ width:50%; margin:20px auto; display:block; text-align: center;} .img60{ width:60%; margin:20px auto; display:block; text-align: center;} .img70{ width:70%; margin:20px auto; display:block; text-align: center;} .img80{ width:80%; margin:20px auto; display:block; text-align: center;} .img90{ width:90%; margin:20px auto; display:block; text-align: center;} .img100{ width:100%; margin:20px auto; display:block; } /* 連結URL 調整 */ .urlr{ text-align:right; line-height:1.5em;display:block;} .urll{ line-height:1.5em;display:block;} /* 提供講義標示頁碼 */ .page{display:flex; justify-content: right;} .page span{ background:#ffdd75;border:1px solid #d1a128;border-radius:5px; padding:5px;color:#000;text-align:right; float:right; } /* Slider 外掛 美化 */ iframe{ width:850px; height:478px; display:block; margin:auto; border-width: 0;border:2px solid #000;} /* 設定 pre 及 快速鍵 */ .markdown-body code { border: 1px solid #000; margin:0 5px; } .markdown-body pre>code { font-size: 1.2em; } .markdown-body pre { border: 1px solid #ab0505 !important; margin:10px 0; padding:5px 10px;} /* 快速鍵 > 語法於P中 */ .markdown-body p>code { color:#BF1363 !important; border:none; background:none} /* 表格 設定 */ .markdown-body table { width: fit-content; margin: auto; } .markdown-body table th, .markdown-body table td { border: 1px solid #7F7F7F; } .tableTitle{text-align:center; display:block;} .red{color:#BF1363;font-weight:bold;} .blue{color:#265F92;font-weight:bold;} .step{ padding-left:1.5em;color:blue;font-size:1.1em; } .textc{text-align:center; display:block;} .markdown-body p{ margin-bottom: 0;} .flex{ display:flex; border:2px solid #000; padding:20px; margin:20px; } .ex{color:#333399 ; font-size:1.2em; font-weight:bold; line-height:1em;} /* 置中、圓角框、項目 */ .title{ text-align:center; display:block;color:#766161;font-size:1.2em;font-weight:bold; border:1px solid;line-height:2em;border-radius:5px} .youtube:before{ content:""; display:block; position:absolute; top:50%; left:50%; z-index:1; transform:translate(-50%,-50%); width:80px; height:80px; background:url(https://zoego.tech/img/icon_youtube2.png); background-size: contain; border-radius: 10px; box-shadow: 1px 1px 3px #000; } .youtube{ border:1px solid #333; } </style>