أدوات المصمم : المغلق قالب فارغ
16 مارس 2008 من قبل · chriscoyier 11 تعليقات 
الطنانة هذه الوظائف 
بعمق في هذا المنصب 
بلوجم 
بعد هذا التعثر
إذا قمت بتصميم عدد لا بأس به من المواقع من الصفر ، ستجد نفسك تفعل الكثير من العمل نفسه الإعداد أكثر وأكثر وأكثر. إنشاء الدليل مع مجلد الصور. إنشاء ملف الفهرس ، وكتابة نوع محتوى الإعلان ، وكتابة صفحة البنية الأساسية. إنشاء الملف المغلق ، المغلق إعادة الكتابة ، الكتابة المغلق البنية الأساسية. مجرد أن الإعداد يمكن أن يأخذك قسما لائق من الوقت وتذوي حماسكم للوصول الى لحوم التصميم الخاص بك.
في هذه الدفعة القادمة من مصمم وأدوات ، ونحن نقدم لك طريقة لتجنب كل هذا الوقت الضائع مع فارغة قالب المغلق. 
مجرد ابقاء هذا المجلد على النظام الخاص بك وأنت في أي وقت بدء مشروع جديد ، يمكنك فقط مكررة هذا المجلد ، وتبدأ مع الترميز الحقيقي / تصميم.
ما كنت أعرف أنك قد يكون الدخول ، دعونا ننظر في أتش تي أم أل :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PAGE TITLE HERE</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> </div> <!-- Put Google Analytics Code Here --> </body> </html> كما ترون ، انها بسيطة جدا جدا. فقط في صفحة الإعلان (الأقسام المختلفة 1.0) ، نوع محتوى الاعلان (حسابات الأمانة الأحادية - 8) ، وصفحة العنوان ، وصلة الأنماط ، وبنية بسيطة (الجسم مع صفحة div التفاف). وأود أيضا أن تشمل تذكرة قليلا الخاصة بك لتشمل تحليلات مدونة في الأسفل ، إذا كنت سوف تتبع بيانات الزائر على موقعك.
الآن هنا المغلق :
/* AUTHOR: YOUR NAME HERE you@domain.com */ /* ------------------------------------------ */ /* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */ /* ------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; } ul { list-style: none inside; } p { font: 1.3em/1.3em; margin-bottom: 1.3em; } a { outline: none; } a img { border: none; } /* END RESET */ /* ------------------------------------------ */ /* TOOLBOX CSS */ /* ------------------------------------------ */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } .transpBlack { background: url(transpBlack.png); } /* END TOOLBOX */ /* ------------------------------------------ */ /* PAGE STRUCTURE */ /* ------------------------------------------ */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */ أيضا بسيطة جدا ، ومعظمهم مجرد توسيع المغلق إعادة تعيين. محدد للنجمة (*) لا الثقيل رفع تعيين ، ولكن هناك زوجين من اللمسات الاضافية لذكرها. تحديد حجم الخط في الجسم إلى 62.5 ٪ يتيح لك استخدام أحجام طب الطوارئ وكأنك بكسل (مقصف) الأحجام. 1.0 م = 10px ، 1.1em = 11px ، وهلم جرا. فيض ذ قوات شريط تمرير رأسي على العديد من برامج التصفح لقضاء يقفز في توسيط الأفقي.
هناك بعض بسيطة "أدوات المغلق" لأشياء مثل العائمة ، وتطهير ، وملء المناطق ذات لون شفاف. صفحة التفاف المغلق هو تضمين لمركز بك محتوى الصفحة.
هذا بالتأكيد يبدو أنه يوفر الكثير من العمل. ويمكن استخدامه في المواقع وورد؟ لقد حصلت على عدد قليل من المشاريع القادمة ، ويبدو ان هذا سيحدث في متناول الشخص الحقيقي.
لالمجردة "قالب" لورد ، وتحقق من مخزون إليوت جاي "عار" موضوع.
فكرة وجود قالب افتراضي هو جيد. الطريقة التي القيام به هنا هو ليس كذلك.
على سبيل المثال : * محدد يبطئ تقديم أسفل. كما أنه يزيل أراد الهوامش والبطانات من حقول الإدخال في شكل معين لنظام التشغيل / المتصفحات ، والتي لا يمكن إعادة استخدامها.
فيض ذ أيضا هراء ، منذ الصفحة الخاصة بك قد لا تكون دائما التمرير ، مما يجعل بالية التمرير (ومربكا للبعض).
أنا لم نر أي دليل دامغ على نجم محدد تباطؤ ملحوظ التقديم. أنا لا شك في أن يفعل قليلا ، منذ محدد نجمة سوف تطبيقه حرفيا النفس إلى كل عنصر واحد على الصفحة. ولكن لدي شكوك جدية في أن تباطؤ طفيف هو ملحوظ حتى على صفحات بل معقدة للغاية.
أيضا ، انها ليست على الهامش ، ويتم إزالة الحشو مع نجم محدد أن المسمار حقول الإدخال الافتراضي ، هو الحدود ، ولاحظ كيف أن الحدود لا يتم تعيين هنا. الأنماط الافتراضية المدخلات ستبقى على حالها (مثل الأزرار glowy في سفاري أو أزرار ممتلئ الجسم في مشطوف فرنك فرنسي أو آي إي). أنت صحيح على الرغم من أنه إذا كنت الشريط الحدودي في هذه الطريقة ، يمكن لتلك الأنماط الافتراضية لا يمكن إعادة استخدامها.
تجاوز ذ هي أيضا ليست هراء. وينطبق ذلك على شريط التمرير الرأسي فارغة في برامج التصفح التي لا توجد لها بالفعل أن (آي إي افتراضيا هل هذا بالفعل). هذا قد يستغرق الشاشة العقارات عندما لا تكون هناك حاجة في بعض الأحيان ، إلا أنه يزيل حرج "القفز" في مركزه الأفقي عند التنقل بين الصفحات التي مخطوطات والصفحة التي لا.
وذلك بفضل لالمغلق sofisticated فارغة وأتش تي أم أل القالب. هذا الدليل سوف تساعدني!
الدقة الكبيرة لeditpadders موقع مثلي!
هل يمكن ان توضح للفائدة. transpBlack (خلفية : عنوان (transpBlack.png) ؛) الفكر؟
وأنا لا أرى لماذا يجب استخدام 1.3em (~ 13px) لف محددات حجم الخط. اذا كان هناك شيء ما الذي يجعل القبيح على المتصفحات القديمة (وخصوصا من دون واضحة النوع أو وظائف مماثلة) ، هو الخط 13 في الحجم.
فمن الافضل العمل مع الأرقام الزوجية ، مثل 8 و 10 و 12 و 14 و 16. أفضل قراءة> يتوهم تصميم. (رأي شخصي ، ويمكن القول حتى نهاية الوقت)
@ فريدريك : أنا استخدم التي تشمل باعتبارها جزءا من بلادي "الأدوات" المغلق. انها اساسا واحد ألفا بكسل وبابوا نيو غينيا شفافة حتى أستطيع أن تنطبق على ملء شفافة سوداء إلى مربع دون الحاجة إلى استخدام السمة التعتيم. غموض كبير أحيانا ، وتطبيقه على كل عنصر من عناصر قوات الطفل أن يكون التعتيم أيضا. إذا كانت تلك العناصر طفل هي النص ، يمكن أن يكون أمرا سيئا. بهذه الطريقة يمكنك تطبيق خلفية شفافة والحفاظ على النص الكامل مبهمة.
@ koew : كنت فعلا لا يعلم أنه حتى بكسل الأحجام تقديم أفضل.... أنا قد ستعمل على النظر في ذلك.
koew تعليقات على بشاعة حرة ونيف في حجم بكسل هي واحدة صحيحة على أساس تجربتي الخاصة مع المتصفحات القديمة على منصات كبار السن.
ربما أنا عالقة في timewarp ، لكنني ما زلت أشعر بالحاجة إلى استخدام الأحجام حتى أصغر خلية خاصة في نهاية الجدول.
غير أنني أعتقد أن هذا هو القالب مفيدا جدا وأنا أجد بك المغلق بين الخدع الموقع ليكون قراءة ممتازة. بفضل كريس.
ابتهاج
شكرا لك على فكرة عظيمة لتجنب الكثير من الاخطاء واضاعة الوقت مع الأقسام المختلفة القياسية والمغلق - القالب...
وأرجو أن نفكر في هذه الفكرة لبلدي webprojects أيضا
رالف
كريس -- أنا معك حول قضية عالمية محدد. أنا لست مقتنعا بأن الأمر كله أن سيئة ، وأنا لا يزال استخدامه على نطاق واسع دون أية مشاكل.