ارسال پاسخ 
 
امتیاز موضوع:
  • 4 رأی - میانگین امیتازات: 4
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی یک وب سایت ساده (آموزش)
03-22-2012, 12:17 AM (آخرین ویرایش در این ارسال: 04-02-2012 08:13 PM، توسط تیم پشتیبانی.)
ارسال: #1
Star طراحی یک وب سایت ساده (آموزش)
3
0
قابل توجه کلیه دانشجویان عزیز
در این تاپیک قصد داریم طراحی یک سایت ساده را آموزش دهیم.

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


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

خجسته لینک ارسال سوالات و رفع اشکال خجسته
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط admin ، pooria ، afshin ، asieh ، sahar abdollahi ، kiantamar ، دانشجو ، mohammad.n ، 871244761 ، PaRaM ، love less ، kiarash ، nili ، ghanei ، marjan_s ، شکیب آنلاین ، sakineh_1066 ، zahra
03-22-2012, 06:52 PM
ارسال: #2
RE: طراحی یک وب سایت ساده (آموزش)
1
0
دانشجویان عزیز
در این تاپیک صرفا پست های مربوط به آموزش توسط استارتر گذاشته می شود و پست های دیگر دانشجویان به تاپیک مربوط به رفع اشکال منتقل می شوند.

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

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

باتشکر


با مطالعه قوانین و رعایت آن ها از این محیط علمی لذت ببریم.... «کلیک نمایید»...
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط تیم پشتیبانی ، pooria ، 871244761 ، asieh
03-23-2012, 06:50 PM (آخرین ویرایش در این ارسال: 03-23-2012 06:52 PM، توسط تیم پشتیبانی.)
ارسال: #3
قسمت اول - معرفی
5
0
سلام

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

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

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

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

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


فتوشاپ! (فقط Adobe Photoshop CS5)

باید دست به جیب شوید و نرم افزار های به روز شده را تهیه کنید. پیشنهاد من خرید یک مجموعه نرم افزارهایی جامع است که حدود 25 هزارتومنی می شود. می ارزد.... پس بخرید.... این پول را یک بار می دهید و برای همیشه دارید.... مجموعه هایی مثل LORD و یا KING انتخاب های خوبی هستند.... مشورت خواستید در تاپیک رفع اشکال بپرسید.....


فونت

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

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

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


فایل‌(های) پیوست شده بندانگشتی (ها)
   
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Cna FP ، asieh ، sahar abdollahi ، afshin ، ATM ، Sara.A ، mohammad.n ، 871244761 ، pooria ، admin ، z-e ، شکیب آنلاین ، kiarash ، nili ، malekli ، marjan_s ، fbcomputer ، sakineh_1066 ، belaned ، n.p ، marzieh ، sanbad ، parwane ، سمیرا ، مرضیه قربانی
03-28-2012, 08:05 PM
ارسال: #4
RE: طراحی یک وب سایت ساده (آموزش)
2
0
(03-28-2012 06:40 AM)kiantamar نوشته شده توسط:  سپاس روی چشم اما چرا نسیه؟شوکه

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

با مطالعه قوانین و رعایت آن ها از این محیط علمی لذت ببریم.... «کلیک نمایید»...
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط 871244761 ، asieh ، fbcomputer
04-02-2012, 08:08 PM (آخرین ویرایش در این ارسال: 04-06-2012 10:06 PM، توسط تیم پشتیبانی.)
ارسال: #5
RE: طراحی یک وب سایت ساده (آموزش)
1
0
سلام!
اول اینکه ببخشید! گفته بودیم روزی یک پست داریم ولی خوب تعطیلات است و....آه

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

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

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

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

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

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

[تصویر:  attachment.php?aid=18]

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

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

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

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

[تصویر:  attachment.php?aid=19]

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

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


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


فایل‌(های) پیوست شده بندانگشتی (ها)
       
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط afshin ، admin ، Cna FP ، asieh ، 871244761 ، Sara.A ، ATM ، mitra ، kiarash ، nili ، marjan_s ، شکیب آنلاین ، fbcomputer ، sakineh_1066 ، n.p ، zahra
04-07-2012, 12:17 AM
ارسال: #6
Rainbow قسمت سوم
1
0
سلام بر دانشجویان عزیز!

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

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

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


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

کد:
View->Rules

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

[تصویر:  S03_P01.jpg]

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

