طراحی یک وب سایت ساده با CSS,HTML

[Saber Mogaddas]

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

شروع کار:

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

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

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

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

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

نکات ضروری :

1- تکه های برش داده شده را با پسوند png 24 ذخیره می کنیم.

2- اندازه ای که من در فتوشاپ در نظر گرفتم 1000px در عرض و برای طول هم کمی بیشتر چون در دفرم شدن تاثیری ندارد 1500px در نظر گرفته ام.

3- در زمان طراحی شاید ایده های جدیدی داشته باشیم که در پست های آینده آن ها را پیاده سازی می کنیم.

4- ابزار برش در فتوشاپ Slice Tool هست.

5- برای ذخیره قسمت برش داده نیز می توانید از کلید میانبر alt+ctrl+shift+S استفاده کنید.

لینک اصلاح شده برای 4shared
لینک اصلاح شده دوم

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

موفق باشید..