در مقالات قبلی مقدماتی از HTML و CSS به شما عزیزان توضیح داده شد. در این مقاله قصد داریم یک قالب ساده با استفاده از تگ ها و تنظیماتی که قبلا آموزش داده ایم را طراحی کنیم. همچنین در این مقاله نحوه ساخت و توسعه پروژه در نرم افزار Visual Sudio Code آموزش داده می شود.
مقدمات ساخت یک پروژه
برای ساخت این پروژه از نرم افزار ویژوال استودیو کد (Visual Studio Code) استفاده خواهیم و آموزش های بعدی نیز در محیط همین نرم افزار انجام خواهد شد. برای ساخت پروژه ابتدا باید یک پوشه برای آن ایجاد کرده و سپس پوشه ایجاد شده را در نرم افزار VS Code باز کنید.
در صورتیکه برای نصب ویژوال استودیو کد نیاز به راهنمایی داشته باشید می توانید در کانال یوتیوب ما نحوه نصب و تنظیم کردن نرم افزار Visual Studio Code را مشاهده نمایید.
پیشنهاد می شود هنگام ساخت پوشه پروژه از کاراکترهای انگلیسی برای نامگذاری استفاده شود و شروع آن با حرف بزرگ و نام تعیین شده بدون فاصله باشد.
پس از ایجاد پوشه پروژه نرم افزار ویژوال استودیو کد را اجرا کرده و از منوی File گزینه Open Folder را انتخاب کنید.
در پنجره باز شده پوشه مورد نظر را انتخاب کرده و روی دکمه Select Folder کلیک کنید.
به این ترتیب پوشه مورد نظر در نرم افزار VS Code باز می شود. در صورتیکه محتوای پوشه را مشاهده نمی کنید می توانید روی گزینه Explorer کلیک کنید.
برای ساخت فایل جدید روی گزینه New File کلیک کرده و نام فایل را index.html تعیین کنید.
پس از ساخت فایل اصلی پروژه می توانید کدهای مور نظر را درون آن بنویسید.
قالب صفحه ای که قصد داریم آن را طراحی کنیم به شکل زیر خواهد بود.
بدین منظور ابتدا باید Div های مورد نظر را به صفحه اضافه کرده و استایل مورد نیاز را به آنها اعمال کنیم. بنابر این ابتدا کدهای اولیه را به صفحه اضافه می کنیم.
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
</head>
<body>
</body>
</html>
در طراحی قالب سایت اکثر اوقات یک کادر اصلی (main) درون تگ body قرار داده سپس سایر عناصر را درون آن اضافه می کنیم تا چیدمان سایر عناصر نسبت به آن تعیین شود.
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
</head>
<body>
<div id="main">
</div>
</body>
</html>
در مرحله بعد باید یک استایل اولیه به آن اختصاص دهیم تا قابل مشاهده باشد.
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
<style>
#main{
width: 980px;
height: 800px;
background-color: lightblue;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
در صورتیکه که کدهای صفحه را ذخیره و آن را اجرا کنید خروجی به شکل زیر خواهد بود.
حال باید یک Div برای بخش بالای صفحه (header) ایجاد کرده و استایل آن را نیز به شکل زیر اعمال کنیم.
<body>
<div id="main">
<div id="header"></div>
</div>
</body>
<style>
#main{
width: 980px;
height: 800px;
background-color: lightblue;
margin: 0px auto;
}
#header{
width: 100%;
height: 150px;
background-color: #FFACAC;
}
</style>
پس از افزودن header سایت نوبت به کادرهای سمت چپ و راست می رسد که می بایست در مجاورت هم قرار گیرند. بدین منظور تو div به صفحه اضافه کرده و توسط دستور float آنها را در مجاورت هم قرار می دهیم.
<div id="main">
<div id="header"></div>
<div id="leftSide"></div>
<div id="rightSide"></div>
</div>
<style>
#main{
width: 980px;
height: 800px;
background-color: lightblue;
margin: 0px auto;
}
#header{
width: 100%;
height: 150px;
background-color: #FFACAC;
}
#leftSide{
width: 75%;
height: 500px;
float: left;
background-color: #FFEBB4;
}
#rightSide{
width: 25%;
height: 500px;
float: right;
background-color: #FFBFA9;
}
</style>
هنگامی که عناصر را با استفاده از دستور float شناور می کنیم تا در کنار یکدیگر قرار گیرند، عناصر بعدی آنها را نادیده می گیرند. برای از بین بردن اثر float، بعد از آخرین عنصری که به آن float اختصاص داده ایم یک Div اضافه کرده و یک استایل داخلی به شکل زیر به آن اعمال می کنیم:
<div id="main">
<div id="header"></div>
<div id="leftSide"></div>
<div id="rightSide"></div>
<div style="clear: both;"></div>
</div>
در ادامه باید کادر پایینی قالب (footer) را اضافه کنیم.
<div id="main">
<div id="header"></div>
<div id="leftSide"></div>
<div id="rightSide"></div>
<div style="clear: both;"></div>
<div id="footer"></div>
</div>
<style>
#main{
width: 980px;
height: 800px;
background-color: lightblue;
margin: 0px auto;
}
#header{
width: 100%;
height: 150px;
background-color: #FFACAC;
}
#leftSide{
width: 75%;
height: 500px;
float: left;
background-color: #FFEBB4;
}
#rightSide{
width: 25%;
height: 500px;
float: right;
background-color: #FFBFA9;
}
#footer{
width: 100%;
height: 100px;
background-color: #FFACAC;
}
</style>
پس از تکمیل قالب به قسمت CSS مراجعه کرده و تنظیمات main را به شکل زیر اصلاح می کنیم تا اولا بک گراند آن برداشته شود، ثانیا ارتفاع آن به اندازه محتوا تنظیم شود.
#main{
width: 980px;
height: auto;
margin: 0px auto;
}
کدهای نهایی این تمرین به شکل زیر خواهد بود:
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
<style>
#main {
width: 980px;
height: auto;
margin: 0px auto;
}
#header {
width: 100%;
height: 150px;
background-color: #ffacac;
}
#leftSide {
width: 75%;
height: 500px;
float: left;
background-color: #ffebb4;
}
#rightSide {
width: 25%;
height: 500px;
float: right;
background-color: #ffbfa9;
}
#footer {
width: 100%;
height: 100px;
background-color: #ffacac;
}
</style>
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="leftSide"></div>
<div id="rightSide"></div>
<div style="clear: both"></div>
<div id="footer"></div>
</div>
</body>
</html>
در صورتیکه تمرین فوق را به شکل صحیح انجام داده باشید خروجی به شکل زیر خواهد بود.
