آموزش طراحی قالب

[Ehsan-l-able]

به نام خدا
موفقيت در اينترنت به عوامل زيادي بستگي دارد که مهم ترين آن ها به نظر من قالب صفحه مي باشد
که اکثر کاربران مخصوصاً وبلاگ نويس ها از قالب هاي آماده استفاده مي کنند و زياد هم از انها راضي نيستند

بنده در اين تاپيک و انشاالله در پست هاي بعدي (در صورت استقبال)مي خوام آموزش گام به گام طراحي يک قالب رو آموزش بدم که علاقه مندان بتونند يک قالب دلخواه براي خودشون طراحي کنند

پيشاپيش هم از حرفه اي ها از اينکه ممکنه مبتديانه توضيح بدم عذرخواهي مي کنم

خب شروع مي کنيم

البته قبل شروع به اينکه نکته اشاره کنم که هدف من آموزش طراحي با css و html 4 است

*يک فولدر جديد ايجاد کنيد
*در داخل فولدر يک پوشه ديگر با نام images ايجاد کنيد

1- طراحي تصوير زمينه
برنامه فتوشاپ رو باز کنيد
يک پروژه جديد در واحد پيکسل با ابعاد 5*5 و تکفکيک پذيري 72 ايجاد کنيد
حالت زوم را روي 3200 درصد قرار دهيد طوري که پيکسل ها مشخص شوند
طبق تصوير زير هر پيکسل را رنگ آميزي کنيد. (دلخواه)

سپس تصوير با مشخصات زير در پوشه images ذخيره کنيد
bg.jpg

خب تصوير زمينه اماده است.
دوستانی که می خواهند از حالت گرادینت برای زمینه استفاده کنند ، از ابعاد 750*1 پیکسل استفاده کنند که 750 ارتفاع می باشد.

يک فايل متني با نام home ايجاد کنيد و کدهاي زير را وارد کنيد

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

سپس آن را با فرمت htm مجددا ذخيره کنيد.

** يک فايل متني ديگر با نام style ايجاد کنيد

خب مي خواهيم پس زمينه طراحي شده در صفحه قرار دهيم براي اينکار کدهاي زير را وارد کنيد

body{
background-image:url(images/bg.jpg);
margin : 0 ;
padding : 0 0 ;
}

در آخر اين فايل رو با پسوند css ذخيره کنيد
خب قسمت اول تموم شد ، در پست بعدي که مفصل تر خواهد بود به هيدر سايت مي پردازيم

[shahinfarasystem]

ممنونم دوست عزيز
حتما ادامه بده من استقبال ميكنم

[Web Design]

جستجو میکردید میدیدید آموزش های مکرر زیادی هست
اما ممنون

[Ehsan-l-able]

با سلام
درس دوم رو شروع می کنیم. گام بعدی لوگو (هیدر) قالب رو می خواهیم در بالای صفحه قرار دهیم.
قالبی که می خواهیم طراحی کنیم یک قالب مناسب برای فروشگاه است و نام فروشگاه رو پرنس شاپ انتخاب می کنم
من این هیدر رو پیدا کردم و تغییراتی در اون ایجاد کردم ، همان طور که می بینید یک کادر در بالای آن به همراه محلی برای قرار دادن کد جستجو ایجاد کردم. پیشنهاد می کنم شما هم فعلا از همین استفاده کنید. (عکس رو در پوشه images ذخیره کنید)

تصویر در اندازه واقعی جهت دانلود :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

(دوستمون اشاره کرده که آموزش های مکرری وجود دارد ، اما مطئمنا این آموزش اصولی تر خواهد بود و در آخر من قالب طراحی شده رو در اختیار شما قرار می دهم.)

در طراحی قالب از تگ div خیلی استفاده میشه و مدتیه که استفاده از table جز در برخی موارد منسوخ شده است.

فایل home رو که در درس قبلی ایجاد کرده اید با برنامه notepad باز کنید...
بعد از تگ body کد زیر را وارد کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

فایل رو مجددا ذخیره کنید.
فایل style رو باز کنید و کد زیر رو وارد کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

این فایل رو هم ذخیره کنید.

دوباره سراغ فایل home می رویم :
می خواهیم یک منوی پیمایش و جستجو روی عکس ایجاد کنیم...
کد زیر رو وارد کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

کادر دوم دلخواه است و من از آن برای قرار دادن لوگوی بانک استفاده کردم. (می توانید یک پوشه با نام bank ایجاد کنید و لوگوی 5 بانک رو در اندازه های 32 در 32 پیکسل وارد کنید.)
فقط توجه کنید که کد ها رو به صورت آبشاری وارد کنید تا متوجه شوید که هر کد مربوطه به کدام div است.

در تگ div که از صفت class استفاده کرده ایم با علامت" . "در فایل style می توانیم به آن دسترسی داشته باشیم. همچنین با علامت # می توانیم به div هایی که از صفت id استفاده کنیم دسترسی داشته باشیم.

