檢視 RWD 的原始碼
←
RWD
前往：
導覽
、
搜尋
由於下列原因，您沒有權限進行 編輯此頁面 的動作：
您請求的操作只有這個群組的使用者能使用：
使用者
您可以檢視並複製此頁面的原始碼。
[[分類:平台]] ===各工作連結=== #FTP #[http://jendo.org/uploadFiles 網路檔案櫃] #[http://jendo.org/todo/todo.php TODO] ===讀我檔案 網頁 RWD 製作=== ====一、簡介 ==== 若你已有一份網站(以振鐸網站為例)，想要把它改成RWD 也就是在桌機、平板和手機的螢幕顯示不同的話，適用本方法。<br>以振鐸網站為例，其中重要的檔案及其功能如下所示：(若已熟悉可以直接跳至第二節) #簡單函數、變數介紹 ##html性質簡介<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• isset : 判斷變量有沒有被定義(非NULL)<br/>• explode : 分割字串(要分割的字符,字串)<br/>• strstr : 尋找(字串,字符)<br/>• echo : 輸出<br/>• SERVER : 開網站後即有的變數<br/>• Session : 登入網站直到退出前的狀態變數</div> ##css性質簡介<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• relative 相對位置<br/>• z-index 深度<br/>• list-style 圓點方塊等樣式...<br/>• hover 滑鼠滑到上面<br/>• width 寬度<br/>• color 顏色(#16進位) <br/>• text-align 對齊位置 #主要程式介紹 ##constant.php(整體網站)<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">這個php主要在架設所有網站都有、都需要的東西，比如說：<br/>• 引入時區、建立變數webContent<br/>• 定義CMS( 內容管理系統)，不同網站有不同的定義，目前本網站是along。<br/>• 定義常數(網站路徑 伺服器架站檔案夾路徑等等)<br/>• 分配DSN（資料來源名稱，可以讓網站連線到不同的資料庫，它會儲存連線的詳細資料，例如資料庫名稱、目錄、資料庫驅動程式、UserID、密碼等。）給不同的網站。<br/>• 引入wiki.php(翻譯wiki上的內容控制參數)，若內容不存在則引入GfWebContent (傳回 wiki 頁或 webContent 表中 $path 代表的某一筆內容)。</div> ##siteConstant(各自網站的定義)<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">這個php主要在定義個別網站特別的部分，像是：<br/>• 定義常數: SITE(網站區別),SLOGAN(口號),defaultWIKI(預設維基頁面), signintable . signingroup (可登入群體)<br/>• 定義變數: 資料池編碼、圖片存的路徑、預設寬度等等。</div> ##index.php (首頁)<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">這個php是寫出網站的主頁面<br/>• 引入constant.php(整體網站)、theme.php(主題)、DB.php(從資料庫中撈取資料)及html1 html2(若不存在)<br/>• 之後呼叫URI(統一資源標識符 類似網址)</div> ##menu.css (下拉方塊設定)<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">這個css主要是在寫下拉選單的主選單及子選單設定，像是：<br/>• 設定層級ul>li>dl>dt >dd a<br/>• 設定顯示為block 之後隱藏(display:none)<br/>• 顯示選單(若滑鼠滑入)、末尾加入底線。</div> ##style.css (整體設置)<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">這個css主要在寫網頁整體的風格，像是：<br/>• 寫出margin border padding，可參考chrome開發人員選項(寫法 1.一個數字 上下左右皆為此數字 2.四個數字 順序分別對應上、右、下、左(順時針) 3. 兩個數字 順序分別對應上下、左右)<br/>• 設定 圖、banner(橫幅)、選單 (background 圖片repeat 做出浮雕效果)、定義字體及美觀效果，(li,a內的是設定選單內容)</div> ##theme.php (html文檔撰寫)<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">這個php是寫網頁架構的<br/>• 引入SiteConstant(個別網頁特色)、DB.php(撈資料)、style.css(風格)、menu.css(選單)....<br/>• 連結DSN(資料來源名稱)、製作導行列(從DB資料庫中抓取導航列)<br/>• 中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。<br/>• 架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。</div> #RWD 螢幕大小設定<br>在製作RWD設計時，我們會需要分辨手機、平板和電腦，利用他們畫面長度的不同來區分不同的css檔案。而這些長度要怎麼看呢？<br>而在css設計時，我們會寫px,em...等等單位，這些單位又代表甚麼呢？<br>這些單位與性質無關，而與輸出媒體有關(螢幕、列印)，一般來說可參照以下的分類：<br/>螢幕： em,px,%<br/>紙張： em,cm,mm,in,pt,pc,%<br>以下簡單介紹這些單位： ##絕對單位(cm,mm,in,pt,pc,iOs pt ,dp)<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• 所謂的絕對單位就是實際上的長度單位，如果電腦解析度夠高就可以精確的表示出1公分或是1英吋。通常會用在影印紙張時，為求精確設定而存在。<br>可如右式互相換算：1in = 2.54cm= 25.4mm = 72pt = 6pc<br/>• 此外，APP開發時還有 iOS pt 與 dp (Android)，換算公式如右：1 iOS pt ≈ 1/163 inch, 1 dp ≈ 1/160 inch<br>在開發網頁或是APP時，裝置會自動根據用戶手機來呈現布局與圖檔大小。</div> ##相對單位(em,px,vw,vh,%) <br>因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。<br><b>註：最常用的為CSS px 及 vw,vh,%</b> ###em<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• 它僅僅表示字體大小，我們可以設定字體大小(font-size:20px)，這樣1em就是20px，這樣其他元素中都可使用em來表示長度及字體大小，這樣文字大小與其他長度、寬度就可以保持比例，(若是不寫會直接繼承父元素的font-size，也可以統一調整最外層字體大小來縮放。)<br>• 舉例來說： text-indent: 1.5em 以及 margin: .5em 在css中都很常見<br>也可以應用在padding,border等CSS元素中。</div> ###Pixel<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• 又稱px(為避免與CSS px混淆，以下都會稱Pixel)，是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。<br> 對於螢幕來說，這邊就可以引進PPI(Pixel per Inch)，也就是每英吋中有多少Pixel。<br>• 科技日新月異，手機的PPI在近十年突破性的發展，隨便都破400PPI (有的手機甚至是1284x2778)，這樣會影響RWD的發展，所以就出現了專門為css設計的px單位。</div> ###CSS px<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• 其與字體無關，也與絕對長度無關。其被定義為小但仍可見，他並不是不變的，而是會隨著裝置與使用方法而變。<br>他與螢幕像素之間有個倍率關係，而使得手機的px可以落在300~400左右。目前我們查到的裝置螢幕寬度大部分都是換算後的px結果。<br>• 若真的要與絕對長度對比，有個簡單的參考定義如右：筆電:1 px ≈ 1/125 inch 智慧型手機/平板:1 px ≈ 1/160 inch</div> ###RWD常用<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• vh & vw，分別代表視窗的100分之1的高度與寬度；<br>• %則是相對於元件的比例。三者都常被應用於RWD網頁中。<br>• <b>在RWD中需盡量把px改成%,vw,vh，在縮放比例時才能適應螢幕寬度。</b></div> #滑鼠事件<br> ##在CSS中，想要寫出互動狀態或是特別的情況就會需要偽類，可以偵測瀏覽歷史、內容狀態、滑鼠位置等等。<br/>常見的CSS偽類如下：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"> :active 滑鼠按下的樣式<br/> :focus 鍵盤聚焦的樣式<br/> :hover 滑鼠滑過的樣式<br/> :link 還沒被訪問的樣式<br/> :visited 被訪問過的樣式<br/> :disabled 無法選取的狀態<br><br>比如說html 產生一個元件header<br>如果想要寫他的CSS特性和滑鼠滑過的特性，程式碼就會如下：<br>header{...} /*CSS特性*/<br>header :hover{...}/*滑鼠滑過特性*/<br></div> ##在JAVA中，如果想要寫跟滑鼠有關的，通常會寫出Mouse Event相關的程式碼。<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">click event 左鍵點擊時觸發，(類似 mousedown+mouseup) <br/>mousedown event 任一滑鼠按鍵按下時觸發，相當於手機上的 touchstart。<br/>mouseup event 任一滑鼠按鍵放開時觸發，相當於手機上的 touchend。<br/>contextmenu event 右鍵點擊觸發，常用在偵測右鍵點擊，可以用 event.preventDefault() 防止目錄出現。<br/>dbclick event 短時間內雙擊左鍵觸發。<br/>mousemove event 滑鼠移動時觸發，通常在需要用到時才綁定，避免不斷觸發。<br/>mouseenter event 滑鼠進入元素邊界時觸發。<br/>mouseleave event 滑鼠完全離開元素時觸發。<br/>mouseover event 滑鼠經過不同元素時觸發。<br/>mouseout event 滑鼠離開元素時觸發。</div> ##如果想要用滑鼠拖曳物件，可以使用Drag ###在被拖動目標上觸發的事件：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">• ondragstart:在使用者開始拖動元素或選擇的文字時觸發(為了讓元素(非連結或圖片)可拖動，需要使用draggable屬性，連結和圖片預設是可拖動的，不需要 draggable 屬性)<br/>• ondrag:元素正在拖動時觸發<br/>• ondragend:使用者完成元素拖動後觸發</div> ###在其他物件容器中觸發的事件：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">•ondragenter:當被滑鼠拖動的物件進入其容器範圍內時觸發此事件<br/>• :當某被拖動的物件在另一物件容器範圍內拖動時觸發此事件<br/>• ondragleave:當被滑鼠拖動的物件離開其容器範圍內時觸發此事件<br/>• ondrop:在一個拖動過程中，釋放滑鼠鍵時觸發此事件</div> ##在手機中，則有touch event可以選擇<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">•touchstart 手指放上螢幕<br/>• touchmove 手指在螢幕上移動 (optional，若手指完全沒有位移則不會觸發)<br/>• touchend 手指抬離螢幕</div> ##重點提醒 ##*click event 在電腦和手機上都能觸發 ##*點擊事件的觸發順序為 mousedown > mouseup > click ##*mouseenter 和 mouseleave 的觸發行為跟 CSS 的 hover 非常相似，mouseenter 在滑鼠完全離開元素 (mouseleave) 前不會再次觸發。 ##*<b>最後建議，手機或平板上最好是用click比較恰當，因為沒有滑鼠，須盡量避免CSS的寫法。</b> ====二、方法 ==== 本方法要更改的部分有html部份以及css部分，雖有java碼但包含在html中。 以振鐸網站為例，要更改的只有theme.php 及 style.css。 以下將簡介各個新增或更動之功能與方法放置分別之頁面。 #[[RWD/style|style.css]] #[[RWD/theme|theme.php]] ====三、參考資料==== #HTML 字元符號：https://www.rapidtables.com/web/html/html-codes.html #RWD螢幕大小參考資料： #*https://www.w3.org/Style/Examples/007/units.zh_HK.html #*https://editor.leonh.space/2021/rediscover-pixel-dpi-ppi-and-pixel-density/ #事件參考： ##滑鼠 ##*CSS 偽類 https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes ##*CSS https://www.casper.tw/css/2016/12/06/css-status/ ##*JAVA https://medium.com/@shizukuichi/mouse-event-%E5%B0%8F%E7%AD%86%E8%A8%98-feb5dd866b0 ##手機、平板點擊、拖曳 ##*touch & mouse event https://medium.com/frochu/touch-and-mouse-together-76fb69114c04 ##*touch event https://developer.mozilla.org/zh-TW/docs/Web/API/Touch_events ##*平台可支援的事件整理 https://www.quirksmode.org/mobile/tableTouch.html ##*拖曳及事件範例 https://iter01.com/577194.html ##*touch&drag event https://tate-young.github.io/2018/03/28/js-touch-drag.html #漢堡選單：https://sinlin0908.github.io/2020/02/15/web_practice/hamburger-menu/ #下拉選單參考網頁 #*https://cling.tw/web01/multi-ul-li/multi-ul-li.html #*https://bootstrap5.hexschool.com/docs/5.0/components/dropdowns/ #字級調整工具箱 #*https://www.leosem.com/big5/network_293495 #*https://www.yisu.com/ask/5274.html #*https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/47929/ #JSFIDDLE 好用的HTML CSS JAVASCRIPT 測試網站 https://jsfiddle.net/
返回「
RWD
」頁面
導覽選單
個人工具
登入
命名空間
頁面
討論
變體
檢視
閱讀
檢視原始碼
檢視歷史
更多
搜尋
導覽
首頁
近期變更
隨機頁面
說明
工具
連結至此的頁面
相關變更
特殊頁面
頁面資訊
