RWD

出自 全民科學平台
前往： 導覽、 搜尋

各工作連結

  1. FTP
  2. 網路檔案櫃
  3. TODO


讀我檔案 網頁 RWD 製作

一、簡介

若你已有一份網站(以振鐸網站為例)，想要把它改成RWD 也就是在桌機、平板和手機的螢幕顯示不同的話，適用本方法。
以振鐸網站為例，其中重要的檔案及其功能如下所示：(若已熟悉可以直接跳至第二節)

  1. 簡單函數、變數介紹
    1. html性質簡介
      • isset  : 判斷變量有沒有被定義(非NULL)
      • explode  : 分割字串(要分割的字符,字串)
      • strstr  : 尋找(字串,字符)
      • echo  : 輸出
      • SERVER  : 開網站後即有的變數
      • Session  : 登入網站直到退出前的狀態變數
    2. css性質簡介
      • relative 相對位置
      • z-index 深度
      • list-style 圓點方塊等樣式...
      • hover 滑鼠滑到上面
      • width 寬度
      • color 顏色(#16進位)
      • text-align 對齊位置
  2. 主要程式介紹
    1. constant.php(整體網站)
      這個php主要在架設所有網站都有、都需要的東西，比如說：
      • 引入時區、建立變數webContent
      • 定義CMS( 內容管理系統)，不同網站有不同的定義，目前本網站是along。
      • 定義常數(網站路徑 伺服器架站檔案夾路徑等等)
      • 分配DSN（資料來源名稱，可以讓網站連線到不同的資料庫，它會儲存連線的詳細資料，例如資料庫名稱、目錄、資料庫驅動程式、UserID、密碼等。）給不同的網站。
      • 引入wiki.php(翻譯wiki上的內容控制參數)，若內容不存在則引入GfWebContent (傳回 wiki 頁或 webContent 表中 $path 代表的某一筆內容)。
    2. siteConstant(各自網站的定義)
      這個php主要在定義個別網站特別的部分，像是：
      • 定義常數: SITE(網站區別),SLOGAN(口號),defaultWIKI(預設維基頁面), signintable . signingroup (可登入群體)
      • 定義變數: 資料池編碼、圖片存的路徑、預設寬度等等。
    3. index.php (首頁)
      這個php是寫出網站的主頁面
      • 引入constant.php(整體網站)、theme.php(主題)、DB.php(從資料庫中撈取資料)及html1 html2(若不存在)
      • 之後呼叫URI(統一資源標識符 類似網址)
    4. menu.css (下拉方塊設定)
      這個css主要是在寫下拉選單的主選單及子選單設定，像是：
      • 設定層級ul>li>dl>dt >dd a
      • 設定顯示為block 之後隱藏(display:none)
      • 顯示選單(若滑鼠滑入)、末尾加入底線。
    5. style.css (整體設置)
      這個css主要在寫網頁整體的風格，像是：
      • 寫出margin border padding，可參考chrome開發人員選項(寫法 1.一個數字 上下左右皆為此數字 2.四個數字 順序分別對應上、右、下、左(順時針) 3. 兩個數字 順序分別對應上下、左右)
      • 設定 圖、banner(橫幅)、選單 (background 圖片repeat 做出浮雕效果)、定義字體及美觀效果，(li,a內的是設定選單內容)
    6. theme.php (html文檔撰寫)
      這個php是寫網頁架構的
      • 引入SiteConstant(個別網頁特色)、DB.php(撈資料)、style.css(風格)、menu.css(選單)....
      • 連結DSN(資料來源名稱)、製作導行列(從DB資料庫中抓取導航列)
      • 中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。
      • 架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。
  3. RWD 螢幕大小設定
    在製作RWD設計時，我們會需要分辨手機、平板和電腦，利用他們畫面長度的不同來區分不同的css檔案。而這些長度要怎麼看呢？
    而在css設計時，我們會寫px,em...等等單位，這些單位又代表甚麼呢？
    這些單位與性質無關，而與輸出媒體有關(螢幕、列印)，一般來說可參照以下的分類：
    螢幕： em,px,%
    紙張： em,cm,mm,in,pt,pc,%
    以下簡單介紹這些單位：
    1. 絕對單位(cm,mm,in,pt,pc,iOs pt ,dp)
      • 所謂的絕對單位就是實際上的長度單位，如果電腦解析度夠高就可以精確的表示出1公分或是1英吋。通常會用在影印紙張時，為求精確設定而存在。
      可如右式互相換算：1in = 2.54cm= 25.4mm = 72pt = 6pc
      • 此外，APP開發時還有 iOS pt 與 dp (Android)，換算公式如右：1 iOS pt ≈ 1/163 inch, 1 dp ≈ 1/160 inch
      在開發網頁或是APP時，裝置會自動根據用戶手機來呈現布局與圖檔大小。
    2. 相對單位(em,px,vw,vh,%)
      因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。
      註：最常用的為CSS px 及 vw,vh,%
      1. em
        • 它僅僅表示字體大小，我們可以設定字體大小(font-size:20px)，這樣1em就是20px，這樣其他元素中都可使用em來表示長度及字體大小，這樣文字大小與其他長度、寬度就可以保持比例，(若是不寫會直接繼承父元素的font-size，也可以統一調整最外層字體大小來縮放。)
        • 舉例來說： text-indent: 1.5em 以及 margin: .5em 在css中都很常見
        也可以應用在padding,border等CSS元素中。
      2. Pixel
        • 又稱px(為避免與CSS px混淆，以下都會稱Pixel)，是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。
        對於螢幕來說，這邊就可以引進PPI(Pixel per Inch)，也就是每英吋中有多少Pixel。
        • 科技日新月異，手機的PPI在近十年突破性的發展，隨便都破400PPI (有的手機甚至是1284x2778)，這樣會影響RWD的發展，所以就出現了專門為css設計的px單位。
      3. CSS px
        • 其與字體無關，也與絕對長度無關。其被定義為小但仍可見，他並不是不變的，而是會隨著裝置與使用方法而變。
        他與螢幕像素之間有個倍率關係，而使得手機的px可以落在300~400左右。目前我們查到的裝置螢幕寬度大部分都是換算後的px結果。
        • 若真的要與絕對長度對比，有個簡單的參考定義如右：筆電:1 px ≈ 1/125 inch 智慧型手機/平板:1 px ≈ 1/160 inch
      4. RWD常用
        • vh & vw，分別代表視窗的100分之1的高度與寬度；
        • %則是相對於元件的比例。三者都常被應用於RWD網頁中。
        • 在RWD中需盡量把px改成%,vw,vh，在縮放比例時才能適應螢幕寬度。
  4. 滑鼠事件
    1. 在CSS中，想要寫出互動狀態或是特別的情況就會需要偽類，可以偵測瀏覽歷史、內容狀態、滑鼠位置等等。
      常見的CSS偽類如下：
      :active 滑鼠按下的樣式
      :focus 鍵盤聚焦的樣式
      :hover 滑鼠滑過的樣式
      :link 還沒被訪問的樣式
      :visited 被訪問過的樣式
      :disabled 無法選取的狀態

      比如說html 產生一個元件header
      如果想要寫他的CSS特性和滑鼠滑過的特性，程式碼就會如下：
      header{...} /*CSS特性*/
      header :hover{...}/*滑鼠滑過特性*/
    2. 在JAVA中，如果想要寫跟滑鼠有關的，通常會寫出Mouse Event相關的程式碼。
      click event 左鍵點擊時觸發，(類似 mousedown+mouseup)
      mousedown event 任一滑鼠按鍵按下時觸發，相當於手機上的 touchstart。
      mouseup event 任一滑鼠按鍵放開時觸發，相當於手機上的 touchend。
      contextmenu event 右鍵點擊觸發，常用在偵測右鍵點擊，可以用 event.preventDefault() 防止目錄出現。
      dbclick event 短時間內雙擊左鍵觸發。
      mousemove event 滑鼠移動時觸發，通常在需要用到時才綁定，避免不斷觸發。
      mouseenter event 滑鼠進入元素邊界時觸發。
      mouseleave event 滑鼠完全離開元素時觸發。
      mouseover event 滑鼠經過不同元素時觸發。
      mouseout event 滑鼠離開元素時觸發。
    3. 如果想要用滑鼠拖曳物件，可以使用Drag
      1. 在被拖動目標上觸發的事件：
        • ondragstart:在使用者開始拖動元素或選擇的文字時觸發(為了讓元素(非連結或圖片)可拖動，需要使用draggable屬性，連結和圖片預設是可拖動的，不需要 draggable 屬性)
        • ondrag:元素正在拖動時觸發
        • ondragend:使用者完成元素拖動後觸發
      2. 在其他物件容器中觸發的事件：
        •ondragenter:當被滑鼠拖動的物件進入其容器範圍內時觸發此事件
        • :當某被拖動的物件在另一物件容器範圍內拖動時觸發此事件
        • ondragleave:當被滑鼠拖動的物件離開其容器範圍內時觸發此事件
        • ondrop:在一個拖動過程中，釋放滑鼠鍵時觸發此事件
    4. 在手機中，則有touch event可以選擇
      •touchstart 手指放上螢幕
      • touchmove 手指在螢幕上移動 (optional，若手指完全沒有位移則不會觸發)
      • touchend 手指抬離螢幕
    5. 重點提醒
      • click event 在電腦和手機上都能觸發
      • 點擊事件的觸發順序為 mousedown > mouseup > click
      • mouseenter 和 mouseleave 的觸發行為跟 CSS 的 hover 非常相似，mouseenter 在滑鼠完全離開元素 (mouseleave) 前不會再次觸發。
      • 最後建議，手機或平板上最好是用click比較恰當，因為沒有滑鼠，須盡量避免CSS的寫法。

二、方法

本方法要更改的部分有html部份以及css部分，雖有java碼但包含在html中。 以振鐸網站為例，要更改的只有theme.php 及 style.css。 以下將簡介各個新增或更動之功能與方法放置分別之頁面。

  1. style.css
  2. theme.php

三、參考資料

  1. HTML 字元符號：https://www.rapidtables.com/web/html/html-codes.html
  2. RWD螢幕大小參考資料：
  3. 事件參考：
    1. 滑鼠
    2. 手機、平板點擊、拖曳
  4. 漢堡選單：https://sinlin0908.github.io/2020/02/15/web_practice/hamburger-menu/
  5. 下拉選單參考網頁
  6. 字級調整工具箱
  7. JSFIDDLE 好用的HTML CSS JAVASCRIPT 測試網站 https://jsfiddle.net/
取自 "http://science4everyone.net/MediaWiki/index.php?title=RWD&oldid=6570"