طراحی یک وب سایت ساده (آموزش)

[تیم پشتیبانی]

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


این آموزش به ترتیب زیر می باشد:

1. کار بر روی قالب با استفاده از نرم افزار فتوشاپ
2. تبدیل فایل ها برای استفاده در وب
3. آموزش HTML
4. آموزش CSS
5. آموزش jQuery
   

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

لینک ارسال سوالات و رفع اشکال

[admin]

دانشجویان عزیز
در این تاپیک صرفا پست های مربوط به آموزش توسط استارتر گذاشته می شود و پست های دیگر دانشجویان به تاپیک مربوط به رفع اشکال منتقل می شوند.

دانشجویان از ارسال پست های مربوط به "تشکر" خودداری نمایند و برای این کار تنها از دکمه "سپاس" استفاده نمایند.

دانشجویان خاطی اخطار می گیرند.

باتشکر

[تیم پشتیبانی]

سلام

می خوایم با هم یک سایت ساده طراحی کنیم!

اول از همه من نمونه نیمه تکمیلی رو اینجا براتون میذارم که دستتون بیاد آخر کار چی داریم!

طرح در قسمت بند انگشتی ها هست..... روش کلیک کنید!

ما هر روز تقریبا یک پست داریم.... این پست معرفی پیش نیاز هاست....

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


فتوشاپ! (فقط Adobe Photoshop CS5)
باید دست به جیب شوید و نرم افزار های به روز شده را تهیه کنید. پیشنهاد من خرید یک مجموعه نرم افزارهایی جامع است که حدود 25 هزارتومنی می شود. می ارزد.... پس بخرید.... این پول را یک بار می دهید و برای همیشه دارید.... مجموعه هایی مثل LORD و یا KING انتخاب های خوبی هستند.... مشورت خواستید در تاپیک رفع اشکال بپرسید.....


فونت
این یکی مجانی است... در اینترنت بگردید و فونت های مختلف را دانلود و نصب کنید... یک طراح وب به فونت خیلی احتیاج دارد....

آیکون
یک پوشه برای خودتان درست کنید با نام Icons .... و در آن مجموعه آیکون های خود را دسته بندی کنید.... این ها سرمایه های شماست.... پس سرمایه گذاری کنید.... ( مثلا من خودم بالای چندین هزار ایکون جمع آوری کردم)

فعلا این ها را تهیه کنید تا برسیم به فردا و اولین درس عملی!
بی زخمت روی دکمه "سپاس" هم کلیک نمایید و یک عدد امتیاز مثبت هم بدهید!
تشکرها کم باشه نمی ذارم....

[admin]

(03-28-2012 06:40 AM)kiantamar نوشته شده توسط:  سپاس روی چشم اما چرا نسیه؟

در اینجا نباید پست بدهید!
در قسمت رفع اشکال ارسالات خود را قرار دهید.

[تیم پشتیبانی]

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

امیدوارم حداقل نرم افزار Adobe Photoshop CS5 را نصب کرده باشید و آمادگی لازم را داشته باشید!

اگر هم نصب نکردید سریعتر اقدام نمایید که حسابی شاکی می شویم که چرا شما اینقدر بی علاقه هستید!

اگر هم مشکلی داشتید حتما در قسمت "رفع اشکال" بگویید که ببینم چی هست!

-------------------------------

نرم افزار فتوشاپ را باز کنید. ( امیدوارم با بازکردن نرم افزار مشکلی نداشته باشید حداقل!... می روید روی start بعد All program و بعد کار خودتونو که فتوشاپ را پیدا کنید)

بعد از باز کردن صفحه ای مانند شکل زیر می بینید:



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

در این آموزش ما قصد نداریم ریز ریز جزئیات را بگوییم.... بلکه در یک اقدام عملی به شما نشان می دهیم که چه کارهایی می شود انجام داد....
در واقع راز موفقیت طراح وب و برنامه نویس وب خود اکتفایی است.... شبیه خود اکتفایی گندم!

