การแสดงไอที

อีกโรงเรียนเสริมเก่าหน่วยความจำ ...

ทำไมเราจะเปิดใช้งาน windos.status?
Javascripts สามารถที่จะเป็นฝันร้ายเมื่อคุณมีสิ่งที่จะแก้ปัญหา Firefox จะมี addons ที่มีประโยชน์น้อยเช่น thats Firebug ทำให้ชีวิตของเราที่ง่ายและนอกจากนี้การลงคะแนนเสียงสำหรับเทคนิคการแก้ปัญหาที่เป็นที่นิยมมากที่สุดใน Javascript ต้องไปที่ "เตือน ()" Anywaz! มีไม่กี่กรณีที่เมื่อมีการเพิ่ม ALERT จะแก้ปัญหาผิดพลาดพฤติกรรมของคุณเป็นจาวาสคริคิดที่ดีไม่ใช่เพียงแค่ ตัวอย่างเช่น! คุณมีรายการที่มี dragble ตำแหน่งจะต้องมีการแจ้งเตือน .... NO NO! อย่าทำ! ... คุณก็จะรับการแจ้งเตือนไม่มีที่สิ้นสุดหรือคุณเคยชินสามารถจริงของคุณ drap dragable ดี! มีสถานการณ์ที่ดีมากขึ้นที่คุณอาจเขียนออกตำราแก้ปัญหาไปที่แถบสถานะให้มากขึ้น usful ... เชื่อฉัน! ประสบการณ์การทำงานของมัน!

IE โดยเริ่มต้นจากซ้ายคุณเขียนถึงแถบสถานะของเบราว์เซอร์โดยใช้ไวยากรณ์ "'บางสิ่งบางอย่างที่จะแก้ปัญหา' window.status =" แต่ Firefox ไม่ได้ ดังนั้นเพื่อให้การเปลี่ยนแปลงสถานะของหน้าต่างที่คุณสามารถทำอย่างใดอย่างหนึ่งดังต่อไปนี้

เปิด about: config ในเบราว์เซอร์ (พิมพ์ "about: config" นี้ลงในแถบที่อยู่) และค้นหา
disable_window_status_change Dom. เปลี่ยนเป็นเท็จ ... เพียงคลิกที่รายการเพื่อสลับสถานะของมัน

หรือมิฉะนั้น

"Tools →ตัวเลือกเนื้อหา→→ Enable JavaScript / Advanced →เปลี่ยนข้อความแถบสถานะ"

และยังทราบว่า ... ที่จะเขียนถึงแถบสถานะของคุณใน Javascript, IE เป็น ok เพียงถ้าคุณใช้ไวยากรณ์สถานะสั้นเช่น = 'บางข้อความการแก้ปัญหา' แต่ใน Firefox คุณต้องใช้ในไวยากรณ์เช่นเต็ม window.status = ' บางสิ่งบางอย่างที่จะแก้ปัญหา '

ทั้ง I am มากใหม่ส่วนติดต่อผู้ใช้ (UI) การพัฒนาและฉันมีประสบการณ์และเป็นฉันเสมอใส่มันฉันพอดีกับรายละเอียดของ UI พัฒนามากขึ้นกว่าที่นักออกแบบมีไม่เสียใจ โอ้ดี! อะไรคือสิ่งที่ผมเขียนเกี่ยวกับ? สำหรับในขณะที่ ... (จะต้องอยู่ในปีที่ผ่านมาไม่น้อยใด ๆ ) ตอนนี้ได้ทุกขณะนี้แล้วเมื่อฉันได้รับเป็นบิตของการออกแบบ UI (เมื่อนักออกแบบมืออาชีพที่ได้ไปในวันหยุด) ผมหยุดลาดเทคิดเสมอว่าการออกแบบของฉันควร อย่างถูกต้อง complient หรือไม่ (ความจริงใจไม่ว่าฉันสามารถบรรลุมาตรฐาน 100% การปฏิบัติตามหากฉันต้องการมากเกินไป) แล้วฉันจะบอกตัวเองสิ่งที่อึ! การออกแบบ ... ควรจะง่ายดีและเป็นหลักดูเหมือนจะใช้งานได้ก็ไม่ควรทำให้ผู้เข้าชมหนี ... หรือตีกลับ (เป็นทางด้านเทคนิค) อะไรที่ดีดีรูปแบบ CSS tableless จะเข้าเยี่ยมชมที่เป็นลบเลือนไปทุกสมาร์ท hypertext และสไตล์ชีตซ้อนภายใต้ผิวของหน้าเว็บของคุณ ... zilch!
ควรมีลักษณะที่ดีและจะใช้งานง่าย ... แล้วมาทุกสิ่งที่มาตรฐาน

ผมค่อนข้างสมเหตุสมผล stumbbled นี้เข้าบล็อกโดยเจสันทอดจาก 37 สัญญาณ (สำหรับผู้ที่ไม่ตระหนักถึงสัญญาณที่ 37 onces ที่ได้สร้างปพลิเคชันบนเว็บบางอย่างน่ากลัวเช่น Basecamp ฯลฯ ด้ามขวาน) ผู้เขียนบางสิ่งบางอย่างที่คล้ายกันในปี 2004 และเชื่อฉันเกือบ 5 ปี และไม่ได้เปลี่ยนแปลงมากตั้งแต่ที่ ... ฉันมีความสุขในการอ่านกระทู้ของเขาเป็นฉันทั้งหมดเห็นด้วยกับสิ่งที่เขาจะต้องพูดและยังความเป็นจริงของเธอคือไม่แน่ใจเกี่ยวกับสิ่งที่จะบอกเกี่ยวกับความรู้สึกของตนเป็นเพียงแค่ทางเดินอาหารของเขาและเพื่อเป็นเหมือง

เจสันทอด: "มีวิธีที่มากเกินไปพูดคุยเกี่ยวกับ CSS และ XHTML และมาตรฐานและการเข้าถึงและไม่เพียงพอที่จะพูดคุยเกี่ยวกับคน CSS และรหัสมาตรฐานมาตรฐานเป็นเพียงเครื่องมือที่ - คุณต้องรู้ว่าสิ่งที่จะสร้างกับเครื่องมือเหล่านี้ ที่ดีที่สุดสำหรับฉันดีใจที่คุณ UI ไม่ได้ใช้ตาราง ดังนั้นสิ่งที่? ใส่ใจหากยังคงไม่ยอมให้คนบรรลุเป้าหมายของพวกเขาที่ มาตรฐานเว็บที่ดี แต่ผู้คนรวมถึงมาตรฐานของตัวเองได้รับสิ่งที่ทำ (และที่ยังคงยากเกินไปที่จะทำออนไลน์)

นักออกแบบ UI จะทำให้เดียวกันเก่าพื้นฐาน "ลืมเกี่ยวกับมนุษย์ในอีกด้าน" ความผิดพลาด - ยกเว้นในขณะนี้รหัสของพวกเขาดูดีกว่า มนุษย์ - ไม่ validators รหัส - อินเตอร์เฟซที่ใช้ ".

บทความเต็มรูปแบบชำระเงินเจสันทอด 's

DISCALIMER: นี้ไม่ได้หมายความว่าเราไม่ควรกังวลเกี่ยวกับมาตรฐานที่ทุกคน มาตรฐานเป็นสิ่งที่ดีที่จะมีและติดพวกเขาให้มากที่สุดเท่าที่ทำได้ เราเพียง แต่ต้องเข้าใจการออกแบบ UI ที่ดีไม่ได้หมายความว่ามาตรฐาน 100% Complience หรือทางกลับกัน ....

จากรายการของฉันเรียนรู้บทเรียนของฉันฉันทำตามการออกแบบ UI น้อยและกฎทองพัฒนา Heres ... TOP 10 ... ไม่ว่าคุณมีดังต่อไปพวกเขามากเกินไป ...

1. ดูแลผู้ใช้ของคุณ ผู้ใช้สามารถสร้างหรือทำลายเว็บไซต์ของคุณ donot ให้ดูผู้ใช้ที่ชอบ idoit รวม, หูฉี่ความสามารถในการใช้เว็บไซต์ของคุณ นั่นคือ BAD!

2. เก็บเรียบง่ายและใช้งานง่าย Guidlines หลักของคุณ สิ่งที่มากเกินไปบนหน้าจอที่สูงกว่าความน่าจะเป็นที่ผู้ใช้จะได้รับสับสนหรือฟุ้งซ่านจากงานเดิมของพวกเขา

3. เป็นคนในขีด จำกัด ... donot หลงระเริงมากเกินไปในการใช้งานการเข้าถึงและมาตรฐาน ใช้มาตรฐานได้อย่างมีประสิทธิภาพและทำให้พวกเขาเข้าใจให้กับทีมงาน นี้จะให้สอดคล้องเหมาะสมในผลิตภัณฑ์

