دوشنبه, ۱۸ فروردین ۱۳۹۹
سرخط خبرها
خانه / اخبار دانشگاه / دانلود پروژه درس طراحی پایه کاربردی (طراحی سایت با html و css)

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

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

html&css

 

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

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

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

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

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

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

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

1

 

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

2

 

3

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

 

4

 

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

5

6

 

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

7

 

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

8

 

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

Untitled-1

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

10

 

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

16

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

12

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

13

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

17

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

14

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

18

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

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

اندازه فایل: ۱٫۵۲mb

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

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

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

خرید

درباره ی طاهره معینی

طاهره معینی
من عاشق آموختنم و معتقدم هر روزی که تو اون چیز تازه ای یاد نگیری اون روز یک روز از دست رفته هست!

همچنین ببینید

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

داده کاوی در شبکه های اجتماعی یکی از موضوعات پر طرفدار است. یک شبکه اجتماعی …

۳ دیدگاه

  1. سلام خانم معینی .. دقیقا من همچین قالبی رو میخام اما برای کد هاش دچار مشکل میشم در dreamwevea .. امکانش هست راهنمایی و کمک کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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