طراحی هدر قالب سایت و وبلاگ با فتوشاپ و css

raya · اکتبر 31, 2013

یکی از چالش های همیشگی طراحان وب، تعریف و ایجاد سربرگ ها یا همان هدر قالب است، البته اینکه طراح از چه تکنیکی در این مورد استفاده کند، تا حدود زیادی به سلیقه، مهارت و هدف از طراحی قالب برمی گردد، به طور مثال سربرگ یا هدر سایت ها و وبلاگ های کودکانه یا فانتزی معمولا باید ترکیبی از تکنیک های شاد و اِلمان های بیشتر باشد، در مقابل ممکن است به فرض برای یک سایت اداری، از تکنیک های ساده و با همپوشانی کامل استفاده شود، از این رو به دلیل گستردگی این موضوع، در این آموزش می خواهیم چند روش کلی در طراحی هدر قالب سایت یا وبلاگ با استفاده از فتوشاپ و کدنویسی css را با هم مرور کنیم.
منظور از طراحی قالب در فتوشاپ چیست؟

پیش از پرداختن به ادامه آموزش، بد نیست برای آن دسته از دوستانی که ممکن است تازه به کار طراحی وب علاقمند شده باشند، توضیح مختصری در مورد طراحی قالب در فتوشاپ دهیم؛ توضیح اینکه قالب های وب برخلاف پروژه های دسکتاپی و آفلاین، از اصول ویژه ای پیروی می کنند که به دلایل خاص (از جمله افزایش سرعت، ماهیت داینامیک وب و...) ایجاد شده است، در طراحی آفلاین معمولا چیزی به نام کدهای css وجود ندارد و اسکلت بندی کار، با همان تصاویر یا المان ها صورت می گیرد (البته بسته به برنامه مورد نظر و ابزار استفاده شده، ممکن است از تکنیک های مشابه css، ولی به صورت خودکار و بیشتر در پس زمینه استفاده شود)، ولی در وب، تسلط بر کدنویسی css حرف اول را در طراحی قالب می زند، پس از کدنویسی css است که نوبت به ابزارهایی مثل فتوشاپ می رسد، در این مرحله به اسکلت بی جان قالبمان (که با html و css شکل گرفته است) با المان هایی که طراحی می کنیم، شخصیت و زیبایی می بخشیم، البته به دلیل سلیقه ای بودن این موضوع، برخی نیز ترجیح می دهند ابتدا طرح کلی قالب را در فتوشاپ پیاده کنند، سپس به کدنویسی css بپردازند.
تکنیک های طراحی هدر قالب سایت یا وبلاگ

در کل تقریبا دو تکنیک اصلی برای طراحی هدر قالب یک سایت یا وبلاگ وجود دارد که انتخاب هر کدام، بستگی به شیوه طراحی دارد که برگزیده اید، در روش اول از هدرهای استاتیک با پهنا و ارتفاع ثابت استفاده می شود، به فرض اگر عرض کل قالب میزانی ثابت (مثلا 900 پیکسل) باشد، هدر آن می تواند بلاکی در ابعاد فرضی 900 در 150 پیکسل باشد، این شیوه معمولا برای قالب های با پس زمینه (background) مجزا از پیش زمینه (foreground) کاربرد دارد که در ادامه خواهیم دید، تکنیک دیگر استفاده از بلاک های ایستا، ولی با پس زمینه هم پوشان است، یعنی در واقع بلاک اصلی که همان هدر سایت یا وبلاگ است، مقادیری ثابت (به فرض 800 در 200 پیکسل) است، اما پس زمینه آن را طوری همپوشانی می کنیم که گویی هدر، تمام عرض صفحه را پوشش داده است، روش سومی نیز وجود دارد که امروزه چندان کاربردی نیست و آن استفاده از عرض متغیر است، در این حالت باید کل قالب از این تکنیک پیروی کند، آنچه در این نوع قالب ها اتفاق می افتد این است که با تغییر اندازه پنجره مرورگر، اندازه کل بلاک های قالب نیز تغییر کرده و به گوشه های مرورگر نزدیک می شود، طراحان حرفه ای معمولا از ترکیبی از روش ها با ایده های خلاقانه، برای خلق جلوه های بصری استفاده می کنند.
طراحی هدر استاتیک با پس زمینه مجزا

در این شیوه، عرض قالب طراحی شده، میزانی ثابت است و پس زمینه آن معمولا رنگی مجزا از پیش زمینه و متمایز است، به طور مثال ما در صفحه زیر، طرح اولیه قالبی را کدنویسی کرده ایم که از این تکنیک در طراحی آن استفاده شده است.
<!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></title>

