با افزایش وبلاگها و سایتها و پیشرفت تکنولوژی داشتن یک سایت یا وبلاگ زیبا و کاربردی برای تمامی افراد الزامیست . امروزه تعداد قالبهای طراحی شده آماده زیاد است و این امر ضروریست که قالب را برای خود اختصاصی کنید ، در این پست آموزش تغییر هدر انواع قالب و اختصاصی کردن قالب را در اختیار شما قرار می دهیم . [...]
متاسفانه به دلیل تنوع در طراحی ها این امر کمی پیچیده می شود که اگر کمی با CSS و HTML آشنایی داشته باشید بسیار به شما کمک می کند اما سعی می کنیم این آموزش را به صورت آسان و صریح برای شما قرار دهیم .
امروزه هدر سایتها اکثرا از عکسهایی استفاده می شود که این عکسها به دو صورت در کد HTML قالب فراخوانی می شوند :
۱- به صورت کد نمایشی عکس HTML در تگ همان table : در این روش عکس هدر را توسط کدی شبیه به کد زیر در قالب و در قسمتهایه اول قالب فراخوانی می کنند ( در TABLE هدر )
<img src=”images/header.jpg” width=”1005″ height=”344″>
در این کد width=”1005″ به معنی این است که طول این عکس ۱۰۰۵ پیکسل است و height=”344″ به این معنی است که عرض آن ۳۴۴ پیکسل است .
* دقت کنید که حتما عکسی را که می خواهید جایگزین هدر فعلی قالب بکنید ، حتما در همان اندازه هدر اصلی قالب باشد وگرنه ممکن است قالب به هم ریخته شود
در این نوع فقط کافیست عکس خود را با ساز هدر قالب طراحی کنید و در فضایی آپلود کنید و لینک آن را جایگزین لینک فعلی هدر بکنید .
2- فراخوانی از طریق فایل CSS ( جانبی / داخلی ) : اکثرا در قالبها از این روش استفاده می شود ، به دلیل اینکه سرعت بیشتری نسبت به روش قبل دارد و امروزه می توان گفت بیش از ۹۵% طراحی ها از این طریق انجام میشود . در این روش کار یکم سخت تر می شود ، برای شروع شما باید ابتدا فایل CSS را که در قالب فراخوانی شده است پیدا کنید . برای اینکار بین دو تگ <head> و <head/> به دنبال کدی شبیه کد زیر بگردید :
<link href=”style.css” type=”text/css” rel=”stylesheet”>
جای style.css لینک فایل CSS قرار دارد . دقت کنید که فقط از این طریق می توان فایل CSS را در قالب فراخوانی کرد و همیشه پسوند آن css. می باشد .
ممکن است که در قالب بیش از یک فایل CSS باشد که در این صورت ابتدا به دنبال فایلی بنام style بگردید و اگر پیدا نکردید بقیه فایلهای CSS را باز کنید و دنبال تگ هدر بگردید .
بعد از پیدا کردن فایل CSS ، لینک آنرا در مرورگر خود باز کنید . یک صفحه کد برای شما نمایش داده می شود ، آنرا SAVE کنید و در کامپیوتر خود با ویرایشگر مناسبی باز کنید ( مثلا notepad ) ، حال یکسری کد دارید که به توضیح آنها می پردازیم .
در اینجا نیز با توجه به طرحهای مختلف ممکن است مختلف باشد اما در کل شما برای تغییر هدر کافیست به دنبال کدی شبیه زیر بگردید :
.header {
background: url(‘images/header.jpg’) transparent no-repeat scroll center top;
height: 344px;
width: 1005px;
position: relative;
font-size: 18px;
}
در بیشتر قالبها به اسم header ، header Image ، …. می باشد . شما از اسم آن می توانید آنرا در بیشتر قالبها شناسایی کنید . ممکن است کدهای درون آن نیز کمی بیشتر یا کمتر باشد یا تفاوتی دیگر داشته باشد اما در کل یک لینک عکس دارد با آندازه طولی و عرضی آن . حال مانند قبل عمل می کنیم و عکسی را که طراحی کردیم با سایز هدر اصلی قالب را آپلود می کنیم و در کد بالا در قسمت images/header.jpg قرار می دهیم و SAVE می کنیم . حال باید فایل CSS خود را آپلود کنیم و جایگزین فایل زیر درون قالب خود کنیم :
<link href=”style.css” type=”text/css” rel=”stylesheet”>
فایل جدید را جایگزین style.css می کنیم و قالب خود را save می کنیم . هدر جدید ما آماده است و می توانیم از آن استفاده کنیم .
نکاتی که باید دقت شود :
۱- حتما سایز عکسی که طراحی می کنیم با سایز هدر اصلی قالب مطابقت داشته باشد وگرنه ممکن است قالب به هم ریخته شود .
۲- ممکن است در فایل CSS ب جای header. از مقادیری دیگری استفاده شود . ( اما در کل اسمی از header نیز در آن به کار می رود ، البته بستگی به طراح دارد )
۳- ممکن است فایل CSS بخش header. دارای تعداد بشتری دستور باشد که شما فقط لیمک عکس را تغییر می دهید و به دیگر کدها دست نمی زنید .
۴- در اکثر قالبهای امروزی به خصوص قالبهای ارایه شده رایگان از روش دوم (فراخوانی از طریق فایل CSS ) استفاد می شود .
۵- برای آپلود نیز می توانید از سایتهای فضای رایگان استفاده کنید .
۶- به قسمتهای مختلف آموزش دقت کنید و مو به مو انجام دهید تا موفق باشید .
این آموزشم به پایان رسید امیدوارم مفید واقع بشه .
کیوان ا K1
دسته بندی : 
نویسنده : کیوان 
سلام آقا کیوان دستت درد نکنه منظورم این نبود این بود که چطوری توی فتوشاپ هدر درست کنیم آموزش اینو بزار واقعا ممنون انشاالله جبران کنم موضوع هدر هم عکس باشه خوبه ممنون.
این کار خیلی سختیه . نمی شه . بستگی به سلیقه فرد و ترفندهایی که بلده هست که برای اینکار می تونی آموزشهای فتوشاپ رو دنبال کنی .
سلام
اگر لطف کنید آموزش قرار دادن یک بنر تبلیغاتی رو در هدر مانند سایت خوددتون که بنر فروشگاهتون رو در هدر قرار داده اید را هم در سایت قرار دهید یا بهتره که در همین پست اضاف کنید
با تشکر
باید زبان HTML بلد باشید که در قسمت هدر بتونید یک table ایجاد کنید و بنرتونو توش قرار بدید . والا برای توضیح یکم سخته اما سعی می کنم آموزشی براتون قرار بدم .
با سلام خدمت شما مدیر محترم
پایگاه اطلاع رسانی ” هیئت محبان الحسین عشاق العباس ”
“پایگاه اینترنتی قافله “آماده تبادل لینک و لوگو با سایت های ارزشی می باشد.
سایت ما را لینک بفرمایید و یا لوگو ما را قرار دهید. تا در کمترین زمان لینک و لوگو شما در این پایگاه ثبت شود.
با تشکر از همکاری شما.التماس دعا
پایگاه اینترنتی قافله
http://www.ghafeleh.info
خوشحال میشیم این تبادل انجام و ما را حمایت بفرمایید.
برای پیگیری بهتر لطفا از بخش تماس با ما استفاده کنید
با تشکر
سلام آقا کیوان
شما میتونی بر وبلاگ من درست کنی منظورم هدر هست اگه درست کنی ممنونت میشم من یکم بلدم ولی به دلم نمیشینه موضوع وبلاگم تفریحی دستت درد نکنه.
دوست عزیز سایتهای خدماتی زیادی برای طراحی هدر هست مثل وب برگ که کارهای حرفه ای و مد نظر شما رو انجام میده . حقیقتش من خودم محصلم درس دارم وقت ندارم اما اگه وقت پیدا کردم خودم انجام میدم برات اما فعلا که همش امتحان دارم .
سلام آقا کیوان
انشاالله بعد از امتحانا برام درست میکنی شیرینی قبولی امتحانا اگه تونستی بیا وبلاگم بهم خبر بده تا بگم در چه سایزی و در مورد چی فدات شم انشاالله موفق باشی در امتحانات.
سلام من از قالب سایت خودتون استفاده می کنم البته برای سیستم وبلاگدهی
اگر میشه اموزش کامل ویرایش قالب سایت خودتون(C115) رو در سایتتون قرار بدید
خیلی گلی ممنون از اطلاعاتت خیلی خوبه من که کلی استفاده کردم . مخصوصا برنامه نویسی ها بازم مرسی
خواهش می کنم
سلام از کجا بفهمیم که سایز هدر قالب وبلاگمون چقدره؟
در این قالب به صورت پیش فرض سایز هیدر مشخص نشده است …
تصویر را دانلود کنید و از اطلاعات تصویر ابعاد آن را مشاهده نمایید .
سلام داداش من هرچقدر سعی کردم نتونستم هدر این وب مو پیدا کنم و تغییر بدم میشه راهنماییم کنین لطفا خیلی حیاطیه
لطفآ اگه میشه هرچه زودتر بهم خبر بدین