檢視 RWD 的原始碼

[[分類:平台]]
===各工作連結===
#FTP
#[http://jendo.org/uploadFiles 網路檔案櫃]
#[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/