آموزش طراحی وب سایت شیرین عسل(بخش سوم) با Html و CSS

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

head


با بخش سوم طراحی قالب سایت شیرین عسل در خدمت شما هستم .

در بخش اول پوسته سایت در محیط فتوشاپ به صورت کاملا تصویری طراحی و در بخش دوم قسمت هدر قالب با HTML .CSS شبیه سازی شد .

امروز می خواهم منوی سمت راست قالب و موقعیت Content را با HTML .CSS برای شما طراحی کنم .یک سری تغییرات هم بر روی منوی سمت راست اعمال کرده ام که در ادامه برای شما به طور کامل توضیح میدهم .

برای شروع فتوشاپ و ویرایشگر متن برای کد نویسی قالب را اجرا کنید .

 

آموزش طراحی قسمت main-content
با توجه به دو بخش قبلی نوبت میرسه به طراحی منوی سمت راست و متن وسط صفحه . برای انجام اینکار من یک موقعیت در صفحه index.html به نام main-content ایجاد میکنم که اول عرض و نحوه قرار گیری آن را در صفحه با css مشخص کرده باشم . یعنی هم منوی سمت راست هم متن وسط صفحه باید زیر مجموعه main-content قرار بگیرند که دیگر نیازی نباشه برای هر کدام از آنها مشخصات در فایل CSS وارد کنم . اجازه بدید از توضیحات اضافی پرهیز کنم و عملی این قسمت را به شما نشان بدهم .
ابتدا فایل index.html را باز کرده و یک id='main-content به آن اضافه میکنم . قبل از اینکه کد مورد نظر را اضافه کنم اجازه بدهید یک نکته خیلی خیلی مهم را برای شما توضیح بدهم  .
»»» نکته خیلی مهم : ببینید هر قالب نسبت به طرحی که داره ممکنه 1000 خط کد داشته باشه . بعد از اینکه شما قالب را طراحی میکنید و میدید به مشتری ، مشتری بعد از یکسال به شما زنگ میزنه میگه می خواهم یک سری تغییرات تو فایل صفحه اصلی بدهم ، وارد قالب سایت می شوید و می بینید که 1000 خط کد نوشتید و باید ساعت ها بشینید و کدها را بررسی کنید تا متوجه شوید که کد منو تو کدام قسمت قرار داره یا منوهای فوتر کجاست . یک کاری که تمام برنامه نویس ها انجام میدهید قرار دادن کامنت در بین متن هست . کامنت چی هست ؟ یعنی بین خط شروع تگ هدر و خط پایان با استفاده از علامت های <-- TXT --!>  مشخص کنیم که این قسمت مربوط به کدهای بالای صفحه قالب می باشد . از خط 1 شروع و در خط 101 خاتمه یافته است .

من اینکار را در فایل index.html انجام داده ام مشاهده کنید

shirin-asal-1

1. من id='main-content را به فایل index.html اضافه کردم. (به طور کل من 3 position مستقل با نام های <div id='header' / <div id='main-content'>/<div id='footer'> دارم . div id=header را که دیروز اضافه کرده بودم ) برای اینکه جای سوال برایتون پیش نیاد که این تگ باید کجا اضافه بشه من تگ اول را می بندم تا بهتر متوجه بشوید .

shirin-asal2.1

shirin-asal2

فایل Css را باز میکنم و عرض را برابر با 900 پیکسل قرار میدهم . بوسیله ویژگی margin مشخص میکنم که قسمت main-contentباید در وسط صفحه قرار بگیرد . ارتفاع هم 800 فعلا در نظر میگیرم تا اگر بعد احتیاج شد تغییرش بدهم

shirin-asal3

حالا باید دو قسمت اصلی منوی سمت راست و content را بین id=main-content قرار بدهم .

shirin-asal4

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

shirin-asal5

الان اگر قالب را داخل مرورگر مشاهده کنید هیچ تغییری نمایش داده نمی شود چون هنوز هیچ متن یا منویی به این قسمت اضافی نشده است .

بسیار خوب اجازه بدهید لینکها را در فایل index.html اضافه کنم .

shirin-asal6

خروجی بعد از اضافه کردن منو

shirin-asal7

تغییرات منوی اضافه شده در فایل  css . این قسمت را کم کم کدهاشو اضافه میکنم تا دقیقا متوجه بشید که هر دستور چه تغییراتی اعمال میکنه
دستور اول رنگ منو را تغییر میدهد . قسمت دوم ضخامت منو را تعیین می کند و قسمت سوم فاطله لینکها از طرفین (بالا . راست . پایین . چپ )

shirin-asal8

shirin-asal9

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

shirin-asal10

shirin-asal11

در این قسمت خط زیر لینکها با رنگ لینکها را تغییر میدهم

shirin-asal12

shirin-asal13

می خواهم وقتی ماوس روی لینکها میره رنگش تغییر بکنه به کدهای زیر توجه کنید

shirin-asal14

shirin-asal15

با توجه به تغییراتی که در مراحل بالا اعمال کردم یک سری لینک دیگر به صفحه index.html اضافه میکنم

shirin-asal16

shirin-asal16

طراحی قسمت Content
id='content را در مراحل ابتدایی به صفحه index.html اضافه کردم . حالا باید موقعیت قرارگیری آن در صفحه ، عرض و فاصله ای که باید از طرف راست داشته باشد را در فایل css وارد کنم . به کد زیر توجه کنید .

shirin-asal18

بعد از اینکه مشخصات id='content را در فایل css مشخص کردم . با استفاده از فایل index.html قسمت اول صفحه را وارد میکنم . اول عنوان صفحه

shirin-asal19

دوم تاریخ و اسم نویسنده

shirin-asal20

سوم عکس همراه با متن و لینک ادامه مطلب را اضافه میکنم. کمی شاید شلوغ شده باشه ولی با کمی دقت متوجه می شوید .

shirin-asal21

نوبت میرسه به تغییرات فایل css

اول عنوان صفحه

shirin-asal22

shirin-asal23

اسم نویسنده همراه با تاریخ

shirin-asal24

shirin-asal25

متن همراه با عکس. متن را تغییر دادم بدلیل اینکه مشکل تایپی داشت

shirin-asal26

shirin-asal27

با توجه به آموزش بالا من یک قسمت دیگر زیر قسمت اول اضافه میکنم . تنها تغییری که در قسمت دوم میدهم اضافه کردن متن یا فاصله بین متون و اسم تصویر دوم هست

shirin-asal28

 

دموی قسمت دوم

آخرین بروز رسانیسه شنبه, 12 شهریور 1392 16:15

نوشتن دیدگاه

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

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

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