RWD
各工作連結
讀我檔案 網頁 RWD 製作
一、簡介 (功能介紹施工中
若你已有一份網站(以振鐸網站為例)，想要把它改成RWD 也就是在桌機、平板和手機的螢幕顯示不同的話，適用本方法。 以振鐸網站為例，其中重要的檔案及其功能如下所示
- 簡單函數、變數介紹
- html
- isset : 判斷有沒有
- noSession : 登入直到退出前的狀態
- SERVER : 開網站後即有的變數
- explode: 分段(字符,字串,何處開始)
- strstr: 尋找(字串,字符)
- echo: 輸出
- css性質簡介：
- relative相對位置
- z-index 深度
- list-style 圓點方塊等樣式...
- hover滑鼠滑過
- width 寬度
- color 顏色(#16進位)
- text-align 對齊位置
- html
- constant.php(整體網站)
這個php主要在架設所有網站都有、都需要的東西，比如說：引入時區、建立變數webContent、定義CMS (不同網站有不同的定義 目前本網站是along)、定義常數(網站路徑 伺服器架站檔案夾路徑等等)、分配DSN給不同的#網站 (可能要登入 帳密...)。
最後會拉進wiki.php(維基檔案)，若不存在引入GfWebContent (翻譯wiki上的內容控制參數)。 - siteConstant(各自網站的定義)
這個php主要在定義個別網站特別的部分，像是定義常數: SITE,SLOGAN,defaultWIKI,Signintable.signingroup、變數: 資料池編碼、圖片存的路徑、預設寬度等等。 - index.php (首頁)
這個php是寫出網站的主頁面，引入constant.php、theme.php、DB及html1 html2(若不存在)，之後呼叫URI - menu.css (下拉方塊設定)
這個css主要是在寫下拉選單的主選單及子選單設定，像是設定層級ul>li>dl>dt >dd a、設定顯示為block 之後隱藏(display:none)，顯示選單(若滑鼠滑入)、末尾加入底線。 - style.css (整體設置)
這個css主要在寫網頁整體的風格，像是寫出margin border padding，可參考chrome開發人員選項(寫法 1.全部(一個數字) 2. 上右下左(四個數字) 3. 上下 左右(兩個數字))
設定 圖、banner、導航列 (background 圖片repeat 做出浮雕效果)、定義字體及美觀效果，還有li,a內的是設定選單內容 - theme.php (html文檔撰寫)
這個php是寫網頁架構的，先引入SiteConstant、DB style.css menu.css ....連結DSN、製作導行列(從DB資料庫中抓取導航列)，中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。
架構部分有寫出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/
