YouTube 影片下載與轉檔

一、YouTube 影片下載

YouTube 網址：http://www.youtube.com、http://tw.youtube.com/
GooTube FLV Retriever：http://kej.tw/flvretriever/
YourV：http://www.yourv.net/index_tc.php (目前已停用)
Orbit Downloader：http://www.orbitdownloader.com/

一般要找出網頁中的影片檔網址，可以打開它的 HTML 原始檔，尋找
文章提供: BAYSTARS DESIGN網頁設計公司

[jQuery] lightbox 彈出時造成頁面上的 Flash 消失

最近工做上需求使用了 lightbox2 燈箱效果（jQuery 版，jquery-lightbox-0.5.js），而當 lightbox 彈出後，頁面上的 Flash 項目卻都消失了。看了一下 jquery-lightbox-0.5.js 的原始碼，原來是為了避免 Flash 顯示於最上層，也就是跑到 overlay 黑底的上面，而加上蹦現時將 embed、object 與 select 元素隱藏的語法。

其實可以利用 Flash 的 wmode 屬性避免這種現象，同時也可在燈箱效果出現時顯示 Flash（當然，是在 overlay 黑底下方）。

1、首先打開 jquery-lightbox-0.5.js，在約 68 行處找到：

程序代碼

1 $('embed, object, select').css({ 'visibility' : 'hidden' });

將該行刪除或加上註解，使之失效。

2、接著至原 HTML 頁面，將 Flash 項目加上 wmode 屬性，屬性值 transparent。
此部份自行搜尋關於 Flash 與 DIV 圖層先後順序的問題，在此不再贅述。

如此應該就能在 lightbox 效果出現時，保持 Flash 項目了。

文章提供: BAYSTARS DESIGN網頁設計公司

跨瀏覽器邊框探索

雖然起了一個看似很牛逼的題目，但本文可以說完全是蛋疼的人（比如我~）的一種消遣~通常開發人員都有自己的放鬆方式。緣起壇裡某位xd問的一個關於邊框的問題，於是就打算搞搞清楚。寫文章用不了太久，倒是圖材準備了老半天。謹以此文，讓我們來消遣下各個瀏覽器對於邊框的理解方式。

參與此次測試的瀏覽器包括windows下的幾乎全部：ie6，ie7，ie8，ie9preview，chrome，firefox，safari，opera，seamonkey。各版本皆為網上下載的最新版。並且由於這次的測試裡，IE678的表現一致，firefox和seamonkey又是裙帶，所以合併作IE8和firefox。下圖就是這次瀏覽器的截圖：



上面的這種排列順序是故意的。下面的測試裡就會顯示出其原因，截圖也都是按照這個順序排列的。

首先看下面這張圖，六種瀏覽器裡顯示了一個20X20的DIV，其邊框為top:2px，其餘1px。似乎沒有什麼不同。這是由於1px的細微讓我們沒有在意。(事實上這整個問題我們本來就不需要在意~)



先把問題簡單化，單邊2px，三邊1px，並將結果放大5倍，我們能清楚的看到這種差異——opera和safari相反，ie8缺胳膊少腿，下面三個傢伙一致~這裡要注意到的是第二行3者在交匯處都有漸進效果。



也許我們該讓這種效果變得更加明顯。當僅僅加粗單邊之後(10px)，IE8的怪癖顯露無疑。opera和safari依舊相對。下面3個統一戰線的漸進變的更加明顯。



假如顛倒下會是怎樣？3邊加厚，結果是有些出乎意料的。opera的表現很詭異，換句話說，它頂上的那條線，在上面的例子裡「優先」了只是一種巧合。IE表現的更加像opera，而不是它缺胳膊少腿的一貫形象。safari貫徹始終，並且，下面三個傢伙的結果也是意料之內的。



回到最開始第一幅圖的地方。用4種顏色分別畫4條邊。這裡仍舊是放大5倍，現在就能更加清楚的看到IE8的做法。



在邊框寬度都相同的情況下，每個瀏覽器都表現的挺好。對於邊框斜角的應用我最早在《Eric Meyer on CSS 1》裡看到。這種45度斜角使用上沒有危險性，但是其他角度就未必是這樣了，特別是用在雙線的時候。
這裡留意下面三個截圖，FF和chrome，ie9的表現是不同的。可以看到漸進的處理方式不相同。chrome和ie9交匯處有白邊，但是FF沒有。



