網頁設計 – 第 8 頁

[轉貼]PHP: 完美實現ASP.NET MasterPage的方法

ASP.NET中的MasterPage實在是太好用了，而在PHP裏面如果只是用傳統的方法，那麼只能夠把主要版面分段，然後個別使用include()的方式將主要版面湊出來，總覺得說不出來的彆扭。而且如果切割不好，那麼主要版面一旦改版，那麼內容頁就會改到死。使用傳統方法的程式碼大概像這樣:

<body>
<div><?php include('menu.php');?></div>
<div><?php include($page_content);?></div>
<div><?php include('footer.php');?></div>
</body>

如果沒有想過這個問題，也不會去找網路資源，原來早就有人找到方法了。主板頁面就是很一般的頁面，主要用了兩個變數$pagetitle和$pagemaincontent，看名字就知道是頁面標題和主要內容。

<?php
define('app_root',$_SERVER['DOCUMENT_ROOT']);

require_once(app_root."/shared/opendb.inc");
?>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title><?php echo $pagetitle ?></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="./style/globalreset.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="./style/layout.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
    <div id="page">
        <div id="header">
            <div id="title">
                <h1><a href="./index.php"><img src='./images/logo_full.jpg' height='50' /></a></h1>
            </div>
            <div id="cart">
<?php //require_once(app_root."/shared/login.inc"); ?>        
            </div>
        </div>
        <div id="wrapper">
            <div id="sidebar">
                <div id="menubox">
<?php //require_once(app_root."/shared/navigation.inc"); ?>        
                </div>
            </div>
            <div id="mainbox">
                <div id="mainarea">
<?php echo $pagemaincontent; ?>        
                </div>
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

而內容頁面只要定義$pagetitle就好了，完整頁面的輸出就請看注解的部份。雖然這樣子做可能會小小的造成伺服器的負擔，但是跟維護比較起來，這一點點的負擔是絕對值得的。

<?php
define('app_root',$_SERVER['DOCUMENT_ROOT']);
require_once(app_root."/shared/opendb.inc");
$pagetitle = "頁面標題";
//將整個頁面輸出放到緩衝區
ob_start();
?>
頁面內容，隨便你輸出
<?php
//將緩衝區的內容放到變數裏面，然後清除緩衝區
$pagemaincontent = ob_get_contents();
ob_end_clean();
//套用主板頁面
include(app_root."/shared/master.php");
?>

php抓取網頁特定div區塊及圖片

[部分轉貼]php抓取網頁特定div區塊及圖片

//舉一反三

<?php

//取得指定位址的內容，並儲存至text

$text=file_get_contents(‘http://www.moea.gov.tw/Mns/populace/activephoto/ActivePhoto.aspx?menu_id=3874&ap_id=1666’);

//取出div標籤且id為PostContent的內容，並儲存至陣列match

preg_match(‘/<div[^>]*style=”margin-left: 37px”[^>]*>(.*?) </div>/si’,$text,$match);

//印出match

//print_r($match);

$length = count($match);

while ($i <= $length) {

echo($match[$i]);

$i++;

}

昨天有個朋友在問我說，php怎麼抓取網頁某個div區塊的內容。像funp推推王那樣每次推文都會顯示文章內的圖片，提供縮圖撰擇，又是怎麼做到的？其實這語法出乎意料的簡短…

1. 取得指定網頁內的所有圖片：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/’);   
  
//取得所有img標籤，並儲存至二維陣列match  
preg_match_all(‘#<img[^>]*>#i’, $text, $match);  
  
//印出match  
print_r($match);  
?>  

2. 取得指定網頁內的第一張圖片：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/’);  
  
//取得第一個img標籤，並儲存至陣列match（regex語法與上述同義）  
preg_match(‘/<img[^>]*>/Ui’, $text, $match);  
  
//印出match  
print_r($match);  
?>  

3. 取得指定網頁內的特定div區塊（藉由id判斷）：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/2009/01/seo%e5%8c%96%e7%9a%84%e9%97%9c%e9%8d%b5%e5%ad%97%e5%bb%a3%e5%91%8a%e9%80%a3%e7%b5%90/’);   
  
//去除換行及空白字元（序列化內容才需使用）  
//$text=str_replace(array(“r”,”n”,”t”,”s”), ”, $text);     
  
//取出div標籤且id為PostContent的內容，並儲存至陣列match  
preg_match(‘/<div[^>]*id=”PostContent”[^>]*>(.*?) </div>/si’,$text,$match);  
  
//印出match[0]  
print($match[0]);  
?>  

4. 上述2及3的結合：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/2009/01/seo%e5%8c%96%e7%9a%84%e9%97%9c%e9%8d%b5%e5%ad%97%e5%bb%a3%e5%91%8a%e9%80%a3%e7%b5%90/’);      
  
//取出div標籤且id為PostContent的內容，並儲存至陣列match  
preg_match(‘/<div[^>]*id=”PostContent”[^>]*>(.*?) </div>/si’,$text,$match);     
  
//取得第一個img標籤，並儲存至陣列match2  
preg_match(‘/<img[^>]*>/Ui’, $match[0], $match2);   
  
//印出match2[0]  
print_r($match2[0]);  
?>  

後記：用正規表達式Regex來做真的很方便，但老實說我規則常會忘掉，記錄一下幾篇文章好了（Regular Expression Details| PCRE Functions | Introduction to PHP Regex | 天殺的正規表示式…）

參考：Fetching the contents of a div tag by id

[轉貼]CSS圖片透明

http://www.dotblogs.com.tw/rab/archive/2011/01/21/css-cross-browser-support-alpha-display.aspx

要如何設定網頁中物件的透明度，又讓眾家瀏覽器都能閱讀，可利用下列的設定方式

  
.div_alpha{
 filter:alpha(Opacity=50, Style=0);/*for ie*/ 
 -moz-opacity:0.5;/* Moz + FF */ 
 opacity: 0.5;/* CSS3的標準語法，FOR支援CSS3的瀏覽器（FF 1.5）*/
}

filter:alpha(opacity)是屬於IE的私有屬性，-moz-opacity是屬於Mozilla跟FireFox的私有屬性，opacity則是標準的CSS規則，部分Moz Family也支援CSS3。後面的數值以百分比為單位，IE的Filter數值為0~100，-moz與opacity兩種數值為0~1之間，三種都設定可以確保透明的效果在以上的瀏覽器裡正確執行。

至於Mac上的Opera並不支援透明度屬性的設定，可是他支援png圖檔，所以可以利用png半透明圖檔設定為背景，也可以達到半透明背景的效果。

設定透明度會讓物件本身與子元素都一起半透明，所以文字也會一起變半透明，如果是要作遮罩效果，記得要將物件拆開設定，才不會讓文字也一併被透明化了喔!!

範例網址 / css_alpha_setting.htm