RWD
各工作連結
讀我檔案 網頁 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。 以下將簡介各個新增或更動之功能與方法放置分別之頁面。
三、參考資料
- 漢堡選單：https://sinlin0908.github.io/2020/02/15/web_practice/hamburger-menu/
- 下拉選單參考網頁
- 字級調整工具箱
- JSFIDDLE 好用的HTML CSS JAVASCRIPT 測試網站 https://jsfiddle.net/