下面就是雙線了，這又出了一個問題，就是ie9的雙線是糊的…由於用的是4條等寬邊框，其它看起來似乎都不錯。



於是，換用一種糟糕點的角度呢？ie8首先不成框樣，居然用空隙…感覺上非常粗糙。另外ie9糊的真水…



當我再嘗試一些角度時，Opera也出問題了，它的邊框顯得多餘很難看，簡直和ie8有的一拼…



當然，本來瀏覽器對於線型的解釋就不同，所以實線之外的，就沒有什麼參考價值了，這裡僅做娛樂~~
dotted之後，盡顯衣缽本色。



dashed又如何？同是webkit，表現卻並不像剛才的dotted那麼相同。ie8依舊很詭異，只有4個點，上下的線消失了…事實上，之所以這裡把DIV加長到20×30，是因為，20×20，不夠ie8顯示這麼寬的dashed線型，那4個點也會消失的~



下面就是最有趣的地方了，當DIV的尺寸變成20×40，線寬如圖所示，結果，ie8和ie9是可以合體的！！！它們的合體可以組成一個完整的獨一無二的solid框！一像素都不差~



當將DIV的尺寸加到的89×39的時候，ie8才完全顯示出dashed框，並且此時chrome會突然變得和safari不同。



好了，也算的上是一輪瀏覽器的探索了。或者說消遣，再或者說無用工。因為沒有結論，只有現象，而且還是無用的現象。但仍然希望這能勉強算的上是塊磚頭，期待高見


文章提供: BAYSTARS DESIGN網頁設計公司

漂亮的大背景圖片導航欄CSS & jQuery

在這個教程中我們學習如何製作擁有大塊背景的導航欄。主要的想法如果有三個列表項但包含不同的背景，當你切換哪個選項背景就隨之變換的效果，當然是包含動畫效果的。導航欄也包括子菜單，每欄子菜單都擁有各自的不同顏色背景。


View Demo

Step1. 創建HTML

程序代碼

    

        
• 
              Home
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
        
• 
              About Me
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
        
• 
              Contact
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
    

Step2. 創建CSS

程序代碼

.menuWrapper{
width: 797px;
font-size: 14px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: normal;
line-height: 1.45em;
position: relative;
margin: 20px auto;
background-position: 0 0;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu{
width: 797px;
list-style: none;
overflow: hidden;
}
ul.menu > li{
width: 265px;
height: 542px;
float: left;
border-right: 1px solid #444;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu > li.last{
border:none;
}
.bg1{
background-image: url(../images/1.jpg);
}
.bg2{
background-image: url(../images/2.jpg);
}
.bg3{
background-image: url(../images/3.jpg);
}
ul.menu > li > a{
width: 265px;
float: left;
margin-top: 450px;
text-align: center;
line-height: 50px;
color: #ddd;
background-color: #333;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
font-weight: bold;
}
ul.menu > li ul{
width: 100%;
height: 110px;
list-style: none;
float: left;
margin-top: -180px;
padding-top: 20px;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu > li ul li{
display: none;
}
ul.menu > li ul.sub1{
background-image: url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image: url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image: url(../images/bg3sub.png);
}
ul.menu > li ul li a{
color: #fff;
text-decoration: none;
line-height: 30px;
margin-left: 20px;
font-size: 12px;
}
ul.menu > li ul.sub1 li{
display: block;
}
ul.menu > li ul li a:hover{
color: #BBB;
text-decoration: underline;
}

Step3. 插入jQuery和腳本包

程序代碼

腳本:
$(function() {
    /* position of the

that is currently shown */ 當前li位置顯示
    var current = 0;

    var loaded  = 0;
    for(var i = 1; i <4;   i)
        $('').load(function(){
              loaded;
            if(loaded == 3){
                $('#bg1,#bg2,#bg3').mouseover(function(e){

                    var $this = $(this);
                    /* if we hover the current one, then don't do anything */ 瀏覽當前的一個
                    if($this.parent().index() == current)
                        return;

                    /* item is bg1 or bg2 or bg3, depending where we are hovering */ b1 b2 b3取決於自己瀏覽
                    var item = e.target.id;

                    /*
                    this is the sub menu overlay. Let's hide the current one
                    if we hover the first

or if we come from the last one,
                    then the overlay should move left -> right,
                    otherwise right->left
                     */ 子菜單的狀態，用來隱藏當前選項
                    if(item == 'bg1' || current == 2)
                        $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
                            $(this).find('li').hide();
                        });
                    else
                        $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
                            $(this).find('li').hide();
                        });

                    if(item == 'bg1' || current == 2){
                        /* if we hover the first

or if we come from the last one, then the images should move left -> right */
                        $('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                        move(1,item);
                    }
                    else{
                        /* if we hover the first

or if we come from the last one, then the images should move right -> left */
                        $('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                        move(0,item);
                    }

                    /*
                    We want that if we go from the first one to the last one (without hovering the middle one),
                    or from the last one to the first one, the middle menu's overlay should also slide, either
                    from left to right or right to left.
                     */
                    if(current == 2 && item == 'bg1'){
                        $('#menu .sub' parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
                    }
                    if(current == 0 && item == 'bg3'){
                        $('#menu .sub' parseInt(current 2)).stop().animate({backgroundPosition:"(266px 0)"},300);
                    }

                    /* change the current element */
                    current = $this.parent().index();

                    /* let's make the overlay of the current one appear */

                    $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
                        $(this).find('li').fadeIn();
                    });
                });
            }
        }).attr('src', 'images/' i '.jpg');

    /*
    dir:1 - move left->right
    dir:0 - move right->left
     */
    function move(dir,item){
        if(dir){
            $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
            $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
                $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
            });
        }
        else{
            $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
                $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
            });
            $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
        }
    }
});

