طراحی قالب سایت شماره 5 با HTML و CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

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

تبدیل قالب فتوشاپ به HTML

1. یک فولدر به نام Tem5 روی دسکتاپ خودتان ایجاد کنید .
2. دو فولدر به نام های images.Css درون پوشه اصلی همانند تصویر زیر ایجاد کنید .
3. نوت پد را باز کرده یکبار فایل را با نام Index.html در پوشه اصلی ویکبار بانام Style.css درپوشه Css ذخیره کنید

psd-Convert-Html-asarayan-ch5-1

 

4. کدهای بدنه سایت را در فایل Index.html تایپ کنید . من قسمت اصلی را با Container و قسمت های دیگر را با نام هایی که در تصویر زیر مشاهده می کنید مشخص کرده ام

psd-Convert-Html-asarayan-ch5-2

5. دستورات مربوط به تگ body را همانند تصویر زیر در فایل Style.css تایپ و سپس ذخیره کنید .
6. حال می خواهم تصویر پس زمینه را با تصویری که از فایل اصلی جدا کردیم و در پوشه images ذخیره کردیم و در فایل Style.css فراخوانی کنیم .

psd-Convert-Html-asarayan-ch5-3

7. تگ بدنه اصلی سایت id='container هست که اول بریم آن را در فایل Style.css فراخوانی کنیم و اندازه صفحه اصلی سایت را مشخص کنیم

psd-Convert-Html-asarayan-ch5-4

ایجاد بخش هدر

1. برای ایجاد لوگوی سایت از تگ h1 استفاده میکنم و لینکش میدم به صفحه اصلی بعد میرم تنظیمات اندازه و نحوه قرارگیریشو در فایل Style.css تغییر میدهم .

psd-Convert-Html-asarayan-ch5-5

psd-Convert-Html-asarayan-ch5-6

psd-Convert-Html-asarayan-ch5-7

2. حالا می خوام آن دوتا لینک بالای صفحه را ایجاد کنم . برای ایجاد آن دوتا لینک از id='top-menu در بین تگ header استفاده میکنم . هر جا که بخوام تنظیمات یک نقطه خاصی را مثل لینک صفحه اصلی را در فایل css تغییر بدم یک کلاس براش تعریف میکنم که راحت تر باشم

psd-Convert-Html-asarayan-ch5-8

psd-Convert-Html-asarayan-ch5-9

psd-Convert-Html-asarayan-ch5-10

ایجاد Content یا قسمت اصلی صفحه
1. برای ایجاد قسمت اصلی صفحه از id='main استفاده میکنم . ابتدا بوسیله کدهای Css یک کادر با اندازه مشخص شده ایجاد کرده سپس صفحه را به دو قسمت یکی برای متن و دیگری لینکهای سمت راست تقسیم می کنم

psd-Convert-Html-asarayan-ch5-11

2. حالا می خوام مطلب اولی که با یک عکس کوچیک نمایش دام را وسط صفحه اصلی ایجاد کنم . سعی میکنم برای اینکه راحت تر بتوانم ظاهر فایل ها را تغییر بدهم برای هر کدام از موضوعات یا قسمت های یک class تعریف کنم .خوب به کدهای زیر دقت کنید که بین تگ  id='main اضافه شده است

psd-Convert-Html-asarayan-ch5-12

بدون تغییر فایل css چنین صفحه ای باید داشته باشید

psd-Convert-Html-asarayan-ch5-13

3. حالا میرم Id های اضافی شده در صفحه اصلی را در فایل css فراخوانی کرده و تنظیمات آنها را تغییر میدهم . یکی یکی تغییر میدم تا ببینید چطوری صفحه اصلی تغییر پیدا میکنه

psd-Convert-Html-asarayan-ch5-14

psd-Convert-Html-asarayan-ch5-15

psd-Convert-Html-asarayan-ch5-16

psd-Convert-Html-asarayan-ch5-17

psd-Convert-Html-asarayan-ch5-18

psd-Convert-Html-asarayan-ch5-19

psd-Convert-Html-asarayan-ch5-20

4. حالا می خوام نوشته های مربوط به کادر نویسنده آموزش را کامل کنم .دقت کنید

psd-Convert-Html-asarayan-ch5-21

psd-Convert-Html-asarayan-ch5-22

5. حالا مراحل بالا را کپی میکنم برای قسمت دوم  با این تفاوت که به جای عکس اول یک عکس دیگه جایگزین میکنم دقت کنید

