طراحی قالب سایت با html و css

خرید فایل های مربوط به طراحی قالب ساده با html و css

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

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

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

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

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

خرید فایل های مربوط به طراحی قالب ساده با html و css

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

برای این منظور از منوی 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 و با ابعاد ۵۰۰*200ایجاد می کنیم این کادر قسمت تبلبغات سایت ما می باشد و مابنرهای تبلیغاتی مان را در این بخش قرار می دهیم برای بقیه قسمت هانیز با ابزار text آدرس دانشگاه را می نویسیم.