4. ต้นแบบที่ต้องการ ตั้งแต่วันนี้การเชื่อมต่อการใช้งานที่อุดมไปด้วยการสร้างต้นแบบเสมอดีกว่าเพียงการทำที่ง่ายและ wireframes หลังจะถือเป็นโมฆะของการปฏิสัมพันธ์ที่ดีก็จะล้มเหลวที่จะให้ลูกค้าภาพที่ชัดเจนของผลิตภัณฑ์สุดท้ายที่ได้ถูกพัฒนาขึ้น เสมอมันจะง่ายในการแปลงต้นแบบในการส่งมอบสุดท้าย นอกจากนี้! ด้วยการสร้างต้นแบบปัญหาใด ๆ ที่ปฏิสัมพันธ์อาจจะรีดออกก่อนหน้านี้ในวงจรการพัฒนา

5. ความสอดคล้องในการออกแบบและการโต้ตอบของคุณเป็นสิ่งสำคัญมาก donot สับสนของผู้ใช้ของคุณด้วยการโต้ตอบที่ไม่แน่นอนและ Gizmos

6. เข้าใจ "คำชี้แจงได้รับการออกแบบภารกิจของคุณ" สิ่งที่ได้มุ่งเน้นไปที่การดำเนินการหลักในการ beign หน้าออกแบบ ยังให้รายการของการกระทำ seconday ของคุณบนหน้าและจัดลำดับความสำคัญให้พวกเขา

7. ระบุความคิดเห็นที่เหมาะสมเพื่อให้ผู้ใช้เว็บไซต์ กับส่วนใหญ่ของเว็บไซต์ที่ออกแบบรอบ AJAX, ให้ตัวชี้นำภาพให้กับผู้ใช้เก​​ี่ยวกับการเปลี่ยนแปลงที่หน้า ผู้ใช้มีการกำหนดทราบสำเร็จของงานที่เขาดำเนินการใด ๆ ทำให้ผู้ใช้ donot รอและคาดเดาสำหรับเช่น ให้ตัวชี้วัดความคืบหน้าการ uplaods ไฟ​​ล์

8. ใช้ควบคุมได้อย่างเหมาะสม สำหรับการใช้งานเช่นเลือกดรอปดาวน์สำหรับรายการเล็ก ๆ เท่านั้น donot ให้ผู้ใช้เลือกหนึ่งใน 200 เมืองโดยใช้กล่องเลือก เข้าใจความแตกต่างระหว่างปุ่มและการเชื่อมโยง การเชื่อมโยงและปุ่มที่มีจุดประสงค์ที่แตกต่างกัน donot ใช้สำหรับข้อมูลอื่น ๆ ให้การควบคุมที่เหมาะสมเพื่อให้มีปฏิสัมพันธ์กับหน้าได้ง่ายขึ้น หลีกเลี่ยงการใช้เมนูที่มีมากขึ้นว่าสองระดับลึก ไม่บูรณาการล้อ ใช้ตัวควบคุมมาตรฐานกำหนดไว้เฉพาะในกรณีที่จำเป็นมาก กำหนดควบคุมการกำหนดเองใด ๆ ที่จำเป็นสำหรับเว็บไซต์มือของคุณก่อนเพื่อให้พวกเขาสามารถสร้างและทดสอบอย่างอิสระและพร้อมสำหรับการใช้งานเว็บไซต์ค่อนข้างสมเหตุสมผล

9 donot. ย้ำมากเกินไปในการออกแบบ จำเอาไว้! ผลิตภัณฑ์ทั้งหมดประกอบด้วยการออกแบบที่เพิ่มเติมเพียงอย่างเดียว สร้างระยะเวลาที่เหมาะสมลงในตารางโครงการของคุณสำหรับการทำซ้ำการออกแบบและติดมัน ย้ำช่วยให้เราได้ค้นหาสิ่งที่ทำงานและสิ่งที่ไม่ได้เลือกออกจุดปัญหา ในฐานะที่เป็นอินเตอร์เฟซที่ดีต้องใช้เวลาให้เวลาสำหรับการทำซ้ำในจุดเริ่มต้นของวงจรการพัฒนาเพื่อให้การแสดงออกแบบ doesnot โดยตรงถือเอาการ rework มากเกินไปการทำงานซ้ำ ๆ อาจ jeopradize กำหนดเวลา

