"RWD/theme" 修訂間的差異

出自 全民科學平台
前往： 導覽、 搜尋
(→‎RWD 整體畫面視覺)
(→‎字體工具箱)
行 32： 行 32：
 
===字體工具箱===
 
===字體工具箱===
 
在RWD網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下
 
在RWD網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下
 +
#
 
#*新增$font_Size="字級：";
 
#*新增$font_Size="字級：";
 +
#
 
#*新增改變字體code
 
#*新增改變字體code
−
#*新增 <script><!--加入字體工具箱功能  by 芸伍-->
+
#*<nowiki> <script><!--加入字體工具箱功能  by 芸伍--></nowiki><br><nowiki>function zoomInInFontSize() {</nowiki><br><nowiki>var obj = document.getElementById('content'),//從content選取字</nowiki><br><nowiki> curSize = '';  // 當前字體大小</nowiki><br><nowiki> obj.style.fontSize =  '40px';//變成特大字體}</nowiki><br><nowiki>function zoomInFontSize() {</nowiki><br><nowiki> var obj = document.getElementById('content'),//從content選取字</nowiki><br><nowiki> curSize = '';  // 當前字體大小</nowiki><br><nowiki>obj.style.fontSize = '30px';//變成大字體}</nowiki><br><nowiki>function zoomFontSize() {</nowiki><br><nowiki> var obj = document.getElementById('content'),//從content選取字</nowiki><br><nowiki> curSize = '';  // 當前字體大小</nowiki><br<nowiki>obj.style.fontSize =  '16px';//變成原始字體}</nowiki><br><nowiki> // 創建一個容器，來測算當前字體大小</nowiki><br><nowiki> var getFontSize = function() {</nowiki><br><nowiki> var oDiv = document.createElement('div');</nowiki><br><nowiki> oDiv.innerHTML = 'ABC測試';  // 寫入任意字元</nowiki><br><nowiki> oDiv.style.lineHeight = 1;</nowiki><br><nowiki> oDiv.style.position = 'absolute';</nowiki><br><nowiki> oDiv.style.top = '-9999em';</nowiki><br><nowiki> document.body.appendChild(oDiv);</nowiki><br><nowiki> return oDiv.offsetHeight; };</nowiki><br><nowiki>   </script></nowiki><br>
−
#*新增 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>
 
−
#*新增改變字體按鈕
 
−
#*新增<div id='font_box'color='#000'>".$font_Size."<input type='button' value='特大' onclick='zoomInInFontSize()'>
 
−
#*新增 <input type='button' value='大' onclick='zoomInFontSize()'>
 
−
#*新增 <input type='button' value='原始' onclick='zoomFontSize()'> </div>
 
 
===參考資料===
 
===參考資料===

於 2022年1月19日 (三) 06:18 的修訂


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

RWD 整體畫面視覺

對於整體視覺來說，畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。

  1. 加入下方程式到theme.php檔案的<head>......</head>中，指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。
    • 原程式:
      <head>......
      </head>
      →
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      ......
      </head>
  2. 另外確認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' />

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

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

  1. 漢堡表單製作
    本小節中，將自行畫出的漢堡選單與核取方塊建立關係，並放置在畫面中(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' /><!--新增核取方塊 for 展開選單-->
      <label for='menu-switcher' class='hamburger'><!--漢堡選單按鈕 -->
      <div class='hamburger-line'></div></label><!--漢堡選單按鈕線條-->
      <div id='xo-globalnav'>...</div>
  2. 箭頭動畫
    本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。詳細新增的部分如下面兩個：'：'
    1. 原始程式(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";*/
    2. 原始程式(theme.php第35行)：
      <dt><a href='#'>工具</a> </dt>
      →
      <dt><a href='#'>工具<div class='arrow'></div></a> </dt>!--加入箭頭 -->

頁首頁尾

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

  1. 新增頁首頁尾資訊，在程式前幾行(約6,7行)加入變數：
    • $telephone="電話：02-XXXXXXXX";
  2. 接下來在body的一開始，加入以下header程式碼：
    • 原始程式：
      <body>
      <div id='xo-banner'>
      →
      <body>
      <div id='header'>".SLOGAN."</div>
      <div id='xo-banner'>
  3. 最後在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網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下

    • 新增$font_Size="字級：";
    • 新增改變字體code
    • <script><!--加入字體工具箱功能 by 芸伍-->
      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 = ''; // 當前字體大小<brobj.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>

參考資料

取自 "http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&oldid=6398"