از همه عذر می خوام برای این دیر کرد چن روزه ( بیشتر)آخه یه کار تمام وقت پیدا کردم، شب ها هم خسته و کوفته اصلا فرصت نمی شد. امشب دیگه غیرتی شدم:razz:
امروز در مورد منوها براتون توضیح می دم
منوهای بالای سایت
می خوایم جوری طراحی کنیم که زمانی که موس روشون می ره رنگ پس زمینه عوض بشه
حرفه ای ها م یدونن که برای استفاده از این تکنیک باید از خاصیت موس آور (Mouse Over) استفاده کنیم. خوب حالا چی هست این موس آور؟؟؟
الان برای منوی ها، ما عکس داریم درسته؟
خوب کاری که باید بکنیم اینه که به مرورگر کاربر بفهمونیم که وقتی موس طرف (کاربر) تشریف آورد روی منوی ما، این عکسی رو که داریم، جاش رو با یه عکس دیگه عوض کن
و وقتی موسش از روی منو رفت کنار، عکس قبلیه رو برگردون
(البته برای استفاده استاندارد باید از سی اس اس ها استفاده کنید CSS)
ما کاری به استایل شیت ها (CSS) نداریم فعلا. فقط و فقط طراحی
خوب چی کار باید بکنیم؟
الان عرض می کنم خدمتتون
این منوی ماست :
ابتدا محل منو ها رو با یه ابزاری ( هر چی دوست دارین ) select می کنیم.
مثل شکل دو:
بعد لایه نوار منو رو انتخاب می کنید و یه Ctrl + J می زنید
با این کار، منطقه سلکت شده از منو، در یک لایه جدید کپی می شه.
حالا Ctrl + U می زنید و با رنگ ها بازی می کنید، هر رنگی رو که می خواین اعمال کنید...
منوهای من این شکلی شدن:
یه مشکل دیگه؟؟؟!!!!!
دیدین وقتی تو یه صفحه هستین، منوی مربوط به اون صفحه با بقیه فرق داره؟؟
یعنی منوی سلکت شده، با منو های دیگه و منویی که موس روشه، تفاوت داره.
آفرین که دیدین، خوب حالا اگه فهمیده باشین منظورم چیه، می گین این که نشد مشکل!!!
خوب حق کاملا با شماست. چون این اصلا چیز سختی نیست.
دوباره همین کار رو با یه رنگ دیگه انجام می دین :
اول Ctrl + J بعش Ctrl + U به همین راحتی:
خوب، تا حالا که خوب پیش رفتیم
لایه های جدید رو خاموش می کنیم تا برق زیاد مصرف نشه ( بعدا می فهمین که چی کی کار باید بکنیم )
حتما همیشه با خودتون می گفتین که مسئولین شرکت ادوبی، معصوم که نیستن، پس چرت و پرت هم می گن بعضی وقت ها...
مثلا این ابزار Slice Tools با میانبر K به چه دردی می خوره؟؟؟؟ خیلی چیز بی خودیه.... و شاید چن تا فحش هم داده باشین بهشون.
خوب حق دارین
من هم هیچ وقت نفهمیدم چرا اینو گذاشتن
خوب شوخی بسه ( از اون معلم باحال ها هستم که نمی خوام کلاسم خشک باشه ها.....)
خوب این ابزار خیلی کمکمون خواهد کرد.
شروع به کار با این ابزار می کنیم.
این ابزار در واقع تیبل های HTML ما رو می سازن
یعنی ما این جا قطعاتمون رو مشخص می کنم و شرکت ادوبی یه حال اساسی بهمون می ده و کد HTML تحویل می ده بهمون.
اون خطوط کمکی که ترسیم کردیم که یادتون؟؟؟
ازشون کمک می گیریم و خطوط کمکی جدیدی هم ترسیم می کنیم. به این صورت در میاد:
بعداً می فهمین چرا به این صورت خطوط کمکی ترسیم کردیم.
شروع می کنیم به اسلایس بندی ( قطعه قطعه کردن )
اسلایس های (Slice) ما به این صورت خواهند بود :
تعداد اسلایس های ما شد 57 بخش.
می دونم که خیلی سوال دارین:
1- اینکه چرا این قدر ریز ریز و هر گوشه رو هم اسلایس کردم؟
لزوم این کار چی بود؟
2- به چه دردی می خورن؟
3- آیا از همش استفاده خواهیم کرد؟ ( اینو جوابش رو الان می دم: نه، خیلی از کارهایی که کردیم، لازم هستن، اما در کار استفاده نمی شن، به زودی می فهمین چرا)
و ...................
اما در جلسه بعدی خواهید فهمید که چرا و چکونه...
به رنگ اسلایس ها دقت کنید:
آبی یعنی اون بخش اسلایس شده و خاکستری یعنی هنوز اسلایس نشده.
به شماره اسلایس ها هم دقت کنید.
نیازی نیست هیچ ترتیبی رو در اسلایس کردن رعایت کنید.
خود فتوشاپ به طور پیش فرض و ترتیبی شماره گذاری می کنه
پس فرقی نداره از چپ شروع کنید یا راست.
خوب.
شبتون به خیر
بقیه اش هم یه روز که فرصتش پیش اومد ( انشالله طی دو سه روز آینده ) براتون می نویسمش.
ببخشید بابت تاخیر چن روزه
آقا محمد كارت خيلي عاليه خواهش ميكنم كارتو ادامه بدي
من شيفته ي كارت هستم و طراحي وبلاگ توسط فتو شاپ رو خيلي دوست دارم
اول كارت نوشته بودي با HTML و CSS آشنا باشيم چطور ميشه با اينها بيشتر آشنا بشيم
ممنون و دوباره ميگم كارت خيلي درسته
به اميد ديدار كارهاي جديدت
آقا محمد كارت خيلي عاليه خواهش ميكنم كارتو ادامه بدي
من شيفته ي كارت هستم و طراحي وبلاگ توسط فتو شاپ رو خيلي دوست دارم
اول كارت نوشته بودي با HTML و CSS آشنا باشيم چطور ميشه با اينها بيشتر آشنا بشيم
ممنون و دوباره ميگم كارت خيلي درسته
به اميد ديدار كارهاي جديدت
با سلام
من خیلی دنبال یه همچین چیزی میگشتم واقعا که عالیه دستتون درد نکنه ولی اگه اون قسمت slice بندی رو یه کم بیشتر توضیح بدید خیلی خوب میشه. منظورم اینه که چه قسمتایی رو باید slice بندی کنیم و چه طوری ؟
ممنون