یعنی اگر 2 حرف اول را گفتند شما بتوانی 100 تا جمله بسازی!
یعنی خودت باید بروی دنبال جزئیات ! نه اینکه بگویی اینو یاد ندادین، اینو یاد دادین!
مفهومه! یا بازم توضیح بدم!

برای آنکه قالب سایت خودتون رو درست کنید باید یک فایل جدید باز کنید.
پس بر روی File و سپس New کلیک کنید ( یا Ctrl+N) تا صفحه زیر مشاهده گردد:



برای یک سایت بهتر است ( دقت کنید فعلا بهتر است، نه حتما) عرض را 1000 پیکسل و ارتفاع را 1100 در نظر بگیرد. ( البته در تصویر فوق ارتفاع 1500 نوشتیم!)
از این جهت می گویم 1000 پیکسل چون حداکثر نمایش را در رزولوشن 1024 داشته باشید، تا انشالله خدا بخواهد و همه ایرانیان عزیز به مانتیوتر Width مجهز گردند! (آمین!)

بر روی دکمه Ok کلیک نمایید تا اولین صفحه خالی شما ایجاد گردد!


لینک سوالات و رفع اشکال

[تیم پشتیبانی]

سلام بر دانشجویان عزیز!

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

این تاپیک هم زنده می ماند و ما سعی می کنیم آنچه را میدانیم بنویسیم! بروبچS تیم پشتیبانی تمام سعی شان را می کنن که شما هم طراح وب شوید و رو دست آن ها بلند شوید ( البته اگر بتوانید)

---------------------------------------------------------------------

نرم افزار فتوشاپ را اجرا نمایید.
فایلی را که در مرحله قبل ایجاد کردید را باز کنید.
اگر در صفحه باز شده Rules یا همان خط کش نمایش داده می شود که هیچ! وگرنه از مسیر زیر خط کش ها را نمایان کنید.

کد:

View->Rules

محترمانه تر این است که سریع دکمه Ctrl + R را فشار دهید.
در هر صورت باید نمایی مانند زیر داشته باشید:



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



بر روی خط کش بالایی بروید و همانطور که کلیک چپ موس را نگه داشتید به سمت پایین بیایید تا یک خط آبی رنگ بر روی تصویر شما ایجاد شود. ( مثل عمل Drag کردن)
از قسمت خط کش چپ حواستان باشد که ارتفاع خط آبی از بالا 200 پیکسل شود.
حالا به همین شیوه یم خط هم به فاصله کوچکتر در پایین آن ایجاد کنید.
یک خط سوم هم برای قسمت پایینی صفحه لازم است.

اگر عملیات را درست انجام داده باشید باید صفحه تان همانند شکل زیر باشد:



اگر ایجاد شده که هیچ! وگرنه تلاش بیشتر کنید!

بر روی ابزار Shap کلیک کنید. همان که در شکل زیر مشخص کردیم!!! مستطیل را انتخاب کنید. اگر بر روی فلش کوچیک گوشه اش کلیک کنید می بینید دایره و خط و ... هم داره. شما مستطیلش رو انتخاب کنید.


در قسمت بالای صفحه الان این ابزار فعال گردیده است:


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


می بینید که با اضافه کردین این مستطیل یک لایه به فایل اضافه شده است.
اگر بروی کلیک کنید لایه شما نمایش داده نمی شود!

در قسمت لایه ها که در شکل مشخص شده است کلیک راست نمایید . گزینه های زیر را مشاهده می کنید:


آن هایی که های لایت کردیم مهمن! به خاطر داشته باشید!

برای ایجاد نوار نارنجی رنگ باریک در قسمت پایین نوار سیاه باید یک لایه جدید ایجاد کنید.
بر روی آیکون مشخص شده در شکل زیر کلیک نمایید. یا دکمه Ctrl + Shift+N را فشار دهید تا یک لایه جدید ایجاد شود:


به همان صورت که نوار مشکی را ایجاد کردید باید نوار نارنجی رنگ را نیز ایجاد نمایید. نوار شما به احتما 99.99% سیاه است. باید نارنجی اش کنیم!
بر روی لایه جدید ایجاد شده کلیک راست کنید و گزینه Blending Option را انتخاب کنید . در پنجره باز شده بر روی Gradient Overlay کلیک کنید.


اگر در قسمت Gradient کلیک کنید پنجره زیر باز می شود:

البته ممکن است شما این همه رنگ نداشته باشید: باید در اینترنت برای این Gradient ها جستجو کنید. دانلود کنید و راحت نصب کنید
به هر حال کمی با این قسمت بازی کنید و یک رنگ نارنجی انتخاب کنید و بر روی Ok کلیک کنید. الان در پنجره Blending گزینه Stroke را انتخاب کنید:

از قسمت Color آن یک نارنجی پررنگ تر انتخاب کنید. با ضخامت 1 پیکسل. بر روی OK کلیک کنید.
خروجی را مشاهده می کنید!
قسمت لایه های هم این شکلی شده اند:


برای ایجاد قسمت پایینی به سیوه توضیح داده شده یک لایه جدید ایجاد و یک مستطیل رسم کنید. با استفاده از گزینه Blending ترکیب رنگ نارنجی را ایجاد کنید تا شکل شما شبیه ای شود:


در شکل بالا از چهار طرف ما با خط کش 100 پیکسل جدا کردیم!
چون می خواهیم قسمت سفید رنگ وسط را که مطالب در آن نمایش داده می شود را مشخص کنیم.
با همین ابزار shape یک مستطیل به رنگ سفید ایجاد کنید.
سپس با استفاده از Blending Option و گزینه Stroke یک کادر خاکستری رنگ هم به آن بدهید تا شبیه شکل شود:


این یک قسمت پایه از ایجاد پس زمینه یک قالب است.
اگر رنگ نارنجی را دوست ندارید می توانید رنگ های دیگر انتخاب کنید:
مثل:




ادامه دارد.....

[تیم پشتیبانی]

بالاخره نوبت قسمت دیگه از آموزش رسید... -s46-

-------------------------
فایل PSD که از مرحله قبل دارید رو باز کنید.
می خواهیم برای سایت یک "بنر" قرار دهیم.
ما برای سایت خودمون از این تصویر استفاده می کنیم:



تصویر مورد نظر خود را با فتوشاپ باز کنید. ( از منوی فایل، گزینه open و سپس فایل مورد نظر خود)

ما باید این تصویر را در فایل اصلی خود کپی کنیم. باید تمام آن را انتخاب کنیم.
A + Ctrl را فشار دهید تا فایل مانند زیر انتخاب شود.



از منوی edit گزینه copy را انتخاب کنید.



حالا وارد فایل اصلی شود و از منوی edit گزینه pase را انتخاب کنید.

حالا تصویر را در فایل اصلی خود مشاهده می کنید.
بر روی ابزار Move کلیک نمایید.



حالا لایه تصویر انتخاب شده است. با استفاده از موس تصویر را به بالا انتقال دهید و یا اندازه آن را کوچک و بزرگ کنید. با عمل drag کردن....
در هنگام تغییر سایز تصویر ( بزرگ و کوچک کردن) برای آنکه نسبت طول و عرض تصویر حفظ شود باید در هنگام drag کردن کلید Shift را پایین نگه دارید.

خروجی شما باید شبیه زیر باشد:



برای نوشتن عنوان سایت نیاز به ابزار type داریم. بر روی ابزار type کلیک نمایید.



حالا بر روی قسمت مورد نظر کلیک کنید و متن مورد نظر خود را تایپ کنید
فونت، رنگ و اندازه آن را می توانید انتخاب کنید.
برای تغییر مکان نیز می توانید از همان ابزار Move استفاده کنید.



حالا می خواهیم منو را طراحی کنیم.
باید از ابزار Rounded.... استفاده کنیم.



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



خروجی شما این است:



------------------------

ادامه دارد.....