多萤幕网站最佳编辑方式说明.PDFVIP

多螢幕網站最佳編輯方式說明 各主題快速連結 1.最佳文字編輯方式 ︱2.最佳圖片編輯方式 ︱3.最佳表格編輯方式 4.最佳影片、表單…等嵌入設定方式 ︱5.最佳超連結設定方式 6.最佳頁面內容編輯方式 ︱7.快速確認手機瀏覽畫面方式 簡介 以前使用電腦版網站時，您在後台編輯內容都是以「方便客戶使用電腦瀏覽」的方式來編輯。 而現在換成了多螢幕網站，網站系統將會根據瀏覽者的載具大小，自動變化成最合適的瀏覽大小，您 在後台編輯內容時，需同時考量到「方便客戶使用電腦、平板、手機…等方式瀏覽」，因此在頁面的 編輯上有些技巧，以下將會逐一說明。 溫馨小提醒! 請養成好習慣 ，每次新增/修改/刪除，凡只要有做任何的修改，請記得回到官網前台， 看看所修改的地方是不是你要的喔! 回頂端↑ 一、最佳文字編輯方式 請善用編輯器的工具列來進行文字編輯 (如下圖紅框處) 1. 建議文字大小 「主標題」約20~22 「次標題」約16~18 「內文」約14~16 請依照該段落字數的多寡來決定合適的文字大小! ※切勿將文字放太大! 會造成手機畫面瀏覽不易! 2. 文字顏色 一般來說為黑色、深灰色(也就是預設的顏色) ，若為文字重點，則可換個顏色來凸顯，像是換成紅色 ※建議一個頁面底下，文字顏色最多不超過3 種 3. 文字字體 建議使用預設字體即可! 4. 文字對齊 請善用工具列的「置左、置中、置右、左右」對齊功能，以及「增加、減少」縮排功能來達到文字、 段落對齊。 ※切勿使用多個空白鍵或是斷句來對齊，因為每位瀏覽者的螢幕大小皆不同，會造成嚴重瀏覽障礙! 5. 其他功能 像是粗體、斜體、底線...等，通常會用在文字重點來凸顯，但不會整段文字都使用。 回頂端↑ 二、最佳圖片編輯方式 1. 建議圖片大小 寬度：730 像素以內 高度：建議不要超過400 像素 (若太高在手機上瀏覽不易) ※提醒您! 若您上傳到後台伺服器端的圖片，寬度超過1600 像素或是高度超過1200 像素，則該圖 片會自動被縮小。 2. 最佳圖片設定方式 圖片寬度：最大不超過730 像素 (730 像素將剛好滿版) 圖片高度：空白 (讓系統自動縮放) ※若您的圖片原始寬度超過730 像素，建議您可自行將寬度改小即可! ※在設定高度為空白時，須先將右邊的「鎖頭圖示」打開 範例： (圖片設定順序：1.寬度調整 2.鎖頭打開 3.高度數值刪除留空) 回頂端↑ 三、最佳表格編輯方式 使用表格功能時需注意 1. 表格的欄數建議不超過3 欄 (若太多欄在手機上瀏覽不易) 2. 表格內的字數建議不要太多 3. 表格內建議只有純文字 (若加入圖片、影片…等，要使畫面容易瀏覽 ，在編輯上會較困難) 4. 表格寬度右方有下拉選單，請設定為百分比 ，寬度數值介於0~100 之間 (設定100 表示滿版) 設定範例： 前台呈現範例： 回頂端↑ 四、最佳影片、表單…等嵌入設定方式 當您從youtube 想要將影片放到官網，或是有使用Google 表單、地圖…等網路資源要放入官網的頁 面時，會使用到嵌入的程式語法，若要讓不論是大螢幕或小螢幕都容易瀏覽，則需稍微修改一下語法 內容就可以囉! 範例1 ： 影片嵌入原語法 iframe width=560 height=315 src=/embed/Et95U84CCeQ frameborder=0 allowfullscreen/iframe 修改後 (只需改紅字片段即可!) iframe style=width:100% height=315 src=/embed/Et95U84CCeQ frameborder=0 allowfullscreen/iframe 範例2 ： Google 表單嵌入原語法 iframe framebo