loading...
قالب وبلاگ
برای کاربران
تست منو وسط بالا 2
تستس منو وسط بالا
تست منو وسط بالا 1
آخرین ارسال های انجمن
امیر بازدید : 1020 چهارشنبه 18 مرداد 1391 نظرات (2)

برای مشاهده این پست، لطفاً وارد حساب کاربری خود شوید یا در سایت ثبت‌ نام کنید.
نام کاربری :
رمز عبور :
تکرار رمز :
موبایل :
ایمیل :
نام اصلی :
کد امنیتی :
 
کد امنیتی
 
بارگزاری مجدد
ارسال نظر برای این مطلب
این نظر توسط حمید مهربان در تاریخ 1348/10/11 و 8:26 دقیقه ارسال شده است

با افزایش وبلاگها و سایتها و پیشرفت تکنولوژی داشتن یک سایت یا وبلاگ زیبا و کاربردی برای تمامی افراد الزامیست . امروزه تعداد قالبهای طراحی شده آماده زیاد است و این امر ضروریست که قالب را برای خود اختصاصی کنید ، در این پست آموزش تغییر هدر انواع قالب و اختصاصی کردن قالب را در اختیار شما قرار می دهیم . [...]

متاسفانه به دلیل تنوع در طراحی ها این امر کمی پیچیده می شود که اگر کمی با CSS و HTML آشنایی داشته باشید بسیار به شما کمک می کند اما سعی می کنیم این آموزش را به صورت آسان و صریح برای شما قرار دهیم .

امروزه هدر سایتها اکثرا از عکسهایی استفاده می شود که این عکسها به دو صورت در کد HTML قالب فراخوانی می شوند :

۱- به صورت کد نمایشی عکس HTML در تگ همان table : در این روش عکس هدر را توسط کدی شبیه به کد زیر در قالب و در قسمتهایه اول قالب فراخوانی می کنند ( در TABLE هدر )





در این کد width=”1005″ به معنی این است که طول این عکس ۱۰۰۵ پیکسل است و height=”344″ به این معنی است که عرض آن ۳۴۴ پیکسل است .

* دقت کنید که حتما عکسی را که می خواهید جایگزین هدر فعلی قالب بکنید ، حتما در همان اندازه هدر اصلی قالب باشد وگرنه ممکن است قالب به هم ریخته شود

در این نوع فقط کافیست عکس خود را با ساز هدر قالب طراحی کنید و در فضایی آپلود کنید و لینک آن را جایگزین لینک فعلی هدر بکنید .



2- فراخوانی از طریق فایل CSS ( جانبی / داخلی ) : اکثرا در قالبها از این روش استفاده می شود ، به دلیل اینکه سرعت بیشتری نسبت به روش قبل دارد و امروزه می توان گفت بیش از ۹۵% طراحی ها از این طریق انجام میشود . در این روش کار یکم سخت تر می شود ، برای شروع شما باید ابتدا فایل CSS را که در قالب فراخوانی شده است پیدا کنید . برای اینکار بین دو تگ و به دنبال کدی شبیه کد زیر بگردید :





جای 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 خود را آپلود کنیم و جایگزین فایل زیر درون قالب خود کنیم :



فایل جدید را جایگزین style.css می کنیم و قالب خود را save می کنیم . هدر جدید ما آماده است و می توانیم از آن استفاده کنیم .

نکاتی که باید دقت شود :

۱- حتما سایز عکسی که طراحی می کنیم با سایز هدر اصلی قالب مطابقت داشته باشد وگرنه ممکن است قالب به هم ریخته شود .

۲- ممکن است در فایل CSS ب جای header. از مقادیری دیگری استفاده شود . ( اما در کل اسمی از header نیز در آن به کار می رود ، البته بستگی به طراح دارد )

۳- ممکن است فایل CSS بخش header. دارای تعداد بشتری دستور باشد که شما فقط لیمک عکس را تغییر می دهید و به دیگر کدها دست نمی زنید .

۴- در اکثر قالبهای امروزی به خصوص قالبهای ارایه شده رایگان از روش دوم (فراخوانی از طریق فایل CSS ) استفاد می شود .

۵- برای آپلود نیز می توانید از سایتهای فضای رایگان استفاده کنید .

۶- به قسمتهای مختلف آموزش دقت کنید و مو به مو انجام دهید تا موفق باشید .

این آموزشم به پایان رسید امیدوارم مفید واقع بشه .

کیوان ا


کد امنیتی رفرش
منوی اول پایین
تست منو وسط پایین 2
منوی دوم پایین
تست منو وسط پایین 1
درباره ما
Profile Pic
درباره
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • نظرسنجی
    نمره شما به رعایت کپی رایت در رزبلاگ!!!
    منوی اول راست
    تست منو سمت راست 4
    منوی دوم راست
    تست منو سمت راست 3
    محل تبلیغات شما
    تست منو سمت راست 2
    برای کاربران
    تست منو سمت راست 1
    آمار سایت
  • کل مطالب : 1518
  • کل نظرات : 757
  • افراد آنلاین : 23
  • تعداد اعضا : 7815
  • آی پی امروز : 610
  • آی پی دیروز : 163
  • بازدید امروز : 3,669
  • باردید دیروز : 538
  • گوگل امروز : 0
  • گوگل دیروز : 4
  • بازدید هفته : 4,207
  • بازدید ماه : 7,993
  • بازدید سال : 300,618
  • بازدید کلی : 6,168,237
  • کدهای اختصاصی
    اسکریپت های اختصاصی :
    تست
    تست منو سمت چپ 3
    منوی اول چپ
    تست منو سمت چپ 2
    منوی دوم چپ
    تست منو سمت چپ 1