檢視 RWD/theme 的原始碼

[[分類:平台]]

本章節主要為theme.php在轉變為RWD網站時，所需要做之更動。(以振鐸網站為例)<br>
整個RWD網站風格與架構是由style.css、theme.php、menu.css三者一起的，所以在更動時務必參考另外兩者，做出相應的變更。<br>
theme.php主要是架構出物件的位置與引入其他程式或語言，物件的特性要在style.css中才會寫到，要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新！<br>
本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。<br>
更改之前的程式可參照themebackup.php，更改之後可參照theme.php。
===RWD 整體畫面視覺  (施工中 要微調)===
//因為本來的設定只有桌機的顯示，我們現在要更動為手機、平板皆可顯示的話，就需要在css檔案中做一些判斷與變動。<br>
//從參照的原始stylebackup.css中，我們需要更改的其實只有前58行而已。以下詳述如何更動整體視覺：
# 更動部分
#*<meta name="viewport" content="width=device-width, initial-scale=1" />
#*menu.css 改變 margin auto 但看似沒變化
#*移動theme.php 中 style.css 和 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."/".$style_Num."' />
#*<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' />
===選單更改 (漢堡選單 箭頭動畫===
本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：
#漢堡表單製作<br>本小節中，將自行畫出一個漢堡選單(若不知道漢堡選單的定義可以參見下方參考資料)，並加入選單的動畫設定。詳細新增的部分如下
##*<input type="checkbox" name="menu-switcher" id="menu-switcher" />     
##*<label for="menu-switcher" class="hamburger">
##*<div class="hamburger-line"></div></label>
# 箭頭動畫<br>本小節中，將在選單內畫出一個箭頭，並做出旋轉的動畫設定。詳細新增的部分如下
##* (將箭頭加進去)
##*<nowiki>$strnav.="\t\t<dt><a href='#'>".subst(請去掉我)r($v,1)."<div class='arrow'></div></a></dt>\n";*/  要刪除括弧</nowiki>
##*<nowiki><dt><a href='#'>工具<div class='arrow'></div></a> </dt></nowiki>
===頁首頁尾===
本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下
#新增頁首
#頁首頁尾
#*$telephone="電話：02-XXXXXXXX";
#*<nowiki><div id='header'>".SLOGAN."</div></nowiki>
#*<nowiki><div id=content style='float:center;'>\n";</nowiki>
#新增頁尾
#*<nowiki>$html2="</div>\n<div id='footer'>".SLOGAN."</nowiki>
#*<nowiki>".$telephone."</div></body>\n</html>";</nowiki>

===字體工具箱===
在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 = '';  // 當前字體大小
#*新增			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>
===參考資料===