"RWD/theme" 修訂間的差異

於 2022年2月25日 (五) 13:16 的修訂

本章節主要為theme.php在轉變為RWD網站時，所需要做之更動。(以振鐸網站為例)
整個RWD網站風格與架構是由theme.php、style.css兩者一起的，所以在更動時務必參考另外一個程式，做出相應的變更。
theme.php主要是架構出物件的位置與引入其他程式或語言，物件的特性要在style.css中才會寫到，要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新！
本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。
更改之前的程式可參照themebackup.php，更改之後可參照theme.php。(位置在檔案櫃中 /全民科學平台/RWD/)

加入下方程式到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' />

選單更改 (漢堡選單箭頭動畫)

本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。
本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：

漢堡表單製作
本小節中，將自行畫出的漢堡選單與核取方塊建立關係，並放置在畫面中(xo-banner與xo-globalnav之間)。詳細新增的部分如下：
- 原始程式：
  <div id='xo-banner'>...</div>
  <div id='xo-globalnav'>...</div>
  →
  <div id='xo-banner'>...</div>
  <input type='checkbox' name='menu-switcher' id='menu-switcher' />
  <label for='menu-switcher' class='hamburger'>
  <div class='hamburger-line'></div></label>
  <div id='xo-globalnav'>...</div>
箭頭動畫
本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下
1. 第一種方法(hover事件)，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二種方法。)
  - 原始程式(theme.php第20行)：
    $strnav.="\t\t<dt><a href='#'>".substr($v,1)."</a></dt>\n";#
    →
    $strnav.="\t\t<dt><a href='#'>".substr($v,1)."<div class='arrow'></div></a></dt>\n";*/
  - 原始程式(theme.php第35行)：
    <dt><a href='#'>工具</a> </dt>
    →
    <dt><a href='#'>工具<div class='arrow'></div></a> </dt>!--加入箭頭 -->
2. 第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 (施工中)
  - 新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第8,9行處，程式如下：
    $subMenu9=''subMenu9'';
    $arrow9=''arrow9'';
  - 新增數個變數(讓每個副標題與箭頭編號不重複)，分別在theme.php的
    19行新增 $number='1';
    20行新增 $numberr="2";
    24行新增$subMenu.=$number;#
    25行新增 $arrow.=$numberr;#
    26行新增 $number.="1";
    27行新增$numberr.="2";
  - 更改28行程式碼
    $strnav.="\t\t
    <dt onclick='switchMenu( this,".$subMenu.",".$arrow.")'>
    <a href='#'>".substr($v,1)."
    <div id=".$arrow." class='arrow'>
    </div>
    </a>\n
    <ul id=".$subMenu." class='sub-menu' style='display:none;'> \n";#
  - 更改40行程式碼 $strnav.="\t</ul></dt></dl></li>\n";#加入ul dt 結尾
  - 更改43行程式碼 <dt onclick='switchMenu( this,".$subMenu9.",".$arrow9.")'><a href='#'>工具
    </a># 
  - 更改44行程式碼
    - 更改60行程式碼
    </dt></dl></li>\n";#加入ul dt 結尾
  - 新增程式
    <script language = 'javascript'>
    var VisibleMenu = ; // 記錄目前顯示的子選單的 ID
    function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行
    var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單
    const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭
    if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示
    let deg=135;
    SubMenu.style.display = 'block';// 顯示副選單
    div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下
    VisibleMenu = theSubMenu;// 顯示選單為本副選單
    }
    else{ // 隱藏子選單
    if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){
    let deg=45;
    SubMenu.style.display = 'none';// 不顯示副選單
    div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右
    VisibleMenu = ;// 顯示選單為空
    }
    }
    }
    </script>

頁首頁尾

本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾的架構。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下

新增頁首頁尾資訊，在程式前幾行(約6,7行)加入變數：
- $telephone="電話：02-XXXXXXXX";
接下來在body的一開始，加入以下header程式碼：(其中SLOGAN為已定義變數，在SiteConstant.php檔案中，可回RWD頁面確認)
- 原始程式：
  <body>
  <div id='xo-banner'>
  →
  <body>
  <div id='header'>".SLOGAN."</div>
  <div id='xo-banner'>
最後在content和html2之間新增footer程式碼：
- 原始程式：
  <div id=content style='float:center;'>\n";
  $html2="</div>\n
  </body>\n</html>";
  →
  <div id=content style='float:center;'>\n";
  $html2="</div>\n
  <div id='footer'>".SLOGAN."".$telephone."</div>
  </body>\n</html>";

字體工具箱

在RWD網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下

新增一個新變數(叫做字級的文字)，在theme.php大概第6,7行處，程式如下：
- $font_Size="字級：";
新增改變字體的javascript code，放在head中的最後面：
- 原始程式：
  <head>
  ...
  </head>
  →
  <head>
  ...
  <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';//變成原始字體}
  
  function zoomOutFontSize() {
  var obj = document.getElementById('content'),//從content選取字
  curSize = ''; // 當前字體大小
  obj.style.fontSize = '12px';//變成小字體}
  
  // 創建一個容器，來測算當前字體大小
  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>
  </head>
新增改變字體的按鈕方塊*3，放在header與xo-banner之間：
- 原始程式：
  <div id='header'>...</div>
  <div id='xo-banner'>...</div>
  →
  <div id='header'>...</div>
  <div id='font_box'color='#000'>".$font_Size."
  <input type='button' value='特' on click='zoomInInFontSize()'>
  <input type='button' value='大' on click='zoomInFontSize()'>
  <input type='button' value='原' on click='zoomFontSize()'>
  <input type='button' value='小' on click='zoomOutFontSize()'>
  </div>
  <div id='xo-banner'>...</div>

- type='button' on click='zoomFontSize()'/

參考資料

@@ 行 13： / 行 13： @@
 #*<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><span style="color:red;"><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' /></span>
-===選單更改 (漢堡選單 箭頭動畫===
+===選單更改 (漢堡選單 箭頭動畫)===
 本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：
 #漢堡表單製作<br>本小節中，將自行畫出的漢堡選單與核取方塊建立關係，並放置在畫面中(xo-banner與xo-globalnav之間)。詳細新增的部分如下：
 #*原始程式：<br><nowiki><div id='xo-banner'>...</div></nowiki><br><nowiki><div id='xo-globalnav'>...</div></nowiki><br>→<br><nowiki><div id='xo-banner'>...</div></nowiki><br><nowiki><</nowiki><span style="color:red;">input type='checkbox' name='menu-switcher' id='menu-switcher' /</span><nowiki>><!--新增核取方塊 for 展開選單--></nowiki><br><nowiki><</nowiki><span style="color:red;">label for='menu-switcher' class='hamburger'</span><nowiki>><!--漢堡選單按鈕 --></nowiki><br><nowiki><</nowiki><span style="color:red;">div class='hamburger-line'></div></label</span><nowiki>><!--漢堡選單按鈕線條--></nowiki><br><nowiki><div id='xo-globalnav'>...</div></nowiki>
-#箭頭動畫<br>本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。詳細新增的部分如下面兩個：'：'
+#箭頭動畫<br>本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下
-##原始程式(theme.php第20行)：<br><nowiki>$strnav.="\t\t<dt><a href='#'>".subst</nowiki><span style="color:black;">r</span><nowiki>($v,1)."</a></dt>\n";#<!--加入箭頭  -->	</nowiki><br>→<br><nowiki>$strnav.="\t\t<dt><a href='#'>".subst</nowiki><span style="color:black;">r</span><nowiki>($v,1)."<</nowiki><span style="color:red;">div class='arrow'</span><nowiki>><</nowiki><span style="color:red;">/div</span><nowiki>></a></dt>\n";*/ </nowiki>
+##第一種方法(hover事件)，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二種方法。)
-##原始程式(theme.php第35行)：<br><nowiki><dt><a href='#'>工具</a> </dt></nowiki><br>→<br><nowiki><dt><a href='#'>工具<</nowiki><span style="color:red;">div class='arrow'</span><nowiki>><</nowiki><span style="color:red;">/div</span><nowiki>></a> </dt>!--加入箭頭  --></nowiki>
+##*原始程式(theme.php第20行)：<br><nowiki>$strnav.="\t\t<dt><a href='#'>".subst</nowiki><span style="color:black;">r</span><nowiki>($v,1)."</a></dt>\n";#<!--加入箭頭  -->	</nowiki><br>→<br><nowiki>$strnav.="\t\t<dt><a href='#'>".subst</nowiki><span style="color:black;">r</span><nowiki>($v,1)."<</nowiki><span style="color:red;">div class='arrow'</span><nowiki>><</nowiki><span style="color:red;">/div</span><nowiki>></a></dt>\n";*/ </nowiki>
+##*原始程式(theme.php第35行)：<br><nowiki><dt><a href='#'>工具</a> </dt></nowiki><br>→<br><nowiki><dt><a href='#'>工具<</nowiki><span style="color:red;">div class='arrow'</span><nowiki>><</nowiki><span style="color:red;">/div</span><nowiki>></a> </dt>!--加入箭頭  --></nowiki>
+##第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 <span style="color:red;">(施工中)</span>
+##*新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第8,9行處，程式如下：<br>$subMenu9='&#39;subMenu9&#39;';<br>$arrow9='&#39;arrow9&#39;';
+##*新增數個變數(讓每個副標題與箭頭編號不重複)，分別在theme.php的<br>19行新增	$number='1';<br>20行新增	$numberr="2";<br>24行新增$subMenu.=$number;#<!--在subMenu字串加入number--><br>25行新增	$arrow.=$numberr;#<!--在arrow字串加入numberr--><br>26行新增	$number.="1";<br>27行新增$numberr.="2";
+##*更改28行程式碼 	<br><span style="color:red;">$strnav.="\t\t<br><dt oncl</span><span style="color:red;">ick='switchMenu( this,".$subMenu.",".$arrow.")'><br><a href='#'>".sub</span><span style="color:red;">str($v,1)."<br><nowiki><div id=".$arrow." class='arrow'></nowiki><br><nowiki>	</div></nowiki><br>	</a>\n <br><nowiki><ul id=".$subMenu." class='sub-menu' style='display:none;'> \n";#<!--加入switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單--><!--加入箭頭  by 芸伍--></nowiki></span>
+##*更改40行程式碼		$strnav.="\t</ul></dt></dl></li>\n";#加入ul dt 結尾
+##*更改43行程式碼		<span style="color:red;"><dt on</span><span style="color:red;">click='switchMenu( this,".$subMenu9.",".$arrow9.")'><a href='#'>工具<div id='arrow9' class='arrow'></div></a>#<nowiki><!--加入switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單--> <!--加入箭頭  by 芸伍--></nowiki></span>
+##*更改44行程式碼		<ul id='subMenu9' class='sub-menu' style='display:none;'>#加入副選單
+##*更改60行程式碼	</ul></dt></dl></li>\n";#加入ul dt 結尾
+##*新增程式<br><script language = 'javascript'><br>var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID<br>function switchMenu( theMainMenu, theSubMenu,thearrow, theEvent ){// 加入switchMenu程式(主選單，副選單，箭頭) 點擊執行<br>var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單<br>const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭<br>if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示<br>let deg=135;<br>SubMenu.style.display = 'block';// 顯示副選單<br>div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下<br>VisibleMenu = theSubMenu;// 顯示選單為本副選單<br>}<br>else{ // 隱藏子選單<br>if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){<br>let deg=45;<br>SubMenu.style.display = 'none';// 不顯示副選單<br>div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右<br>VisibleMenu = '';// 顯示選單為空<br>}<br>}<br>}<br></script><br>
 ===頁首頁尾===

"RWD/theme" 修訂間的差異

於 2022年2月25日 (五) 13:16 的修訂

目錄

RWD 整體畫面視覺

選單更改 (漢堡選單箭頭動畫)

頁首頁尾

字體工具箱

參考資料

導覽選單

個人工具

命名空間

變體

檢視

更多

搜尋

導覽

工具

"RWD/theme" 修訂間的差異

於 2022年2月25日 (五) 13:16 的修訂

目錄

RWD 整體畫面視覺

選單更改 (漢堡選單 箭頭動畫)

頁首頁尾

字體工具箱

參考資料

導覽選單

搜尋

選單更改 (漢堡選單箭頭動畫)