تبلیغات :
ماهان سرور
آکوستیک ، فوم شانه تخم مرغی ، پنل صداگیر ، یونولیت
دستگاه جوجه کشی حرفه ای
فروش آنلاین لباس کودک
خرید فالوور ایرانی
خرید فالوور اینستاگرام
خرید ممبر تلگرام

[ + افزودن آگهی متنی جدید ]




صفحه 1 از 2 12 آخرآخر
نمايش نتايج 1 به 10 از 11

نام تاپيک: آموزش طراحی قالب

  1. #1
    داره خودمونی میشه Ehsan-l-able's Avatar
    تاريخ عضويت
    Sep 2010
    محل سكونت
    ایران
    پست ها
    121

    پيش فرض آموزش طراحی قالب

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

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

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

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

    البته قبل شروع به اينکه نکته اشاره کنم که هدف من آموزش طراحي با 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 ذخيره کنيد
    خب قسمت اول تموم شد ، در پست بعدي که مفصل تر خواهد بود به هيدر سايت مي پردازيم

  2. 6 کاربر از Ehsan-l-able بخاطر این مطلب مفید تشکر کرده اند


  3. #2
    آخر فروم باز shahinfarasystem's Avatar
    تاريخ عضويت
    Feb 2007
    محل سكونت
    تهران
    پست ها
    1,617

    پيش فرض

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

  4. #3
    پروفشنال Web Design's Avatar
    تاريخ عضويت
    Oct 2010
    محل سكونت
    Phpstorm
    پست ها
    602

    پيش فرض

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

  5. #4
    داره خودمونی میشه Ehsan-l-able's Avatar
    تاريخ عضويت
    Sep 2010
    محل سكونت
    ایران
    پست ها
    121

    پيش فرض درس دوم (ساخت هیدر )

    با سلام
    درس دوم رو شروع می کنیم. گام بعدی لوگو (هیدر) قالب رو می خواهیم در بالای صفحه قرار دهیم.
    قالبی که می خواهیم طراحی کنیم یک قالب مناسب برای فروشگاه است و نام فروشگاه رو پرنس شاپ انتخاب می کنم
    من این هیدر رو پیدا کردم و تغییراتی در اون ایجاد کردم ، همان طور که می بینید یک کادر در بالای آن به همراه محلی برای قرار دادن کد جستجو ایجاد کردم. پیشنهاد می کنم شما هم فعلا از همین استفاده کنید. (عکس رو در پوشه 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 رو مشاده کنید :

    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    Last edited by Ehsan-l-able; 04-02-2011 at 17:36. دليل: اصلاح شده است

  6. 5 کاربر از Ehsan-l-able بخاطر این مطلب مفید تشکر کرده اند


  7. #5
    آخر فروم باز Aref_2008's Avatar
    تاريخ عضويت
    Jun 2008
    پست ها
    1,984

    پيش فرض

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

  8. #6
    آخر فروم باز mohrd's Avatar
    تاريخ عضويت
    Nov 2007
    محل سكونت
    Ṁashhad
    پست ها
    1,897

    پيش فرض

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

    (پ.ن: خطاب به نویسنده ی آموزش: لطفا اگر ممکنه کد ها رو به صورت lower case بنویسید .. از نظر ظاهری زیباتره ..)
    Last edited by mohrd; 04-02-2011 at 15:57.

  9. 2 کاربر از mohrd بخاطر این مطلب مفید تشکر کرده اند


  10. #7
    پروفشنال Web Design's Avatar
    تاريخ عضويت
    Oct 2010
    محل سكونت
    Phpstorm
    پست ها
    602

    پيش فرض

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

  11. 3 کاربر از Web Design بخاطر این مطلب مفید تشکر کرده اند


  12. #8
    داره خودمونی میشه Ehsan-l-able's Avatar
    تاريخ عضويت
    Sep 2010
    محل سكونت
    ایران
    پست ها
    121

    پيش فرض آموزش طراحی قالب (درس سوم)

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

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


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


    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    برای ایجاد تیکر یک فایل متنی جدید ایجاد کنید و کدهای زیر را داخل آن وارد کنید و با پسوند js در پوشه images ذخیره کنید :
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    لازم نیست از نحوه کار کد جاوای فوق سردربیاورید...
    خب فابل رو ذخیره کنید ، میریم سراغ style :
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    آموزش این درس به پایان رسید. دوستانی که آموزش رو دنبال می کنن ، قالب رو با فایرفاکس تست کنند اگه مشکل داره احتمالا جایی اشتباه کرده اید من کار خودم رو قرار میدم می تونید دانلود کنید و با کار خودتون مقایسه کنید.
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    در ضمن دوستانی هم که با css آشنایی ندارند این ایبوک رو دانلود کنند :
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

  13. 3 کاربر از Ehsan-l-able بخاطر این مطلب مفید تشکر کرده اند


  14. #9
    داره خودمونی میشه Ehsan-l-able's Avatar
    تاريخ عضويت
    Sep 2010
    محل سكونت
    ایران
    پست ها
    121

    پيش فرض آموزش طراحی قالب (ادامه)

    با سلام
    شما با قرار دادن کد های مربوط به کلاس nav یک منوی پیمایش ایجاد کردید ، من عکس های زمینه منو رو عمدا قرار ندادم تا شما تفاوت رو ببینید که با قرار دادن عکس های
    nav_left , nav_right , nav_right_highlight , nav_left_highlight
    منوی شما چقدر زیبا می شود...

    قالبی که خودم همراه شما طراحی کردم رو می تونید از لینک زیر مشاده کنید :
    لازم به ذکر است که با قالب را با فایرفاکس تست کنید
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    عکس های زیر را پس از دریافت در پوشه images ذخیره کنید...
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    درس بعدی محتوای صفحه را ایجاد می کنیم ...
    Last edited by Ehsan-l-able; 06-02-2011 at 15:43.

  15. 2 کاربر از Ehsan-l-able بخاطر این مطلب مفید تشکر کرده اند


  16. #10
    اگه نباشه جاش خالی می مونه Baby nfs's Avatar
    تاريخ عضويت
    Dec 2006
    محل سكونت
    مشهد
    پست ها
    435

    پيش فرض

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

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

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

صفحه 1 از 2 12 آخرآخر

Thread Information

Users Browsing this Thread

هم اکنون 1 کاربر در حال مشاهده این تاپیک میباشد. (0 کاربر عضو شده و 1 مهمان)

User Tag List

قوانين ايجاد تاپيک در انجمن

  • شما نمی توانید تاپیک ایحاد کنید
  • شما نمی توانید پاسخی ارسال کنید
  • شما نمی توانید فایل پیوست کنید
  • شما نمی توانید پاسخ خود را ویرایش کنید
  •