表達它

另一個老同學內存的補充...

為什麼我們能夠windos.status？
JavaScript的可能是一場噩夢，當你有什麼調試。 火狐確實有一些方便的插件，像Firebug的多數民眾贊成容易，使我們的生活，另外，在Javascript中最流行 ​​的調試技術的表決必須走“ 戒備（）”。 anywaz！ 有少數情況下，當添加警示不調試不當行為的Javascript只是不是個好主意。 例如！ 你有dragble項目需要提醒的位置...... 不，不！ 不要做了！ ......你會得到無限的警報或你慣於能夠實際drap您dragable的。 好吧！ 有更良好的情況下，你可能寫出調試狀態欄文本，更usful ......相信我！ 及其經驗！

IE默認情況下，離開了你寫的瀏覽器狀態欄，使用語法“window.status ='調試'的東西 ”，但Firefox不會。 因此，為了使Windows狀態的變化，你可以做以下任。

打開約：瀏覽器（輸入“about：config中配置 ”到地址欄）和搜索
DOM。disable_window_status_change， 改變它為 false ...只需點擊進入切 ​​換其狀態。

或另外

“ 工具→選項→內容→啟用JavaScript /高級→更改狀態欄文本 ”

還要注意...寫在JavaScript的狀態欄，IE是剛剛確定的，如果你使用一個簡短的語法，即狀態='一些調試文本“，但在Firefox中，你必須使用完整的語法，即window.status ='一些調試“

我既不是很新的用戶界面（UI）的開發，也不是我一個老兵，我總是把它，我融入UI開發人員文件多於一個設計師沒有遺憾，。 哦，好吧！ 我寫什麼呢？ ......有一段時間（必須年沒有），然後每一個現在，當我進入UI設計（專業設計師了假日）位，我始終無法停止思考，我的設計是否應正確complient或不（真誠的，不是我能achive 100％的標準，如果我想太多）。 然後我告訴自己，什麼垃圾！ 的設計應該簡單，美觀大方，主要似乎可用的，它不應該讓遊客逃跑......或反彈（技術）。 是一個很好的無表格的CSS佈局的遊客，誰是無視所有的智能超文本和層疊樣式表在您的網頁皮膚時時刻刻有什麼好處！
它應該看起來不錯，易於使用......然後所有標準的東西。

這個由賈森炸博客條目37信號 （對於那些誰不知道37個信號是誰創造了一些非常強大的Web應用程序一樣的Basecamp，營火等成盎司），在2004年寫類似的東西，相信我，近5年來，我stumbbled accross並沒有太大的改變，因為...我很高興，讀他的文章，我完全同意，他說，也是事實，她是不能確定什麼是對的只是他的直覺告訴，所以是我

賈森油炸：“太多談論CSS和XHTML標準和輔助，並沒有足夠的人談論。 CSS和標準兼容的代碼只是工具 - 你必須知道如何建立這些工具。 太好了，我很高興你的UI不使用表。 還等什麼？ 如果仍然沒有讓人們實現自己的目標，誰在乎。 Web標準是偉大的，但人自己的標準，包括把事情做好（ 還是太硬，做網上）。

UI設計師老根本性錯誤“人類對對方遺忘” - 除了這一次他們的代碼看起來更好。 人類 - 沒有代碼驗證器 - 使用接口“。

賈森炸結帳的全部文章

DISCALIMER：這並不意味著我們不應該打擾標準。 標準是好事，並堅持他們盡可能。 我們只需要明白，良好的用戶界面設計並不總是意味著100％的標準Complience或反之亦然....

從我對我的教訓，我跟一些UI設計和發展的黃金規則...繼承人的十大...不是說你也跟著他們......

1，以用戶的關懷。 用戶可以撥打或破壞您的網站。 DONOT使用戶樣子總idoit的，根本無法使用您的網站。 這是壞！

2，保持簡單和易於使用的主要guidlines。 東西太多了，在屏幕上，用戶會感到困惑，或從原來的任務分心的概率越高。

3，在限制......沉迷DONOT到可用性，無障礙和標準太多。 有效地使用標準，使他們理解的團隊。 這將確保正確的產品一致性

4。原型的要求。 由於使用的接口豐富，這些天，原型始終是更好不僅僅是簡單的線框，後者是無效體面的相互作用，它會失敗，正在開發的最終產品，提供客戶清晰的畫面。 一如既往，這是比較容易轉換成最終交付的原型。 還可以！ 與原型可以解決任何交互問題，早在開發週期。

5。在您的設計和互動的一致性是非常重要的。 Donot用戶混淆了難以預料的相互作用和小玩意。

6，了解你的“設計任務書”。 跳投的頁面設計beign的首要行動的重點。 此外，在頁面上seconday行動，並優先考慮他們。

7。網站的用戶提供適當的反饋。 大部分圍繞Ajax設計的網站，有關更改頁面的用戶提供視覺線索。 用戶給予承認他執行任何任務的完成。 Donot使用戶等待和猜測，如。 進展的指標提供文件uplaods的。

8。適當使用控制。 如使用選擇下拉列表小名單，donot讓用戶選擇使用選擇框的200個城市之一。 了解一個按鈕和一個環節之間的差異。 鏈接和按鈕有不同的目的，donot使用其他之一。 提供正確的控制，使頁面更容易同進行交互。 避免使用菜單，更多的是兩個層次深。 不要推倒重來。 使用標準的控制，自​​定義他們，只有非常必要的。 定義為您的網站的第一手所需的任何自定義的控制，使他們能夠創建和獨立測試，準備使用accross站點。

9。Donot遍歷太多的設計。 記住！ 整個產品由單獨更多設計。 建立適當的時間表，到您的設計迭代的項目進度，並堅持下去。 迭代有助於我們找出什麼可行，什麼不，挑選出故障點。 作為一個良好的接口需要時間，在begining迭代開發週期的時間，使設計迭代亙古不變的直接等同返工。 太多的返工可以jeopradize的最後期限。

10。坐下來，有時覺得像一個用戶。

下面，我有挖，因為情況commaned它的另一個小的Javascript弄虛作假的peice。 在我的網站之一，我有這種情況，在那裡我有兩次實施“windows.onload”。 將來到像我這樣的經驗的心（我必須誠實地說，因為我一直在使用JavaScript框架和圖書館，我福爾戈我自己...傷心，但真正做簡單的事情）的第一件事，就是下面的方法...

的window.onload = onloadfn1;
的window.onload = onloadfn2;
的window.onload = onloadfn3;
等等......

抱歉地說，但是，這不會工作，不想討論太多的Javascript執行科學......但根據我最近的經驗，只有最後一個函數（onloadfn3）會生病實際上得到執行。

在正常情況下，與礦（後來，我談一點），你可以做下列之一執行複式的onload函數....

或類似這樣的東西

函數doOnLoad（）{
         onloadfn1（）;
         onloadfn2（）;
         onloadfn3（）;
 }
的window.onload = doOnLoad;

對於我目前的狀況，我不能使用上述...
為什麼我需要調用windows.onload兩次，而不是在一個單一的onload函數調用兩個函數？ 這裡是快看看我的問題陳述...

“我的網站頁面結構像WordPress主題.... 即有一個共同的header.php文件，包括Footer.php獲取到所有的網站頁面。 那裡是中Footer.php的onload的功能implementaion做一些常見的onload函數。 有幾頁，需要自己的OnLoad的東西，除了共同onload函數所做的。 如果我給回調函數直接在window.onload處理程序，它會隨著騎在Footer.php以前分配的回調“

.... 是我的問題的理解 ？

好吧！ 有幾個解決方案，我沒有找到。 他們都非常相似，主要由西蒙·威利森（給出一個解決方案implementions http://simonwillison.net/2004/May/26/addLoadEvent/ ）...

解決方案：

只是這段JavaScript代碼添加到網站...

功能addLoadEvent（FUNC）{
     oldonload = window.onload的;
     （typeof運算的window.onload ='功能'）{
       的window.onload =功能
     }否則{
        =（）{
            （oldonload）{
                   oldonload（）
           }
          函數（）
        }
    }
 }

並調用，而不是通常“windows.onload”

 addLoadEvent（FunctionToRunOnPageLoad）;
 addLoadEvent（函數（）{
 / *更多的代碼運行在頁面加載*
 }）; 

這個代碼片斷的優勢...
1。 首先，它可以讓你有多個windows.onload事件，呼籲從你的代碼的單獨部分，不overridding以前的定義
2。 這實在是不顯眼的。 它可以被放置在與其它腳本文件中或在一個單獨的文件。
3。 它的工作原理window.onload的，即使已經設置。

我想這將是一個塗鴉在谷歌找到的，因為很多我們的用戶界面和腳本作家需要做一天一天的基礎上，這是包括成PHP代碼片段（PHP）的peice位Smarty模板（TPL）。 我意識到你的查詢，更容易/流行，更是難以找到確切的答案......一百萬的搜索結果，但其中大多數是本文以後稱作“文件”，包括在Smarty ...具有以下語法

{包括文件=“/ header.php文件”}

這實際上inlcuded罰款，但作為文本文件，我想要的是包含文件的結果。（注意：上述用於在一個模板文件包括模板）。 最後一點persiverance .... 我迷迷糊糊......整個略為修改語法，這是對我的要求的答复，所以這裡是......如果你沒有帶發現了一個已經

