آموزش طراحی وبسایت با HTML و CSS: ایجاد یک قالب ساده و کاربردی

فهرست موضوعات در این آموزش

در این مقاله، قصد داریم به صورت گام‌به‌گام یک قالب وبسایت ساده و زیبا با استفاده از HTML و CSS ایجاد کنیم. این قالب شامل یک نوار ناوبری، بخش جستجو، محتوای اصلی و یک فرم ورود به سیستم است. هدف این آموزش، ارائه یک راهنمای جامع برای طراحی یک صفحه وب حرفه‌ای و کاربردی است.

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

🎥 تماشای آموزش ویدیویی از این لینک

با تماشای این ویدیو، می‌توانید به صورت عملی با نحوه کدنویسی و استایل‌دهی آشنا شوید و در زمان کوتاه‌تری به نتیجه دلخواه خود برسید. اگر سوالی داشتید یا به راهنمایی بیشتری نیاز داشتید، در بخش نظرات ویدیو با ما در میان بگذارید. 😊

تماشای تمام جلسات آموزش CSS

اگر می‌خواهید به تمام جلسات آموزش دسترسی داشته باشید و به یک متخصص CSS تبدیل شوید، از لینک زیر دیدن کنید:
🎥 تماشای تمام جلسات آموزش CSS از این لینک

با یادگیری این تکنیک‌ها، شما نه تنها وب‌سایت‌های زیباتری طراحی خواهید کرد، بلکه زمان توسعه خود را نیز به طور چشمگیری کاهش می‌دهید. همین حالا شروع کنید و تفاوت را احساس کنید! 🚀

اگر سوالی دارید یا به راهنمایی بیشتری نیاز دارید، در بخش نظرات با ما در میان بگذارید. 😊

امیدواریم این آموزش برای شما مفید بوده باشد. موفق باشید! 🚀

۱. ساختار کلی HTML

۱.۱. تنظیمات اولیه صفحه

در ابتدا، ساختار اصلی صفحه HTML را ایجاد می‌کنیم. این بخش شامل تنظیمات پایه‌ای مانند زبان صفحه، کدگذاری UTF-8 و اتصال به فایل CSS است.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>طراحی وبسایت</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <!-- محتوای صفحه -->
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>طراحی وبسایت</title>

</head>

<body>

</div>

</body>

</html>

dir=”rtl”: جهت صفحه را راست‌چین می‌کند.
meta viewport: برای نمایش صحیح صفحه در دستگاه‌های مختلف.
link rel=”stylesheet”: اتصال به فایل CSS برای استایل‌دهی.

آموزش ساخت فرم ورود/ثبت نام سه بعدی با HTML و CSS پروژه محور رایگان

یک آموزش جذاب دیگه!

۱.۲. نوار ناوبری (Navbar)

نوار ناوبری شامل لوگو، منوی لینک‌ها و یک بخش جستجو است.

<div class="navbar">
    <div class="logo">
        <h2>پاسخ وردپرس</h2>
    </div>
    <ul class="list">
        <li><a href="#">خانه</a></li>
        <li><a href="#">درباره ما</a></li>
        <li><a href="#">خدمات</a></li>
        <li><a href="#">طراحی</a></li>
        <li><a href="#">تماس با ما</a></li>
    </ul>
    <div class="search">
        <input type="text" placeholder="متن خود را تایپ کنید...">
        <a href="#"><button>جستجو</button></a>
    </div>
</div>

<h2>پاسخ وردپرس</h2>

</div>

<li><a href="#">درباره ما</a></li>

<li><a href="#">خدمات</a></li>

<li><a href="#">طراحی</a></li>

</ul>

<a href="#"><button>جستجو</button></a>

</div>

div.logo: بخش لوگو سایت.
ul.list: لیستی از لینک‌های منو.
div.search: بخش جستجو با یک input و دکمه.

۱.۳. محتوای اصلی

این بخش شامل یک عنوان بزرگ، توضیحات و یک دکمه CTA (Call To Action) است.

<div class="content">
    <div class="wrap-content">
        <h1>
            طراحی وب سایت و <br>
            <span>توسعه</span> <br>
            دوره های آموزشی
        </h1>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم...</p>
        <button><a href="#">به ما بپیوندید</a></button>
    </div>
</div>

<h1>

طراحی وب سایت و <br>

<span>توسعه</span> <br>

دوره های آموزشی

</h1>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم...</p>

<button><a href="#">به ما بپیوندید</a></button>

</div>

h1: عنوان اصلی صفحه.
span: برای تغییر رنگ کلمه “توسعه”.
button: دکمه‌ای برای دعوت کاربر به اقدام.

آموزش گام به گام طراحی منوی واکنشگرا با HTML و CSS – پروژه عملی منوی جانبی

یک آموزش جذاب دیگه!

۱.۴. فرم ورود به سیستم

فرم ورود شامل فیلدهای ایمیل و رمز عبور، دکمه ورود و لینک‌های ورود با شبکه‌های اجتماعی است.

<div class="form">
    <h2>ورود به سیستم</h2>
    <input type="text" placeholder="ایمیل خود وارد کنید">
    <input type="text" placeholder="رمز خود را وارد کنید">
    <button class="btn"><a href="#">ورود</a></button>
    <div class="link">
        حساب کاربری ندارید؟ <br>
        <a href="#">ثبت نام کنید</a>
    </div>
    <p>ورود با</p>
    <div class="icons">
        <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
        <a href="#"><ion-icon name="logo-google"></ion-icon></a>
        <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
    </div>
</div>

<h2>ورود به سیستم</h2>

حساب کاربری ندارید؟ <br>

</div>

</div>

input: فیلدهای ورودی برای ایمیل و رمز عبور.
button.btn: دکمه ورود.
div.icons: آیکون‌های شبکه‌های اجتماعی.

۲. استایل‌دهی با CSS

۲.۱. تنظیمات پایه و فونت

ابتدا فونت و تنظیمات اولیه را اعمال می‌کنیم.

@font-face {
  font-family: "iran-s";
  src: url("fonts/IRANSansWeb.woff") format("woff"),
       url("fonts/IRANSansWeb.ttf") format("truetype");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "iran-s";
}

@font-face {

font-family: "iran-s";

src: url("fonts/IRANSansWeb.woff") format("woff"),

url("fonts/IRANSansWeb.ttf") format("truetype");

}

* {

margin: ;

padding: ;

box-sizing: border-box;

font-family: "iran-s";

}

@font-face: تعریف فونت اختصاصی.
box-sizing: border-box: برای مدیریت اندازه‌ها و حاشیه‌ها.

۲.۲. پس‌زمینه و نوار ناوبری

پس‌زمینه صفحه و استایل‌دهی نوار ناوبری.

.main {
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 50%),
              url("1.jpg");
  background-position: center;
  background-size: cover;
  height: 100vh;
}
.navbar {
  width: 90%;
  max-width: 1200px;
  height: 75px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main {

width: 100%;

background: linear-gradient(to top, rgba(, , , 0.5) 50%, rgba(, , , 0.5) 50%),

url("1.jpg");

background-position: center;

background-size: cover;

height: 100vh;

}

.navbar {

width: 90%;

max-width: 1200px;

height: 75px;

margin: auto;

display: flex;

align-items: center;

justify-content: space-between;

}

background: پس‌زمینه با گرادینت و تصویر.
display: flex: برای چینش افقی عناصر نوار ناوبری.

آموزش ساخت منوی متحرک با HTML و CSS برای مبتدیان

یک آموزش جذاب دیگه!

۲.۳. استایل‌دهی لینک‌ها و جستجو

استایل‌دهی لینک‌های منو و بخش جستجو.

ul.list li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: 0.4s ease-in-out;
}
ul.list li a:hover {
  color: #ff7200;
}
.search input {
  height: 40px;
  background: transparent;
  border: 1px solid #ff7200;
  color: #fff;
  font-size: 16px;
  padding: 10px;
}

ul.list li a {

text-decoration: none;

color: #fff;

font-weight: bold;

transition: 0.4s ease-in-out;

}

ul.list li a:hover {

color: #ff7200;

}

.search input {

height: 40px;

background: transparent;

border: 1px solid #ff7200;

color: #fff;

font-size: 16px;

padding: 10px;

}

transition: برای ایجاد افکت هنگام هاور شدن.
border: استایل کادر جستجو.

۲.۴. استایل فرم ورود

استایل‌دهی فرم ورود و دکمه‌ها.

.form {
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.8) 50%);
  width: 380px;
  border-radius: 10px;
  padding: 25px;
}
.form h2 {
  color: #ff7200;
  font-size: 22px;
  background-color: #fff;
  border-radius: 10px;
  padding: 8px;
}
.form input {
  width: 100%;
  height: 35px;
  background: transparent;
  border-bottom: 1px solid #ff7200;
  color: #fff;
  font-size: 15px;
  margin-top: 30px;
}

.form {

text-align: center;

background: linear-gradient(to top, rgba(, , , 0.8) 50%, rgba(, , , 0.8) 50%);

width: 380px;

border-radius: 10px;

padding: 25px;

}

.form h2 {

color: #ff7200;

font-size: 22px;

background-color: #fff;

border-radius: 10px;

padding: 8px;

}

.form input {

width: 100%;

height: 35px;

background: transparent;

border-bottom: 1px solid #ff7200;

color: #fff;

font-size: 15px;

margin-top: 30px;

}

border-radius: برای گرد کردن گوشه‌ها.
background: linear-gradient: پس‌زمینه نیمه‌شفاف.

۳. جمع‌بندی

در این آموزش، یک قالب وبسایت ساده و کاربردی با استفاده از HTML و CSS ایجاد کردیم. این قالب شامل نوار ناوبری، بخش جستجو، محتوای اصلی و فرم ورود به سیستم است. با استفاده از این راهنما، می‌توانید یک صفحه وب حرفه‌ای و جذاب طراحی کنید.

اگر سوالی دارید یا به راهنمایی بیشتری نیاز دارید، خوشحال می‌شویم کمک کنیم! 😊🚀

میانگین رتبه 5/5 تعداد رای : 1

آموزش طراحی وبسایت با HTML و CSS: ایجاد یک قالب ساده و کاربردی