"RWD/theme" 修訂間的差異
(→RWD 整體畫面視覺 (施工中 要微調)) |
|||
| 行 6： | 行 6： | ||
本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。<br> | 本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。<br> | ||
更改之前的程式可參照themebackup.php，更改之後可參照theme.php。 | 更改之前的程式可參照themebackup.php，更改之後可參照theme.php。 | ||
| − | ===RWD 整體畫面視覺 | + | ===RWD 整體畫面視覺=== |
對於整體視覺來說，畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。 | 對於整體視覺來說，畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。 | ||
#加入下方程式到theme.php檔案的<head>......</head>中，指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。 | #加入下方程式到theme.php檔案的<head>......</head>中，指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。 | ||
| 行 12： | 行 12： | ||
#另外確認theme.php 中 style.css 和 menu.css的位置，若在其他css檔案之前，搬到之後會比較不會被蓋掉。(css檔案越後面的會蓋掉前面的設定)，方法如下： | #另外確認theme.php 中 style.css 和 menu.css的位置，若在其他css檔案之前，搬到之後會比較不會被蓋掉。(css檔案越後面的會蓋掉前面的設定)，方法如下： | ||
#*<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/style.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css'<br>→<br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/style.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' /> | #*<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/style.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css'<br>→<br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/style.css' /><br><link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' /> | ||
| + | |||
===選單更改 (漢堡選單 箭頭動畫=== | ===選單更改 (漢堡選單 箭頭動畫=== | ||
本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述： | 本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述： | ||
於 2022年1月19日 (三) 04:43 的修訂
本章節主要為theme.php在轉變為RWD網站時，所需要做之更動。(以振鐸網站為例)
整個RWD網站風格與架構是由theme.php、style.css兩者一起的，所以在更動時務必參考另外一個程式，做出相應的變更。
theme.php主要是架構出物件的位置與引入其他程式或語言，物件的特性要在style.css中才會寫到，要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新！
本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。
更改之前的程式可參照themebackup.php，更改之後可參照theme.php。
RWD 整體畫面視覺
對於整體視覺來說，畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。
- 加入下方程式到theme.php檔案的<head>......</head>中，指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。
- 原程式: <head>......</head> → <head> <meta name="viewport" content="width=device-width, initial-scale=1" />......</head>
- 另外確認theme.php 中 style.css 和 menu.css的位置，若在其他css檔案之前，搬到之後會比較不會被蓋掉。(css檔案越後面的會蓋掉前面的設定)，方法如下：
- <link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/style.css' />
<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' />
<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' />
<link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css'
→
<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' />
<link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css' />
<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/style.css' />
<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' />
- <link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/style.css' />
選單更改 (漢堡選單 箭頭動畫
本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。
本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：
- 漢堡表單製作
本小節中，將自行畫出一個漢堡選單(若不知道漢堡選單的定義可以參見下方參考資料)，並加入選單的動畫設定。詳細新增的部分如下- <input type="checkbox" name="menu-switcher" id="menu-switcher" />
- <label for="menu-switcher" class="hamburger">
- </label>
- 箭頭動畫
本小節中，將在選單內畫出一個箭頭，並做出旋轉的動畫設定。詳細新增的部分如下- (將箭頭加進去)
- $strnav.="\t\t<dt><a href='#'>".subst(請去掉我)r($v,1)."<div class='arrow'></div></a></dt>\n";*/ 要刪除括弧
- <dt><a href='#'>工具<div class='arrow'></div></a> </dt>
頁首頁尾
本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下
- 新增頁首
- 頁首頁尾
- $telephone="電話：02-XXXXXXXX";
- <div id='header'>".SLOGAN."</div>
- <div id=content style='float:center;'>\n";
- 新增頁尾
- $html2="</div>\n<div id='footer'>".SLOGAN."
- ".$telephone."</div></body>\n</html>";
字體工具箱
在RWD網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下
- 新增$font_Size="字級：";
- 新增改變字體code
- 新增 <script>
- 新增 function zoomInInFontSize() {
- 新增 var obj = document.getElementById('content'),//從content選取字
- 新增 curSize = ; // 當前字體大小
- 新增 obj.style.fontSize = '40px';//變成特大字體
- 新增 }
- 新增 function zoomInFontSize() {
- 新增 var obj = document.getElementById('content'),//從content選取字
- 新增 curSize = ; // 當前字體大小
- 新增 obj.style.fontSize = '30px';//變成大字體
- 新增 }
- 新增 function zoomFontSize() {
- 新增 var obj = document.getElementById('content'),//從content選取字
- 新增 curSize = ; // 當前字體大小
- 新增 obj.style.fontSize = '16px';//變成原始字體
- 新增 }
- 新增 // 創建一個容器，來測算當前字體大小
- 新增 var getFontSize = function() {
- 新增 var oDiv = document.createElement('div');
- 新增 oDiv.innerHTML = 'ABC測試'; // 寫入任意字元
- 新增 oDiv.style.lineHeight = 1;
- 新增 oDiv.style.position = 'absolute';
- 新增 oDiv.style.top = '-9999em';
- 新增 document.body.appendChild(oDiv);
- 新增 return oDiv.offsetHeight;
- 新增 };
- 新增 </script>
- 新增改變字體按鈕
- 新增".$font_Size."<input type='button' value='特大' onclick='zoomInInFontSize()'>
- 新增 <input type='button' value='大' onclick='zoomInFontSize()'>
- 新增 <input type='button' value='原始' onclick='zoomFontSize()'>
