"RWD" 修訂間的差異

出自 全民科學平台
前往： 導覽、 搜尋
(→‎三、參考資料)
(→‎一、簡介)
行 51： 行 51：
 
##*中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。
 
##*中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。
 
##*架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。
 
##*架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。
−
#RWD 螢幕大小設定(施工中)<br>在製作RWD設計時，我們會需要分辨手機、平板和電腦，利用他們畫面長度的不同來區分不同的css檔案。而實際需要怎麼區分呢？<br>而在css設計時，我們會寫px,em...等等單位，這些單位又代表甚麼呢？以下簡單介紹這些單位：<br>
+
#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)
−
##*一般來說可參照以下的分類：
+
##*所謂的絕對單位就是實際上的長度單位，如果電腦解析度夠高就可以精確的表示出1公分或是1英吋。通常會用在影印紙張時，為求精確設定而存在。<br>可如右式互相換算：1in = 2.54cm= 25.4mm = 72pt = 6pc
−
##*螢幕：em,px,%
+
##*此外，APP開發時還有 iOS pt 與 dp (Android)，換算公式如右：1 iOS pt ≈ 1/163 inch, 1 dp ≈ 1/160 inch<br>在開發網頁或是APP時，裝置會自動根據用戶手機來呈現布局與圖檔大小。
−
##*紙張：em,cm,mm,in,pt,pc,%
+
##相對單位(em,px,vw,vh,%)<br>因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。
−
##絕對單位可如右式換算：1in = 2.54cm= 25.4mm = 72pt = 6pc
+
###em<br>它僅僅表示字體大小，在2英吋的元素中，1em就是2英吋，這樣文字大小就可以保持比例。<br>而 text-indent: 1.5em 以及 margin: 1em 在css中都常見
−
##*所謂的絕對單位(cm,mm,in,pt,pc)就是實際上的單位，如果電腦解析度夠高就可以精確的表示出1公分或是1英吋。通常會用在影印紙張時，為求精確設定而存在。
+
###Pixel<br>又稱px(為避免與CSS px混淆，以下都會稱Pixel)，是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。<br>對於螢幕來說，這邊就可以引進PPI(Pixel per Inch)，也就是每英吋中有多少Pixel。<br>科技日新月異，手機的PPI在近十年突破性的發展，隨便都破400PPI (有的手機甚至是1284x2778)，這樣會影響RWD的發展，所以就出現了專門為css設計的px單位。
−
##*因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。
+
###CSS px<br>其與字體無關，也與絕對長度無關。其被定義為小但仍可見，他並不是不變的，而是會隨著裝置與使用方法而變。<br>他與螢幕像素之間有個倍率關係，而使得手機的px可以落在300~400左右。目前我們查到的裝置螢幕寬度大部分都是換算後的px結果。<br>若真的要與絕對長度對比，有個簡單的參考定義如右：筆電:1 px ≈ 1/125 inch 智慧型手機/平板:1 px ≈ 1/160 inch
−
##*像是相對單位em，它僅僅表示字體大小，在2英吋的元素中，1em就是2英吋，這樣文字大小就可以保持比例。
+
###RWD常用<br>vw & vh，分別代表視窗的100分之1的高度與寬度；%則是相對於元件的比例。三者都常被應用於RWD網頁中。
−
##*舉例：text-indent: 1.5em以及margin: 1em在css中都常見
+
#滑鼠事件<br>
−
##原本px(為避免混淆，以下都會稱Pixel)是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。
+
##在CSS中，想要寫出互動狀態或是特別的情況就會需要偽類，可以偵測瀏覽歷史、內容狀態、滑鼠位置等等。常見的CSS偽類如下：
−
##*這邊就可以引進PPI(Pixel per Inch)，也就是每英吋中有多少像素點。
 
−
##*不過科技日新月異，手機的PPI在近十年突破性的發展，隨便都破400PPI (有的手機甚至是1284x2778)，這樣會影響RWD的發展，所以就出現了專門為css設計的px單位。
 
−
##*px與字體無關，也與絕對長度無關。其被定義為小但仍可見，他並不是不變的距離，而是會隨著裝置與使用方法而變。
 
−
##*他與螢幕像素之間有個倍率關係，而使得手機的px可以落在3,400左右。目前我們查到的裝置螢幕寬度大部分都是換算後的px結果。
 
−
##*若真的要與絕對長度對比，有個簡單的參考定義如右：筆電:1 px ≈ 1/125 inch 智慧型手機/平板:1 px ≈ 1/160 inch
 
−
##另外還有新的單位：vw & vh，分別代表視窗的100分之1的高度與寬度；%則是相對於元件的比例。三者都常被應用於RWD網頁中。
 
−
##此外，APP開發時還有 iOS pt 與 dp (Android)，換算公式如右：1 iOS pt ≈ 1/163 inch  1 dp ≈ 1/160 inch
 
−
##*所以在開發網頁或是APP時，只要確定每個倍率下都不會跑版，裝置就會自動根據用戶手機來呈現布局與圖檔大小。
 
−
#滑鼠事件(施工中)<br>在CSS中，想要寫出互動狀態或是特別的情況就會需要偽類，可以偵測瀏覽歷史、內容狀態、滑鼠位置等等。
 
−
##常見的CSS偽類如下：
 
 
##* &#58;active 滑鼠按下的樣式
 
##* &#58;active 滑鼠按下的樣式
 
##* &#58;focus 鍵盤聚焦的樣式
 
##* &#58;focus 鍵盤聚焦的樣式
行 77： 行 67：
 
##* &#58;link 還沒被訪問的樣式
 
##* &#58;link 還沒被訪問的樣式
 
##* &#58;visited 被訪問過的樣式
 
##* &#58;visited 被訪問過的樣式
−
##* &#58;disabled 無法選取的狀態
+
##* &#58;disabled 無法選取的狀態<br>比如說html 產生一個元件header<br>如果想要寫他的CSS特性和滑鼠滑過的特性，程式碼就會如下：<br>header{...} /*CSS特性*/<br>header :hover{...}/*滑鼠滑過特性*/<br>
−
##*比如說html 產生一個元件header<br>我想要寫他的CSS特性和滑鼠滑過的特性，程式碼就會如下：<br>header{...}<br>header :hover{...}<br>
 
 
##在JAVA中，如果想要寫跟滑鼠有關的，通常會寫出Mouse Event相關的程式碼。
 
##在JAVA中，如果想要寫跟滑鼠有關的，通常會寫出Mouse Event相關的程式碼。
−
##*常用事件介紹
+
##*click event       左鍵點擊時觸發，(類似 mousedown+mouseup)  
−
##*click event     左鍵點擊時觸發，(類似 mousedown+mouseup)  
+
##*mousedown event   任一滑鼠按鍵按下時觸發，相當於手機上的 touchstart。
−
##*mousedown event 任一滑鼠按鍵按下時觸發，相當於手機上的 touchstart。
+
##*mouseup event     任一滑鼠按鍵放開時觸發，相當於手機上的 touchend。
−
##*mouseup event   任一滑鼠按鍵放開時觸發，相當於手機上的 touchend。
 
 
##*contextmenu event  右鍵點擊觸發，常用在偵測右鍵點擊，可以用 event.preventDefault() 防止目錄出現。
 
##*contextmenu event  右鍵點擊觸發，常用在偵測右鍵點擊，可以用 event.preventDefault() 防止目錄出現。
−
##*dbclick event   短時間內雙擊左鍵觸發。
+
##*dbclick event     短時間內雙擊左鍵觸發。
−
##*mousemove event 滑鼠移動時觸發，通常在需要用到時才綁定，避免不斷觸發。
+
##*mousemove event   滑鼠移動時觸發，通常在需要用到時才綁定，避免不斷觸發。
−
##*mouseenter event滑鼠進入元素邊界時觸發。
+
##*mouseenter event  滑鼠進入元素邊界時觸發。
−
##*mouseleave event滑鼠完全離開元素時觸發。
+
##*mouseleave event  滑鼠完全離開元素時觸發。
−
##*mouseover event 滑鼠經過不同元素時觸發。
+
##*mouseover event   滑鼠經過不同元素時觸發。
−
##*mouseout event 滑鼠離開元素時觸發。
+
##*mouseout event     滑鼠離開元素時觸發。
 
##重點提醒
 
##重點提醒
 
##*click event 在電腦和手機上都能觸發
 
##*click event 在電腦和手機上都能觸發
 
##*點擊事件的觸發順序為 mousedown > mouseup > click
 
##*點擊事件的觸發順序為 mousedown > mouseup > click
 
##*mouseenter 和 mouseleave 的觸發行為跟 CSS 的 hover 非常相似，mouseenter 在滑鼠完全離開元素 (mouseleave) 前不會再次觸發。
 
##*mouseenter 和 mouseleave 的觸發行為跟 CSS 的 hover 非常相似，mouseenter 在滑鼠完全離開元素 (mouseleave) 前不會再次觸發。
−
##*綁定 mouseover 或 mouseout event handler 後只要滑鼠經過任一子元素都會吃到 bubble 上來的事件。
 
 
##*最後建議，手機或平板上最好是用click比較恰當，因為沒有滑鼠，須盡量避免CSS的寫法。
 
##*最後建議，手機或平板上最好是用click比較恰當，因為沒有滑鼠，須盡量避免CSS的寫法。
  

於 2022年2月18日 (五) 03:09 的修訂

各工作連結

  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公分比例佔很大，所以我們會需要相對單位。
      1. em
        它僅僅表示字體大小，在2英吋的元素中，1em就是2英吋，這樣文字大小就可以保持比例。
        而 text-indent: 1.5em 以及 margin: 1em 在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常用
        vw & vh，分別代表視窗的100分之1的高度與寬度；%則是相對於元件的比例。三者都常被應用於RWD網頁中。
  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. 重點提醒
      • 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. 滑鼠事件參考：
  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=6432"