psd-Convert-Html-asarayan-ch5-23

psd-Convert-Html-asarayan-ch5-24

6. برای اینکه متن ها از سمت راست نمایش داده بشه دستور direction:rtl را بین تگ body اضافه میکنم. دستور text-align: justify را برای تراز کردن متن اضافه میکنم

psd-Convert-Html-asarayan-ch5-25

psd-Convert-Html-asarayan-ch5-26

لینک های پایین صفحه

1. من دو لینک پایین صفحه برای مطلب قبلی و بعدی ایجاد میکنم .

psd-Convert-Html-asarayan-ch5-27

psd-Convert-Html-asarayan-ch5-28

psd-Convert-Html-asarayan-ch5-29

ساخت قسمت منوی سمت راست

1. برای ساخت سمت راست سایت از id='sidebar استفاده میکنم . اگر فراموش نکرده باشید در فتوشاپ 7 لینک در قسمت راست وجود داشت . ابتدا این لینکها را در فایل Index.html ایجاد و تغییرات مربوط به ظاهر آن را در فایل css تغییر میدهم .

psd-Convert-Html-asarayan-ch5-30

psd-Convert-Html-asarayan-ch5-31

psd-Convert-Html-asarayan-ch5-32

psd-Convert-Html-asarayan-ch5-33

psd-Convert-Html-asarayan-ch5-34

ساخت کادر جستجو

1. حالا نوبت میرسه به ساخت کادر جستو. یک id='search برای این قسمت با دو کلاس در فایل Index.html تعریف میکنم بعد تغییرات لازم را در فایل css میدم

psd-Convert-Html-asarayan-ch5-35

psd-Convert-Html-asarayan-ch5-36

psd-Convert-Html-asarayan-ch5-37

ساخت قسمت تماس با ما

1.به کدها توجه کنید

psd-Convert-Html-asarayan-ch5-38

psd-Convert-Html-asarayan-ch5-39

2. به تگ p یک کلاس contact-us اضافه کنید تا متن را در فایل css وسط چین کنیم

psd-Convert-Html-asarayan-ch5-40

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

برای تغییر رنگ پس زمینه وسط صفحه : background: white

برای تغییر رنگ پس زمینه منوی راست و فاصلش از طرفین : padding: 15px 20px 15px 15px ; | border: 5px solid white; | background: #f8f8f8;

حالا قالب شما باید به این شکل در اومده باشه

psd-Convert-Html-asarayan-ch5-41

ساخت پایین سایت یا فوتر

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

psd-Convert-Html-asarayan-ch5-42

psd-Convert-Html-asarayan-ch5-43

psd-Convert-Html-asarayan-ch5-44

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

مشاهده دمو در مرورگر

برای دانلود فایل HTML و CSS کلیک کنید || لینک دانلود :سرورمستقیم

آخرین بروز رسانیسه شنبه, 08 مهر 1393 08:53

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #4 سعید صبح خیز 1396-07-05 10:14
به نقل از AlirezaNM:
سلام آموزش طراحی فتوشاپ از قالب یک به بعد دیگه نیست چرا؟!

سلام
لینکشو اصلاح میکنم حق با شماست
طراحی قالب سایت شماره 5 در فتوشاپ
learning.asarayan.com/.../...
نقل قول کردن
0 #3 AlirezaNM 1396-07-04 12:29
سلام آموزش طراحی فتوشاپ از قالب یک به بعد دیگه نیست چرا؟!
نقل قول کردن
0 #2 سعید صبح خیز 1396-03-15 13:59
به نقل از sirvan:
سلام.من تمامی دستورات css رو نوشتم .اما در صفحه وبم اصلا اعمال نمیشه.نمیدونم مشکلش چیه؟شما میتونید کمکم کنید؟ باید تا فردا به استادم سایتم رو تحویل بدم.
ممنون میشم راهنماییم کنید.

سلام
یکبار کدها را از دوباره چک کنید
دمو را دانلود و از طریق سورس کد با کدهای خودتون مقایسه انجام بدید
نقل قول کردن
0 #1 sirvan 1396-03-14 16:04
سلام.من تمامی دستورات css رو نوشتم .اما در صفحه وبم اصلا اعمال نمیشه.نمیدونم مشکلش چیه؟شما میتونید کمکم کنید؟ باید تا فردا به استادم سایتم رو تحویل بدم.
ممنون میشم راهنماییم کنید.
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا