"RWD/theme" 修訂間的差異

出自 全民科學平台
前往: 導覽搜尋
(參考資料)
(選單更改 (漢堡選單 箭頭動畫))
 
(未顯示由 2 位使用者於中間所作的 27 次修訂)
行 5: 行 5:
 
theme.php主要是架構出物件的位置與引入其他程式或語言,物件的特性要在style.css中才會寫到,要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新!<br>
 
theme.php主要是架構出物件的位置與引入其他程式或語言,物件的特性要在style.css中才會寫到,要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新!<br>
 
本頁面為主題式頁面,每個段落分別對應不同的RWD需求,沒有誰先誰後的順序問題。<br>
 
本頁面為主題式頁面,每個段落分別對應不同的RWD需求,沒有誰先誰後的順序問題。<br>
更改之前的程式可參照themebackup.php,更改之後可參照theme.php。
+
更改之前的程式可參照themebackup.php,更改之後可參照theme.php。(位置在檔案櫃中 /全民科學平台/RWD/)
 
===RWD 整體畫面視覺===
 
===RWD 整體畫面視覺===
 
對於整體視覺來說,畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。
 
對於整體視覺來說,畫面視覺效果改變對theme.php的影響不大。我們只需要加上一些定義與移動即可。
 
#加入下方程式到theme.php檔案的<head>......</head>中,指定螢幕寬度為裝置寬度,畫面載入初始縮放比例 100%。
 
#加入下方程式到theme.php檔案的<head>......</head>中,指定螢幕寬度為裝置寬度,畫面載入初始縮放比例 100%。
#*原程式: <head>......</head> → <head> <meta name="viewport" content="width=device-width, initial-scale=1" />......</head>
+
#*程式: <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檔案越後面的會蓋掉前面的設定),方法如下:
 
#另外確認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' />
+
#*程式:<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>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述:
 
#漢堡表單製作<br>本小節中,將自行畫出的漢堡選單與核取方塊建立關係,並放置在畫面中(xo-banner與xo-globalnav之間)。詳細新增的部分如下:
 
#漢堡表單製作<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><input type='checkbox' name='menu-switcher' id='menu-switcher' /><!--新增核取方塊 for 展開選單--></nowiki><br><nowiki><label for='menu-switcher' class='hamburger'><!--漢堡選單按鈕 --></nowiki><br><nowiki><div class='hamburger-line'></div></label><!--漢堡選單按鈕線條--></nowiki><br><nowiki><div id='xo-globalnav'>...</div></nowiki>
+
#*程式:<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>本小節中,將在選單內放置一個箭頭,並做出旋轉的動畫設定。詳細新增的部分如下面兩個:':'
+
#箭頭動畫<br>本小節中,將在選單內放置一個箭頭,並做出旋轉的動畫設定。本頁面提供兩個方法,詳細新增的部分如下
##原始程式(theme.php第20行):<br><nowiki>$strnav.="\t\t<dt><a href='#'>".subst
+
##第一種方法(hover事件)&emsp;<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫,優點為改動不多,缺點則是在RWD狀況下較難操縱,因為平板、手機沒有滑鼠,事件設定會比較不一樣。詳細新增的部分如下面兩個: (若是在設計RWD的頁面推薦第二或第三種方法。)<br>&#8226;程式(theme.php第20行):<br><nowiki>&emsp;$strnav.="\t\t<dt><a href='#'>".subst</nowiki><span style="color:black;">r</span><nowiki>($v,1)."</a></dt>\n";#<!--加入箭頭  --> </nowiki><br>&emsp;→<br>&emsp;<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><br>&#8226;程式(theme.php第35行):<br>&emsp;<nowiki><dt><a href='#'>工具</a> </dt></nowiki><br>&emsp;→<br>&emsp;<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>
r($v,1)."</a></dt>\n";#<!--加入箭頭  --> </nowiki><br>→<br><nowiki>$strnav.="\t\t<dt><a href='#'>".subst
+
##第二種方法(click事件)&emsp;<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫,優點為較符合RWD的設計,缺點則是要多寫一段Javascript碼,改動幅度較大。若是不想那麼複雜,可以先改動成第一種方法看效果。 <span style="color:red;">(施工中)</span><br>&#8226;新增兩個新變數(副標題的編號與箭頭編號),在theme.php大概第4~6行處,程式如下:<br>&emsp;$subMenu9='&#39;subMenu9&#39;';<br>&emsp;$arrow9='&#39;arrow9&#39;';<br>&#8226;新增數個變數(讓每個副標題與箭頭編號不重複),並在$strnav中新增switchMenu程式(主選單,副選單,箭頭) 並用ul 包住副選單 dt包住主選單<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">if(gettype($導航列)=='boolean' && $導航列==false){...}<br>elseif(...){...}<br>else{<br>&emsp; ...<br>&emsp;foreach($導航列 as $v){<br>&emsp;&emsp; if(...){<br>&emsp;&emsp;&emsp; if($c==1){$strnav.="\t</dl></li>\n\t<nowiki><li><dl></nowiki>\n";}<br>&emsp;&emsp;&emsp;$strnav.="\t\t<nowiki><dt><a href='#'>".sub</nowiki><span style="color:black;">str</span>($v,1)."</a></dt>\n";<br>&emsp;&emsp; }<br>&emsp;&emsp; ...<br>&emsp; }<br>&emsp;$strnav.="\t</dl></li>\n";<br>}<br>→<br>if(gettype($導航列)=='boolean' && $導航列==false){...}<br>elseif(...){...}<br>else{<br>&emsp; ...<br>&emsp;<span style="color:red;">$number='1';<br>&emsp;$numberr="2";</span><br>&emsp;foreach($導航列 as $v){<br>&emsp;&emsp;if(...){<br>&emsp;&emsp;&emsp;if($c==1){$strnav.="\t</dl></li>\n\t<nowiki><li><dl></nowiki>\n";}<br><span style="color:red;">&emsp;&emsp;&emsp;$subMenu.=$number;<br>&emsp;&emsp;&emsp;$arrow.=$numberr;<br>&emsp;&emsp;&emsp;$number.="1";<br>&emsp;&emsp;&emsp;$numberr.="2";</span><br>&emsp;&emsp;&emsp;<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>&emsp;&emsp;}<br>&emsp;&emsp;...<br>&emsp;}<br>&emsp;$strnav.="\t<span style="color:red"></ul></dt></span></dl></li>\n";<br>}<br></div><br>&#8226;在工具選單中如上述方法修改(新增switchMenu程式(主選單,副選單,箭頭) 並用ul 包住副選單 dt包住主選單):<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">&emsp;<nowiki><dt><a href='#'></nowiki>工具</a> </dt><br></dl></li>\n";<br>→<br>&emsp;<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>&emsp;<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><br>&#8226;新增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>&emsp;var SubMenu = document.getElementById( String(theSubMenu) );// 定義程式中的副選單<br>&emsp;const div = document.getElementById( String(thearrow) );// 定義程式中的箭頭<br>&emsp;if( SubMenu.style.display == 'none' ){ // 若副選單原本未顯示<br>&emsp;&emsp;SubMenu.style.display = 'block';// 顯示副選單<br>&emsp;&emsp;div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下<br>&emsp;&emsp;VisibleMenu = theSubMenu;// 顯示選單為本副選單<br>&emsp;&emsp;}<br>&emsp;else{ // 隱藏子選單<br>&emsp;&emsp;if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){<br>&emsp;&emsp;&emsp;SubMenu.style.display = 'none';// 不顯示副選單<br>&emsp;&emsp;&emsp;div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右<br>&emsp;&emsp;&emsp;VisibleMenu = '';// 顯示選單為空<br>&emsp;&emsp;&emsp;}<br>&emsp;&emsp;}<br>&emsp;}<br></script></div> </div>
r($v,1)."<div class='arrow'></div></a></dt>\n";*/ </nowiki>
+
##第三種方法(details+summary)&emsp;<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫,優點為改動不多,只需要改theme.php即可,不用改style.css,特別推薦。詳細新增的部分如下: (若是在設計RWD的頁面推薦本方法。)<br>&#8226;在$strnav中用details 包住選單 summary包住標題 html會自動產生箭頭&emsp;<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">if(gettype($導航列)=='boolean' && $導航列==false){...}<br>elseif(...){...}<br>else{<br>&emsp;...<br>&emsp;$strnav.="\t<nowiki><li><dl></nowiki>\n";<br>&emsp;foreach($導航列 as $v){<br>&emsp;&emsp;if(...){<br>&emsp;&emsp;&emsp;if($c==1){$strnav.="\t</dl></li>\n\t<nowiki><li><dl></nowiki>\n";}<br>&emsp;&emsp;&emsp;$strnav.="\t\t<nowiki><dt><a hr</nowiki><nowiki>ef='#'>".sub</nowiki><span style="color:black;">str</span>($v,1)."</a></dt>\n";<br>&emsp;&emsp;}<br>&emsp;&emsp;...<br>&emsp;}<br>...}<br>→<br>if(gettype($導航列)=='boolean' && $導航列==false){...}<br>elseif(...){...}<br>else{<br>&emsp;...<br>&emsp;<span style="color:red;"><br>&emsp;$strnav.="\t<nowiki><li><dl><details></nowiki>\n";</span><br>&emsp;foreach($導航列 as $v){<br>&emsp;&emsp;if(...){<br>&emsp;&emsp;&emsp;if($c==1){<span style="color:red;">$strnav.="\t</details></dl></li>\n\t<nowiki><li><dl><details></nowiki>\n";</span>}<br>&emsp;&emsp;&emsp;<span style="color:red;">$strnav.="\t\t<nowiki><summary></nowiki><a href<span></span>='#'>".sub</span><span style="color:red;">str($v,1)."</a></summary>\n </span><br>&emsp;&emsp;}<br>&emsp;&emsp;...<br>&emsp;}<br>...}<br></div>&#8226;在工具選單中如上述方法修改(用details 包住選單 summary包住標題):<div class="mw-collapsible mw-collapsed" data-collapsetext="展開">&emsp;<nowiki><dt><a hr</nowiki><nowiki>ef=</nowiki><span></span><nowiki>'#'></nowiki>工具</a></dt><br>...<br></dl></li>\n";<br>→<br>&emsp;<span style="color:red;"><nowiki><details></nowiki><br><nowiki><summary><a hr</nowiki><nowiki>ef='#'></nowiki>工具</a></summary><br>...<br></details></dl></li>\n";  </span></div> &#8226;新增展開後收起程式<span style="color:red">(注意 這邊要放在主程式的.$strnav.被引進之後)</span><div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><nowiki><div id='xo-globalnav'></nowiki><br><nowiki>&emsp;<div style='float:center;'></nowiki><br><nowiki>&emsp;&emsp;<ul class='navigation'>".$strnav."</nowiki><br><nowiki>&emsp;&emsp;</ul></nowiki><br>&emsp;<nowiki></div></nowiki><br><nowiki></div></nowiki><br><span style="color:red"><script language = 'javascript'><br>&emsp;var details = [...document.querySelectorAll('details')];<br>&emsp;document.addEventListener('click', function(e) {<br>&emsp;if (!details.some(f => f.contains(e.target))) {<br>&emsp;&emsp;details.forEach(f => f.removeAttribute('open'));<br>&emsp;} else {<br>&emsp;&emsp;details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : <nowiki>''</nowiki>);<br>&emsp;&emsp;}<br>&emsp;})<br></script></span>  </div>
##原始程式(theme.php第35行):<br><nowiki><dt><a href='#'>工具</a> </dt></nowiki><br>→<br><nowiki><dt><a href='#'>工具<div class='arrow'></div></a> </dt>!--加入箭頭  --></nowiki>
 
  
 
===頁首頁尾===
 
===頁首頁尾===
本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下
+
本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾的架構。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下
#新增頁首
+
#新增頁首頁尾資訊,在程式前幾行(約6,7行)加入變數:
#頁首頁尾
 
 
#*$telephone="電話:02-XXXXXXXX";
 
#*$telephone="電話:02-XXXXXXXX";
#*<nowiki><div id='header'>".SLOGAN."</div></nowiki>
+
#接下來在body的一開始,加入以下header程式碼:(其中SLOGAN為已定義變數,在SiteConstant.php檔案中,可回RWD頁面確認)
#*<nowiki><div id=content style='float:center;'>\n";</nowiki>
+
#*程式:<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程式碼:
#*<nowiki>$html2="</div>\n<div id='footer'>".SLOGAN."</nowiki>
+
#*程式:<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>
#*<nowiki>".$telephone."</div></body>\n</html>";</nowiki>
 
  
 
===字體工具箱===
 
===字體工具箱===
 
在RWD網頁中,我們有時候需要更改文字大小才會方便在小螢幕上閱讀,讓使用者體驗更好!本章節是將原本無法改變字體大小的網頁,加上一個字體工具箱,使其可以改變字體大小。方法如下
 
在RWD網頁中,我們有時候需要更改文字大小才會方便在小螢幕上閱讀,讓使用者體驗更好!本章節是將原本無法改變字體大小的網頁,加上一個字體工具箱,使其可以改變字體大小。方法如下
#*新增$font_Size="字級:";
+
#新增一個新變數(叫做字級的文字),在theme.php大概第6,7行處,程式如下:
#*新增改變字體code
+
#* $font_Size="字級:";
#*新增 <script><!--加入字體工具箱功能 by 芸伍-->
+
#新增改變字體的javascript code,放在head中的最後面:
#*新增 function zoomInInFontSize() {
+
#*程式:  <div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><head><br>...<br></head><br>→<br><head><br>...<br><span style="color:red;"><nowiki> <script><!--加入字體工具箱功能 --></nowiki><br>&emsp;<nowiki>function zoomInInFontSize() {</nowiki><br>&emsp;&emsp;<nowiki>var obj = document.getElementById('content'),//從content選取字</nowiki><br>&emsp;&emsp;<nowiki> curSize = '';  // 當前字體大小</nowiki><br>&emsp;&emsp;<nowiki> obj.style.fontSize =  '40px';//變成特大字體}</nowiki><br>&emsp;<nowiki>function zoomInFontSize() {</nowiki><br>&emsp;&emsp;<nowiki> var obj = document.getElementById('content'),//從content選取字</nowiki><br>&emsp;&emsp;<nowiki> curSize = '';  // 當前字體大小</nowiki><br>&emsp;&emsp;<nowiki>obj.style.fontSize = '30px';//變成大字體}</nowiki><br>&emsp;<nowiki>function zoomFontSize() {</nowiki><br>&emsp;&emsp;<nowiki> var obj = document.getElementById('content'),//從content選取字</nowiki><br>&emsp;&emsp;<nowiki> curSize = '';  // 當前字體大小</nowiki><br>&emsp;&emsp;<nowiki>obj.style.fontSize =  '16px';//變成原始字體}</nowiki><br>&emsp;<nowiki>function zoomOutFontSize() {</nowiki><br>&emsp;&emsp;<nowiki>var obj = document.getElementById('content'),//從content選取字</nowiki><br>&emsp;&emsp;<nowiki> curSize = '';  // 當前字體大小</nowiki><br>&emsp;&emsp;<nowiki> obj.style.fontSize =  '12px';//變成小字體}</nowiki><br>&emsp;<nowiki> // 創建一個容器,來測算當前字體大小</nowiki><br>&emsp;<nowiki> var getFontSize = function() {</nowiki><br>&emsp;&emsp;<nowiki> var oDiv = document.createElement('div');</nowiki><br>&emsp;&emsp;<nowiki> oDiv.innerHTML = 'ABC測試';  // 寫入任意字元</nowiki><br>&emsp;&emsp;<nowiki> oDiv.style.lineHeight = 1;</nowiki><br>&emsp;&emsp;<nowiki> oDiv.style.position = 'absolute';</nowiki><br>&emsp;&emsp;<nowiki> oDiv.style.top = '-9999em';</nowiki><br>&emsp;&emsp;<nowiki> document.body.appendChild(oDiv);</nowiki><br>&emsp;&emsp;<nowiki> return oDiv.offsetHeight; };</nowiki><br>&emsp;<nowiki>   </script></nowiki></span><br></head></div>
#*新增  var obj = document.getElementById('content'),//從content選取字
+
#新增改變字體的按鈕方塊*3,放在header與xo-banner之間:
#*新增 curSize = '';  // 當前字體大小
+
#*程式:<div class="mw-collapsible mw-collapsed" data-collapsetext="展開"><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></div>
#*新增 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>
 
===參考資料===
 
<nowiki>sub</nowiki><span style="color:black;"><nowiki>str($v,1,1)</span></nowiki>
 

於 2022年3月18日 (五) 12:39 的最新修訂


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

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. 第一種方法(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大概第4~6行處,程式如下:
       $subMenu9=''subMenu9'';
       $arrow9=''arrow9'';
      •新增數個變數(讓每個副標題與箭頭編號不重複),並在$strnav中新增switchMenu程式(主選單,副選單,箭頭) 並用ul 包住副選單 dt包住主選單
      if(gettype($導航列)=='boolean' && $導航列==false){...}
      elseif(...){...}
      else{
        ...
       foreach($導航列 as $v){
         if(...){
          if($c==1){$strnav.="\t</dl></li>\n\t<li><dl>\n";}
         $strnav.="\t\t<dt><a href='#'>".substr($v,1)."</a></dt>\n";
         }
         ...
        }
       $strnav.="\t</dl></li>\n";
      }

      if(gettype($導航列)=='boolean' && $導航列==false){...}
      elseif(...){...}
      else{
        ...
      $number='1';
       $numberr="2";

       foreach($導航列 as $v){
        if(...){
         if($c==1){$strnav.="\t</dl></li>\n\t<li><dl>\n";}
         $subMenu.=$number;
         $arrow.=$numberr;
         $number.="1";
         $numberr.="2";

         $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";
        }
        ...
       }
       $strnav.="\t</ul></dt></dl></li>\n";
      }

      •在工具選單中如上述方法修改(新增switchMenu程式(主選單,副選單,箭頭) 並用ul 包住副選單 dt包住主選單):
       <dt><a href='#'>工具</a> </dt>
      </dl></li>\n";

      <dt onclick='switchMenu( this,".$subMenu9.",".$arrow9.")'><a href='#'>工具<div id='arrow9' class='arrow'></div></a>
       <ul id='subMenu9' class='sub-menu' style='display:none;'>#加入副選單
      ...
      </ul></dt></dl></li>\n";#加入ul dt 結尾

      •新增switchmenu程式
      <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' ){ // 若副選單原本未顯示
        SubMenu.style.display = 'block';// 顯示副選單
        div.style.transform = 'rotate(135deg)';// 旋轉箭頭往下
        VisibleMenu = theSubMenu;// 顯示選單為本副選單
        }
       else{ // 隱藏子選單
        if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){
         SubMenu.style.display = 'none';// 不顯示副選單
         div.style.transform = 'rotate(45deg)';// 旋轉箭頭往右
         VisibleMenu =
      ;// 顯示選單為空
         }
        }
       }
      </script>
    3. 第三種方法(details+summary) 
      本方法讓滑鼠按下選單時就會觸發箭頭旋轉的動畫,優點為改動不多,只需要改theme.php即可,不用改style.css,特別推薦。詳細新增的部分如下: (若是在設計RWD的頁面推薦本方法。)
      •在$strnav中用details 包住選單 summary包住標題 html會自動產生箭頭 
      if(gettype($導航列)=='boolean' && $導航列==false){...}
      elseif(...){...}
      else{
       ...
       $strnav.="\t<li><dl>\n";
       foreach($導航列 as $v){
        if(...){
         if($c==1){$strnav.="\t</dl></li>\n\t<li><dl>\n";}
         $strnav.="\t\t<dt><a href='#'>".substr($v,1)."</a></dt>\n";
        }
        ...
       }
      ...}

      if(gettype($導航列)=='boolean' && $導航列==false){...}
      elseif(...){...}
      else{
       ...

       $strnav.="\t<li><dl><details>\n";

       foreach($導航列 as $v){
        if(...){
         if($c==1){$strnav.="\t</details></dl></li>\n\t<li><dl><details>\n";}
         $strnav.="\t\t<summary><a href='#'>".substr($v,1)."</a></summary>\n
        }
        ...
       }
      ...}
      •在工具選單中如上述方法修改(用details 包住選單 summary包住標題):
       <dt><a href='#'>工具</a></dt>
      ...
      </dl></li>\n";

      <details>
      <summary><a href='#'>工具</a></summary>
      ...
      </details></dl></li>\n";
      •新增展開後收起程式(注意 這邊要放在主程式的.$strnav.被引進之後)
      <div id='xo-globalnav'>
       <div style='float:center;'>
        <ul class='navigation'>".$strnav."
        </ul>
       </div>
      </div>
      <script language = 'javascript'>
       var details = [...document.querySelectorAll('details')];
       document.addEventListener('click', function(e) {
       if (!details.some(f => f.contains(e.target))) {
        details.forEach(f => f.removeAttribute('open'));
       } else {
        details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
        }
       })
      </script>

頁首頁尾

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

  1. 新增頁首頁尾資訊,在程式前幾行(約6,7行)加入變數:
    • $telephone="電話:02-XXXXXXXX";
  2. 接下來在body的一開始,加入以下header程式碼:(其中SLOGAN為已定義變數,在SiteConstant.php檔案中,可回RWD頁面確認)
    • 程式:
      <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網頁中,我們有時候需要更改文字大小才會方便在小螢幕上閱讀,讓使用者體驗更好!本章節是將原本無法改變字體大小的網頁,加上一個字體工具箱,使其可以改變字體大小。方法如下

  1. 新增一個新變數(叫做字級的文字),在theme.php大概第6,7行處,程式如下:
    • $font_Size="字級:";
  2. 新增改變字體的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. 新增改變字體的按鈕方塊*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>
取自 "http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&oldid=6583"