RWD

出自 全民科學平台
於 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/