Download


文章提供: BAYSTARS DESIGN網頁設計公司

10個糟糕的IE Bug及其修復

國外有很多優秀的文章可以用來學習，決定花些時間翻譯。並不知道這篇文章有沒有人翻譯過，原文名 10 Awful IE Bugs and Fixes，希望能有更多人能看到這些優秀的文章。外國人很幽默，所以也就全文翻了。高手繞道

以下為譯文：

列舉了10個常見的IE bug和解決方法。相信這將能夠幫助你減少調試IE佈局不一致時花掉的時間。

作者：kevin

簡介

在處理IE方面每個人都有他們自己的故事。作為一個開發者不得不面對大量的IE的古里古怪的問題並且有的時候你只是想用頭撞牆。但是隨著時間的推移，慢慢吃一塹長一智（有些時候那不是的錯，是IE的錯！）並且開始接受和理解IE的怪異行為。不得不這樣因為仍然有數量可觀的IE6用戶。最好的做法是一開始就不斷的從不同的瀏覽器測試你的網站。從一開始就解決佈局問題要比在數千行html和css代碼之後容易的多。

有很多運動在抗議IE6，支持它的是大多數web專家和看起來不怎麼關心的普通用戶。所以，現在能做什麼？不得不繼續挖掘來解決IE6的問題。但是，等一下，有一個振奮人心的消息。基於w3cschool的月度報表，IE6的用戶這些年已經減少了一些。從2006年6月的60.3%到現在2009年9月的13.6%。按照這種比例，應該能在2010年年底的時候放棄IE6(譯註：國外的情況還真是一片大好啊~。~)

好了，回到現實，已經列出了全部之前遇到的問題作為未來參考的列表。相信這將能夠幫助你減少調試IE佈局不一致時花掉的時間。

1、IE6 幽靈文本(Ghost Text bug)

