طراحی و کدنویسی هدر استاتیک
پباده سازی و کدنویسی هدر استاتیک
در این‌شیوه هدر اندازه ای اثبات دارااست و معمولا فقط یک تصویر گرافیکی یا این که بلاکی با اندازه از پیش تمجید شده‌است طراحی سایت در مشهد ولی پهنا قالب میتواند میزانی عمدتا اثبات یا این که بعضی متغیر (برخورد گرا یا این که Resposive) باشد و دور نما آن معمولا رنگی جداازهم از پیش موضوع و نصیب مهم داراست، به صورت نمونه در برگه اینترنت پایین طرح اول قالب هایی را کدنویسی کرده ایم که از این تکنیک در پباده سازی هدر آنان مستعمل میباشد:
هدر استاتیک
منو
محتوا
فوتر
دور نما داینامیک و برخورد گرا
هدر استاتیک
منو
محتوا
فوتر
- نصیب هدر در‌این تکنیک پهنا و طول ثابتی دارااست و با کاهش یا این که ارتقاء اندازه پنجره مرورگر (Viewport) تغییر و تحول نمی نماید.
- تصویر دور نما درین مثال فولدر header-example-1.png با بعدها اثبات میباشد که می‌توانیم در فتوشاپ آن را (با ابزار رسم وکتوری Pen و نقاشی کردن Gradient) پباده سازی کنیم.
- برای مشاهده تصویر دورنما بر روی بخش هدر کلیک راست و آیتم View Background Image را تعیین میکنیم.
- برای چک شیوه اکران هدر استاتیک در دستگاه های متعدد، می‌توانیم اندازه پنجره مرورگر را معدود و زیاد کنیم.
- این‌شیوه بسته به نیاز و نوع فعالیت هم میتواند در قالب های با واحد سنجش پهنا اثبات و هم در قالب های برخورد گرا استعمال شود، به فرض برای تارنما های اداری که فرم ظاهری کاری در مقایسه با سازش با دستگاه گوناگون اهمیت بیشتری داراست، این موقعیت قادر است کاربردی باشد.
پیش اکران آنلاین
توضیح:
- در کد بالا رنگ دور نما مجموع شیت را با عنصر body و کد هگز CCC به رنگ خاکستری درآورده ایم.
- بعد مثال بلاک هایی با آی دی خیالی main برای چارچوب قالب ها ساخته ایم که با در لحاظ دریافت کردن margin-left و margin-right به طور auto چارچوب قالب در اواسط شیت تهیه و تنظیم شده‌است، مقدار خصوصیت background-color برای بخش main رنگ سپید یا این که کد هگز FFF میباشد.
- برای نصیب هدرها با آی دی خیالی header بلاکی در بعد ها 900 در 150 پیکسل رسم (باطن بلاک های main) و رنگ دورنما آن‌ها‌را با کدهای هگز جداازهم کرده ایم، برای هر دو هدر از یک تصویر بگراند مستعمل که می‌توانیم در ابزارهای گرافیکی مانند فتوشاپ (Photoshop) یا این که ادوبی ایلوستریتور (Adobe Illustrator) به راحتی آن را پباده سازی و به طور پوشه png یا این که jpg ذخیره کنیم.
- این مثال قالب ها تنها جهت ارشادوراهنمایی و امداد به فهم و شعور بهتر متدهای کلی روش پباده سازی هدرهای استاتیک میباشد، در فعالیت معمولا پباده سازی هدرها نیاز به تمرکز بیشتر و رعایت اصول هنری دارا هستند تا جذابیت ظاهری و ماهر بودنشان مراقبت خواهد شد که‌این مهارت به گذر زمان و بر حسب تجربه و تست و اشتباه به دست میاید.
گرد کردن کناره های هدر در فتوشاپ و CSS
طراحان اینترنت برای اخلاق قالب هایی با جلوه ظاهری بهتر از تکنیک های مختلفی استعمال می نمایند، یک کدام از این تکنیک ها گرد کردن کناره های هدر قالب میباشد که بسته به نوع هدر در اپ فتوشاپ یا این که با استایل نویسی CSS ساخت میگردد، به فرض در مثال کد بالا در صورتیکه بخواهیم کناره های هدر را به مکان وضعیت مستطیلی و با کناره های تیز به طور کناره های گرد و به اصطلاح قابل انعطاف درآوریم بایستی دو عمل انجام دهیم:
در آغاز خط لبه بلاک های main را حذف میکنیم (مقدار را برای خواص border صفر در لحاظ گرفته یا این که این خواص را از سورس کد منزه میکنیم)، با وجود خط لبه نمی توانیم با به کار گیری از تصویر دور نما کناره قابل انعطاف تولید کنیم، بعد در نرم افزار فتوشاپ لایه ای در بعد ها 900 در 150 پیکسل برای هدر خویش پباده سازی و دور نما لایه را نیز به رنگ دور نما شیت یا این که به طور واضح (Transparent) تهیه و تنظیم کرده و در آن مستطیلی با کناره های قابل انعطاف بوسیله ابزار ترسیم صورت یا این که Rounded Rectangle Tool رسم میکنیم.
با گزینش ابزار ترسیم صورت واحد سنجش شعاع یا این که Radius در اپلیکیشن فتوشاپ قابل تهیه میباشد که هر چه این عدد بزرگتر باشد انحنای کناره ها بیشتر خواهد بود.
نحوه دیگر پباده سازی کناره های قابل انعطاف برای هدر قالب به کار گیری از خواص border-radius در CSS میباشد، درین تکنیک خواهیم توانست خط کناره را داشته باشیم یا این که مقدار آن را صفر و none در حیث بگیریم، نمونه:
#main-1, #main-2 {
display:block;
width:900px;
height:380px;
border:#666 1px solid;
-webkit-border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
border-radius:8px 8px 0 0;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
text-align:center;
color:#333;
}
#header-1, #header-2 {
display:block;
width:900px;
height:150px;
border:none;
-webkit-border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
border-radius:8px 8px 0 0;
background:url(header-example-1.png) no-repeat #14a2b7;
}
ترتیب مقدار دهی برای خواص های radius در‌این مثال کد اهمیت داراست، از چهار مقدار مهم دو مقدار او‌لین برای گرد کردن کناره های نصیب main و header کاربرد داراست که درین مثال کد 8 پیکسل در حیث گرفته شده‌است.
پباده سازی و کدنویسی هدر داینامیک
مدل دیگر پباده سازی هدر وب سایت ها، بلاگ ها و به صورت کلی صفحه ها اینترنت به کار گیری از بلاک های داینامیک و با اندازه ای غیر اثبات میباشد که امروزه به عنوان هدر قالب های برخورد گرا (Responsive) شناخته میشوند، بلاک مهم هدر درین نوع قالب ها معیار پهنا ثابتی ندارد و معمولا به طور درصدی مقداردهی میگردد خیر پیکسلی، موادتشکیل دهنده هدر دربرگیرنده لوگو، فیلد کاوش، جعبه اکران تاریخ و مواقعی از این دست در بلاک های تو در توی درونی قرار میگیرند و با معدود و زیاد شدن پهنا پنجره مرورگر (Viewport) خویش را با اندازه تازه تطبیق میدهند، به صورت نمونه در شیت اینترنت تحت طرح نخستین قالبی را کدنویسی کرده ایم که از این تکنیک در پباده سازی هدر آن مصرف شده میباشد:
اکران لوگو
\"logo\"
هدر داینامیک
اکران فیلد تاریخ و...
کاوش:
\"<span
کاوش...\">
منو
محتوا
فوتر
برای مشاهده پیش اکران آنلاین این مثال کد لطفا به پیوند نوشته شده در جمله بعدی (همپوشانی تصویر دورنما هدر) رجوع نمایید.