"RWD" 修訂間的差異

出自 全民科學平台
前往： 導覽、 搜尋
(→‎一、簡介)
(→‎一、簡介)
行 26： 行 26：
 
##*color      顏色(#16進位)  
 
##*color      顏色(#16進位)  
 
##*text-align 對齊位置
 
##*text-align 對齊位置
−
#constant.php(整體網站)<br>這個php主要在架設所有網站都有、都需要的東西，比如說：
+
#主要程式介紹
−
#*引入時區、建立變數webContent
+
##constant.php(整體網站)<br>這個php主要在架設所有網站都有、都需要的東西，比如說：
−
#*定義CMS( 內容管理系統)，不同網站有不同的定義，目前本網站是along。
+
##*引入時區、建立變數webContent
−
#*定義常數(網站路徑 伺服器架站檔案夾路徑等等)、
+
##*定義CMS( 內容管理系統)，不同網站有不同的定義，目前本網站是along。
−
#*分配DSN（資料來源名稱，可以讓網站連線到不同的資料庫，它會儲存連線的詳細資料，例如資料庫名稱、目錄、資料庫驅動程式、UserID、密碼等。）給不同的網站。
+
##*定義常數(網站路徑 伺服器架站檔案夾路徑等等)、
−
#*引入wiki.php(翻譯wiki上的內容控制參數)，若內容不存在則引入GfWebContent (傳回 wiki 頁或 webContent 表中 $path 代表的某一筆內容)。
+
##*分配DSN（資料來源名稱，可以讓網站連線到不同的資料庫，它會儲存連線的詳細資料，例如資料庫名稱、目錄、資料庫驅動程式、UserID、密碼等。）給不同的網站。
−
#siteConstant(各自網站的定義)<br>這個php主要在定義個別網站特別的部分，像是：
+
##*引入wiki.php(翻譯wiki上的內容控制參數)，若內容不存在則引入GfWebContent (傳回 wiki 頁或 webContent 表中 $path 代表的某一筆內容)。
−
#*定義常數: SITE(網站區別),SLOGAN(口號),defaultWIKI(預設維基頁面), signintable . signingroup (可登入群體)
+
##siteConstant(各自網站的定義)<br>這個php主要在定義個別網站特別的部分，像是：
−
#*定義變數: 資料池編碼、圖片存的路徑、預設寬度等等。
+
##*定義常數: SITE(網站區別),SLOGAN(口號),defaultWIKI(預設維基頁面), signintable . signingroup (可登入群體)
−
#index.php (首頁)<br>這個php是寫出網站的主頁面
+
##*定義變數: 資料池編碼、圖片存的路徑、預設寬度等等。
−
#*引入constant.php(整體網站)、theme.php(主題)、DB.php(從資料庫中撈取資料)及html1 html2(若不存在)
+
##index.php (首頁)<br>這個php是寫出網站的主頁面
−
#*之後呼叫URI(統一資源標識符 類似網址)
+
##*引入constant.php(整體網站)、theme.php(主題)、DB.php(從資料庫中撈取資料)及html1 html2(若不存在)
−
#menu.css (下拉方塊設定)<br>這個css主要是在寫下拉選單的主選單及子選單設定，像是：
+
##*之後呼叫URI(統一資源標識符 類似網址)
−
#*設定層級ul>li>dl>dt >dd a
+
##menu.css (下拉方塊設定)<br>這個css主要是在寫下拉選單的主選單及子選單設定，像是：
−
#*設定顯示為block 之後隱藏(display:none)
+
##*設定層級ul>li>dl>dt >dd a
−
#*顯示選單(若滑鼠滑入)、末尾加入底線。
+
##*設定顯示為block 之後隱藏(display:none)
−
#style.css (整體設置)<br>這個css主要在寫網頁整體的風格，像是：
+
##*顯示選單(若滑鼠滑入)、末尾加入底線。
−
#*寫出margin border padding，可參考chrome開發人員選項(寫法 1.一個數字 上下左右皆為此數字  2.四個數字 順序分別對應上、右、下、左(順時針) 3. 兩個數字 順序分別對應上下、左右)
+
##style.css (整體設置)<br>這個css主要在寫網頁整體的風格，像是：
−
#*設定 圖、banner(橫幅)、選單 (background 圖片repeat 做出浮雕效果)、定義字體及美觀效果，(li,a內的是設定選單內容)
+
##*寫出margin border padding，可參考chrome開發人員選項(寫法 1.一個數字 上下左右皆為此數字  2.四個數字 順序分別對應上、右、下、左(順時針) 3. 兩個數字 順序分別對應上下、左右)
−
#theme.php (html文檔撰寫)<br>這個php是寫網頁架構的
+
##*設定 圖、banner(橫幅)、選單 (background 圖片repeat 做出浮雕效果)、定義字體及美觀效果，(li,a內的是設定選單內容)
−
#*引入SiteConstant(個別網頁特色)、DB.php(撈資料)、style.css(風格)、menu.css(選單)....
+
##theme.php (html文檔撰寫)<br>這個php是寫網頁架構的
−
#*連結DSN(資料來源名稱)、製作導行列(從DB資料庫中抓取導航列)
+
##*引入SiteConstant(個別網頁特色)、DB.php(撈資料)、style.css(風格)、menu.css(選單)....
−
#*中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。
+
##*連結DSN(資料來源名稱)、製作導行列(從DB資料庫中抓取導航列)
−
#*架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。
+
##*中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。
 +
##*架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。
  
 
====二、方法 ====
 
====二、方法 ====

於 2022年1月19日 (三) 17:37 的修訂

各工作連結

  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做結尾。

二、方法

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

  1. style.css
  2. theme.php

三、參考資料

  1. 漢堡選單：https://sinlin0908.github.io/2020/02/15/web_practice/hamburger-menu/
  2. 下拉選單參考網頁
  3. 字級調整工具箱
  4. JSFIDDLE 好用的HTML CSS JAVASCRIPT 測試網站 https://jsfiddle.net/
取自 "http://science4everyone.net/MediaWiki/index.php?title=RWD&oldid=6407"