دسته بندی
درگاه پرداخت
paypaad
استفاده از مطالب و خدمات «وبگو» رایگان است، درگاه پرداخت صرفا برای مواردی است که نیاز به پرداخت هزینه دارند.
article

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

web-photoshop-css-header

یکی از چالش های همیشگی طراحان وب، تعریف و ایجاد سربرگ ها یا همان هدر قالب است، البته اینکه طراح از چه تکنیکی در این مورد استفاده کند، تا حدود زیادی به سلیقه، مهارت و هدف از طراحی قالب برمی گردد، به طور مثال سربرگ یا هدر سایت ها و وبلاگ های کودکانه یا فانتزی معمولا باید ترکیبی از تکنیک های شاد و اِلمان های بیشتر باشد، در مقابل ممکن است به فرض برای یک سایت اداری، از تکنیک های ساده و با همپوشانی کامل استفاده شود، از این رو به دلیل گستردگی این موضوع، در این آموزش می خواهیم چند روش کلی در طراحی هدر قالب سایت یا وبلاگ با استفاده از فتوشاپ و کدنویسی 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>
<!-- http://webgoo.ir -->
<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 ترسیم کنیم، تصویر زیر می تواند راهنمای شما باشد.
web-template-header-step1.jpg

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


یک روش دیگر برای طراحی هدر سایت یا وبلاگ، استفاده از یک بلاک استاتیک و با اندازه ای ثابت (به فرض همان 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.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | طراحی هدر قالب به شیوه داینامیک</title>
<!-- http://webgoo.ir -->
<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 استفاده شده است.
در پایان این آموزش، یادآور می شویم که طراحی قالب و شیوه های آن، عمدتا کاری سلیقه ای و مبتنی بر خلاقیت است، بنابراین هدف از این نوع مطالب تنها راهنمایی و تسهیل کار طراحی است و برای خلق روش های جدید و ایده های نو، هیچ محدودیتی وجود ندارد.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» طراحی قالب سه بعدی وب با فتوشاپ و css
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» آموزش انتقال قالب از فتوشاپ به کد html و css
» چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
commentنظرات (۲۰ یادداشت برای این مطلب ارسال شده است)
نویسنده: میلاد
زمان: ۱۸:۱۸:۳۸ - تاریخ: ۱۳۹۱/۰۸/۲۱
مرسی عالی بود
نویسنده: میثم
زمان: ۱۷:۱۶:۵۹ - تاریخ: ۱۳۹۱/۱۱/۱۶
با سلام و خسته نباشید. من تازه با سایت شما اشنا شدم. مدام از مطالبش استفاده می کنم. من میخوام هدر وبم رو عوض کنم اما کد قسمت هدر رو نمیتونم توی قالبم پیدا کنم. شما پیشنهادی ندارین؟ اگه لازمه کد قالب رو براتون بفرستم. بازم ممنون از زحمتایی که می کشید
پاسخ: 
سلام
کدهای مربوط به ویژگی های ظاهری مانند هدر معمولا در فایل css قالب ها موجود است، این فایل هم (معمولا) به صورت غیر مستقیم در صفحه وارد می شود، لذا برای راهنمایی دقیق تر لطفا آدرس وبلاگ خود را درج کنید تا بررسی گردد.
نویسنده: میثم
زمان: ۰۱:۴۹:۳۶ - تاریخ: ۱۳۹۱/۱۱/۱۸
بازم ممنون از وقتی که میذارید.
www.diarekurd.blogfa.com
نویسنده: میثم
زمان: ۰۰:۴۱:۰۱ - تاریخ: ۱۳۹۱/۱۱/۲۴
سلام و خسته نباشید. اقا بازم ببخشید مزاحم شدم. قرار شد وبم رو نگاه کنید. دیدین؟
پاسخ: 
سلام
کد css قالب وبلاگ شما در آدرس زیر وجود دارد:
http://template.pichak.net/pichak/02/style.css
و خط مربوط به هدر قالب در کلاس top به صورت top.jpg مشخص است، آدرس کامل آن می شود:
http://template.pichak.net/pichak/02/top.jpg
این فایل (فایل css) را باید ویرایش کنید و آدرس تصویر جدید را به جای top.jpg جایگزین کنید، سپس فایل css جدید را در یک سرویس دهنده دیگر آپلود کرده و آدرس آن را در کد قالب به جای آدرس فعلی قرار دهید.
نویسنده: میثم
زمان: ۲۱:۴۲:۳۴ - تاریخ: ۱۳۹۱/۱۲/۰۲
تا همینجاش واقعا ممنون کلی ازتون یاد گرفتم . اگه زحمتی نیست بقیشم کمکم میکنین؟ خب من فایل css رو باز کردم و کلاس top رو پیدا کردم. توی اون خط عبارت top.jpg رو هم پیدا کردم ولی نمیدونستم ادرس هدر جدیدم رو کجاش بذارم اما این ادرس کاملی که شما نوشتین یعنی
http://template.pichak.net/pichak/02/top.jpg
روی توی مرورگر باز کردم. همین هدر وبم بود. حالا اگه بخوام هدر جدید رو بذارم جاش باید تصویرم رو اپلود کنم بعد ادرسش رو بذارم جای کدوم عبارت؟ اینم خط دستور :
top{width:1003;background:url('top.jpg') no-repeat top;height:210;vertical-align:top;direction:rtl;}
.titr{color:#fea900;text-align:center;font-size:27pt;font-weight: bold;padding:0 60 3 500;font-family:Times New Roman;}
.des{padding:0 70 0 500;direction:rtl;font-size:10pt;color:#dddddd;text-align:center;}
پاسخ: 
سلام
همان طور که مشخص است باید جای عبارت top.jpg، آدرس (کامل) تصویر جدید را قرار دهید.
نویسنده: زهرا
زمان: ۱۷:۳۶:۴۸ - تاریخ: ۱۳۹۲/۰۱/۱۴
با سلام.
خیلی از مطالب سایت شما استفاده کردم جا داره تشکر کنم. سایتتون واقعآ مفید و کاربردی هستش.
من زیاد متوجه فرق این 2 کد نشدم. در کل منظور شما از 2 تکنیک طراحی اینه که:
اگر تصویر بنر قابل تجزیه نباشه اونو با اندازه ی ثابت در باکس هدر استفاده میکنم و اگر قابل تجزیه باشه آن را در باکس هدر تکرار میکنیم که این روش داینامیک می شد.
ممنون می شم اگه جواب بدین.
پاسخ: 
سلام
در حالت ثابت، هدر قالب یک میزان ثابت است (به فرض با عرض 900 پیکسل) که داخل آن هم می توان عناصر داینامیک استفاده کرد (مانند تکرار یک تصویر کوچک) و هم یک تصویر با عرض 900 پیکسل (یا چند تصویر در کنار هم)، در این حالت با کوچک یا بزرگ شدن اندازه پنجره مرورگر، هیچ تغییری در اندازه هدر ایجاد نمی شود.
اما در حالت داینامیک، هدر قالب طوری طراحی می شود که متناسب با اندازه صفحه نمایش، هم پوشانی ایجاد می شود، به فرض قسمت میانی این نوع هدرها می تواند یک یا چند تصویر ثابت باشد و طرفین آن دو بلاک قابل تغییر با اندازه پنجره مرورگر، یا کل آن از تصاویر داینامیک تشکیل شده باشد.
نویسنده: سارا
زمان: ۱۷:۰۰:۲۵ - تاریخ: ۱۳۹۲/۰۲/۲۶
سلام ممنونم از توضیحاتتون .. یه سوال داشتم اینکه چطور برای هدر قالب تصویر بذاریم
میدونم که یه تصویر باید آپلود بشه! اما اینکه سایزش رو چطور با هدر منطبق کنیم و کد هاش رو بذارید ممنون میشم.
پاسخ: 
سلام
برای اعمال تنظیمات سفارشی در قالب و هدر وبلاگ الزاما باید با CSS آشنا باشید، اکثر قالب های وب با استفاده از استایل CSS طراحی می شوند و تغییر موارد نیز با ویرایش آن امکان پذیر است.
نویسنده: zar
زمان: ۰۰:۵۳:۲۳ - تاریخ: ۱۳۹۲/۰۳/۱۴
سلام
من از یک سایت خارجی یک تم برای وبلاگم در بلاگفا گرفتم که استفاده کنم. حالا چند سوال برای من پیش امده است. در ضمن رشته من کامپیوتر نیست. سوالات:
1- تمی که دانلود نمودم دو پوشه در ان هست که حاوی فایل های xml است من چگونه باید از این فایل xml بعنوان قالب استفاده کنم؟
2- چگونه باید آنرا مثلا برای بلاگفا آماده نمود؟
آدرس اینترنتی اون به این صورت است:
www.premiumbloggertemplates.com/2013/01/sevim-premium-blogger-template.html
متشکرم
پاسخ: 
سلام
قالب مورد نظر مربوط به سرویس بلاگر (Blogger) است و با سیستم بلاگفا سازگار نیست، برای سازگار نمودن نیز ابتدا باید با کدهای HTML و CSS و همچنین تگ های اختصاصی بلاگفا (که در راهنمای بخش ویرایش قالب آن وجود دارد) آشنا باشید، سپس کل کدهای را ترجمه کنید (در صورت عدم آشنایی قبلی، کار ساده ای نیست).
نویسنده: نیلوفر
زمان: ۰۵:۵۹:۳۷ - تاریخ: ۱۳۹۲/۰۳/۱۷
سلام ترخدا کمکم کنید من دنبال یه کد هستم که بتونم یه بلاک ثابت داشته باشم . در زیر هدر قرار بگیره.. هر متنی رو که دلم بخواد توش بنویسم تا در همه صفحات قرار بگیره
پاسخ: 
سلام
این مورد معمولا باید در کدنویسی قالب وبلاگ طراحی و علاوه بر آن سرویس دهنده (میهن بلاگ) امکان ایجاد پست ثابت را داشته باشد، کدی برای آن به صورت مجزا وجود ندارد!
نویسنده: pooys
زمان: ۲۰:۵۹:۵۴ - تاریخ: ۱۳۹۲/۰۵/۱۸
با سلام. این نمی تونه جواب خوبی برای خانم نیلوفر باشد حالا که سیستم این خاصیت رو نداره میتونه خودش کد تو قسمت قالب متن رو در جای دلخواه بذاره بدونه هیچ دردسری
پاسخ: 
سلام
کدی برای این کار در اختیار نداریم، اگر شما چنین موردی را در اختیار دارید، آدرس وبلاگ این کاربر در پیام بالا وجود دارد، لطفا به وبلاگ مراجعه کرده و کد بلاک ثابت به همراه آموزش های مورد نیاز را در اختیارشان قرار دهید تا پاسخ مناسبی به سوال ایشان باشد!
نویسنده: pooys
زمان: ۲۱:۴۹:۵۳ - تاریخ: ۱۳۹۲/۰۵/۱۸
با سلامی دوباره ادرس وب ایشان فیلتر شده است
نویسنده: مریم
زمان: ۰۰:۴۴:۴۲ - تاریخ: ۱۳۹۲/۰۹/۱۰
با سلام: میشه لطف کنین بگین آیا لینک ها میشه تو فتوشاپ درست کرد بعد تو css واسشون div تعریف کرد؟یا نه ممنون
برای طراحی لینک ها می تونم از فتوشاپ استفاده کنم؟؟
بازم ممنون
پاسخ: 
سلام
می توانید لینک ها را درون بلاک های div قرار دهید (استایل فتوشاپ را به بلاک div اختصاص دهید) یا برای تگ a در CSS خاصیت display با مقادیر block تعریف کنید.
نویسنده: طراحی سایت
زمان: ۱۲:۵۵:۲۰ - تاریخ: ۱۳۹۲/۱۰/۱۱
فوق العاده بود ممنون
نویسنده: اکبری
زمان: ۰۹:۱۰:۰۸ - تاریخ: ۱۳۹۲/۱۲/۰۴
سلام
چند روز پیش توی یکی از سایت ها مطلبی درباره تعویض عکس هدر بالای وبلاگ خوندم و وقتی که میخواستم این کار رو رو وبلاگ خودم انجام بدم با چند مشکل اساسی برخورد کردم و اکثر تنظیمات وب به خصوص در مرورگر فایر فاکس به هم ریخت مثلا وبلاگم دیگه قالب های سه ستونه رو قبول نمیکنه و از اون بدتر وقتی عکس آپلود می کنم (عکس های گروه کوهنوردی) با پیغام به دلیل درج اسکریپ یا فایل غیر مجاز. امکان درج چنین عکسی وجود ندارد روبرو میشم خواهش می کنم راهنمایی کنید آدرس وبلاگ هم
http://arashkherameh.blogfa.com/
پاسخ: 
سلام
مشکل به هم ریختن قالب را باید خودتان اصلاح کنید، چون دقیقا نمی دانیم چه کدی را حذف یا اضافه کرده اید، اما در مورد درج اسکریپت تبلیغاتی به سرویس بلاگفا برمی گردد، متاسفانه این سرویس دهنده هر روز سایت های بیشتری را به لیست سیاه (!!) خود اضافه می کند با این توجیه که جلوی فعالیت های تبلیغاتی یا انتشار اسکریپت های مخرب گرفته شود!
راه حل: یا قید بلاگفا را بزنید و از یک سرویس دیگر استفاده کنید یا اینکه سرویس های آپلود مختلفی را تست کنید تا یک مورد سازگار با بلاگفا پیدا شود!
نویسنده: اکبری
زمان: ۱۷:۱۶:۳۵ - تاریخ: ۱۳۹۲/۱۲/۰۴
سلام ممنون
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

7 × 3
 refresh
آپلود رایگان عکس و فایل
آگهی
parandsms.com
تفاوت
tafavot.net

تفاوت دات نت
پنل پیامک
elitsms.ir

سامانه پیام کوتاه
طراحی وب سایت
nemov.net

ارزان و با کيفيت
آموزش طراحی سایت
onliner.ir

فیلم های آموزشی رایگان