在寫本文之前，遇到了這個bug。它相當的古怪和滑稽。一塊不知哪來的重複的文本，被IE6顯示在靠近原文本的下面。(譯註：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。無法解決它，所以搜索它，果然，這是另一個IE6的bug。

對此有許多解決方法，但是沒有一個對的例子有效(因為網站的複雜性無法使用其中的一些方法)。所以使用了hack。在原文本之後增加空格看起來能解決這個問題。

但是，從 Hippy Tech Blog 那裡瞭解到，問題背後的原因是由於html註釋標籤。IE6不能正確的渲染它。下面是他建議的解決方案列表：

解決方法：

1. 使用標籤包圍註釋
2. 移除註釋
3. 在前浮動上增加樣式 {display:inline;}
4. 在適當的浮動的div上使用負邊距
5. 在原文本增加額外的 (比如10個空格) (hacky way)

2、相對位置和溢出隱藏(Position Relative and Overflow Hidden)

這個問題遇到過很多次，當時正在準備一個JQuery的教程，因為使用了很多overflow hidden來達到想要的佈局。
問題發生在當父元素的overflow被設置成hidden並且子元素被設置成position:relative。
CSS-Trick有一個很好的例子來演示這個bug。position:relative and overflow in internet explorer

解決方法：

為父元素增加 position:relative;

3、IE的最小高度(Min-Height for IE)

這很簡單，IE忽略min-height屬性。你可以用下面的hack來修復它。感謝Dustin Diaz。

這個解決方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2里都工作的很好。

解決方法：

程序代碼

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}

4、Bicubic圖像縮放(Bicubic Image Scaling)

你會喜歡這個的。IE那糟糕圖像縮放讓你很困擾？如果你拿IE和其他瀏覽器比較，IE縮小的圖像看起來不如其他瀏覽器。



解決方法：

程序代碼

img { -ms-interpolation-mode: bicubic; }

5、 PNG透明(PNG Transparency)

猜每個人都知道這個，但仍把它列在這裡，作為以後的參考。
所以如果你想要使用透明圖像並且GIF不能給你想要的質量，你會需要這個對PNG的hack。你必須意識到，如果你使用一張PNG圖像作為背景，你將不能設置背景的位置。

解決方法：

程序代碼

img {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

6、 IFrame透明背景 (IFrame Transparent Background)

在firefox和safari裡你應該不會遇到這個問題因為默認情況下，iframe的背景被設置為transparent，但是在IE裡，卻不是如此。你需要用到allowTransparency 屬性並且加入下面的CSS代碼來達成目的。

解決方法：

程序代碼

/* in the iframe element */


/* in the iframe docuement, in this case content.html */
body {
    background-color:transparent;    
}

7、禁用IE默認的垂直滾動條(Disabled IE default Vertical Scroll bar)

默認情況下，即使內容適合窗口大小，IE(譯註：IE6/7)也會顯示垂直滾動條。你可以使用overflow:auto，讓滾動條只在你需要時出現。

程序代碼

html {
    overflow: auto;
}

8、:hover偽類(:hover Pseudo Class)

IE只支持元素的 :hover偽類。你可以使用jQuery的hover event來達到相同效果。

解決方法：

程序代碼

/* jQuery Script */
$('#list li').hover(

    function () {
        $(this).addClass('color');
    },

    function() {
        $(this).removeClass('color');
    }
);

/* CSS Style */
.color {
    background-color:#f00; 
}

/* HTML */  

      
• Item 1
      
• Item 2
      
• Item 3
  

9、盒模型Hack(Box Hack Model)

這是IE裡最熱門的bug了。基本的理解是，IE計算寬度(width)的方式不同。基於w3c標準，一個元素總寬度應該是：
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是，IE計算寬度時沒有加上填充和邊框：
總寬度 = margin-left + width + margin-right

更多的細節，請參考這個鏈接：Internet Explorer和CSS盒模型詳細解釋

解決方法：

使用w3c的標準兼容模式。IE6或者之後的版本能基於w3c的標準計算，但是你仍舊會在IE5中遇到問題。

或者你可以用CSS Hack來解決這個問題。所有標準兼容的瀏覽器都能讀取w\\idth:180px 除了IE5。

程序代碼

#content {
    padding:10px;
    border:1px solid;
    width:200px;
    w\\idth:180px;
}

10、 雙倍邊距bug(Double Margin Bug Fix)

如果你有一個分配有左/右邊距的浮動元素，IE6會使得邊距雙倍化。比如，margin-left:5px 將會變成10px。你可以通過對浮動元素添加display:inline來解決這個問題。

解決方法：

程序代碼

div#content {
    float:left;
    width:200px;
    margin-left:10px;

    /* fix the double margin error */
    display:inline;
}

文章提供: BAYSTARS DESIGN網頁設計公司

移動網站開發-標記語言

移動互聯網被稱為「第五次科技革命」，而隨著iPhone和Android等智能手機的日漸流行和iPad等平板電腦的出現，移動互聯網的潛力和趨勢也愈發顯現，針對移動設備的網站開發越來越受到關注，國內很多公司也開始重視面向所有移動設備的網站開發。

