روش طراحی سایت ( قسمت دوم )

آموزش طراحی سایت ( قسمت دوم )

مراحل طراحی سایت

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

یک فایل html  شامل۲  قسمت کلی می باشد.body و head.

<html>

<head>

</head>

<body>

</body>

</html>

این قطعه کد حداقل ترین کدهای مورد نیاز  برای یک قالب html است. قسمت headدر واقع پشت پرده سایت به حساب می آید و مواردی است که یک کاربر قادر به دیدن آن نیست. اما در قسمتbody مواردی نوشته می شود که کاربر می تواند آن را ببیند همانند منو، باتن، فرم ها و…

در ادامه می بایست شما برای صفحه سایتتان یک عنوان تعریف کنید. قطعه کد مربوط به عنوان در قسمت در ثسمت headنوشته می شود و به صورت زیر است:

</title> عنوان سایت<title>

اگر سایت شما یک سایت فارسی زبان است باید کد مربوط به پشتیبانی زبان فارسی را در قسمت head آن وارد کنید.

<“meta charset=”utf-8>

تا اینجای کار شما یک صفحه سفید دارید که عنوان آن “عنوان سایت است” می باشد. فرض کنید شما می خواهد یک مربع قرمز رنگ د صفحه درست کنید. مربع قرمز چیزی است که کاربر شما می تواند آن را ببیند پس باید در قسمت body نوشته شود. برای درس کردن هر چیزی شما می بایست آن را در داخل تگ باز و بسته دیو قرار دهید البته لازم به ذکر است که المان هایی همانند درست کردن یک فرم و یا یک button نیازی به تگ دیو ندارد.

<div>***</div>

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

برای درست کردن یک فایل  css شما باید یه editor همانند نوت پد و یا دریم باز کرده و داخل آن بنوییسید:

Body

{ خصوصیات کلی سایت..همانند فونت..رنگ پس زمنیه..رنگ لینک ها.. }

برای نوشتن ویژگی ها در css باید آن ها را به صورت مقابل بنویسید.

 به عنوان مثال background-color:red;    یا    font-size:12px;

البته باید بدانید که همینطوری نمی توانید ویژگی های را بنویسید باید یک ارتباطی را بین html و css برقرار کنید. به عنوان مثال مرورگر باید تشخیص بدهد که رنگ قرمز شما برای کدام مربع است.

<html>

<head>

<title> اموزش طراحی سایت</title>

<link href=” css/style.css” type=” text/css” rel=” stylesheet”>

</head>

<body>

<div class=”box”></div>

</body>

</html>

این قسمت کد مربوط به html است که یک مربع با کلاس box دارد. لام به ذکر است که شما می توانید به جای کلاس از آیدی استفاده کنید. کلاس و آیدی برای شناساندن ویژگی ها به قسمت مربوطه می باشد. معمولا آیدی زمانی استفاده می شود که فقط یه المان از آن استفاده می کند. حال که کد html آن را نوشتید باید یک فایل css را هم بنویسید. به این صورت که

.box

{

Background-color:red;

Width:100px;

Height:100px;

}

شما تا الان یک مربع قرمز رنگ با ابعاد ۱۰۰*۱۰۰ پیکسل دارد. لازم به ذکر است که بدانید اگر شما مربع خود را با کلاس نشان داده اید باید در کد css آن را به علامت “.” و نام کلاس آن را تشخیص دهید اما اگر با آیدی این کار را کرده اید به جای علامت “.” می بایست آن را با علامت# نمایش دهید.

مطالب مرتبط

نظر خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *