"RWD" 修訂間的差異

出自 全民科學平台
前往： 導覽、 搜尋
(→‎各工作連結)
(→‎各工作連結)
行 4： 行 4：
 
#[http://jendo.org/uploadFiles 網路檔案櫃]
 
#[http://jendo.org/uploadFiles 網路檔案櫃]
 
#[http://jendo.org/todo/todo.php TODO]
 
#[http://jendo.org/todo/todo.php TODO]
 +
 +
 +
===讀我檔案 網頁 RWD 製作===
 +
====一、簡介  (功能介紹施工中====
 +
若你已有一份網站(以振鐸網站為例)，想要把它改成RWD 也就是在桌機、平板和手機的螢幕顯示不同的話，適用本方法。
 +
以振鐸網站為例，其中重要的檔案及其功能如下所示 
 +
 +
#constant.php(整體網站
 +
#*引入時區
 +
#*建立變數webContent
 +
#*isset :  判斷有沒有
 +
#*noSession :  登入直到退出前的狀態
 +
#*CMS 不同網站有不同的定義 目前本網站是along
 +
#*定義常數：網站路徑 伺服器架站檔案夾路徑
 +
#*分配DSN給不同的網站  (可能要登入 帳密...)
 +
#*SERVER : 開網站後即有的變數
 +
#*拉進wiki.php
 +
#*若不存在引入GfWebContent (翻譯wiki上的內容控制參數)
 +
#*echo 輸出
 +
#siteConstant(各自網站的定義)
 +
#*常數定義 (SITE,SLOGAN,defaultWIKI,Signintable.signingroup)
 +
#*變數定義(資料池編碼)
 +
#*圖片存的路徑
 +
#*定義預設寬度
 +
#index.php (首頁)
 +
#*引入constant.php
 +
#*引入theme
 +
#*引入DB
 +
#*若html1 不存在 引入
 +
#*呼叫URI
 +
#*若html2 不存在 引入
 +
#menu.css (下拉方塊設定)
 +
#*設定下拉方塊
 +
#*設定li dl
 +
#*設定為block
 +
#*主選單及子選單設定
 +
#*設定完後隱藏(display:none)
 +
#*滑鼠滑入顯示選單
 +
#*設定子選單
 +
#*末尾加入線
 +
#style.css (整體設置)
 +
#*body 設定
 +
#*margin border padding 參考chrome開發人員選項(寫法 1.全部 2. 上右下左 3. 上下 左右)
 +
#*寬度 顏色(#16進位) 背景  (對齊位置)
 +
#*設定圖
 +
#*設定banner 
 +
#*relative相對位置
 +
#*z-index 深度
 +
#*設定導航列 (background 圖片repeat 做出浮雕效果)
 +
#*字體定義
 +
#*list-style 圓點方塊等樣式...
 +
#*li,a 設定方塊
 +
#*hover滑鼠滑過
 +
#*content設定
 +
#*字體設定及美觀
 +
#theme.php (html文檔撰寫)
 +
#*引入SiteConstant
 +
#*引入DB
 +
#*連結DSN
 +
#*換行後製作導行列
 +
#*從DB資料庫中抓取導航列(不含工具)
 +
#*若不存在 請新增
 +
#*若空 顯示空值
 +
#*若有顯示  製作html語法
 +
#*explode: 分段(字符,字串,何處開始)
 +
#*strstr:  尋找(字串,字符)
 +
#*製作導航列-工具
 +
#*引入style.css menu.css ....
 +
#*寫java 讓一小部分可以更新
 +
#*加快速度與提供互動性
 +
#*寫出banner 圖片
 +
#*返回首頁
 +
#*圖片位置與基本設定
 +
#*globalnav(導航列設定)並放入剛剛製作的strnav
 +
#*最後放html2做結尾
 +
 +
====二、方法              更詳細的註解施工中====
 +
本方法要更改的部分有html部份以及css部分，雖有java碼但包含在html中。
 +
以振鐸網站為例，要更改的只有theme.php 及 style.css。
 +
以下將簡介各個新增或更動之功能與方法放置分別之頁面。
 +
#[[RWD/style|style.css]]
 +
#[[RWD/theme|theme.php]]
 +
# menu.css 
 +
====三、參考資料====
 +
 +
#漢堡選單：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/

於 2022年1月10日 (一) 17:12 的修訂

各工作連結

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


讀我檔案 網頁 RWD 製作

一、簡介 (功能介紹施工中

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

  1. constant.php(整體網站
    • 引入時區
    • 建立變數webContent
    • isset : 判斷有沒有
    • noSession : 登入直到退出前的狀態
    • CMS 不同網站有不同的定義 目前本網站是along
    • 定義常數：網站路徑 伺服器架站檔案夾路徑
    • 分配DSN給不同的網站 (可能要登入 帳密...)
    • SERVER : 開網站後即有的變數
    • 拉進wiki.php
    • 若不存在引入GfWebContent (翻譯wiki上的內容控制參數)
    • echo 輸出
  2. siteConstant(各自網站的定義)
    • 常數定義 (SITE,SLOGAN,defaultWIKI,Signintable.signingroup)
    • 變數定義(資料池編碼)
    • 圖片存的路徑
    • 定義預設寬度
  3. index.php (首頁)
    • 引入constant.php
    • 引入theme
    • 引入DB
    • 若html1 不存在 引入
    • 呼叫URI
    • 若html2 不存在 引入
  4. menu.css (下拉方塊設定)
    • 設定下拉方塊
    • 設定li dl
    • 設定為block
    • 主選單及子選單設定
    • 設定完後隱藏(display:none)
    • 滑鼠滑入顯示選單
    • 設定子選單
    • 末尾加入線
  5. style.css (整體設置)
    • body 設定
    • margin border padding 參考chrome開發人員選項(寫法 1.全部 2. 上右下左 3. 上下 左右)
    • 寬度 顏色(#16進位) 背景 (對齊位置)
    • 設定圖
    • 設定banner
    • relative相對位置
    • z-index 深度
    • 設定導航列 (background 圖片repeat 做出浮雕效果)
    • 字體定義
    • list-style 圓點方塊等樣式...
    • li,a 設定方塊
    • hover滑鼠滑過
    • content設定
    • 字體設定及美觀
  6. theme.php (html文檔撰寫)
    • 引入SiteConstant
    • 引入DB
    • 連結DSN
    • 換行後製作導行列
    • 從DB資料庫中抓取導航列(不含工具)
    • 若不存在 請新增
    • 若空 顯示空值
    • 若有顯示 製作html語法
    • explode: 分段(字符,字串,何處開始)
    • strstr: 尋找(字串,字符)
    • 製作導航列-工具
    • 引入style.css menu.css ....
    • 寫java 讓一小部分可以更新
    • 加快速度與提供互動性
    • 寫出banner 圖片
    • 返回首頁
    • 圖片位置與基本設定
    • globalnav(導航列設定)並放入剛剛製作的strnav
    • 最後放html2做結尾

二、方法 更詳細的註解施工中

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

  1. style.css
  2. theme.php
  3. menu.css

三、參考資料

  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=6315"