一般來說，對於移動網站可以採取兩種方式：

專門開發一個獨立的移動版本
使用media type和media query控制網站在移動瀏覽器的表現
本文和下一篇文章將介紹第一種方案，後面的文章將結束第2種方案。

本文我們先瞭解一下移動網站的標記語言。

移動網站標記語言的演進

我們先看一下 @AdrianF2E 分享的一張《移動web相關標記語言的演進》的圖表，一目瞭然：


點擊放大

這張圖形象的展示了標記語言的發展歷程，包括移動網站標記語言。

移動網站開發要比普通的網站開發複雜的多，選擇一種用於移動網站的標記語言同樣相當糾結。

在最初，WAP論壇(後來和NTT合併，組成OMA，Open Mobile Alliance)創建了一種基於XML的語言，稱為WML，這是用於WAP網站的標記語言。它並不是理想的方案，因為它將網站分割為兩部分：普通頁面使用(X)HTML，而移動網站使用WML。網站開發者想要做一個移動網站也不得不學習一種新的語言而不是轉換技術，「一站式」的信條也被打破，用戶不能訪問他們喜歡的網站並且不得不發現這個網站的WAP版本——如果它們存在的話。另外日本的NTT創建了他們自己的語言cHTML(compact HTML)，但是它並不能與XHTML和WML兼容。

由於這與理想中的方案相去甚遠，W3C創建了XHTML Basic 1.0。正如其名，這是一個XHTML 1.1的子集。由於XHTML 1.1將XHTML改善為小型的模塊，一個子集就可以只包含一些必須的或者可以在低端移動設備上控制的基本的模塊、元素和屬性。

基於XHTML

XHTML Basic為針對移動網站的標記語言提供基礎的模塊。與其基礎的XML一樣，它也被設計用於擴展。這正好結合了WAP和NTT的合併之後(也就是OMA)的做法，他們創建了cHTML和WML的繼承者XHTML Mobile Profile——它在XHTML Basic的基礎上添加了一些在它們之前的版本中有的特性。XHTML Basic和XHTML MP共存的狀況看起來有些混亂，但是之後不久W3C就發佈了XHTML 1.1版本，吸收了在XHTML MP中加入的一些特性。所以現在看來這兩個版本差不多是一樣的，至於使用哪個很多時候只是看個人喜好了。這裡我們選擇XHTML Basic，因為它是W3C推薦的….. :)

開始使用XHTML Basic

由於XHTML Basic是XHTML的一個子集，如果你已經瞭解XHTML的開發，那麼開始製作XHTML Basic的頁面就手到擒來了。

程序代碼

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=="en">
<head>
  <title>Hello Mobile</title>
</head>
<body>
</body>
</html>

是的，只是加了個XML的頭聲明，然後使用xhtml basic的DTD。

XHTML Basic 支持的模塊

模塊 元素/屬性
結構：html, head, title, body
文字：abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
鏈接：a
列表：dl, dt, dd, ol, ul, li
表單：button, fieldset, form, input, label, legend, select, optgroup, option, textarea
表格：aption, table, td, th, tr
圖片：img
對像：object, param
表現：b, big, hr, i, small, sub, sup, tt
元信息：meta
鏈接：link
base：base
事件：onblur, onfocus, onload, onunload, onreset, onsubmit, onchange
腳本：script, noscript
樣式：支持style元素
樣式屬性：支持style屬性
目標：支持target屬性

不支持的內容：

不支持外部CSS文件
不支持嵌套table；
不支持thead、tbody、tfood等；
不支持name屬性；
不支持框架；
不支持del、ins、basefont、center、dir、font、isindex、menu、sstricke、u等元素。

注意事項：

對事件的支持依賴具體的瀏覽器支持，有些瀏覽器不一定支持這些事件；
webkit支持更多的事件
opera mini由於是基於自己的代理服務器，有些事件是不支持的，詳見：JavaScript support in Opera Mini 4
XHTML MP

正如之前提到的，XHTML MP是對XHTML Basic的一個擴展，所以XHTML MP有更好的適用性。而XHTML MP對於Basic最大的優勢就是支持外部樣式文件——雖然這會導致多一個HTTP請求。

