تبلیغات
تبلیغات متنی
آموزشگاه آرایشگری مردانه شفیع رسالت
دکتر علی پرند فوق تخصص جراحی پلاستیک
بهترین دکتر پروتز سینه در تهران
محبوبترینها
راهنمای انتخاب شرکت‌های معتبر باربری برای حمل مایعات در ایران
چگونه اینورتر های صنعتی را عیب یابی و تعمیر کنیم؟
جاهای دیدنی قشم در شب که نباید از دست بدهید
سیگنال سهام چیست؟ مزایا و معایب استفاده از سیگنال خرید و فروش سهم
کاغذ دیواری از کجا بخرم؟ راهنمای جامع خرید کاغذ دیواری با کیفیت و قیمت مناسب
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
آفریقای جنوبی چگونه کشوری است؟
بهترین فروشگاه اینترنتی خرید کتاب زبان آلمانی: پیک زبان
با این روش ساده، فروش خود را چند برابر کنید (تست‌شده و 100٪ عملی)
خصوصیات نگین و سنگ های قیمتی از نگاه اسلام
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1867121462
***css & html در فتوشاپ*** -
واضح آرشیو وب فارسی:سایت ریسک: ***css & html در فتوشاپ*** Ahmadreza 007 19 شهريور 1387, 08:19باسلام خدمت همگی دوستان این اولین پست من در قسمت آموزش ها است.....امیدوارم که خوشتون بیاد..... راستش چند وقت پیش یکی از دوستان آموزش ساخت قالب سایت توسط فتوشاپ رو گذاشته بود که فکر کنم نیمه تموم موند اون آموزش فقط طراحی قالب بود و به Css(یکی از مهمترین اصول در طراحی وب)توجی نکرده بود. تو این آموزش به چگونگی بوجدوآوردن Cssدر فتوشاپ می پردازیم که خیلی کارتونو راحت می کنه. ___________________________________ آماده کردن قالب شما باید برای آماده کردن قالب با ابزاری به نام Slice آشنا باشید و بتونید با اون راحت کار کنید، روش کار این ابزار بدین صورته که شما باید قالب خودتون رو به قول معروف تیکه تیکه کنید، مثلا منوها را جدا کنید، Header، قسمت متن اصلی ، قسمت Footer و ... به شکل Slice شده این قالب نگاه کنید : () نکته مهم : برای Slice کردن یه Shortcut خیلی خوب وجود داره به اسم New Layer Based Slice. کار این میانبر اینه که میاد از لایه انتخاب شده شما به همان اندازه و دور همون لایه یک Slice درست میکنه، من برای ساخت منوها از این ابزار استفاده کردم. برای راحتی میتونید از کلیدهای Alt+Shift+Ctrl+C استفاده کنید یا تو منوی layer انتخابش کنید. حالا قالب آماده تبدیل شدن به فایل HTML و CSS هستش. Save for Web از منوی File گزینه Save for Web & Devices رو انتخاب کنید، یه پنجره جدید باز میشه، در این پنجره شما می تونید برای هر Slice یه تنظیمات خاص در نظر بگیرید، نوع فایل خروجی کیفیت آن، نام گذاری برای هر Slice و ... من برای همه Slice ها JPG با کیفیت 80 رو انتخاب کردم شما میتونید هر جور که به نظرتون مناسب میرسه این کار رو انجام بدید، فقط حتما هنگام انتخاب نوع فایل و کیفیت آن به حجم خروجی و زمان تقریبی دانلود آن که در پایین پنجره نمایش داده میشه دقت کنید که زیاد حجم بالایی نداشته باشه. fUmbjiwfg9pcmF9N3BCA 5Y4NwYsc/save_for_web_window.gif ( fUmbjiwfg9pcmF9N3BCA 5Y4NwYsc/save_for_web_window.gif) حتی در این قسمت ما میتونیم Link هارو تعریف کنیم و به Image ها Alt Tag هم بدهیم. برای این کار کافیست روی هر Slice دوبار کلیک کنید که پنجره جدیدی باز میشه، تو این پنجره شما می تونید Link ها و Alt Tag ها رو وارد کنید. AlnkVK-_8oQD 7cZEGDGNkNE2oPmk/slice_options.gif بعد از اینکه Link ها رو ساختید، گزینه Save رو بزنید، پنجره جدیدی باز میشه. در این پنجره یک نام برای فایل خود انتخاب کنید، در قسمت Save as Type گزینه HTML and Images رو انتخاب کنید. حال در قسمت Settings گزینه Other رو انتخاب کنید، دوباره پنجره جدیدی باز میشه. در منوی Dropdown گزینه HTML رو انتخاب کنین و جلوی XHTML تیک بزنید . حال دوباره از منوی Dropdown گزینه Slices رو انتخاب کنین و در پایین گزینه Generate CSS رو انتخاب کنید و Referenced رو روی By ID قرار دهید. حال OK کنید و Save کنید، اکنون فایل HTML شما آماده است. به همین سادگی ! بازم دیدید که فتوشاپ چقدر قویه ! با چند تا کلیک ساده یک وب سایت آماده شد، شما اگه با HTML و CSS مقداری آشنایی داشته باشید به راحتی می تونید کد این فایل رو بر حسب نیازتون دستکاری و Customize بکنید. اما بازم میگم هیچی به اندازه دستی نوشتن کد لذت بخش نیست .... منبع1:خـــودم منبع2: () marSoul 20 شهريور 1387, 20:13ممنون از شما، لینک مربوط به این پست در وبلاگ من این هستش : در مورد ساخت وب سایت هم من دو مقاله آموزشی دارم که میتونید اینجا ببینید، اولی در مورد ساخت قالب با فتوشاپ هست و دومی مربوط به تبدیل اون قالب به HTML و CSS به صورت دستی هستش. امیدوارم براتون مفید باشه... Ahmadreza 007 20 شهريور 1387, 20:55ممنون از شما دوست عزیز وبلاگ خیلی مفیدی داری.. امیدوارم که همیشه موفق باشی.. با تشکر
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 302]
-
گوناگون
پربازدیدترینها