تبدیل قالب psd به قالب html5

شروع موضوع توسط websaz2012 ‏17 مارس 2013 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

  1. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس سوم
    حذف بخش های اضافه
    حالا که ما یکسری تنظیمات برای پوسته خود تعریف یا ویرایش کردیم وقت ان رسیده است
    که یک سری بخش ها را که به دردمون نمیخوره یا اینطوری بگم اضافه است را پاک کنیم
    پس اول از همه من میخوام ک از بالا شروع کنم روی logo کلیک کنید (جایی ک نوشته insert-logo (180*90))
    حالا به پایین پایین برنامه نگاه کنید
    نوشته ک <img#insert logo> قسمت چپ ان عبارت <a> را میبینید که روی ان کلیک کنید
    جالا دکمه Delete را فشار دهید تا logo کلا پاک شود سپس عبارت header را تایپ کنید.
    میرویم سراغ sidebar1 که مشاهده میکنید که درون ان یک منو طراحی شده است ولی در طرح ما
    به چنین منویی نیاز نداریم پس اونو پاک میکنیم اینطوری که تو یکی از خونه های اون کلیک کرده و در پایین برنامه <ul.nav> را کلیک کرده سپس دکمه Delete را بزنید.

    متن کامل ان را انتخاب کنید و سپس پاک کرده و عبارت Sidebar را تایپ کنید

    سراغ content بروید و تمام متن ان را پاک کنید و عبارت content را درون ان بنویسید
    در اخر سراغ footer میرویم و تمام متن ان را پاک کنید و عبارت footer را درون ان تایپ کنید.

    Capture.PNG

    خوب حالا که بخش های اضافی را پاک کردیم وقت ان رسیده که استایل انها را نیز از فایلمون پاک کنید
    به پانل css style رفته و این کلاسها را پاک کنید(انتخاب کرده رو ایکن کوچک سطل اشغال کلیک کنید)
    [LTR].content ul, .content ol
    ul.nav
    ul.nav li
    ul.nav a, ul.nav a:visited
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus[/LTR]
    پایان درس سوم.
     
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    PedramKarimi، hidstark و ghasemrayaneh از این ارسال تشکر کرده اند.
  2. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس چهارم
    اضافه کردن چند کلاس دیگر به صفحه
    اگه به فایل psd یک نگاه دیگر بیندازید متوجه خواهید شد که طرحمون
    از شش بخش تشکیل شده است(پانل color را فعال کرده و درون ان تیک container را بردارید)
    ما بخش های header و sidebar و content و footer را داریم اما دو بخش ان را که مربوط به slider و showcase است را نداریم وباید خودمون طراحی کنیم.
    اول slider را بعد از header امده است را طراحی میکنیم.
    پس وارد قسمت کد میشویم (code)
    بعد از عبارت <div class="header">header<!-- end .header --></div> کلیک کرده و از
    Insert > Layou objiect >Div tag
    را انتخاب کنید

    تو کادر class عبارت slider را تایپ کنید و new css rule را کلیک کنید و سپس تو کادر جدید تو قسمت
    Rule Difination شما style.css را انتخاب کرده و دو بار ok کنید.
    همانطور ک میبینید یک کلاس به نام slider بعد از کلاس header وارد صفحه میشود و همچنین
    یک کلاس به نام .slider تو پانل css style تو زیر مجموعه style.css نیز افزوده شده است.
    حالا دوباره که تو حالت کد هستید این بار بعد از عبارت
    <div class="slider">Content for class "slider" Goes Here</div>

    کلیک کرده و طبق مراحل قبلی یک کلاس به نام showcase بعد از کلاس slider وارد صفحه کنید

    Capture.PNG


    پایان درس چهارم.
     
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    PedramKarimi، hidstark و ghasemrayaneh از این ارسال تشکر کرده اند.
  3. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43

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

    سپاس
     
    نوشته شده توسط ghasemrayaneh در ‏7 آوریل 2013
  4. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    دقیقا بگین کدوم قسمتو متوجه نشدید تا توضیح بدهم
     
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    hidstark و ghasemrayaneh از این پست تشکر کرده اند.
  5. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس پنجم
    چند تنظیم جزئی برای زیبایی کار
    در این درس ما فقط روی کلاس container که سایتمون بر روی ان سوار است
    متمرکز میشویم
    کلاس container را در پانل css style انتخاب کنید و روی ان دو بار کلیک کنید تا کادر
    مورد نظر برای تنظیمات باز شود و طبق زیر پیش بروید.

    Capture2.PNG

    2.PNG


    سپس ok کنید
    حالا ما میخواهیم که یک سایه خیلی کم رنگ به دور container داشته باشیم
    من نمیخوام به شما css3 را یاد بدم چون زمان زیادی را میطلبه پس من این کدها رو میدم شما

    به قسمت استایل container اضافه کنید

    [CSSS] -moz-box-shadow: 0px 0px 5px #D2D5D6;
    -webkit-box-shadow: 0px 0px 5px #D2D5D6;
    -ms-box-shadow: 0px 0px 5px #D2D5D6;
    -o-box-shadow: 0px 0px 5px #D2D5D6;
    box-shadow: 0px 0px 5px #D2D5D6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;


    [/CSSS]
    حالا همه را ذخیره کنید(save all) سپس f12 را بزنید و نتیجه را در مرورگر ببینید.


    پایان درس پنجم.
     

    پیوست ها:

    • lesson5.rar
      اندازه فایل:
      کیلوبایت 2.7
      نمایش ها:
      16
    آخرین ویرایش: ‏7 آوریل 2013
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    hidstark، key12 و ghasemrayaneh از این ارسال تشکر کرده اند.
  6. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    متن داخل sidebar1 را میگم
     
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    hidstark، ghasemrayaneh و mtshavandi از این ارسال تشکر کرده اند.
  7. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس ششم
    سر هم کردن کل سایت فقط با تصاویر

    این درس هیچ اجباری ندارد ولی من دوست داشتم این درس را هم بگم در این درس
    ما سایتمونو با تصاویری که از فتوشاپ ذخیره کردیم سر هم میکنیم سپس که کامل شد تک تک بخش ها رو از نوع و تخصصی تر تعریف میکنیم
    پس فایل psd را درون فتوشاپ باز کنید
    اول میرویم سراغ header یک انتخاب به دور ان رسم میکنیم مانند تصویر زیر

    1.PNG


    سپس از Edit > Copy Merged را انتخاب میکنیم حالا وارد دریمویور میشویم و متن داخل header را
    پاک میکنیم و کلید ctrl+V را میزنیم.
    یک کادر براتون باز میشود که شما در ان کادر نوع فرمت تصویری که میخواهید را انتخاب که در کادر دومی jpeg را انتخاب کنید سپس
    Okکنید و در پایان فایل را با نام header درون پوشه images ذخیره میکنیم.

    2.PNG

    *** این کادر بر اساس نوع ورژن دریمویور متغیر خواهد بود***

    دوباه سراغ فتوشاپ بروید حالا یک انتخاب دیگر به دور slider میکشیم از منوی Edit > Copy Merged

    را انتخاب کرده و وارد دریمویور می شویم سپس متن داخل slider را پاک کرده و ctrl+V را میزنیم و تصویر را با نام slider درون پوشه images ذخیره میکنیم.

    3.PNG



    دور showcase نیز یک انتخاب و مانند قبل عمل کرده و تصویر را با نام showcse درون پوشه images ذخیره کنید.

    4.PNG



    حالا نوبت sidebar1 است .
    اول وارد دریمویور شوید تا یک سری تغییرات دیگر به sidebar1 بدهیم کلاس .sidebar1 را انتخاب کرده
    سپس margin-right را به 10پیکسل تغییر میدهیم حالا وارد فتوشاپ میشویم و دور sidebar را انتخاب میکنیم.
    مانند مراحل قبل عمل میکنیم و تصوییر را با نام sidebarدرون پوشه images ذخیره میکنیم.

    5.PNG


    حالا سراغ content میرویم. به دریمویور روید و کلاس .content را انتخاب کنید
    و عرض ان را به 622 پیکسل و float را به left تغییر دهید.


    وارد فتوشاپ شده دور content را نیز یک انتخاب بکشید و مثل مراحل قبل عمل کنید

    برای footer وارد دریمویور شوید و padding ان را پاک کنید و margin-bottom: 70px; را هم به ان اختصاص دهید و وارد فتوشاپ شوید ومثل مرحله های قبل عمل کنید

    سایت تا کنون با این تصاویر کامل شد و در درسهای بعدی ما این تصاوییر را پاک کرده و کلاسهای موردنیاز خود را جاگذاری میکنیم
     
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    hidstark و ghasemrayaneh از این پست تشکر کرده اند.
  8. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    برای کمک به شما دوستان میتوانید فایل زیر را دانلود کرده ان را داخل دریمویور باز کنید تا مفهوم این درس را بهتر متوجه شوید.

    مشاهده پیوست lesson6.rar
     
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    hidstark و ghasemrayaneh از این پست تشکر کرده اند.
  9. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    *********************************************************************************************************************************************
    دوستان یه چیز قبلا یادم رفته بود که به شما یاد اموری کنم در این اموزش از dreamweaver cs6 استفاده شده است چنانچه دوستان از نسخه های پایین تر استفاده میکنند ممکن است هنگام
    استفاده از تمپلتهای اماده دریمویور کلاسهایی با نام های متفاوت با این اموزش مواجه شوند . که در این صورت با خلاقیت میتوانند مشکل را حل کنند
    *********************************************************************************************************************************************

    درس هفتم
    طراحی هدر سایت
    از این درس به بعد ما تو هر درس فقط به یک بخش می پردازیم ک در کل شش درس خواهیم داشت
    درس اول مربوط ب هدر سایت خواهد بود.
    هدر
    اگر به هدر سایتمون توجه کنید خواهید دید که این هدر ما از سه بخش تشکیل شده است
    1.لوگوی سایتمون
    2.کادر جستجو
    3.منوی بالایی
    که در طراحی نیز به همین ترتیب بالایی عمل خواهیم کرد.
    -لوگو سایت
    مراحل:وارد فتوشاپ شوید و فایل psd اموزش را باز کنید
    ما باید یک تصویر از لوگوی سایتمون ذخیره کنیم چند راه داریم
    یکی این است که ما دور ان یک انتخاب بکشیم و اونو کپی کنیم
    راه دومی که خیلی ساده تر است و خیلی هم کاربردی که اصولا هم می تواند یک ترفند تلقی شود
    این است که ما لوگوی خود را بصورت smart objiect در اوریم که در ان صورت با دوبار کلیک کردن روی ان , فتوشاپ لوگوی ما رو در یک سند جدید باز خواهد کرد و ما میتوانیم ان را ذخیره کنیم .
    من این راه را پیشنهاد میکنم.
    گروپ header را از حالت قفل شدن در اورید(گروپ را انتخاب روی ایکن قفل کلیک کنید).
    حالا گروپ header را باز کنید و گروپ logo را که زیر مجموعه ان است را انتخاب کنید.
    و همانند شکل روی تصویر مورد نظر کلیک کنید

    1.PNG

    سپس از منوی باز شده عبارت Convert Smart Objiect را انتخاب کنید.
    حال که گروپ ما به یک smart objiect تبدیل شده ب روی ان دوبار کلیک کنید تا فایلمون رو در یک سند جدید باز کنه حالا از منوئ
    File > save for web
    را انتخاب کرده و از کادر فرمت png24 را انتخاب کنید و تصویر را با نام logo.png داخل پوشه images ذخیره کنید.

    2.PNG


    این پایان مرحله اول بود حالا وارد دریمویور شوید و روی تصویر header کلیک کنید
    سپس دکمه delete کیبرد را فشار دهید تا تصویر مورد نظر حذف شود حالا از منوی
    Insert > image را انتخاب کرده و از پوشه images تصویر logo.png را انتخاب کنید
    در کادرجدید جلوی عبارت Altemate text عبارت logo را تایپ کرده و ok کنید.

    لوگوی ما وارد header خواهد شد

    ***************************************************************************
    لوگو:اصولا یک تصویر که نشانگر سایت است و به چند شیوه میتوان ان را در یک صفحه نشان داد
    1.مانند همین روش که ما ان را وارد صفحه کرده و یک لینک به ان میدهیم
    2.یک لینک در صفحه میدهیم سپس با استایل نویسی به ان عرض و طول و لوگوی خود را پس زمینه
    ان خواهیم کرد.
    ***************************************************************************

    من خودم روش اول را بیشتر میپسندم که در ضمن باید بگویم در هردو حالت میتوان برای لوگوی خود استایل تعریف کرد.
    روی تصویر لوگو کلیک کنید سپس در پاین برنامه تو قسمت properties تو بخش link یک لینک پوچ مثل # یا javascript;: را تایپ کرده و اینتر بزنید.
    F12 را بزنید و نتیجه را در مرورگر ببینید .
    همانطور که میبینید تصویر ما دارای یک لینک شده است اما ظاهرا تصویر ما به سمت راست کشیده شده است که دلیل ان همان خاصیت direction:rtl; است که ما به تگ body نسبت داده ایم.
    که این خاصیت تمام اجزای وب را به سمت راست کشیده و متون وب را نیز راست چین خواهد کرد.
    اما در فایل psd ما این لوگو در سمت چپ قرار دارد به نظرتون چه طوری ما لوگوی خود را به
    سمت چپ ببریم؟
    اگه یادتون باشه ما دو تا کلاس به نام های left و right قبلا طراحی کرده بودیم که هم اکنون بدردمون میخوره.

    رو تصویر لوگو دوباره کلیک کنیدو سپس در پایین برنامه تو قسمت propreties از کادر class که اصولا سمت راست قرار دارد عبارت left را انتخاب کنید
    در ان صورت لوگوی شما به سمت چپ کشیده خواهد شد.خوب بخش لوگو به پایان رسد.
    بخش بعدی کادر جستجو خواهد بود.
     
    نوشته شده توسط websaz2012 در ‏8 آوریل 2013
    hidstark و ghasemrayaneh از این پست تشکر کرده اند.
  10. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    بابا خیلی بی معرفتین چرا نظر نمیدین؟
     
    نوشته شده توسط websaz2012 در ‏8 آوریل 2013
    babilo، hidstark، ghasemrayaneh و یک نفر دیگر از این ارسال تشکر کرده اند.
  11. mtshavandi

    mtshavandi Member

    ارسال‌ها:
    64
    تشکر شده:
    21
    امتیاز دستاورد:
    6
    از بس کارت درسته و مهمتر از اون سرعتت بالاست!
     
    نوشته شده توسط mtshavandi در ‏8 آوریل 2013
  12. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    بسیار سپاس از شما

    من کمتر نظر میزارم تا اسپم نداده باشم . در کل کارت بیسته جای نظر نذاشتی دیگه d:
     
    نوشته شده توسط ghasemrayaneh در ‏8 آوریل 2013
  13. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    _ کادر جستجو
    دیگه رسیدیم به بخش کادر جستجو
    کادر جستجو یه بخش از سایت است که از ان برای جستجو کردن عبارت موردنظر استفاده میشود
    که اصولا یک دکمه درکنار ان است که بعد از تایپ کردن و زدن اون دکمه مرورگر شروع به جستجو میکند
    ***************************************************************************
    اصولا فرم ها همیشه به یک فایل php متصل هستند(استثناء هم داریم) چون همانطور که میدانید php یک زبان سمت سرور است و خیلی کارها با این زبان میتوان کرد از جمله طراحی سایتهای دینامیک .
    سایت های دینامیک به سایتهای کاملا هوشمند و دارای قابلیت اپدیت همیشگی هستند گفته میشود مثل همین فروم که شما یک تاپیک میتوانید ارسال کنید.
    ***************************************************************************

    بگذریم
    دوستان تمام سعی من اینست که اموزش رو جوری بدم که احتیاجی به کدنویسی نباشه
    گر چه در کدنویسی شما به همه چیز تسلط کامل دارید اما خوب اونم به یک اموزش مجزاء
    نیاز دارد که از وقت و حوصله ما خارج است سعی من اموزش خود دریمویور بصورت کاربردی
    است.
    بازم بگذریم
    میریم سراغ ادامه کار
    فایل psdمونو تو فتوشاپ باز کنید
    تو گروپ header گروپ search را باز کنید سپس توی ان گروپ button را باز کنید و متنمونو
    مخفی کنید(تیک ان را بردارین)
    سپس دور این کادرمونو چند تا خط می اوریم به صورت زیر

    1.PNG

    حالا اول یک انتخاب فقط به دور input میکشیم

    2.PNG

    حالا که انتخاب ما فعال است گروپ Background را که پایین ترین گروپ فایلمون است را مخفی کنید
    سپس از منوء Edit > Copy Mereged را انتخاب کرده و از File > New را میزنیم
    در کادر جدید در قسمت backgroun content شما گزینه transparent را انتخاب کنید سپس
    ok کنید

    3.PNG

    حالا یک سند جدید بدون پس زمینه به اندازه 180*30 باز خواهد شد
    سپس از Edit > paste را انتخاب کنید
    واز منوء File > save for web را انتخاب کرده و با فرمت png24 درون پوشه images با نام input.png
    ذخیره کنید. این شد تصویر کادر متن ما.
    نوبت تصویر دکمه جستجومون است پس یک انتخاب دور ان
    هم میکشیم. البته بهتره قبلش گروپ background را دوباره فعال کنید تا بهتر بتوانید ببینید مثل
    مرحله قبل انجام دهید و تصویر را با نام btn.png درون پوشه images ذخیره کنید.

    4.PNG

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

    وارد حالت code دریمویور شوید سپس تو قسمت header بعد از کد

    [HTMLS]<a href="#"><img src="images/Logo.png" alt="logo" width="377" height="112" class="left"></a>[/HTMLS]

    کلیک کرده و یک کلاس با نام searchbar وارد header کنید و تنظیمات ان را بصورت زیر انجام دهید


    5.PNG
     
    آخرین ویرایش: ‏9 آوریل 2013
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    ghasemrayaneh از این پست تشکر کرده است.
  14. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    ...........ادامه

    شکل کلی هدر تا این لحظه

    6.PNG

    این کلاس که ما تعریف کردیم دربر گیرنده کل فرم ماست
    خوب بریم سراغ طراحی کادرها قبل از ان باید یک فرم تعریف کنیم
    در حالت Desing دریمویور باشین و متن داخل searchbar را پاک کنید و از منوء
    Insert > form > form
    را انتخاب کنید. یک فرم داخل searchbar تشکیل میشود

    داخل فرم کلیک کنید و از منو inser > form >text field را انتخاب کنید در کادر جدید تنظیمات را مثل
    زیر انجام دهید.

    7.PNG

    و ok کنید که یک کادر متنی وارد فرم ما خواهد شد که یک id به نام input به ان اختصاص داده می شود.

    حالا می خواهیم یک دکمه هم در کنا کادر متنی وارد کنیم پس در کنار کادرمتنی در یک جاء خالی درون فرم کلیک کنید و از منوء insert > form > button را انتخاب کنید و کادر را همانند زیر تنظیم کنید

    8.PNG


    حالا روی همین دکمه کلیک کنید سپس از قسمت پایین تو بخش propreties تو کادر value بجای عبارت submit عبارت جستجو را تایپ کنید و اینتر را بزنید.


    9.PNG


    خوب دیگه وقت ان رسیده که ما برای این دوتا استایل تعریف کنیم اول واسه کادر متنی
    اول پانل css style را باز کنید سپس روی کادر متنی کلیک کنید حالا که روش کلیک کردین تو پانل css style یک ایکن کوچک شبیه یک ورق تا خورده با یک علامت + پایین این پانل است روش کلیک کنید.
    کادر مطابق شکل باز میشود

    10.PNG

    میتوانید عبارتهای قبل از عبارت #input را پاک کنید سپس ok کنید.

    ..............
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    babilo، majidsica و ghasemrayaneh از این ارسال تشکر کرده اند.
  15. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    ........ ادامه

    در کادر باز شده همانند تصاویر زیر ان را تنظیم کنید

    11.PNG


    12.PNG

    13.PNG



    14.PNG


    سپس ok را بزنید میبینید که کادر ما دقیقا همانی خواهد شد که در فتوشاپ میدیدیم.
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    majidsica و ghasemrayaneh از این پست تشکر کرده اند.
  16. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    .......... ادامه

    حالا نوبت دکمه جستجو است برای دکمه هم مراحل کادر متنی را پیش گیرید و تنظیمات را همانند زیر انجام دهید.

    15.PNG

    16.PNG

    17.PNG

    18.PNG

    خوب بخش کادر جستجو هم به پایان رسید در زیر هم تصویر نهایی

    19.PNG
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    majidsica و ghasemrayaneh از این پست تشکر کرده اند.
  17. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    key12، majidsica و ghasemrayaneh از این ارسال تشکر کرده اند.
  18. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    _ منوی سایت

    خوب به بخش مهیج منوی سایت رسیدیم و ما تو این درس میخواهیم که یک منو طراحی کنیم
    فایل psd رو باز کنید تو گروپ nav واقع در گروپ header لایه های متن و دو تا لایه های ایکن کوچک را خاموش کنید.

    1.PNG

    حالا ما میخواهیم این تصویر را ذخیره کنیم اول درو این منو را چندتا خطکش میکشیم و سپس با ابزار انتخاب دور ان را انتخاب میکنیم بصورت زیر.

    2.PNG

    سپس لایه background را خاموش کرده و از Edit > Copy Merged را انتخاب سپس file > new را انتخاب میکنیم و ان را روی transparent مانند تصویری که واسه input ذخیره کردیم paste میکنیم و ان را با نام nav.png ذخیره میکنیم.

    این شد تصویر پس زمینه منو حالا نوبت به ذخیره اون دو تا ایکن ها میرسه
    پس لایه های ان دو ایکن را فعال کنید.
    حال که دو لایه ایکن را فعال کردین انها را به Smart Objiect تبدیل کرده و رای هر کدام دوبار کلیک کنید تا فتوشاپ انها را در یک سند جدید بدون پس زمینه بازکند
    سپس ایکن خونه را با نام home.png و ایکن قفل را با نام login.png ذخیره کنید.

    خوب برای این قسمت دیگه به فتوشاپ نیاز نداریم پس وارد دریمویور میشویم.اما شما باید قبلش سراغ container بروید و به ان خاصیت position: relative; دهید دلیل این کار را بعدا میگم. حالا
    تو حالت code بروید و بعد از searchbar کلیک کنید. مانند زیر

    3.PNG

    و از منوء insert > layout objiect > div tag را انتخاب کرده و تو کادر class عبارت nav را
    وارد کنید و روی گزینه new css reuler کلیک کنید در کادر جدید مراقب باشید تا تو قسمت Rule Defination روی style.css قرار گرفته باشد سپس ok کنید و تنظیمات ان را مانند زیر انجام دهید.

    4.PNG

    5.PNG

    ....................
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
  19. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    ......... ادامه

    6.PNG

    سپس ok کنید و شکل تا این لحظه:

    7.PNG
    8.PNG

    ***************************************************************************
    حالا چرا ما به containerحالت position:relative; را دادیم؟
    دلیل ان این است که ما به هر چیزی که درون conteainer است بخواهیم خاصیت
    position: absolute; بدهیم اون عنصر ممکن است از مرز cotainer خارج شود که دلیل اصلی ان این است در ضمن با خاصیت های lefr و right نیز میتوان ان را از مرز container خارج کرد مثل همین منوی ما اما خوب این left و right از مرز خود container محاسبه میشود که اصلیترین دلیل این کار هم
    همین است میتونید امتحان کنید این خاصیت را از container شما disable کنید و نتیجه را ببینید.
    ***************************************************************************

    خوب میریم سراغ نوشته ها و ایکنها. متن داخل nav را پاک کنید و عبارتهای خانه ورود را با زدن دکمه بزرگ کیبرد با فاصله تایپ کنید.

    حالا متن خانه را هایلایت کنید و در پایین برنامه تو قسمت propries تو قسمت link یک لینک پوچ مانند # تایپ و اینتر کنید برای کلمه ورود نیز همین کار را انجام دهید.

    ما دوتا لینک توی nav وارد کردیم حالا من میخوام رنگ این لینکها سفید باشد پس تو پانل css style رو
    ایکنی که شبیه به یک ورق تاخورده با علامت+ است کلیک کنید و مانند تصویر زیر تایپ کنید و ok
    کنید.

    9.PNG

    سپس تو کادر جدید تو قسمت color رنگ را سفید انتخاب کنید و ok کنید.
    تو مرورگر اگر تست کنید خواهید دید که رنگ لینکها سفید شده.
    حالا من میخوام وقتی که موس روی لینکها میرود رنگ لینکها یه کمی تیره تر شود پس دوباره روی همون ایکن تو پانل css style کلیک کنید و مانند زیر انجام دهید.

    10.PNG


    و ok کنید و تو کادر جدید تو قسمت color رنگ #ccc را انتخاب کنید و ok کنید.خوب حالا بریم به استایل دهی لینکها و اون ایکونهای کوچک.من میخوام کل لینکها رو کمی جابجا کرده و اون ایکن های کوچک را پس زمینه لینکها قرار بدم پس به دو کلاس نیاز دارم یکی به نام .home ویکی دیگه با نام .login پس این دو کلاس را میسازم اول کلاس .homeرا میسازم و تنظیمات ان را مانند تصویر زیر انجام دهید.

    ..........................
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    majidsica از این پست تشکر کرده است.
  20. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    .............. ادامه

    11.PNG

    12.PNG

    13.PNG

    خوب ok کنید. این شد کلاس home حالا یک کلاس دیگه با نام .login بسازین وتنظیمات ان را مانند
    زیر انجام دهید.

    14.PNG

    15.PNG


    ....................
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013

به اشتراک بگذارید