رفتن به مطلب

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

raya

توسط raya
در مسائل عمومی وب و اینترنت

 اشتراک گذاری

Recommended Posts

raya

raya 0

ارسال شده در
ارسال شده در

یکی از چالش های همیشگی طراحان وب، تعریف و ایجاد سربرگ ها یا همان هدر قالب است، البته اینکه طراح از چه تکنیکی در این مورد استفاده کند، تا حدود زیادی به سلیقه، مهارت و هدف از طراحی قالب برمی گردد، به طور مثال سربرگ یا هدر سایت ها و وبلاگ های کودکانه یا فانتزی معمولا باید ترکیبی از تکنیک های شاد و اِلمان های بیشتر باشد، در مقابل ممکن است به فرض برای یک سایت اداری، از تکنیک های ساده و با همپوشانی کامل استفاده شود، از این رو به دلیل گستردگی این موضوع، در این آموزش می خواهیم چند روش کلی در طراحی هدر قالب سایت یا وبلاگ با استفاده از فتوشاپ و کدنویسی 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 پیکسل است که در زیر ملاحظه می کنید.
web-template-header-step2.jpg
- با تنظیم margin و padding با عدد صفر پیکسل، حاشیه قالب از بین رفته و بلاک main به گوشه های مرورگر کاملا نزدیک می شود.
- در قسمت کلاس header، از خطی در زیر بلاک هدر، به صورت double استفاده شده است.
در پایان این آموزش، یادآور می شویم که طراحی قالب و شیوه های آن، عمدتا کاری سلیقه ای و مبتنی بر خلاقیت است، بنابراین هدف از این نوع مطالب تنها راهنمایی و تسهیل کار طراحی است و برای خلق روش های جدید و ایده های نو، هیچ محدودیتی وجود ندارد.

لینک به دیدگاه
Share on other sites

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

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .
توجه: مطلب ارسالی شما پس از تایید مدیریت برای همه قابل رویت خواهد بود.

مهمان
ارسال پست در این تاپیک...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
 اشتراک گذاری
رفتن به لیست تاپیک‌ها
×
×
  • اضافه کردن...