檢視 RWD/theme 的原始碼
←
RWD/theme
前往：
導覽
、
搜尋
由於下列原因，您沒有權限進行 編輯此頁面 的動作：
您請求的操作只有這個群組的使用者能使用：
使用者
您可以檢視並複製此頁面的原始碼。
[[分類:平台]] 本章節主要為theme.php在轉變為RWD網站時，所需要做之更動。(以振鐸網站為例)<br> 整個RWD網站風格與架構是由theme.php、style.css兩者一起的，所以在更動時務必參考另外一個程式，做出相應的變更。<br> theme.php主要是架構出物件的位置與引入其他程式或語言，物件的特性要在style.css中才會寫到，要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新！<br> 本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。<br> 更改之前的程式可參照themebackup.php，更改之後可參照theme.php。(位置在檔案櫃中 /全民科學平台/RWD/) ===RWD 整體畫面視覺=== 對於整體視覺來說，畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。 #加入下方程式到theme.php檔案的<head>......</head>中，指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。 #*程式: <div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><head>......<br></head><br> → <br><head> <br><span style="color:red;"><meta name="viewport" content="width=device-width, initial-scale=1" /></span><br>......<br></head></div> #另外確認theme.php 中 style.css 和 menu.css的位置，若在其他css檔案之前，搬到之後會比較不會被蓋掉。(css檔案越後面的會蓋掉前面的設定)，方法如下： #*程式:<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><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></div> ===選單更改 (漢堡選單 箭頭動畫)=== 本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述： #漢堡表單製作<br>本小節中，將自行畫出的漢堡選單與核取方塊建立關係，並放置在畫面中(xo-banner與xo-globalnav之間)。詳細新增的部分如下： #*程式：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><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></div> #箭頭動畫<br>本小節中，將在選單內放置一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下 ##第一種方法(hover事件)，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。詳細新增的部分如下面兩個： (若是在設計RWD的頁面推薦第二或第三種方法。) ##*程式(theme.php第20行)：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><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></div> ##*程式(theme.php第35行)：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><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></div> ##第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。 <span style="color:red;">(施工中)</span> ##*新增兩個新變數(副標題的編號與箭頭編號)，在theme.php大概第4~6行處，程式如下：<br>$subMenu9=''subMenu9'';<br>$arrow9=''arrow9''; ##*新增數個變數(讓每個副標題與箭頭編號不重複)，並在$strnav中新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">if(gettype($導航列)=='boolean' && $導航列==false){...}<br>elseif(...){...}<br>else{<br>  ...<br> foreach($導航列 as $v){<br>   if(...){<br>    if($c==1){$strnav.="\t</dl></li>\n\t<nowiki><li><dl></nowiki>\n";}<br>   $strnav.="\t\t<nowiki><dt><a href='#'>".sub</nowiki><span style="color:black;">str</span>($v,1)."</a></dt>\n";<br>   }<br>   ...<br>  }<br> $strnav.="\t</dl></li>\n";<br>}<br>→<br>if(gettype($導航列)=='boolean' && $導航列==false){...}<br>elseif(...){...}<br>else{<br>  ...<br> <span style="color:red;">$number='1';<br> $numberr="2";</span><br> foreach($導航列 as $v){<br>  if(...){<br>   if($c==1){$strnav.="\t</dl></li>\n\t<nowiki><li><dl></nowiki>\n";}<br><span style="color:red;">   $subMenu.=$number;<br>   $arrow.=$numberr;<br>   $number.="1";<br>   $numberr.="2";</span><br>   <span style="color:red;">$strnav.="\t\t<dt oncl</span><span style="color:red;">ick='switchMenu( this,".$subMenu.",".$arrow.")'><a href='#'>".sub</span><span style="color:red;">str($v,1)."<nowiki><div id=".$arrow." class='arrow'></nowiki></div></a>\n <nowiki><ul id=".$subMenu." class='sub-menu' style='display:none;'> \n";</nowiki></span> <br>  }<br>  ...<br> }<br> $strnav.="\t<span style="color:red"></ul></dt></span></dl></li>\n";<br>}<br></div> ##*在工具選單中如上述方法修改(新增switchMenu程式(主選單，副選單，箭頭) 並用ul 包住副選單 dt包住主選單)：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"> <nowiki><dt><a href='#'></nowiki>工具</a> </dt><br></dl></li>\n";<br>→<br> <span style="color:red;"><dt on</span><span style="color:red;">click='switchMenu( this,".$subMenu9.",".$arrow9.")'><a href='#'>工具<nowiki><div id='arrow9' class='arrow'></nowiki></div></a></span><br> <nowiki><ul id='subMenu9' class='sub-menu' style='display:none;'>#加入副選單</nowiki><br>...<br><span style="color:red"></ul></dt></span></dl></li>\n";#加入ul dt 結尾</div> ##*新增switchmenu程式<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><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>  SubMenu.style.display = 'block';// 顯示副選單<br>  div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下<br>  VisibleMenu = theSubMenu;// 顯示選單為本副選單<br>  }<br> else{ // 隱藏子選單<br>  if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){<br>   SubMenu.style.display = 'none';// 不顯示副選單<br>   div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右<br>   VisibleMenu = '';// 顯示選單為空<br>   }<br>  }<br> }<br></script></div> ##第三種方法(details+summary)本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫，優點為改動不多，只需要改theme.php即可，不用改style.css，特別推薦。詳細新增的部分如下： (若是在設計RWD的頁面推薦本方法。) ===頁首頁尾=== 本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾的架構。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下 #新增頁首頁尾資訊，在程式前幾行(約6,7行)加入變數： #*$telephone="電話：02-XXXXXXXX"; #接下來在body的一開始，加入以下header程式碼：(其中SLOGAN為已定義變數，在SiteConstant.php檔案中，可回RWD頁面確認) #*程式：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><nowiki><body></nowiki><br><nowiki><div id='xo-banner'></nowiki><br>→<br><nowiki><body></nowiki><br><nowiki><</nowiki><span style="color:red;">div id='header'</span><nowiki>></nowiki><span style="color:red;">".SLOGAN."</span><nowiki><</nowiki><span style="color:red;">/div</span><nowiki>></nowiki><br><nowiki><div id='xo-banner'></nowiki><br></div> #最後在content和html2之間新增footer程式碼： #*程式：<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><nowiki><div id=content style='float:center;'>\n";</nowiki><br><nowiki>$html2="</div>\n</nowiki><br><nowiki></body>\n</html>";</nowiki><br>→<br><nowiki><div id=content style='float:center;'>\n";</nowiki><br><nowiki>$html2="</div>\n</nowiki><br><nowiki><</nowiki><span style="color:red;">div id='footer'</span><nowiki>></nowiki><span style="color:red;">".SLOGAN."".$telephone."</span><nowiki><</nowiki><span style="color:red;">/div</span><nowiki>></nowiki><br><nowiki></body>\n</html>";</nowiki></div> ===字體工具箱=== 在RWD網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下 #新增一個新變數(叫做字級的文字)，在theme.php大概第6,7行處，程式如下： #* $font_Size="字級："; #新增改變字體的javascript code，放在head中的最後面： #*原始程式： <br><head><br>...<br></head><br>→<br><head><br>...<br><span style="color:red;"><nowiki> <script><!--加入字體工具箱功能 --></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>function zoomOutFontSize() {</nowiki><br>  <nowiki>var obj = document.getElementById('content'),//從content選取字</nowiki><br>  <nowiki> curSize = ''; // 當前字體大小</nowiki><br>  <nowiki> obj.style.fontSize = '12px';//變成小字體}</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></span><br></head> #新增改變字體的按鈕方塊*3，放在header與xo-banner之間： #*原始程式：<br><nowiki><div id='header'>...</div></nowiki><br><nowiki><div id='xo-banner'>...</div></nowiki><br>→<br><nowiki><div id='header'>...</div></nowiki><span style="color:red;"><br><nowiki><div id='font_box'color='#000'></nowiki>".$font_Size."<br><input type='button' value='特' on click=<span></span>'zoomInInFontSize()'><br><input type='button' value='大' on click=<span></span>'zoomInFontSize()'> <br><input type='button' value='原' on click=<span></span>'zoomFontSize()'><br><input type='button' value='小' on click=<span></span>'zoomOutFontSize()'> <br> <nowiki></div></nowiki><br></span ><nowiki><div id='xo-banner'>...</div></nowiki>
返回「
RWD/theme
」頁面
導覽選單
個人工具
登入
命名空間
頁面
討論
變體
檢視
閱讀
檢視原始碼
檢視歷史
更多
搜尋
導覽
首頁
近期變更
隨機頁面
說明
工具
連結至此的頁面
相關變更
特殊頁面
頁面資訊
