پروژه طراحی وب سایت

هدایت عباسی طراحی سایت

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

پروژه کامل طراحی وب سایت

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

اگر پروژه پیچیده باشد افراد مبتدی با مشکل مواجه می شوند. پس ابتدا با این پروژه شروع نمایید و سپس به سراغ پروژه های حرفه ای تر می رویم.

کد html پروژه طراحی وب سایت

در بخش زیر کد html پروژه طراحی وب سایت را مشاهده می کنید. یک فایل بنام topsite98 با پسوند html ایجاد نمایید (topsite98.html) سپس یک فایل بنام style.css ایجاد نمایید و کدهای زیر را در آن قرار دهید و اجرا نمایید تا نتیجه را ببینید.

دقت نمایید بایستی دو فایل html و css در کنار هم باشند.

در پروژه طراحی قالب برای متن فارسی از meat و charset با مقدار utf-8 استفاده کرده ایم.

این پروژه ریسپانسیو است چون از row و col ها استفاده کرده ایم. معمولا در حالت ریسپانسیو عرض صفحه به 12 قسمت تقسیم میشود.

ما در 3 ستون آن منو قرار داده ایم ، در 6 قسمت متن اصلی و در 3 قسمت یک aside قرار داده ایم.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
</head>
<body>

<div class="header">
<h1>تاپ سایت 98</h1>
</div>

<div class="row b1">
<div class="col-3 col-s-12">
<div class="aside">
<h2>ورد</h2>
<p>آموزش ورد از تاپ سایت 98 قصد داریم به بحث تنظیمات جدول در ورد 2016 بپردازیم</p>
<h2>اینترنت</h2>
<p>آموزش ورد از تاپ سایت 98 قصد داریم به بحث تنظیمات جدول در ورد 2016 بپردازیم</p>
<h2>کامپیوتر</h2>
<p>آموزش ورد از تاپ سایت 98 قصد داریم به بحث تنظیمات جدول در ورد 2016 بپردازیم</p>
</div>
</div>

<div class="col-6 col-s-9">
<h1>آموزش رایگان</h1>
<p>در این بخش از آموزش ورد از تاپ سایت 98 قصد داریم به بحث تنظیمات جدول در ورد 2016 بپردازیم. این آموزش تصویری می باشد تا براحتی یاد بگیرید. ابتدا یک جدول را ایجاد می کنیم تا به بحث تنظیمات آن برسیم و همه را</p>
</div>

<div class="col-3 col-s-3 menu">
<ul>
<li>آموزش ویندوز</li>
<li>آموزش ورد</li>
<li>آموزش اکسل</li>
<li>آموزش اینترنت</li>
</ul>
</div>
</div>

<div class="footer">
<p>تاپ سایت 98 با آموزش های رایگان کامپیوتر و برنامه نویسی</p>
</div>
</body>
</html>

کد css پروژه طراحی وب سایت

در زیر کد css پروژه طراحی وب سایت را مشاهده می کنید.

آن را باید در فایل style.css قرار دهید در بالا با تگ link آن را به فایل html متصل کرده ایم.

با دستور float عناصر را در کنار هم قرار می دهیم .

با کلاس row می توانیم عناصر را بخش بندی کنیم مثلا header ، main و فوتر .

* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}

html {
font-family: "Lucida Sans", sans-serif;
direction: rtl;
font-weight: bold;
}

.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-weight: bold;
font-size: 19px;
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc; color: #ffffff; text-align: center;
font-size: 15px; padding: 15px; }
.b1{
min-height: 450px;
}
/* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;} }
@media only screen and (min-width: 768px) {
/* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;}
.col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;}
.col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;}
.col-9 {width: 75%;} .col-10 {width: 83.33%;}
.col-11 {width: 91.66%;} .col-12 {width: 100%;}
}