<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
background-color:#CCC;
}
.main{
display:block;
width:900px;
height:300px;
border:#666 1px solid;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
}
.header{
display:block;
width:900px;
height:150px;
background-color:#0CC;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
</div>
</div>
<hr />
قسمت هدر در این شیوه، میزانی ثابت است و می توان به فرض داخل آن، از عناصر و بلاک های دیگر استفاده کرد یا با یک تصویر، کل آن را پوشش داد.
</body>
</html>توضیح:
- در کد ساده بالا، رنگ پس زمینه کل صفحه را با عنصر body و کد هگز CCC، به رنگ خاکستری درآورده ایم.
- سپس بلاکی با کلاس فرضی main برای چارچوب قالب ساخته ایم که با تنظیم margin-left و margin-right به صورت auto، آن را در وسط صفحه تنظیم کرده ایم، همانطور که ملاحظه می کنید ویژگی background-color در اینجا رنگ سفید یا FFF است.
- برای قسمت هدر نیز با کلاس فرضی header یک بلاک در ابعاد 900 در 150 پیکسل ترسیم کرده ایم (داخل بلاک main) و رنگ پس زمینه آن را با کد هگز 0CC مجزا کرده ایم.
گرد کردن گوشه های هدر در فتوشاپ

کد بالا در واقع تنها اسکلت بندی کار را ترسیم می کند، برای اینکه قالبی زیبا داشته باشیم، باید از css و فتوشاپ به صورت خلاقانه ای استفاده کنیم، به فرض در اینجا، اگر بخواهیم گوشه های هدر را به جای حالت مستطیلی و با لبه های تیز، به صورت گوشه های گرد و نرم درآوریم، باید دو کار انجام دهیم، ابتدا خط حاشیه بلاک main را حذف کنیم، چون با وجود خط حاشیه، نمی توانیم گوشه نرم ایجاد کنیم، سپس در فتوشاپ، لایه ای در ابعاد 900 در 150 پیکسل برای هدر خود طراحی کنیم، پس زمینه لایه را نیز به رنگ پس زمینه صفحه تنظیم کرده و در آن یک مستطیل با گوشه های نرم توسط ابزار رسم شکل یا Rounded Rectangle Tool ترسیم کنیم،

طراحی هدر قالب با پس زمینه داینامیک

یک روش دیگر برای طراحی هدر سایت یا وبلاگ، استفاده از یک بلاک استاتیک و با اندازه ای ثابت (به فرض همان 900 در 150 پیکسل) و پس زمینه ای داینامیک و تکرار شونده است، در این حالت معمولا به تگ body یا بلاکی والد، پس زمینه ای کاملا مشابه با هدر استاتیک نسبت می دهند و با تکرار آن در محور x ها، به نوعی همپوشانی در قسمت هدر سایت ایجاد می شود، برای درک صحیح این تکنیک، بهتر است کد زیر را با هم بررسی کنیم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
background-color:#CCC;
margin:0px;
padding:0px;
background-image:url(web-template-header-step2.jpg);
background-repeat:repeat-x;
}
.main{
display:block;
width:900px;
height:300px;
border:#666 0px solid;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
}
.header{
display:block;
width:900px;
height:150px;
background-color:#0CC;
border-bottom:#666 double;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
</div>
</div>
<hr />
هدر اصلی در این شیوه یک بلاک ثابت است، اما در دو طرف آن، پس زمینه تگ body به صورت داینامیک و متناسب با اندازه پنجره مرورگر، تکرار می شود.</body>
</html>
توضیح:
- در این کد، به تگ body یک پس زمینه با قابلیت تکرار شدن در محور x ها نسبت داده ایم (قسمت background-repeat و repeat-x)، این کار سبب می شود که کل عرض قالب پوشش داده شود، پس زمینه ما در کد بالا، یک تصویر کوچک در ابعاد 160 در 10 پیکسل است که در زیر ملاحظه می کنید.

- با تنظیم margin و padding با عدد صفر پیکسل، حاشیه قالب از بین رفته و بلاک main به گوشه های مرورگر کاملا نزدیک می شود.
- در قسمت کلاس header، از خطی در زیر بلاک هدر، به صورت double استفاده شده است.
در پایان این آموزش، یادآور می شویم که طراحی قالب و شیوه های آن، عمدتا کاری سلیقه ای و مبتنی بر خلاقیت است، بنابراین هدف از این نوع مطالب تنها راهنمایی و تسهیل کار طراحی است و برای خلق روش های جدید و ایده های نو، هیچ محدودیتی وجود ندارد.

طراحی هدر قالب سایت و وبلاگ با فتوشاپ و css

Recommended Posts

raya 0

لینک به دیدگاه

Share on other sites

به گفتگو بپیوندید

کاربران آنلاین در این صفحه 0 کاربر

آخرین مطالب بازارچه

فروش انواع پاورهای دست دو بدون گارانتی با گارانتی از برند پرطرفدار گرین و برندهای معتبر دیگر 1 2 3 4 46

ASUS DUAL 💥 2060 💥 12G OC

فروش گرافیک 5700 xt 1 2

فروش گرافیک 3060 ایسوز استریک و 1050 تی ای گیگا و تعدادی rx580 پاور 400, 430و باندل 1151+1150 وگرافیک gtx 960 1 2 3

لپ تاپ آکبند قدرتمند و گیمینگ TUF Gaming FX507 با گرافیک 4070 و پردازنده i7

فروش کیس Lian li O11 XL و کولر Deepcool Lt720 و یکسری لوازم

فروش کیس Cooler Master MB511 همراه با چهار عدد فن و هاب فن دیپ کول

مانیتور 2k کوانتوم دات rapid ips آکبند MSI Mag 274qrf-qd 1 2

فروش اسپیکرcreative gigaworks s750

2060 💥 SUPER 💥 GAINWARD

آخرین موضوعات

خرید لپ تاپ با نمایشگر Oled ریسک هستش ؟

همه چیز در مورد پردازنده‌های نسل 15 اینتل و مادربردهای Z890 ایسوس در لیون کامپیوتر 1 2

مشاوره جهت خرید قطعات کامپیوتر 1 2 3 4 1100

مشکل با برنامه کورل، لگ و کندی

اخبار مختصر بازی ها ، قفل ها ، کرک ها ، شایعات و ... 1 2 3 4 426

فهرست بخش ها

فعالیت ها

کاربران ویژه