"RWD" 修訂間的差異
(→一、簡介 (功能介紹施工中) |
(→讀我檔案 網頁 RWD 製作) |
||
| 行 7： | 行 7： | ||
===讀我檔案 網頁 RWD 製作=== | ===讀我檔案 網頁 RWD 製作=== | ||
| − | ====一、簡介 | + | ====一、簡介 ==== |
若你已有一份網站(以振鐸網站為例)，想要把它改成RWD 也就是在桌機、平板和手機的螢幕顯示不同的話，適用本方法。 | 若你已有一份網站(以振鐸網站為例)，想要把它改成RWD 也就是在桌機、平板和手機的螢幕顯示不同的話，適用本方法。 | ||
以振鐸網站為例，其中重要的檔案及其功能如下所示 | 以振鐸網站為例，其中重要的檔案及其功能如下所示 | ||
| 行 13： | 行 13： | ||
#簡單函數、變數介紹 | #簡單函數、變數介紹 | ||
##html | ##html | ||
| − | ##*isset : | + | ##*isset : 判斷變量有沒有被定義(非NULL) |
| − | + | ##*explode : 分割字串(要分割的字符,字串) | |
| − | + | ##*strstr : 尋找(字串,字符) | |
| − | ##*explode: | + | ##*echo : 輸出 |
| − | ##*strstr: | + | ##*SERVER : 開網站後即有的變數 |
| − | ##*echo: 輸出 | + | ##*Session : 登入網站直到退出前的狀態變數 |
##css性質簡介： | ##css性質簡介： | ||
| − | ##* | + | ##*relative 相對位置 |
| − | ##*z-index 深度 | + | ##*z-index 深度 |
##*list-style 圓點方塊等樣式... | ##*list-style 圓點方塊等樣式... | ||
| − | ##* | + | ##*hover 滑鼠滑到上面 |
| − | ##*width 寬度 | + | ##*width 寬度 |
| − | ##*color 顏色(#16進位) | + | ##*color 顏色(#16進位) |
##*text-align 對齊位置 | ##*text-align 對齊位置 | ||
| − | #constant.php(整體網站)<br> | + | #constant.php(整體網站)<br>這個php主要在架設所有網站都有、都需要的東西，比如說： |
| − | #siteConstant(各自網站的定義)<br> | + | #*引入時區、建立變數webContent |
| − | #index.php (首頁)<br> | + | #*定義CMS( 內容管理系統)，不同網站有不同的定義，目前本網站是along。 |
| − | #menu.css (下拉方塊設定)<br> | + | #*定義常數(網站路徑 伺服器架站檔案夾路徑等等)、 |
| − | #style.css (整體設置)<br> | + | #*分配DSN（資料來源名稱，可以讓網站連線到不同的資料庫，它會儲存連線的詳細資料，例如資料庫名稱、目錄、資料庫驅動程式、UserID、密碼等。）給不同的網站。 |
| − | #theme.php (html文檔撰寫)<br> | + | #*引入wiki.php(翻譯wiki上的內容控制參數)，若內容不存在則引入GfWebContent (傳回 wiki 頁或 webContent 表中 $path 代表的某一筆內容)。 |
| + | #siteConstant(各自網站的定義)<br>這個php主要在定義個別網站特別的部分，像是： | ||
| + | #*定義常數: SITE(網站區別),SLOGAN(口號),defaultWIKI(預設維基頁面), signintable . signingroup (可登入群體) | ||
| + | #*定義變數: 資料池編碼、圖片存的路徑、預設寬度等等。 | ||
| + | #index.php (首頁)<br>這個php是寫出網站的主頁面 | ||
| + | #*引入constant.php(整體網站)、theme.php(主題)、DB.php(從資料庫中撈取資料)及html1 html2(若不存在) | ||
| + | #*之後呼叫URI(統一資源標識符 類似網址) | ||
| + | #menu.css (下拉方塊設定)<br>這個css主要是在寫下拉選單的主選單及子選單設定，像是： | ||
| + | #*設定層級ul>li>dl>dt >dd a | ||
| + | #*設定顯示為block 之後隱藏(display:none) | ||
| + | #*顯示選單(若滑鼠滑入)、末尾加入底線。 | ||
| + | #style.css (整體設置)<br>這個css主要在寫網頁整體的風格，像是： | ||
| + | #*寫出margin border padding，可參考chrome開發人員選項(寫法 1.一個數字 上下左右皆為此數字 2.四個數字 順序分別對應上、右、下、左(順時針) 3. 兩個數字 順序分別對應上下、左右) | ||
| + | #*設定 圖、banner(橫幅)、選單 (background 圖片repeat 做出浮雕效果)、定義字體及美觀效果，(li,a內的是設定選單內容) | ||
| + | #theme.php (html文檔撰寫)<br>這個php是寫網頁架構的 | ||
| + | #*引入SiteConstant(個別網頁特色)、DB.php(撈資料)、style.css(風格)、menu.css(選單).... | ||
| + | #*連結DSN(資料來源名稱)、製作導行列(從DB資料庫中抓取導航列) | ||
| + | #*中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。 | ||
| + | #*架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。 | ||
====二、方法 更詳細的註解施工中==== | ====二、方法 更詳細的註解施工中==== | ||
於 2022年1月18日 (二) 13:32 的修訂
各工作連結
讀我檔案 網頁 RWD 製作
一、簡介
若你已有一份網站(以振鐸網站為例)，想要把它改成RWD 也就是在桌機、平板和手機的螢幕顯示不同的話，適用本方法。 以振鐸網站為例，其中重要的檔案及其功能如下所示
- 簡單函數、變數介紹
- html
- isset : 判斷變量有沒有被定義(非NULL)
- explode : 分割字串(要分割的字符,字串)
- strstr : 尋找(字串,字符)
- echo : 輸出
- SERVER : 開網站後即有的變數
- Session : 登入網站直到退出前的狀態變數
- css性質簡介：
- relative 相對位置
- z-index 深度
- list-style 圓點方塊等樣式...
- hover 滑鼠滑到上面
- width 寬度
- color 顏色(#16進位)
- text-align 對齊位置
- html
- constant.php(整體網站)
這個php主要在架設所有網站都有、都需要的東西，比如說：- 引入時區、建立變數webContent
- 定義CMS( 內容管理系統)，不同網站有不同的定義，目前本網站是along。
- 定義常數(網站路徑 伺服器架站檔案夾路徑等等)、
- 分配DSN（資料來源名稱，可以讓網站連線到不同的資料庫，它會儲存連線的詳細資料，例如資料庫名稱、目錄、資料庫驅動程式、UserID、密碼等。）給不同的網站。
- 引入wiki.php(翻譯wiki上的內容控制參數)，若內容不存在則引入GfWebContent (傳回 wiki 頁或 webContent 表中 $path 代表的某一筆內容)。
- siteConstant(各自網站的定義)
這個php主要在定義個別網站特別的部分，像是：- 定義常數: SITE(網站區別),SLOGAN(口號),defaultWIKI(預設維基頁面), signintable . signingroup (可登入群體)
- 定義變數: 資料池編碼、圖片存的路徑、預設寬度等等。
- index.php (首頁)
這個php是寫出網站的主頁面- 引入constant.php(整體網站)、theme.php(主題)、DB.php(從資料庫中撈取資料)及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.php(撈資料)、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/