這裡是一份關於XHTML MP和XHTML basic的對比表。

PS:事實上，WAP 2.0也就是XHTML MP，也就是說，WAP 2.0與WAP 1.0關係不大。

兼容性與現狀

根據W3C的統計，現在絕大部分手機都支持WAP 2.0了，使用WAP 1.0的設備已經非常的少了；
根據觀察，絕大多數網站的移動版本，都是採用XHTML MP規範；
大部分網站使用內聯樣式表，而不是外部樣式文件；
非常多的Mobile版本頁面採用table佈局；
Opera mini可以在所有支持java的手機上使用，而Opera mini支持全部的(X)HTML特性。
所以，如果你想要開發一個移動版的網站，可以放心的使用XHTML Basic 1.1 /MP。

HTML5

Mobile Webkit是目前對標準支持最好的移動瀏覽器，它支持所有的XHTML特性，同時對HTML5的支持也非常棒。如果你的項目只針對iPhone 和(或) Android，完全可以使用HTML 5來編碼。

事實上作為又一個很強勁的趨勢，HTML 5眾望所歸要成為下一代的網頁標準，Google、apple、opera和微軟等互聯網巨頭一直在努力推廣和推進HTML 5。opera認為HTML 5是統一移動互聯網的關鍵。

總結與展望

正如之前所說的，XHTML basic支持了大部分在XHTML中定義的基礎特性，所以對於大部分前端開發人員來說，開發一個基於XHTML Basic 1.1或XHTML MP的網站並不困難。但是由於移動設備廠商和設備都非常的多，所以各個設備在對某個細節上可能會有差異。

W3C存在的最大價值，是為我們提供成熟而統一的解決方案，雖然XHTML MP成了事實上的Mobile 標準，但是顯然XHTML Basic功不可沒，如果說兩者並存尚容易讓我們混淆的話，希望在不久的將來，HTML 5能夠成為移動互聯網中事實上的標準，這無疑將大大減少我們的開發需求。

但是由於現實中很難將所有的設備統一，這就造成實現方式的必然存在差異。可以預見，XHTML Basic /MP和HTML 5將成為兩種並行的規範存在，我們不得不用XHTML Basic/MP為低端設備開發基礎頁面，同時使用HTML 5為iPhone和Android等系統實現富界面。

整理自：Mobile markup – XHTML Basic 1.1

參考：

XHTML MP (XHTML Mobile Profile) Introduction
http://www.w3.org/TR/xhtml-basic/

文章提供: BAYSTARS DESIGN網頁設計公司

Adobe Creative Suite 5 Master Collection 非法下載

全新 Adobe CS5 系列

全新的 Adobe CS5 加入了最新的高清視頻渲染引擎Mercury。Mercury可以利用顯卡的圖形處理能力加速對高清格式視頻的編解碼和播放，當然不是所有的顯卡，由於和 NVIDIA 之前達成的協議，Mercury 只支持NVIDIA的顯卡。

而 Adobe CS5 的 Flash Catalyst 則是為了挑戰微軟的 Expression Studio，這款新的軟件將作為Flash的另一個選擇，是專門為設計師和美工量身定做。

Adobe Flash Catalyst CS5 功能介紹：

Adobe Flash Catalyst CS5
無需編寫代碼即可創建具有表現力的界面和交互式內容

Adobe Flash Catalyst CS5 軟件是一款觸手可得的全新交互式設計工具。無需編寫任何代碼，即可將 Adobe Photoshop、Illustrator 和 Fireworks 圖稿變換為具有表現力的交互式項目，並充分利用 Adobe Flash Platform 的範圍和一致性。

下面讓我們來看看 Adobe CS5 到底新增了哪些功能吧，主要介紹大家相對熟知的 PhotoShop 和 Dreamweaver 兩套軟件。

Adobe PhotoShop CS5 新增功能

PhotoShop 新增多大12項的功能，主要是增強了摳圖及網頁製作上的功能。Dreamweaver 則增加了 CSS 檢測及結合發佈平台的應用。

01 負責選擇如此簡單

輕擊鼠標就可以選擇一個圖像中的特定區域。輕鬆選擇毛髮等細微的圖像元素；消除選區邊緣周圍的背景色；使用新的細化工具自動改變選區邊緣並改進蒙版。

02 內容感知型填充

刪除任何圖像細節或對象，並靜靜觀賞內容感知型填充神奇地完成剩下的填充工作。這一突破性的技術與光照、色調及噪聲相結合，刪除的內容看上去似乎本來就不存在。

03 出眾的繪圖效果

借助混色器畫筆（提供畫布混色）和毛刷筆尖（可以創建逼真、帶紋理的筆觸），將照片輕鬆轉變為繪圖或創建獨特的藝術效果。

04 自動鏡頭校正

鏡頭扭曲、色差和暈影自動校正可以幫助您節省時間。Photoshop CS5 使用圖像文件的 EXIF 數據，根據您使用的相機和鏡頭類型做出精確調整。

05 簡化的創作審閱

使用 Adobe CS Review（新的 Adobe CS Live 在線服務**的一部分）發起更安全的審閱，並且不必離開 Photoshop。審閱者可以從他們的瀏覽器將註釋添加到您的圖像，您的屏幕上會自動顯示這些註釋。CS Live 服務的免費使用期有限。

06 更加簡單的用戶界面管理

使用可折迭的工作區切換器，在喜歡的用戶界面配置之間實現快速導航和選擇。實時工作區會自動記錄用戶界面更改，當您切換到其他程序再切換回來時面板將保持在原位。

07 操控變形

對任何圖像元素進行精確的重新定位，創建出視覺上更具吸引力的照片。例如，輕鬆伸直一個彎曲角度不舒服的手臂。

08 新增的 GPU 加速功能

充分利用針對日常工具、支持 GPU 的增強。使用三分法則網格進行裁剪；使用單擊擦洗功能縮放；對可視化更出色的顏色以及屏幕拾色器進行採樣。

09 出眾的繪圖效果

借助混色器畫筆（提供畫布混色）和毛刷筆尖（可以創建逼真、帶紋理的筆觸），實現自然、逼真的繪圖效果。

10 借助 Adobe Repousse 實現 3D 突出

借助 Adobe Repousse 技術，您可以更靈活地進行設計。從任何文本圖層、選區、路徑或圖層蒙版創建 3D 徽標、Web 按鈕和圖稿，然後扭轉、旋轉、凸出、傾斜和膨脹這些設計。

11 增強的 3D 現實主義和豐富的素材

借助簡單的陰影創建、基於圖像的光照以及玻璃和鉻黃等素材增強 3D 對像和設計。通過調整景深範圍，嘗試 3D 場景中的不同焦點。

Adobe Dreamweaver CS5 新增功能

01 集成 CMS 支持

盡享對 WordPress、Joomla! 和 Drupal 等內容管理系統框架的創作和測試支持。

02 CSS 檢查

以可視方式顯示詳細的 CSS 框模型，輕鬆切換 CSS 屬性並且無需讀取代碼或使用其他實用程序。

03 與 Adobe BrowserLab** 集成

使用多個查看、診斷和比較工具預覽動態網頁和本地內容。

04 PHP 自定義類代碼提示

為自定義 PHP 函數顯示適當的語法，幫助您更準確地編寫代碼

05 站點特定的代碼提示

從 Dreamweaver 中的非標準文件和目錄代碼提示中受益。


Adobe CS5 家族的其他成員介紹可以前往官網網站查看介紹，這裡就不一一累述了！


免責聲明

★本帖介紹的內容轉自網絡，凡摘自網絡相關圖文介紹內容的本帖不另行標注出處，版權所有者如有異議請告知以便刪除。
★關於軟件破解及註冊機可能被殺毒軟件報病毒或間諜木馬（若已檢測到的則將在帖中特別標注），請自行甄別和取捨，不另行加以解釋。
★資源下載後請對文件做必要的安全檢測，該下載內容僅限於個人測試學習之用，不得用於商業用途，並且請在下載後24小時內刪除。
★各計算機系統環境各不相同，因此不保證該軟件完全兼容於你的計算機系統，最終解決軟件安裝運行問題請聯絡官方站點尋求相關技術支持。
★資源版權歸其所有者所有，如果你喜歡，請購買正版。

有要試用 CS5嗎？可以到這裡參考看看！

文章提供: BAYSTARS DESIGN網頁設計公司