/ آموزش طراحی قالب
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 4 از 4

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

  1. #1
    !AL آنلاین نیست.
    !AL
    کاربر اخراجي
    361نوشته396مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2252
    پسندیده است
    150 پست
    بلاگ
    پست
    میزان امتیاز
    406
    www.forum.soft21.ir

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

    به نام خدا
    خوب دويتان امروز تصميم كرفتم اموزش طراحى قالب رو بهتون ياد بدم و به زودى ابديت خواهد شد
    اموزش رو شروع ميكنيم
    پیش نیاز ها


    طراحی قالب نیز همانند خیلی از چیزهای دیگه نیاز به پیش نیازهایی داره و حتما اول باید این پیش نیاز ها رو فراهم کنید، تا که بتونید به راحتی قالب مورد نظرتون رو بدون هیچ مشکلی طراحی کنید.خب حالا پیش نیازهایی که لازمه داشته باشید رو اینجا میگم:
    آشنایی با دو زبان HTML و CSS : مهمترین و اصلی ترین پیش نیازی که برای طراحی قالب نیاز دارین آشنایی با این دو زبان تحت وب هست. هر قالبی که تا به حال دیدین، حداقل با استفاده از این دو زبان طراحی شده، و اگر با این دو زبان آشنایی نداشته باشید، حتما طراحی قالب کار انجام نشدنی خواهد بود. با اینکه سعی میشه هر کدی که قرار میدم رو به طور کامل کار و کاربردشو رو توضیح بدم اما با این حال اگر با این زبان ها آشنایی ندارین میتونید آموزش هاشون رو از اینجا بخونید.
    آشنایی با نرم افزار فتوشاپ : قبل از طراحی هر قالب همیشه سعی کنید که شکل و شمایل اون رو اول در نرم افزار فتوشاپ طراحی و سپس طبق طرحی که دارین جلو برید، این طوری طراحی قالب طبق یه طرح اولیه و مکان هر قسمت از سایت از قبل تعیین شده خواهد بود. ما هم در این آموزش در اول قالب مورد نظرمون رو در نرم افزار فتوشاپ طراحی و بعد شروع به تبدیل اون به کدهای HTML و CSS می کنیم.
    نرم افزار ویرایشگر کد : با اینکه میتونید از ویرایشگر خود ویندوز (notepad) هم استفاده کنید، اما با این حال نرم افزارهای زیادی هم برای اینکار وجود داره، که معروف ترین آنها دریم ویو و ... هستند، تا که نوشتن کدها خیلی سریعتر انجام بشه، در این آموزش بنده از نرم افزار notepad++ برای ویرایش کدها استفاده می کنم.
    مرورگر صفحات وب : برای دیدن کدهایی که با دو زبان html و css نوشتیم باید از یکی از مرورگرهای صفحات وب (ie-firefox-opera-chrome) استفاده کنیم، بنده در این آموزش از مرورگر chrome استفاده می کنم، درضمن حتما سعی کنید که از آخرین ورژن اون مرورگر استفاده کنید.


    توضیحاتی در مورد قالب


    قالبی که طراحی خواهیم کرد یک قالب سه ستونه هست، و سعی می کنم، امکانات عمومی که در هر قالب وجود داره رو در این قالب قرار بدیم. در جلسات بعد که قالب رو در نرم افزار فتوشاپ طراحی خواهیم کرد میتونید اون امکانات رو ببنید، در ضمن میتونید شکل قالب رو بعدا به سلیقه خودتون تغییر بدید.
    طراحی قالب ما در چهار مرحله انجام میشه :
    قسمت اول : گرافیک قالب ( طراحی گرافیکی قالب در نرم افزار فتوشاپ)
    قسمت دوم : برش طرح ( برش دادن تصاویر برای استفاده در کدها)
    قسمت سوم : کدهای HTML ( نوشتن کدهای html و تعیین ساختار صفحه )
    قسمت چهارم : کدهای CSS ( شکل دهی به کدهای html با استفاده از کدهای css)

    4 نفر از اعضا پست !AL را پسندیده اند


    ویرایش توسط !AL : 07-15-2013 در ساعت 08:49 PM

  2. نوين وردپرس تبلیغات شما

  3. #2
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    عزیز این اموزش ها برای وردپرس خیلی تو وب هست شما زحمت بکش برای ویبی رو توضح بده.
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #3
    !AL آنلاین نیست.
    !AL
    کاربر اخراجي
    361نوشته396مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2252
    پسندیده است
    150 پست
    بلاگ
    پست
    میزان امتیاز
    406
    www.forum.soft21.ir
    لطفا اسبم نديد اين اموزش به زودى ابديت ميشه لطفا كسى جيزى اينجا ننويسه

    3 نفر از اعضا پست !AL را پسندیده اند



  5. #4
    !AL آنلاین نیست.
    !AL
    کاربر اخراجي
    361نوشته396مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2252
    پسندیده است
    150 پست
    بلاگ
    پست
    میزان امتیاز
    406
    www.forum.soft21.ir
    شروع طراحی


    در این جلسه، اقدامات اولیه ای که برای طراحی هر قالبی نیازه انجام بدین رو خواهیم گفت، و همچنین کارهای روتینی که در هر جلسه انجام خواهیم داد، پس حتما این آموزش رو با دقت بخونید :
    1. پوشه بندی
    قبل از شروع طراحی هر قالبی ابتدا اون قالب رو باید پوشه بندی کنیم،
    پس مراحل زیر رو دنبال کنید :
    ابتدا یک پوشه با نام قالبتون ایجاد کنید، که در این آموزش من نام قالب رو mytheme قرار میدم.
    پوشه های زیر رو هم در داخل پوشه mytheme ایجاد کنید :
    images : پوشه ای که در آن تصاویر استفاده شده در قالب قرار گرفته میشه.
    css : فایل های css و استایل قالب در این پوشه قرار داده میشه
    js : فایل های جاوا اسکریپت در این پوشه قرار داده میشه
    2. ایجاد فایل های اصلی قالب
    هر قالب حداقل دارای دو فایل اصلی است که باید اون ها رو ایجاد کنیم :
    index.html : کدهای html ما، که کدهای صفحه اصلی هست در این فایل قرار میگیره
    style.css : استایل قالب ما، در این فایل قرار میگیره، این فایل رو در داخل پوشه css ایجاد کنید
    پس از ایجاد فایل ها و پوشه ها باید نتیجه ای همانند تصویر زیر داشته باشید :
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    نرم افزار فتوشاپ


    ما با استفاده از نرم افزار فتوشاپ گرافیک قالب رو طراحی خواهیم کرد
    پس ابتدا برای اینکه نرم افزار فتوشاپ شما با نرم افزار من هماهنگ باشد، پس از باز کردن فتوشاپ مراحل زیر رو انجام دهید :
    1. دکمه D رو فشار بدین تا رنگ ها به حالت پیشفرض برگرده
    2. طبق تصویر تنظیمات همه ابزارها رو به پیشفرض برگردونید :
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    3. از منوی edit گزینه preferences و سپس units & rulers رو انتخاب و تنظیمات رو مانند تصویر زیر تغییر دهید
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    4. حال برای نمایش خط کش از منوی view گزینه rulers رو انتخاب میکنیم.
    5. از منوی file گزینه new رو انتخاب کنید و یک فایل جدید با عرض 1100 پیکسل، ارتفاع 1300 پیکسل و رزولوشن 72 ایجاد کنید.
    6. فایل psd رو در کنار فایل index.html ذخیره کنید تا همیشه در دسترس باشد.
    بسیار خب آموزش این جلسه به پایان رسید، در جلسه بعدی قالبمان را در فتوشاپ طراحی خواهیم کرد

    3 نفر از اعضا پست !AL را پسندیده اند


    ویرایش توسط !AL : 07-16-2013 در ساعت 12:41 AM

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

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

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی