آموزش کاربردی طراحی وب (درس 1)

مفاهیم طراحی وب

تعداد بازدید : 7133

تاریخ و ساعت انتشار : شنبه 21 فروردین 1395 00:51

در این سری درس ها ما قصد داریم آموزش طراحی وب را از حالت تئوری بیرون آورده و بصورت کاربردی جلو ببریم. برای همین منظور ، ما پروژه ای را برای خود تعریف می کنیم و شروع به طراحی آن در html و css می کنیم. این روش یادگیری بی شک باعث خواهد شد تا ریزه کاری ها و نکات مهم طراحی وب برای شما باز شود. این آموزش ها برای سطح متوسط در نظر گرفته شده است. یعنی اینجانب با این فرض این آموزش ها را در پیش می گیرم که شما در رابطه با html و css آشنایی مقدماتی را داشته باشید. در درس یک ما قصد داریم شکل زیر را با استفاده از html و css ایجاد کنیم:

به نظر سخت نمی آید. اولین گام ایجاد سند html می باشد.

HTML

<html>
<body>
    <div class="BigDiv">
    </div>
	<div class="parent">
		<div class="child1">
		</div>
		<div class="child2">
		</div>
	</div>
</body>
</html>

کلاس ها را مشاهده می کنید : اولین div با کلاس BigDiv مشخص شده است که به مستطیل بزرگ با عرض 400 اشاره می کند. دومین div با کلاس parent مشخص شده است که دو مربع کوچک را در بر میگیرد. سومین و چهارمین div که با کلاس های child1 و child 2 مشخص شده اند درون div با کلاس parent قرار گرفته اند. حال نوبت آن رسیده است تا با css به تراز کردن ، ست کردن اندازه ها و مشخص کردن مکان هر شی بپردازیم:

CSS


.BigDiv
        {
            border:2px solid #000;
            width: 396px;
            height: 180px;

        }
        .parent
        {
            width:  400px;
            height: 180px;
            margin-top:15px;
        }
        .child1 , .child2
        {
            border:2px solid #000;
            width: 176px;
            height: 180px;
            float:left;
        }
        .child1
        {
            margin-right:20px;
        }
        .child2
        {
            margin-left:20px;
        }

همان طور که مشخص هست ما عرض مستطیل بزرگ بالای صفحه (BigDiv) را برابر 396px قرار داریم و چون عرض حاشیه این مستطیل برابر 2px می باشد و این حاشیه هم در راست و هم در چپ مستطیل قرار دارد جمعا عرض مستطیل به 400px می رسد. طول نیز چون در تصویر مشخص نشده است ما در اینجا بصورت اختیاری آن را 180px قرار دادیم. سپس شروع به استایل بندی دو مربع پایین می کنیم. قبل از این کار باید کلاسی که این دو مربع را در خود جای داده یعنی parent را استایل ببندیم.این کلاس چون دارای حاشیه و پس زمینه نیست دیده نمی شود.عرض آن را 400px و طولش را 180px قرار دادیم. div با کلاس parent در زیر div با کلاس BigDiv قرار می گیرد و این پیشفرض صفحات html است. وقتی شما چند div در صفحه قرار میدهید آن ها بطور پیش فرض زیر هم قرار میگیرند. ما در کلاس parent اعلان margin-top:15px را بکار بردیم. این دستور فاصله parent و BigDiv را 15px قرار میدهد. کلاس child1 و child2 را نیز استایل می دهیم . عرض آن ها را 176px قرار می دهیم تا با حاشیه ها به 180 برسد. با قرار دادن float:left دو مربع از حالت زیر هم بودن در می آید و در کنار هم قرار میگیرند. در آخر برای child1 اعلان margin-right:20px و برای child2 اعلان margin-left:20px را قرار می دهیم.با این دستورات مربع سمت راست در سمت راست ترین ناحیه و مربع سمت چپ در چپ ترین ناحیه قرار می گیرند. اکنون ما شکل مورد نظر را با کد های html و css ایجاد کردیم. دانلود درس 1 در یک فایل زیپ

دانلود فایل PDF مقاله

نظر شما