حال باید ویژگی تگ های div با کلاس nav0 و search0 و micon را به ترتیب برای منو ، کادر جستجو و آیکن های اضافی تعریف کنیم برای اینکار سراغ فایل style می رویم :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

می بینید که در تکنولوژی css می توانیم ویژگی ها را به صورت آبشاری تعیین کنیم. به عنوان مثال تعیین کرده ایم که تگ های a و ul و li در این دیویژن های تعریف شده چه ویژگی های داشته باشند.
آموزش این درس به پایان رسید فقط ویژگی های زیر را هم به فایل style اضافه کنید .

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

قالب در آخر بدون مشکل در انواع مرورگرها لود خواهد شد.
فعلا با فایرفاکس تست کنید بعدا یه فکری به حال ie خواهیم کرد
تا اینجا یک صفحه با یک بکگراند و هیدر به صورت کامل ایجاد کرده ایم ، در درس بعد می خواهیم یک منو زیر هیدر قالب ایجاد کنیم.
فقط قبل از پایان تفاوت html رو با html 4 بگم که در این زبان شما باید تگ ها به صورت با نظم تر وارد کنید.
به عنوان مثال تفاوت تگ br رو در html و html 4 رو مشاده کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[Aref_2008]

اگه تا آخر ادامه بدید فوق العاده است
ولی خیلی ها وسط آموزش گم و گور میشن!

[mohrd]

خیلی ممنون.
فقط یک نکته:
اگر قالبی که دوستان تا الان طراحی کرده اند رو در مرورگر IE یا ...، به جز فایر فاکس باز کردید و تفاوت هایی مشاهده کردید، جا نخورید ..
چون همون طور که حتما اطلاع دارید -moz که در style ها به کار برده اید، مخصوص مرورگر شرکت Mozilla و موتور اون هست ..
(می تونید با اضافه کردن -webkit، مرورگر chrome گوگل رو هم اضافه کنید)

(پ.ن: خطاب به نویسنده ی آموزش: لطفا اگر ممکنه کد ها رو به صورت lower case بنویسید .. از نظر ظاهری زیباتره ..)

[Web Design]

خوب منم یه آموزش بدم پس جمع بچه ها جمعه
خوب یه پراپرتی جدید هست که کار -moz-border-radius رو انجام میده
که به همان شکا اما moz رو نمیزنیم
که توی IE 8 به بالا هم کار میکنه

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[Ehsan-l-able]

با سلام به دوستان عزیز
درس سوم : در این آموزش می خواهیم یک منوی پیمایش زیر هیدر به همراه تیکر ایجاد کنیم.
تیکر : یک کد جاوا جهت نمایش متن به صورت تایپی.

من یک عکس رو برای زمینه منو آماده کردم :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

همان طور که مشاهده می کنید یک قسمت هم برای اعلام اخبار ایجاد کرده ام.
مثل همیشه فایل home را با نت پد باز کنید و کد های زیر را وارد کنید (کدها را در قسمت body قبل از آخرین div :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

برای ایجاد تیکر یک فایل متنی جدید ایجاد کنید و کدهای زیر را داخل آن وارد کنید و با پسوند js در پوشه images ذخیره کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

لازم نیست از نحوه کار کد جاوای فوق سردربیاورید...
خب فابل رو ذخیره کنید ، میریم سراغ style :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

آموزش این درس به پایان رسید. دوستانی که آموزش رو دنبال می کنن ، قالب رو با فایرفاکس تست کنند اگه مشکل داره احتمالا جایی اشتباه کرده اید من کار خودم رو قرار میدم می تونید دانلود کنید و با کار خودتون مقایسه کنید.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در ضمن دوستانی هم که با css آشنایی ندارند این ایبوک رو دانلود کنند :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[Ehsan-l-able]

با سلام
شما با قرار دادن کد های مربوط به کلاس nav یک منوی پیمایش ایجاد کردید ، من عکس های زمینه منو رو عمدا قرار ندادم تا شما تفاوت رو ببینید که با قرار دادن عکس های

nav_left , nav_right , nav_right_highlight , nav_left_highlight

منوی شما چقدر زیبا می شود...

قالبی که خودم همراه شما طراحی کردم رو می تونید از لینک زیر مشاده کنید :
لازم به ذکر است که با قالب را با فایرفاکس تست کنید

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

عکس های زیر را پس از دریافت در پوشه images ذخیره کنید...

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

درس بعدی محتوای صفحه را ایجاد می کنیم ...

[Baby nfs]

خیلی ممنونم دوست من. امیدوارم تا آخر ادامه بدی کارت حرف نداشت.
سپاس

---------- Post added at 04:54 PM ---------- Previous post was at 04:54 PM ----------

خیلی ممنونم دوست من. امیدوارم تا آخر ادامه بدی کارت حرف نداشت.
سپاس