[تصویر:  S03_P21.jpg]

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

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

[تصویر:  S03_P02.jpg]

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

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

در قسمت بالای صفحه الان این ابزار فعال گردیده است:
[تصویر:  S03_P04.jpg]

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

می بینید که با اضافه کردین این مستطیل یک لایه به فایل اضافه شده است.
اگر بروی [تصویر:  S03_P06.jpg] کلیک کنید لایه شما نمایش داده نمی شود!

در قسمت لایه ها که در شکل مشخص شده است کلیک راست نمایید . گزینه های زیر را مشاهده می کنید:
[تصویر:  S03_P07.jpg]

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

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

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

اگر در قسمت Gradient کلیک کنید پنجره زیر باز می شود:
[تصویر:  S03_P10.jpg]
البته ممکن است شما این همه رنگ نداشته باشید: خندان باید در اینترنت برای این Gradient ها جستجو کنید. دانلود کنید و راحت نصب کنیدموفق
به هر حال کمی با این قسمت بازی کنید و یک رنگ نارنجی انتخاب کنید و بر روی Ok کلیک کنید. الان در پنجره Blending گزینه Stroke را انتخاب کنید:
[تصویر:  S03_P11.jpg]
از قسمت Color آن یک نارنجی پررنگ تر انتخاب کنید. با ضخامت 1 پیکسل. بر روی OK کلیک کنید.
خروجی را مشاهده می کنید!
قسمت لایه های هم این شکلی شده اند:
[تصویر:  S03_P12.jpg]

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

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

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

[تصویر:  S03_P20.jpg]

ادامه دارد.....تشکر
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط admin ، ATM ، z-e ، asieh ، ghazal ، jahani ، Sara.A ، AFTAB ، mitra ، kiarash ، Cna FP ، nili ، marjan_s ، شکیب آنلاین ، fbcomputer ، belaned
04-20-2012, 04:37 AM
ارسال: #7
Rainbow RE: طراحی یک وب سایت ساده (آموزش)
1
0
بالاخره نوبت قسمت دیگه از آموزش رسید... -s46-s (37)برق گرفتگی

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

[تصویر:  banner.jpg]

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

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

[تصویر:  S04_P01.jpg]

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

[تصویر:  S04_P02.jpg]

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

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

[تصویر:  S04_P03.jpg]

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

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

[تصویر:  S04_P04.jpg]

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

[تصویر:  S04_P05.jpg]

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

[تصویر:  S04_P06.jpg]

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

[تصویر:  S04_P07.jpg]

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

[تصویر:  S04_P08.jpg]

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

[تصویر:  S04_P09.jpg]

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

ادامه دارد.....تشکر
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط admin ، kiarash ، Sara.A ، asieh ، Cna FP ، ATM ، nili ، marjan_s ، شکیب آنلاین ، fbcomputer ، belaned ، varchar ، mim_golden ، mojtabaakhondy ، zahra
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش گام به گام ساخت سايت در ASP.NET Saeede azn 0 6,584 09-04-2013 07:08 PM
آخرین ارسال: Saeede azn
Star آموزش ساخت یک منوی پایین افتادنی چندگانه elias.f 19 20,163 12-24-2012 07:07 AM
آخرین ارسال: elias.f
  افزایش بازدیدکنندگان سایت hostjoomir 1 2,487 10-23-2012 04:15 AM
آخرین ارسال: ghanei
Question استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: رفع اشکال :. Cna FP 7 7,715 07-17-2012 04:07 AM
آخرین ارسال: Cna FP
  چگونه طراح سایت قابلی شویم؟! Cna FP 0 2,348 04-19-2012 12:25 AM
آخرین ارسال: Cna FP
Lightbulb استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :. Cna FP 4 6,676 04-10-2012 03:57 AM
آخرین ارسال: Cna FP
  طراحی یک وب سایت ساده (رفع اشکال) تیم پشتیبانی 6 7,108 04-09-2012 06:25 PM
آخرین ارسال: jahani
  طراحی قالب یک سایت در فتوشاپ به زبان ساده(آموزش) Cna FP 5 10,358 04-01-2012 03:21 AM
آخرین ارسال: admin
  طراحی قالب یک سایت در فتوشاپ به زبان ساده(رفع اشکال) nasrin 3 5,141 04-01-2012 01:22 AM
آخرین ارسال: Cna FP

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان