دانلود پروژه درس طراحی پایه کاربردی (طراحی سایت با html و css)

در این درس می خواهیم برای یک سایت قالبی طراحی کنیم. این کار را با نرم افزار dreamweaver و css انجام خواهیم داد.شکل قالب سایت درنهایت به صورت زیر خواهد بود.

در حقیقت کار طراحی قالب سایت شامل سه مرحله می باشد:

۱- ایجاد نمایی از قالب سایت در نرم افزار فتوشاپ

۲- جدا کردن (silce) کردن تصاویر مورد نیاز از فتوشاپ

۳- استفاده از دریم ویور جهت ایجاد کدهای اچ تی ام ال قالب

در ابتدا چگونگی طراحی قالب را در فتوشاپ توضیح می دهیم:

برای این منظور از منوی file گزینه new را انتخاب کرده و یک اندازه دلخواه برای صفحه تنظیم می کنیم مثلا ۱۰۰۰*۱۳۰۰

بعد باید با استفاده از خطوط راهنما  صفحه مورد نظر را بخش بندی کنیم

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

سپس یک کادر مشکی نیز در بالاترین قسمت صفحه با ابزار rectangle tool می کشیم

سپس باید کادری برای قسمت منوی سایت طراحی کنیم.  تنظیمات بکار برده به شکل زیر است:

رنگ مورد نظر من ddd2d2 است

حالا یک کادر با رنگ 504d4d و با استفاده از ابزار rectangle tool در قسمت پایین صفحه می کشیم.

نوبت به لوگوی سایت می رسد می توانید خودتان یک لوگو ایجاد کرده و با پسوند png ذخیره کنید و تصویر مورد نظر را در قسمت هدر سایت قرار دهید

وباره به منو باز می گردیم و نوشته های منو را اضافه می کنیم . من در اینجا از فونت ۲ yekan و با اندازه ۱۸  و رنگ مشکی استفاده نموده ام

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

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

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

حالا محتویات سایت را طراحی می کنیم برای این منظور با ابزار rectangle tool یک کادر به رنگ سفید ایجاد کرده و اطراف آن را ا رنگ b7c7c8استروک می دهیم. سپس کادر دیگری به طول ۵۰ پیکسل در قسمت بالایی ایجاد می کنیم . برای ایجاد کادر تصویر نیز یک تصویر را در فتوشاپ باز کرده و با استفاده از دکمه های ctrl+t تصویر را به اندازه ۱۵۰*۱۵۰ پیکسل در می آوریم و در مکان مناسب می گذاریم. باقی قسمت ها هم با استفاده از ابزار text و تغییر رنگ و فونت انجام می پذیرد.

از این پوشه به تعداد ۳ عدد کپی گرفته و با ابزار move آنها را یکی یکی زیر هم می گذاریم. تا محتویات صفحه شکل بگیرد.

در قسمت انتهایی باید فوتر سایت را طراحی کنیم که برای این کار با استفاده از ابزار round rectangle tool یک کادر با رنگ eae3e3 و با ابعاد ۵۰۰*۲۰۰ایجاد می کنیم این کادر قسمت تبلبغات سایت ما می باشد و مابنرهای تبلیغاتی مان را در این بخش قرار می دهیم  برای بقیه قسمت هانیز با ابزار text آدرس دانشگاه را می نویسیم.

در انتها پس از ایجاد فایل فتوشاپ از کارمون باید قسمت هایی که برای کد نویسی html نیاز داریم را در فتوشاپ slice بکنیم .

در این بخش تمام فایل های مورد نیاز جهت طراحی این قالب شامل فایل های css, images,photoshop,fonts جهت دانلود قرار داده شده است .

اندازه فایل: ۱.52mb

قیمت:۲۰۰۰ تومان

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

نکته : جهت دانلود راحت تر از Download Manager استفاده کنید تا در صورت قطع شدن ارتباط در طول دانلود بتوانید روند دانلود را مجدداً ادامه دهید. ضمناً لینک دانلود به مدت ۳ روز معتبر خواهد بود