چگونگی طراحی یک Web Site از ابتدا

[mehdi.mousavi]

سلام.
در این مقاله دو بخشی، با چگونگی طراحی یک وب سایت ساده در Photoshop و تبدیل Layout نهایی به XHTML، آشنا خواهید شد. این سایت، بر اساس 960Grid System (http://960.gs/) ایجاد شده.

بخش اول - طراحی ظاهر سایت در Photoshop (http://www.tuttoaster.com/create-an-awesome-minimal-web-design-in-photoshop/)
بخش دوم - طراحی XHTML و CSS ها بر اساس Layout ساخته شده در مرحله قبل (http://www.tuttoaster.com/code-up-an-awesome-minimal-web-design-from-psd-to-xhtml-css/?utm_source=twitterfeed&utm_medium=twitter)

موفق باشید.

[hamiii]

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

[hamiii]

این خودآموز رو ببینید:


آموزش طراحی وبسایت در دو مرحله (فتوشاپ و کدینگ)
(http://www.4shared.com/file/EY85emB7/coding__photoshop.html)
موفق باشید.

[hamiii]

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

این مطلب از وبلاگستان پارسی به این نکات بخوبی اشاره کرده (http://blog.datisdesign.com/persian/?p=281)

موفق باشید

[hamiii]

یکی از ابزارهای مفید برای کسانی که تازه شروع به طراحی وب کرده اند،cheat sheet هستش.
cheat sheet به معنای برگه تقلب مجموعه ی از دستورات مورد استفاده در هر زبان برنامه نویسه که گاها با توضیحاتی نیز همراه هستند.
برای همه ی زبانهای برنامه نویسی cheat sheet های متعددی نوشته شده.

چند تا از cheat sheetهای مورد استفاده در طراحی وب رو برای شما ضمیمه کردم.

موفق باشید.

[هانیه دره باغی]

من صفحه اصلیم رو با فتوشاپ طراحی کردم حالا می خوام ببینم باید سایر صفحاتم رو که قراره بصورت لینک به صفحه اصلیم متصل بشه رو هم با فتوشاپ طراحی کنم یا نه؟
فایل ضمیمه تصویری از صفحه اصلی من است .
من فایل های ضمیمه رو که درباره آموزش طراحی سایت از ابتدا در این تاپیک بود رو خوندم یه سوال در مورد قسمت دوم آموزش داشتم واون اینکه منظورتون از اینکه گفته بودید یه فایل css و html درست کنید یعنی چی؟ وباید چه جوری این کاررو انجام بدیم
من دریم ویور وhtml مقداری بلدم

[hamiii]

باید سایر صفحاتم رو که قراره بصورت لینک به صفحه اصلیم متصل بشه رو هم با فتوشاپ طراحی کنم یا نه؟نیازی نیست همه ی صفحات رو با فتوشاپ طراحی کنید.شما یک صفحه اصلی به نام index.html می سازید که طرح اصلیتون رو در برمیگیره(نحوه ی این کار رو هم توی آموزش حتما خوندید)
صفحات دیگر هم دقیقا مثل همین صفحه خواهند بود فقط قسمت محتوای آنها که در عکس ضمیمه با نام content نشان داده شده تغییر خواهد کرد.
مثلا شما برای طراحی صفحه معرفی آموزشگاه یک صفحه به نام about.html می سازید و کدنویسی اون رو دقیقا مثل کدنویسی index که در آموزش خوندید تکرار می کنید.فقط به جای قسمت content مطالب مربوط به این صفحه را می نویسید.


منظورتون از اینکه گفته بودید یه فایل css و html درست کنید یعنی چی؟اگر منظور این قسمت رو نفهمیدید باید آموزش HTML و CSS رو از پایه بخونید.چون مباحث این قسمت شامل آموزش پایه ای HTML و CSS نیست و بیشتر نحوه ی کدنویسی و یکسری تجارب کاربری رو به شما نشون میده.به عبارتی پله دوم آموزش طراحی وب می باشد.

موفق باشید

[azv_2008]

این خودآموز رو ببینید:


قسمت اول - طراحی گرافیکی در فتوشاپ
(http://tinyurl.com/photoshop-pdf)
قسمت دوم - کد دهی (http://tinyurl.com/coding-pdf)

موفق باشید.



لینک ها مشکل دارند میشه ضمیمه کنید ؟ یا یه جا دیگه آپ کنید .

[hamiii]

انجمن اجازه آپلود فایلهای بیشتر از 500 کیلو بایت رو نمیده.

هر دو آموزش رو از لینک زیر دریافت کنید(حجم:1.2 مگابایت)

(http://www.4shared.com/file/EY85emB7/coding__photoshop.html)
دریافت فایل آموزش (http://www.4shared.com/file/EY85emB7/coding__photoshop.html)

[هانیه دره باغی]

سلام
من بعد از خوندن قسمت دوم این خود آموز یعنی بخش کدینگ سعی کردم تا قالبی رو که تو فتوشاپ طراحی کردم رو تبدیل به کدهای html کنم ولی یه مشکل پیش اومده واون اینکه من اول سمت چپ صفحم رو اسلایس کردم وحالا که می خوام سمت راست رو یعنی navigation , amar , linkestan رو وارد کنم تمام صفحم بهم می ریزه عکس اون رو تو فایل ضمیمه گذاشتم
البته سایز پهنای اون رو دقیق تنظیم کردم ولی باز بهم می ریزه
ممنون می شم اگه راهنمایی کنید

[tootfarangi7]

[QUOTE=هانیه دره باغی;1101159]من صفحه اصلیم رو با فتوشاپ طراحی کردم حالا می خوام ببینم باید سایر صفحاتم رو که قراره بصورت لینک به صفحه اصلیم متصل بشه رو هم با فتوشاپ طراحی کنم یا نه؟

چند تا حرف بی ربط:(البته پیشنهاد!
اول خیلی ضعیف طراحی شده،هدفت این بوده که سایت رو از لحاظ گرافیمی زیبا درست کنیفکه نشده،می تونستی خیلی ساده تر هم طراحی کنی ،اما مرتب،مرتب بودن خیلی مهمه،فونتهای که استفاده کردی خیلی بزرگه،من سایت رو هم دیدم،متاسفانه سایز فونت های خیلی بزرگ بود،معمولا برای طراحی سایت:فونت tahoma سایز 9pt برای مطالب استفاده میشه،و برای عنوان هم همین فونت رو میشه bold کرد،
وقتی ادرس سایت رو میزنی سایت باز نمیشه"main.html" رو بذار "index.html "
مدرسه های غیرانتفاعی که کلی پول میگیرن،حالا چرا توی این مورد این جوری شده و نمی خوان هزینه کنن خدا می دونه،
از یه cms استفاده کنی خیلی بهتره.
چون خیلی از سی ام اس ها هستن که رایگان هستن،مدیریت عالی دارن،و البته زیبا هستن.
من پیشنهاد می کنم از جوملا استفاده کنی،جوملا نشد وردپرس،نصبشون هم خیلی راحته،
خیلی حرف زدم،ببخشید.

[Sirwan Afifi]

سلام.
در این مقاله دو بخشی، با چگونگی طراحی یک وب سایت ساده در Photoshop و تبدیل Layout نهایی به XHTML، آشنا خواهید شد. این سایت، بر اساس 960Grid System (http://960.gs/) ایجاد شده.

بخش اول - طراحی ظاهر سایت در Photoshop (http://www.tuttoaster.com/create-an-awesome-minimal-web-design-in-photoshop/)
بخش دوم - طراحی XHTML و CSS ها بر اساس Layout ساخته شده در مرحله قبل (http://www.tuttoaster.com/code-up-an-awesome-minimal-web-design-from-psd-to-xhtml-css/?utm_source=twitterfeed&utm_medium=twitter)

موفق باشید.

سلام
این 960Grid System یک فریم ورک برای CSS است؟
مزیتش چیه؟ (برای بحث Cross Browser بودن سایت؟)
چرا باید از این فریم ورک ها استفاده کنیم؟

[mehdi.mousavi]

سلام این 960Grid System یک فریم ورک برای CSS است؟ مزیتش چیه؟ (برای بحث Cross Browser بودن سایت؟) چرا باید از این فریم ورک ها استفاده کنیم؟

سلام.

960gs یه Grid System هستش که میشه در حالت های fixed-width، fluid-width، adaptive و ... از اون استفاده کرد. استفاده از چنین سیستم هایی در طراحی Web App ها،


Code base شما رو استاندارد میکنه در نتیجه می تونید از یک کد، در چندین پروژه براحتی بهره مند بشید
شما رو از نوشتن CSS های تکراری (و در اغلب اوقات) دونستن مفاهیم پیشرفته در CSS بی نیاز میکنه
Prototyping رو بسیار ساده می کنه چون جایگاه هر Element روی صفحه قابل پیش بینی هستش
بهره وری (فردی یا تیمی) رو تا حد چشمگیری افزایش میده
Cross Browser بودن سایت که شما بهش اشاره کردید، دلیل دیگه ای برای استفاده از چنین System هایی در نظر گرفته میشه

Bootstrap (http://twitter.github.com/bootstrap/?v=2.0) که چند وقتی هستش نسخه دومش عرضه شده، سعی کرده تا کلیه نیازهای Grid System رو برای پشتیبانی از Layout های مختلف برآورده کنه، Typography های از پیش تعیین شده ای داره که کار توسعه دهنده رو بسیار ساده میکنه، Component هایی متشکل از منو، لیست، toolbar و ... داره که باز به تسهیل کار توسعه دهنده کمک می کنه و ... بنظرم اگر وقت بذارید و یکی از Grid System ها رو خوب یاد بگیرید، براحتی میتونید با صرف زمان کمی به هر Grid System ای Switch کنید یا حتی GS های موجود رو در صورت نیاز بسط بدید.


موفق باشید.

[Sirwan Afifi]

سلام.

960gs یه Grid System هستش که میشه در حالت های fixed-width، fluid-width، adaptive و ... از اون استفاده کرد. استفاده از چنین سیستم هایی در طراحی Web App ها،


Code base شما رو استاندارد میکنه در نتیجه می تونید از یک کد، در چندین پروژه براحتی بهره مند بشید
شما رو از نوشتن CSS های تکراری (و در اغلب اوقات) دونستن مفاهیم پیشرفته در CSS بی نیاز میکنه
Prototyping رو بسیار ساده می کنه چون جایگاه هر Element روی صفحه قابل پیش بینی هستش
بهره وری (فردی یا تیمی) رو تا حد چشمگیری افزایش میده
Cross Browser بودن سایت که شما بهش اشاره کردید، دلیل دیگه ای برای استفاده از چنین System هایی در نظر گرفته میشه

Bootstrap (http://twitter.github.com/bootstrap/?v=2.0) که چند وقتی هستش نسخه دومش عرضه شده، سعی کرده تا کلیه نیازهای Grid System رو برای پشتیبانی از Layout های مختلف برآورده کنه، Typography های از پیش تعیین شده ای داره که کار توسعه دهنده رو بسیار ساده میکنه، Component هایی متشکل از منو، لیست، toolbar و ... داره که باز به تسهیل کار توسعه دهنده کمک می کنه و ... بنظرم اگر وقت بذارید و یکی از Grid System ها رو خوب یاد بگیرید، براحتی میتونید با صرف زمان کمی به هر Grid System ای Switch کنید یا حتی GS های موجود رو در صورت نیاز بسط بدید.


موفق باشید.


خیلی ممنون

به نظر شما کدوم یک از این Grid Systemها رو برای شروع انتخاب کنم و مدت زمان تسلط به اون کمتره؟

1- 960
2-BluePrint
3- Bootstrap

[بهزاد علی محمدزاده]

css framework ها تفاوت چندانی با هم ندارند . شما تو چند روز می تونی یکی از اینها رو یاد بگیری . حتی با دید کدهای اونها ... من با blueprint کار می کنم . نمونه ایی رو ببینید :

.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}


به همین سادگی . هر المانی رو خواستی سایز بدی یکی از اندازه های مورد نظر رو به عنوان یه class قرار میدی :

<div class="span-5">Box</div>

و امکانات دیگه ایی که می تونید با دانلودش و نگاه کردن به کد ها ببینید .

[mehdi.mousavi]

به نظر شما کدوم یک از این Grid Systemها رو برای شروع انتخاب کنم و مدت زمان تسلط به اون کمتره؟ 1- 960 2-BluePrint 3- Bootstrap

960gs... چون resource هایی که در موردش هست بسیار زیاده! اما در نهایت، Bootstrap انتخاب امروزی تری هستش.
به اعتقاد من شما اول به 960gs مسلط بشید، بعدش براحتی می تونید ظرف چند روز به دیگر سیستم های مشابه سوپیچ کنید.

موفق باشید.

[بهزاد علی محمدزاده]

من اصلا از وجود Bootstrap با خبر نبودم . رفتم دیدم . خیلی خوب بود ... با blueprint که کار می کنم . احساس می کردم احتیاج به امکانات بیشتری دارم . گاهی یه چیزهایی رو خودم بهش اضافه می کردم . اما این Bootstrap خیلی امکانات و component های بیشتری داره ...

این فریم ورک ها قابلیت customize کردن هم دارن ...