{include_php文件=“/ header.php文件”}

另一個快速嘖嘖。 下面是一些簡單而漂亮的使用CSS的權力，但困難concieve（肯定不是我）開始。 添加陰影效果，對於我們許多人可能是一個大蛋糕peice，使用一些圖像編輯工具，如Photoshop ANF煙花等
為什麼，我選擇了使用CSS的下拉陰影的原因是，通常在創建網頁設計/ HTML應用程序，要求保持迭代。 我的意思是在現有的網站與許多圖片，像顯示freinds列表或圖片庫的，將很難重新處理整個負載已經卸載已添加或刪除的陰影圖像，該問題。
所以，如果你做了一些前瞻性思維，而創造的HTMLS添加這些額外的部門或通常的情況是，你有一個循環邏輯在XSL，PHP生成這些圖標/縮略圖。 JAVA或任何其他的編程/腳本語言，你可以隨時添加，然後僅僅是為客戶不斷變化的需求，使用CSS的顯示屬性，這些陰影顯示和隱藏的問題...我沒有帶這種前瞻性思維在此之前......但ahev現在開始！

在下面的例子中，原始圖像是無陰影和應用需要的dropshadows！ 僅此外，我已經走了一點點額外的，使用約我剛才圖坦卡蒙過關（Well!這些可能是最短的各種教程，所以它是唯一的理由叫他們“嘖嘖”的）， 使用CSS clip屬性為炫耀

原始圖像

CSS陰影效果結果

查看演示 | 下載源文件

我為什麼要明白這一點嗎？？ ... Humm！！！

CSS的作家中的大多數人都同意，CSS Clip屬性可能是最未使用CSS屬性之一。 這是我的真實，是最幸福的忽視它，直到我開始修改的MooTools的兩個旋鈕（PIN）滑塊組件（帶範圍指示器） 。

從一個組件用戶有一個很好的建議，修改Slider組件使用裁剪圖像（對可變寬度師）視野下，以表明滑塊範圍。 就這樣來到我的時間來輸入的樂趣，但聯合國包機（我當然）的CSS Clip屬性的水域。

好吧！ 它可以是多麼困難？ 沒有太多... YES和NO。 使用CSS Clip屬性的語法是很正直的，但的含義/ usuage，是有點croocked。 一個像我的記憶中，每次我坐下來返工我滑塊腳本...我有隨時注意​​這個剪輯屬性的用法，要提醒自己，我在我的腳本創建的邏輯.... 因此！ 認為筆下來，希望記住它的未來（也似乎誰的利益猛然一驚CSS clip屬性）

什麼是CSS的剪輯呢？

剪輯的視覺效果模塊的CSS 2.1的一部分。 簡而言之，它的工作是正在修剪的對象上放置一個可見的窗口，因此裁剪圖像，而不必創建額外的文件（我已經把滑塊組件，以更好地利用此功能創建縮略圖 ）

使用CSS Clip屬性，你可以創建一個使用矩形形狀的裁剪。 需要像其他許多CSS屬性（如利潤率，填充等），使用矩形，四個坐標上，右，底部，左（TRBL）。 這個屬性croocked性質的反映，當你仔細一看，剪輯是如何計算的裁剪區域使用這四個坐標（大腦發送到折騰了一會兒）。 現在你混淆底部開始從頂部，並有權從左邊開始。 。 你明白我說的話嗎？ .... 因此，這個職位...

這有點混亂，可以很容易地消失了，用這CSS剪輯/ Rect屬性的視覺解釋如下！！！

CSS剪輯需求

我們已經開始的任務是剪輯成方正尋找圖像下面的縮略圖（還廣角圖像）

原Thumbnal /圖像	Sqaure Thumbmail剪輯要求

CSS剪輯結果

查看演示 | 下載源文件

這個問題前幾次，穿過我的腦海裡，當我在地盤工作早過，使用WordPress的顯示博客或一種新的內容，在某些部分在PHP和WordPress的網站/ portal.Being的新手，我一直procastinating它，心想：“這不是我蛋糕peice”。 終於來了！ 這一要求是高達我的鼻子，啟動時陷周圍的解決方案位。
我驚訝地發現，它真的是比我還以為是WordPress的供電部分以外的任何其他頁面上，顯示一個標題列表或最新的職位，只用點點的PHP和WordPress的API 。

這裡是做什麼： -
對於原因的解釋，假設您的網站是http://www.inchembur.com/您對本網站的消息的部分http://news.inchembur.com/ （運行WordPress的）。 現在的要求是，以顯示從主站點的首頁上最新職位http://news.inchembur.com/ ，即http://www.inchembur.com/index.php

第一步：在您的index.php添加下面的代碼peice，包括WordPress的API文件。 您可以添加到您希望您的文章出現在頁面的頂部。

<？PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme 定義 “WP_USE_THEMES”（ 假 ）; /的/ Disbable使用WordPress主題
要求（'的/ var / news.inchembur.com / WP博客的header.php“）; / /包括WordPress的API
; // Get Latest Post query_posts（'showposts = 1'）; / /獲取最新發表的文章
？>

在包括上述peice，我們得到只有單一的最近期的職位。 如果你想嘗試更多的變化隨時挖成， query_posts()文檔 。

第2步：現在，在您要顯示從最新的WordPress的職位索引/主頁的一部分http://news.inchembur.com ，使用下面的代碼。 不用說，感覺免費廣告造型部門，跨度和您的設計需要為每類。

第三步：有沒有第三步......那......你做！

如何顯示一個特定的職位/頁，而不是最新帖子： -
這可以很容易地通過改變參數query_posts() achived query_posts()頁ID或頁面塞

) ; query_posts（'page_id = 7'）;
) ; query_posts（'頁面名稱=約“）;

或可以控制的職位數目：
) ; query_posts（showposts = 3）;

有時保持pageweight下來......我們我們的腳本分割成片段......這些JavaScript片段，可以裝載在有需要時（事件或點擊一個鏈接或按鈕等）。

載入JavaScript的動態很簡單，相當平直向前如下...

= “text/javascript” > < 腳本 類型 =“文本/ javascript”>
功能loadNewScript（源）{
VAR = document.createElement方法（“腳本”）
s.setAttribute（'型'，'文本/ javascript“）;
s.setAttribute（'src'中，源）;
瑭插綋銉（S）;
}
</ SCRIPT>

你可以有以下調用鏈接在身體的任何地方，或者你可以有這個腳本文件本身“的onLoad”...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a >的<a href =“JAVASCRIPT：loadNewScript（”myDynamicScript.js）;“>負載動態腳本</ A>

或

<body onload="loadNewScript('myDynamicScript.js');">

如果你是CSS的人，你想知道的痛苦，在獲得工作的跨瀏覽器的佈局。 IE8是我們開發的工程中的又一扳手。 anywaz！ 如果你打這個問題時，像我一樣昨天，你完全工作在IE7的CSS（或更早）和Firefox突然開始扔在IE8發脾氣，試試這個...很好，這似乎是解決問題的那一刻我....

使用meta聲明，我們可以指定我們想IE8的使用的渲染引擎。 因此，強制IE8的渲染IE7 ...插入文檔的頭部以下Meta標籤： -

<meta http-equiv="X-UA-Compatible" content="IE=7"

IE瀏覽器默認情況下，元將是： -

<meta http-equiv="X-UA-Compatible" content="IE=8"
這將使IE8的渲染頁面，使用新的標準模式。

如果需要，此語法可以用來容納其他瀏覽器如下：

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"

更多關於文檔類型：

如果你不熟悉的動物，被稱為“DOCTYPE”排序...這裡是一些快速閱讀
什麼是文檔類型？ 什麼是瀏覽器怪癖嚴格模式？
設置在XSL中的DOCTYPE

為深入了解更多有關文檔類型，嘗試訪問這些鏈接...
除了 ​​一個列表：有了正確的DOCTYPE，修復您的網站！
除了 ​​一個名單：超越的DOCTYPE：Web標準，向前兼容和IE8

注：雖然我們很多的HTML / CSS的人都被忽略在我們的文件重要性的DOCTYPE decleration的，設置正確的DOCTYPE，通常是跨瀏覽器的問題的答案。

一個CSS復位/ CSS來設置元素樣式到一個特定的基線，創建跨各種瀏覽器的一致性。

我們都已經通過編寫跨瀏覽器的CSS的惡夢。 所以，當我們開始編寫我們的CSS，這是一個實踐重置它首先刪除/重設任何跨瀏覽器不一致性。 CSS的復位，是簡單的幾行的CSS，你開始你的CSS，給你一個乾淨的基地開始建設讓你的。

我通常傾向於使用的CSS重置看起來像這樣

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

OL，UL {
列表樣式：無;
}

H1，H2，H3，H4，H5，H6 {
字體大小：100％;
字體重量：正常;
}

重置瀏覽器的字體大小
還注意到，已被應用到瀏覽器中的下面一行字體大小復位...

html {font-size: 76%;}

上述的CSS重置瀏覽器的字體大小為10像素，這使得它可以使用相對字體大小（這是每一個圍合規的重要何衛青）
例如，在下面的定義，跨度字體大小設置為10像素，在paragarph被設置為14像素...

span {font-size: 1em;}
p {font-size: 1.4em;}