10. นั่งกลับและคิดว่าเหมือนผู้ใช้บางครั้ง

ริอีกชิ้นเล็ก ๆ ของกลอุบายจาวาสคริปต์ที่ผมต้องขุดรอบเนื่องจากสถานการณ์ commaned มัน หนึ่งในเว็บไซต์ของฉันฉันมีสถานการณ์เช่นนี้ที่ฉันมีที่จะใช้ "windows.onload" สองครั้ง สิ่งแรกที่จะมาถึงใจที่ไม่มีประสบการณ์เหมือนผม (ฉันต้องบอกว่าตรงไปตรงมาตั้งแต่ฉันได้ใช้กรอบ JavaScript และห้องสมุดผมได้ forgotton ที่จะทำสิ่งง่ายๆด้วยตัวเอง ... ฉันเศร้า แต่จริง) คือวิธีต่อไปนี้ ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 ฯลฯ ..

ขออภัยที่จะพูด แต่นี้ทำงานเคยชิน ... dont ต้องการเพื่อหารือเกี่ยวกับวิทยาศาสตร์การดำเนินการของจาวาสคริมาก ... แต่ตามประสบการณ์ล่าสุดของฉันเพียงฟังก์ชั่นล่าสุด (onloadfn3) จะป่วยจริงได้รับการดำเนิน

ในสถานการณ์ปกติซึ่งแตกต่างจากเหมือง (ซึ่งผมจะพูดถึงน้อยกว่า) ... คุณสามารถทำอย่างใดอย่างหนึ่งดังต่อไปนี้การดำเนินการฟังก์ชั่น onload mutliple ....

หรืออะไรเช่นนี้

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

สำหรับสถานการณ์ปัจจุบันของฉันฉันไม่สามารถใช้อย่างใดอย่างหนึ่งดังกล่าวข้างต้น ...
ฉันไม่จำเป็นต้องเรียก windows.onload สองค่อนข้างที่เรียกฟังก์ชันที่สองภายในฟังก์ชัน onload เดียวทำไม? ที่นี่ดูอย่างรวดเร็วที่งบปัญหาของฉันคือ ...

"หน้าไซต์ของฉันมีโครงสร้างเหมือนธีม WordPress .... เช่นมี header.php ที่พบบ่อยและ Footer.php ที่ได้รับรวมเป็นทั้งหมดเป็นหน้าเว็บไซต์ มีฟังก์ชั่น implementaion onload ใน Footer.php ที่จะทำหน้าที่ onload บางที่พบบ่อยคือ และมีไม่กี่หน้าที่ต้องการบางสิ่งบางอย่างจาก OnLoad ของตนเองนอกเหนือจากที่ทำโดยฟังก์ชั่น onload ที่พบบ่อย ถ้าผมกำหนดฟังก์ชันโทรกลับโดยตรงไปยังตัวจัดการ window.onload จะมากกว่านั่งเรียกกลับได้รับมอบหมายก่อนหน้านี้ใน Footer.php "

.... เป็นปัญหาของฉันเข้าใจ ?

ดี! มีโซลูชั่นไม่กี่แห่งที่ผมพบคือ พวกเขาทั้งหมดจะคล้ายกันมากและส่วนใหญ่ implementions ของการแก้ปัญหาให้โดยไซมอน Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solution:

เพียงเพิ่มโค้ดจาวาสคริปต์นี้ไปยังเว็บไซต์ ...

 ฟังก์ชั่น addLoadEvent (func) {
     var oldonload = window.onload;
     ถ้า (window.onload typeof! = 'ฟังก์ชั่น') {
        window.onload = func
     } else {
        window.onload = function () {
            ถ้า (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

และเรียกว่าแทน "windows.onload" ปกติ

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent ฟังก์ชั่น (() {
 * / รหัสมากขึ้นในการทำงานในการโหลดหน้า *
 }); 

ข้อดีของโค้ดนี้ ...
1 ในขั้นต้นจะช่วยให้คุณมีเหตุการณ์ windows.onload หลายที่เรียกว่าแยกจากส่วนของรหัสของคุณโดยไม่ต้อง overridding ความหมายก่อนหน้านี้
2 มันเป็นสร้างความรำคาญจริงๆ มันสามารถนำมาวางไว้ในแฟ้มที่มีสคริปต์อื่น ๆ ของคุณหรือในแฟ้มที่แยกต่างหาก
3 มันทำงานได้แม้ว่า window.onload ได้ถูกกำหนด

ฉันคิดว่าหนึ่งในนี้จะเป็นเส้นขยุกขยิกไปหาใน google เป็นจำนวนมากที่คุณให้เราเขียน UI และสคริปต์จะต้องทำเช่นนี้ในวันที่ตามวันที่มีบิตของชิ้นส่วนของโค้ด PHP (PHP.) ลงใน แม่แบบ Smarty (TPL.) ฉันตระหนักว่าง่าย / ที่นิยมค้นหาของคุณมากยิ่งขึ้นยากที่จะหาคำตอบที่แน่นอน ... ล้านผลลัพธ์การค้นหา แต่ส่วนมากของพวกเขา reffered ที่ "ไฟล์" รวมถึงใน Smarty ... ซึ่งมีไวยากรณ์ต่อไปนี้

{include file = "รวม header.php /"}

นี้ inlcuded จริงไฟล์ดี แต่เป็นข้อความอะไรที่ฉันต้องการคือผลจากแฟ้มรวม. (หมายเหตุข้างต้นถูกนำมาใช้รวมถึงแม่แบบภายในแฟ้มแม่แบบ) ในที่สุดด้วย persiverance บิต .... ฉัน stumbled ข้ามไวยากรณ์ที่ถูกปรับเปลี่ยนเล็กน้อยซึ่งเป็นคำตอบสำหรับความต้องการของฉัน ... ดังนั้นที่นี่ก็คือ ... ถ้าคุณ havn't พบหนึ่งแล้ว

{แฟ้ม include_php = "รวม header.php /"}

อีก Tut ฉบับย่อ ที่นี่สิ่งที่ง่ายและใช้พลังงานที่ดีของ CSS คือ ... แต่ก็ยากที่ concieve (และมันก็คือไม่ฉัน) จะเริ่มต้นด้วย เพิ่ม Dropshadow อาจจะมีชิ้นส่วนของเค้กสำหรับส่วนมากของเราโดยใช้เครื่องมือในการแก้ไขภาพเช่น Photoshop ฯลฯ ANF ดอกไม้ไฟบาง
เหตุผลที่ผมเลือกใช้สำหรับเงาโดยใช้ CSS ก็คือมักจะสร้างในขณะที่การออกแบบหน้า / html ของแอพลิเคชันที่ต้องการให้ซ้ำ สิ่งที่ฉันหมายถึงคือในเว็บไซต์ที่มีอยู่กับภาพจำนวนมากเช่นคนแสดง freinds หรือรายการแกลเลอรี่ภาพก็จะเป็นเรื่องยากที่จะประมวลผลความเร็วในการโหลดทั้งหมดของภาพที่ได้รับการยกเลิกการโหลดอยู่แล้วเพื่อเพิ่มหรือลบเงาเพื่อที่ เรื่อง
ดังนั้นถ้าคุณได้ทำคิดไปข้างหน้าเล็กน้อยในขณะที่สร้าง HTM​​LS เพื่อเพิ่มหน่วยงานเสริมเหล่านี้หรือมักสถานการณ์ที่ว่าคุณมีลอจิกวนการสร้างไอคอนเหล่านี้ / รูปใน XSL, PHP JAVA หรือภาษาเขียนโปรแกรม / สคริปต์อื่น ๆ คุณสามารถเพิ่มได้ตลอดเวลาจากนั้นเป็นเพียงเรื่องของการแสดงและการซ่อนเงาเหล่านี้โดยใช้สถานที่ให้บริการการแสดงผล CSS, เป็นต่อลูกค้าที่เคยเปลี่ยนแปลงความต้องการของ ... ฉัน havn't กระทำการเรียงลำดับของหัวก้าวหน้านี้ ก่อนหน้านี้ ... แต่ ahev เริ่มต้นตอนนี้!

ในตัวอย่างด้านล่าง, ภาพต้นฉบับที่เป็นเงาฟรีและ dropshadows ถูกนำมาใช้ต้องเป็น! นอกจากนี้ผมได้ไปน้อยพิเศษโดยใช้เทคนิคของ Tut ก่อนหน้านี้ของฉัน (Well! เหล่านี้อาจจะเป็นความหลากหลายที่สั้นที่สุดของงานจึงเป็นธรรมเท่านั้นเรียกพวกเขา "Tut" 's) เกี่ยวกับ การใช้สถานที่ให้บริการคลิป CSS สำหรับแสดงปิดเท่านั้น

ภาพต้นฉบับ

ผลการค้นหา CSS DropShadow

ดูการสาธิต | ดาวน์โหลด sourcefiles

ฉันต้องการที่จะเข้าใจนี้ทำไม? Humm ... !

ส่วนใหญ่ของนักเขียน CSS จะยอมรับว่าสถานที่ให้บริการคลิป CSS อาจเป็นหนึ่งในที่สุดยกเลิกการใช้คุณสมบัติ CSS มันจึงเป็นความจริงสำหรับฉันมากเกินไปและเป็นส่วนใหญ่ยินดีที่จะละเลยมันจนผมเริ่มปรับเปลี่ยน MooTools TWO Knob ชิ้นส่วน Slider (Pin) (มีตัวบ่งชี้กลาง) .

มีคำแนะนำที่ดีคือจากหนึ่งในผู้ประกอบการปรับเปลี่ยนชิ้นส่วนเลื่อนการใช้ภาพภ​​ูมิหลังตัด (ต่อส่วนความกว้างของตัวแปร) เพื่อระบุช่วงเลื่อน ดังนั้นเวลาที่จะใส่ความสนุก แต่ยกเลิกการเช่าเหมาลำ (สำหรับฉัน ofcourse) ของฉันน่านน้ำของสถ​​านที่ให้บริการคลิป CSS มา

ดี! วิธีการที่ยากที่จะสามารถ? ไม่มากเลย ... ใช่และไม่ใช่ ไวยากรณ์ที่จะใช้สถานที่ให้บริการคลิป CSS คือตรงสวย แต่ความหมาย / usuage เป็นบิต croocked กับหน่วยความจำเช่นเหมือง, everytime I นั่งการ rework กับสคริปต์ Slider ของฉัน ... ฉันมี tokeep อ้างอิงกลับไปยังสถานที่ให้บริการการใช้งานของคลิปนี้เพื่อเตือนตัวเองตรรกะที่ฉันได้สร้างขึ้นในสคริปต์ของฉัน .... HENCE! คิดว่าจะปากกามันลงมาด้วยความหวังที่จะจำมันในอนาคต (และยังเพื่อประโยชน์ของผู้ที่ดูเหมือน boggled โดยสถานที่ให้บริการคลิป CSS)

คลิป CSS ทำอะไร?

คลิปเป็นส่วนหนึ่งของโมดูลผลภาพของ CSS 2.1 ใส่เพียงงานที่จะวางหน้าต่างที่มองเห็นอยู่ด้านบนของวัตถุที่จะถูกตัดทอนจึงตัดภาพและการสร้างภาพขนาดเล็กโดยไม่ต้องสร้างแฟ้มเพิ่มเติม (ผมมีอยู่แล้วนำคุณลักษณะนี้เพื่อการใช้งานที่ดีขึ้นในชิ้นส่วน Slider )

การใช้สถานที่ให้บริการคลิป CSS, คุณสามารถสร้างการตัดโดยใช้รูปทรงสี่เหลี่ยมมุมฉาก ชอบหลายคุณสมบัติ CSS อื่น ๆ (เช่นขอบ padding ฯลฯ ), การใช้การดูแลรักษาต้องสี่พิกัดบน, ล่าง, ขวา, ซ้าย (TRBL) ธรรมชาติ croocked ที่ให้บริการนี​​้สะท้อนให้เห็นถึงเมื่อคุณใช้เวลามองใกล้ที่วิธีการคำนวณคลิปภาคคลิปที่ใช้เหล่านี้สี่พิกัด (ส่งเข้าไปในสมองโยนในขณะที่) ตอนนี้สับสนคุณด้านล่างเริ่มจากด้านบนและด้านขวาเริ่มจากด้านซ้าย . คุณจะเห็นสิ่งที่ผมพูด? .... ดังนั้นกระทู้นี้ ...

นี้สับสนเล็กน้อยสามารถหายไปกับคำอธิบายภาพนี้จากคุณสมบัติ CSS คลิป / ดูแลรักษาดังนี้!

CSS ความต้องการของ Clip

งานที่เราได้เริ่มต้นคือการตัดภาพต่อไปนี้เป็นภาพที่หา squarer (และยังเป็นภาพมุมกว้าง)

Thumbnal Original / รูปภาพ	ข้อกำหนดสำหรับคลิป Sqaure Thumbmail

ผลการค้นหาคลิป CSS

ดูการสาธิต | ดาวน์โหลด sourcefiles

คำถามนี้ข้ามใจของฉันสองสามครั้งก่อนเมื่อฉันได้ทำงานในเว็บไซต์ก่อนหน้านี้มากเกินไปซึ่งใช้เวิร์ดเพรสเพื่อแสดงบล็อกหรือรูปแบบใหม่ของเนื้อหาในส่วนหนึ่งของเว็บไซต์ / portal.Being สามเณรใน PHP และรอบเพรสบางอย่างผมเก็บไว้ procastinating มันคิด "นี้ไม่ได้เป็นชิ้นส่วนของเค้กของฉัน" ในที่สุด! ความต้องการนี​​้มาได้ไม่เกินจมูกของฉันเมื่อเริ่มต้น diggin รอบ bit สำหรับการแก้ปัญหา
ฉันรู้สึกประหลาดใจที่พบว่าจริงๆมันคือง่ายกว่าที่จริงผมคิดว่ามันเป็นไปแสดงรายการจากพาดหัวหรือข้อความล่าสุดในหน้าอื่น ๆ ที่นอกเหนือจากส่วนที่ขับเคลื่อนด้วย WordPress เพียงใช้นิด ๆ หน่อย ๆ ของ PHP และ WordPress API .

นี่คือสิ่งที่น่าสนใจ: -
ด้วยเหตุผลของคำอธิบายสมมติว่าเว็บไซต์ของคุณเป็น http://www.inchembur.com/ และคุณมีส่วนข่าวสำหรับเว็บไซต์นี้เมื่อ http://news.inchembur.com/ (ซึ่งถูกเรียกใช้เวิร์ดเพรส) ตอนนี้ต้องการคือการแสดงโพสต์ล่าสุดจาก http://news.inchembur.com/ ในหน้าแรกของเว็บไซต์หลักคือ http://www.inchembur.com/index.php

ขั้นที่ 1: ใน index.php ของคุณเพิ่มชิ้นต่อไปของรหัสรวมไฟล์ WordPress API คุณสามารถเพิ่มไปยังด้านบนของหน้าคุณต้องการโพสต์ของคุณจะปรากฏบน

<? PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); ใช้ / / Disbable ของเวิร์ดเพรส
ต้องใช้ ('/ var / news.inchembur.com / wp บล็อก-header.php-'); / / รวม WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / รับโพสต์ล่าสุด
>?

ในชิ้นข้างต้นของรวมถึงเราจะรับเฉพาะโพสต์ล่าสุดเดียว ถ้าคุณต้องการที่จะลองรูปแบบต่างๆมากขึ้นรู้สึกฟรีเพื่อเจาะ, query_posts() เอกสาร .

ขั้นตอนที่ 2: ตอนนี้ในส่วนของหน้าดัชนี / หน้าแรกที่คุณต้องการแสดงโพสต์ WordPress ล่าสุดจาก http://news.inchembur.com ใช้รหัสต่อไปนี้ จำเป็นต้องพูดความรู้สึกอิสระที่จะโฆษณาหน่วยงานจัดแต่งทรงผมของคุณครอบคลุมและชั้นเรียนตามการออกแบบของคุณต้องการ

Step3: มีขั้นตอนที่ 3 ไม่มี ... พี่มัน ... คุณจะทำ!

แสดงหน้าโพสต์ / เฉพาะวิธีการตรงข้ามกับการโพสต์ล่าสุด: -
นี้สามารถ achived ได้อย่างง่ายดายด้วยการแก้ไขข้อโต้แย้งที่จะ query_posts() ที่จะรวม ID หน้าหรือหน้าบุ้ง

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = เกี่ยวกับ');

หรือคุณสามารถควบคุมจำนวนการโพสต์:
) ; query_posts (showposts = 3);

บางครั้งเพื่อให้ pageweight ลง ... เราได้แยกสคริปต์ของเราเป็นเศษชิ้นส่วนเหล่านี้ ... จาวาสคริปต์สามารถโหลดได้ที่เป็นและเมื่อจำเป็น (เมื่อเหตุการณ์หรือเมื่อคลิกที่ลิงค์หรือปุ่มอื่น ๆ )

Javascripts โหลดแบบไดนามิกจะง่ายและสวยตรงหน้าดังต่อไปนี้ ...

= “text/javascript” > <สคริปต์ประเภท = "text / javascript ของ">
ฟังก์ชั่น loadNewScript (ที่มา) {
var s = document.createElement ('สคริปต์');
s.setAttribute ('ประเภท', 'text / javascript ของ');
s.setAttribute ('src', แหล่งที่มา);
document.body.appendChild (s);
}
</ script>

และคุณสามารถมีการเชื่อมโยงสายต่อไปนี้ที่ใดก็ได้ในร่างกายหรือคุณสามารถมีสคริปต์นี้ "onLoad" ของเอกสารเอง ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <a href = "javascript: loadNewScript ('myDynamicScript.js');"> โหลดสคริปต์แบบไดนามิก </ a>

หรือ

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

หากคุณเป็นคน CSS คุณจะได้รู้ว่าอาการปวดในการรับเค้าโครงของคุณทำงาน cross-browser IE8 ยังเป็นประแจในงานสำหรับนักพัฒนาเราอีก Anywaz! ถ้าคุณตีเมื่อปัญหานี้เช่นผมเมื่อวานนี้ที่ทำงานอย่างสมบูรณ์แบบ CSS ของคุณใน IE7 (และก่อนหน้า) และ Firefox ได้ก็เริ่มขว้างปา tantrums ใน IE8 ลองนี้ ... มันอย่างดูเหมือนจะแก้ไขปัญหาของฉันตอนนี้ ....

การใช้การประกาศ Meta เราสามารถระบุเครื่องมือการแสดงผลที่เราต้องการที่จะใช้ IE8 ดังนั้นเพื่อบังคับให้ IE8 แสดงผลเป็น IE7 ... แทรกแท็ก Meta ต่อไปนี้ในหัวของเอกสารของคุณ: -

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

โดยค่าเริ่มต้น Meta IE จะเป็น: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ซึ่งจะทำให้ IE8 แสดงผลหน้าเว็บโดยใช้โหมดมาตรฐานใหม่

หากจำเป็นต้องใช้รูปแบบนี้สามารถนำมาใช้เพื่อรองรับเบราว์เซอร์อื่น ๆ ดังนี้

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

รายละเอียดเพิ่มเติมเกี่ยว doctypes:

หากคุณยังไม่คุ้นเคยกับประเภทของสัตว์ที่เรียกว่า "D​​octype" ... นี่คือบางอย่างรวดเร็วอ่าน
อะไร doctypes มีอะไรบ้าง อะไร Quirks BROWSER & โหมดเข้มงวดมีอะไรบ้าง
การตั้งค่า DOCTYPE ใน XSL

สำหรับข้อมูลเพิ่มเติมในการทำความเข้าใจเชิงลึกเกี่ยวกับ doctypes ให้ลองไปที่ลิงก์เหล่านี้ ...
รายการนอกเหนือที่: แก้ไขเว็บไซต์ของคุณด้วย DOCTYPE ขวา!
รายการนอกเหนือ: Beyond DOCTYPE: มาตรฐานเว็บที่เข้ากันได้ไปข้างหน้าและ IE8

หมายเหตุ: แม้ว่าคนส่วนมากของเรา HTML / CSS ได้รับการละเลยความสำคัญของการ decleration DOCTYPE ในเอกสารของเราตั้งค่า 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;
}

UL, ol {
รูปแบบรายการ: ไม่มี;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-น้ำหนัก: ปกติ;
}

รีเซ็ตขนาดตัวอักษรเบราว์เซอร์
นอกจากนี้ยังทราบว่าการตั้งค่าใหม่ได้นำไปใช้ขนาดตัวอักษรเบราว์เซอร์ในบรรทัดต่อไปนี้ ...

html {font-size: 76%;}

ข้างต้น CSS ตั้งขนาดตัวอักษรเบราว์เซอร์ถึง 10 พิกเซลและสิ่งนี้ทำให้มันเป็นไปได้ที่จะทำงานกับขนาดตัวอักษรญาติ (ซึ่งเป็นทุกที่สำคัญจากการปฏิบัติตาม WAI prespective)
สำหรับเช่นในความหมายดังต่อไปนี้ font-size ในช่วงตั้ง 10 พิกเซลและว่าใน paragarph ถูกตั้งค่าเป็น 14 พิกเซล ...

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