ورود به پنل کاربری

طراحی قالب سایت با HTML، CSS و Tailwind CSS

  • فریبا محمدی
  • خرداد 1405
  • آموزش جنگو
  • 25 دقیقه

تا اینجا با ساختار اصلی Django، URL، View و Template آشنا شدیم و چند صفحه ساده برای پروژه آزمون پلاس ساختیم. در این بخش قرار است ظاهر سایت را به شکل حرفه‌ای طراحی کنیم. در پایان این بخش، سایت آزمون پلاس یک قالب کامل خواهد داشت که شامل قسمت‌های هدر، فوتر و … است و صفحات مختلف سایت همه می‌توانند از این قالب اصلی استفاده کنند.

در این بخش از سه فناوری استفاده می‌کنیم که در ادامه به توضیح هریک خواهیم پرداخت:

  • HTML برای ساختار صفحه
  • CSS برای ظاهر و طراحی
  • Tailwind CSS برای طراحی سریع و حرفه‌ای رابط کاربری

فهرست مطالب

HTML چیست؟

HTML زبان اصلی ساختار صفحات وب است و مشخص می‌کند که هر قسمت از صفحه چه نقشی دارد. برای مثال:

<h1>آزمون پلاس</h1>
<p>مرجع آموزش و آزمون</p>
<a href="#">مشاهده دوره‌ها</a>

در این مثال h1 عنوان اصلی، p یک پاراگراف و a یک لینک است.

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

CSS چیست؟

CSS برای طراحی ظاهر صفحات وب ساخته شده با HTML استفاده می‌شود. با CSS می‌توانیم مواردی مانند این‌ها را کنترل کنیم:

  • رنگ
  • اندازه متن
  • فاصله‌ها
  • حاشیه‌ها
  • عرض و ارتفاع
  • نحوه قرار گرفتن عناصر
  • طراحی واکنش‌گرا

برای مثال:

h1 {
    color: red;
    font-size: 32px;
}

این کد رنگ عنوان را قرمز و اندازه آن را ۳۲ پیکسل می‌کند.

Tailwind CSS چیست؟

Tailwind CSS یک CSS Framework است که مجموعه‌ای از کلاس‌های آماده برای طراحی رابط کاربری در اختیار ما قرار می‌دهد. در CSS معمولی ممکن است بنویسیم:

.title {
    color: red;
    font-size: 32px;
    font-weight: bold;
}

و سپس:

<h1 class="title">
    آزمون پلاس
</h1>

اما در Tailwind می‌توانیم بسیاری از این ویژگی‌ها را مستقیماً با کلاس‌های آماده روی عنصر HTML قرار دهیم:

<h1 class="text-3xl font-bold text-red-600">
    آزمون پلاس
</h1>

در این مثال:

text-3xl       → اندازه متن
font-bold      → ضخیم کردن متن
text-red-600   → رنگ متن

به این کلاس‌ها Utility Classes گفته می‌شود.

چرا از Tailwind استفاده می‌کنیم؟

Tailwind به ما اجازه می‌دهد رابط کاربری را سریع‌تر طراحی کنیم و بسیاری از ویژگی‌های CSS را مستقیماً در HTML کنترل کنیم. مزیت مهم دیگر این است که برای طراحی قسمت‌های مختلف سایت می‌توانیم از ترکیب همین Utility Classها استفاده کنیم.

Tailwind هنگام ساخت CSS، فایل‌های HTML و Template را بررسی می‌کند و CSS مربوط به کلاس‌هایی را که در پروژه استفاده شده‌اند تولید می‌کند. در این پروژه از Tailwind CSS نسخه ۴ استفاده می‌کنیم. 

اتصال Tailwind به پروژه Django

از آنجا که صفحات سایت ما Django Template هستند، بهترین محل برای قرار دادن Tailwind، فایل base.html است. فایل base.html را باز کنید. در قسمت <head>، اسکریپت Tailwind را قرار دهید:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

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

				
					<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>
        {% block title %}
        آزمون پلاس
        {% endblock %}
    </title>

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body>

    {% block content %}
    {% endblock %}

</body>

</html>

از آنجا که تمام صفحات سایت از base.html ارث‌بری می‌کنند، Tailwind نیز در تمام این صفحات در دسترس خواهد بود.

اولین آزمایش Tailwind

برای اطمینان از اینکه Tailwind به‌درستی به پروژه متصل شده است، فایل home.html را باز کنید. محتوای آن را فعلاً به شکل زیر قرار دهید:

 

				
					{% extends 'base.html' %}

{% block title %}
صفحه اصلی
{% endblock %}

{% block content %}

<h1 class="text-4xl font-bold text-red-600">
    آزمون پلاس
</h1>

{% endblock %}

اگر صفحه اصلی را در مرورگر باز کنید، عبارت «آزمون پلاس» باید به صورت بزرگ، ضخیم و قرمز نمایش داده شود.

در این مثال از سه کلاس Tailwind استفاده کرده‌ایم. text-4xl اندازه متن را تعیین می‌کند. font-bold متن را ضخیم می‌کند. و text-red-600 رنگ متن را تعیین می‌کند. این کلاس‌ها نمونه‌ای از Utility Classهای Tailwind هستند.

ساخت Header سایت

حالا طراحی واقعی سایت آزمون پلاس را شروع می‌کنیم. اولین بخش سایت، قسمت بالای صفحه است.

در این قسمت دو مفهوم را از هم جدا می‌کنیم:

Header

کل ناحیه بالای سایت است.

Navbar

منوی اصلی سایت است که درون Header قرار می‌گیرد.

ساختار موردنظر ما:

Header
└── Navbar
    ├── لوگو
    ├── صفحه اصلی
    ├── دوره‌ها
    ├── درباره ما
    └── ورود / ثبت‌نام

در صفحه اصلی آزمون پلاس فعلاً Sidebar نداریم. Sidebar را در صورت نیاز برای بعضی صفحات خاص مانند صفحه دوره یا بخش آموزش طراحی خواهیم کرد.

ساخت Navbar با Tailwind

در home.html، داخل block content، با نوشتن کدهای زیر یک Navbar ایجاد می‌کنیم :

				
					<header class="border-b border-gray-200 bg-white">

    <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">

        <div class="text-2xl font-bold text-red-600">
            آزمون پلاس
        </div>

        <div class="flex items-center gap-8">

            <a href="#" class="text-gray-700 hover:text-red-600">
                صفحه اصلی
            </a>

            <a href="#" class="text-gray-700 hover:text-red-600">
                دوره‌ها
            </a>

            <a href="#" class="text-gray-700 hover:text-red-600">
                درباره ما
            </a>

        </div>

        <a href="#"
           class="rounded-lg bg-red-600 px-5 py-2.5 text-white hover:bg-red-700">
            ورود / ثبت‌نام
        </a>

    </nav>

</header>

در اینجا چند کلاس جدید داریم.

flex عناصر را در کنار یکدیگر قرار می‌دهد.

items-center عناصر را در راستای عمودی وسط‌چین می‌کند.

justify-between بین بخش‌های مختلف فضای مناسبی ایجاد می‌کند.

gap-8 بین آیتم‌های منو فاصله ایجاد می‌کند.

px-6 فاصله افقی ایجاد می‌کند.

py-4 فاصله عمودی ایجاد می‌کند.

rounded-lg گوشه‌های عنصر را گرد می‌کند.

hover:bg-red-700 وقتی نشانگر ماوس روی دکمه قرار بگیرد، رنگ آن تغییر می‌کند.

ساخت بخش Hero

بعد از Navbar، مهم‌ترین قسمت صفحه اصلی، Hero Section است. Hero اولین بخش اصلی است که کاربر بعد از ورود به صفحه می‌بیند. کد زیر را در home.html، داخل block content، در زیر کدهای Header می‌نویسیم:

فایلهای تکمیل شده پروژه را میتوانید از انتهای همین درس دانلود کنید.

				
					<section class="bg-gray-50">

    <div class="mx-auto max-w-7xl px-6 py-24 text-center">

        <h1 class="text-4xl font-bold text-gray-900 md:text-5xl">
            یادگیری را حرفه‌ای شروع کنید
        </h1>

        <p class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600">
            آموزش برنامه‌نویسی و مهارت‌های تخصصی با محتوای کاربردی و پروژه‌محور
        </p>

        <a href="#"
           class="mt-8 inline-block rounded-lg bg-red-600 px-7 py-3 text-lg font-medium text-white hover:bg-red-700">
            مشاهده دوره‌ها
        </a>

    </div>

</section>

در اینجا از یک کلاس مهم دیگر استفاده کرده‌ایم:

md:text-5xl

حرف md نشان‌دهنده یک Breakpoint است. یعنی در صفحه‌های بزرگ‌تر، اندازه عنوان افزایش پیدا می‌کند. این یکی از پایه‌های طراحی Responsive در Tailwind است. ریسپانسیو یا واکنش‌گرا بودن یک قالب سایت، یعنی نمایش درست تمام آیتمهای موجود در یک صفحه وب، متناسب با اندازه و ابعاد دستگاه‌های مختلف مانند لپتاپ، گوشی موبایل، تبلت و … .

طراحی بخش معرفی آزمون پلاس

بعد از Hero، یک بخش کوتاه برای معرفی سایت قرار می‌دهیم:

				
					<section class="bg-white">

    <div class="mx-auto max-w-7xl px-6 py-20">

        <div class="mx-auto max-w-3xl text-center">

            <h2 class="text-3xl font-bold text-gray-900">
                آموزش برای رشد واقعی
            </h2>

            <p class="mt-5 text-lg leading-8 text-gray-600">
                آزمون پلاس بستری برای یادگیری، تمرین و ارزیابی مهارت‌هاست.
                هدف ما ارائه محتوای آموزشی کاربردی و قابل استفاده در مسیر یادگیری است.
            </p>

        </div>

    </div>

</section>

در این بخش از max-w-3xl برای محدود کردن عرض متن استفاده کرده‌ایم. محدود کردن عرض متن باعث می‌شود خطوط بیش از حد طولانی نشوند و خوانایی افزایش پیدا کند.

بخش دوره‌های آموزشی

حالا مهم‌ترین بخش سایت آموزشی را ایجاد می‌کنیم:

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

ساختار این بخش:

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

┌──────────┐  ┌──────────┐  ┌──────────┐
│ دوره ۱   │  │ دوره ۲   │  │ دوره ۳   │
│ توضیح    │  │ توضیح    │  │ توضیح    │
│ قیمت     │  │ قیمت     │  │ قیمت     │
│ مشاهده   │  │ مشاهده   │  │ مشاهده   │
└──────────┘  └──────────┘  └──────────┘

برای قرار دادن کارت‌ها در کنار یکدیگر از Grid استفاده می‌کنیم.

<section class="bg-gray-50">

    <div class="mx-auto max-w-7xl px-6 py-20">

        <div class="text-center">

            <h2 class="text-3xl font-bold text-gray-900">
                دوره‌های آموزشی
            </h2>

            <p class="mt-4 text-gray-600">
                دوره مناسب خود را انتخاب کنید.
            </p>

        </div>

        <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">

            <!-- Course Card -->

            <div class="rounded-2xl bg-white p-6 shadow-sm">

                <h3 class="text-xl font-bold text-gray-900">
                    آموزش Python
                </h3>

                <p class="mt-4 leading-7 text-gray-600">
                    یادگیری Python از پایه تا اجرای پروژه‌های کاربردی.
                </p>

                <div class="mt-6 flex items-center justify-between">

                    <span class="font-bold text-red-600">
                        500,000 تومان
                    </span>

                    <a href="#"
                       class="rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
                        مشاهده دوره
                    </a>

                </div>

            </div>

            <!-- Course Card -->

            <div class="rounded-2xl bg-white p-6 shadow-sm">

                <h3 class="text-xl font-bold text-gray-900">
                    آموزش Django
                </h3>

                <p class="mt-4 leading-7 text-gray-600">
                    ساخت وب‌سایت‌های حرفه‌ای با Django.
                </p>

                <div class="mt-6 flex items-center justify-between">

                    <span class="font-bold text-red-600">
                        700,000 تومان
                    </span>

                    <a href="#"
                       class="rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
                        مشاهده دوره
                    </a>

                </div>

            </div>

            <!-- Course Card -->

            <div class="rounded-2xl bg-white p-6 shadow-sm">

                <h3 class="text-xl font-bold text-gray-900">
                    آموزش Machine Learning
                </h3>

                <p class="mt-4 leading-7 text-gray-600">
                    آشنایی با مفاهیم و ابزارهای یادگیری ماشین.
                </p>

                <div class="mt-6 flex items-center justify-between">

                    <span class="font-bold text-red-600">
                        800,000 تومان
                    </span>

                    <a href="#"
                       class="rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
                        مشاهده دوره
                    </a>

                </div>

            </div>

        </div>

    </div>

</section>

Grid در Tailwind

قسمت مهم این کد:

<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">

است.

در اینجا:

grid

عنصر را به یک Grid تبدیل می‌کند.

gap-8

بین کارت‌ها فاصله ایجاد می‌کند.

md:grid-cols-2

در اندازه‌های متوسط، کارت‌ها را در دو ستون قرار می‌دهد.

lg:grid-cols-3

در صفحه‌های بزرگ، کارت‌ها را در سه ستون قرار می‌دهد.

در نتیجه یک ساختار Responsive خواهیم داشت:

موبایل
┌──────────┐
│ کارت ۱   │
└──────────┘
┌──────────┐
│ کارت ۲   │
└──────────┘

تبلت
┌────────┐ ┌────────┐
│ کارت ۱ │ │ کارت ۲ │
└────────┘ └────────┘

دسکتاپ
┌────────┐ ┌────────┐ ┌────────┐
│ کارت ۱ │ │ کارت ۲ │ │ کارت ۳ │
└────────┘ └────────┘ └────────┘

این یکی از دلایل مهم استفاده از Tailwind برای طراحی رابط کاربری است.

بخش ویژگی‌های آزمون پلاس

حالا سه ویژگی اصلی سایت را نمایش می‌دهیم:

<section class="bg-white">

    <div class="mx-auto max-w-7xl px-6 py-20">

        <div class="text-center">

            <h2 class="text-3xl font-bold text-gray-900">
                چرا آزمون پلاس؟
            </h2>

        </div>

        <div class="mt-12 grid gap-8 md:grid-cols-3">

            <div class="text-center">
                <h3 class="text-xl font-bold text-gray-900">
                    آموزش کاربردی
                </h3>

                <p class="mt-3 leading-7 text-gray-600">
                    تمرکز بر یادگیری مفاهیم و استفاده از آن‌ها در پروژه‌های واقعی.
                </p>
            </div>

            <div class="text-center">
                <h3 class="text-xl font-bold text-gray-900">
                    تمرین و آزمون
                </h3>

                <p class="mt-3 leading-7 text-gray-600">
                    فرصت تمرین و ارزیابی برای سنجش میزان یادگیری.
                </p>
            </div>

            <div class="text-center">
                <h3 class="text-xl font-bold text-gray-900">
                    مسیر یادگیری مشخص
                </h3>

                <p class="mt-3 leading-7 text-gray-600">
                    محتوای آموزشی منظم برای حرکت مرحله‌به‌مرحله در مسیر یادگیری.
                </p>
            </div>

        </div>

    </div>

</section>

بخش CTA

در انتهای محتوای اصلی، یک بخش دعوت به اقدام قرار می‌دهیم.

CTA مخفف:

Call To Action

است.

هدف این بخش این است که کاربر را به انجام یک اقدام مشخص دعوت کند.

<section class="bg-red-600">

    <div class="mx-auto max-w-7xl px-6 py-16 text-center">

        <h2 class="text-3xl font-bold text-white">
            یادگیری را شروع کنید
        </h2>

        <p class="mt-4 text-red-100">
            دوره مناسب خود را انتخاب کنید و مسیر یادگیری را آغاز کنید.
        </p>

        <a href="#"
           class="mt-8 inline-block rounded-lg bg-white px-7 py-3 font-medium text-red-600 hover:bg-gray-100">
            مشاهده دوره‌ها
        </a>

    </div>

</section>

فوتر Footer

آخرین قسمت قالب اصلی سایت، Footer است.

<footer class="bg-gray-900 text-white">

    <div class="mx-auto max-w-7xl px-6 py-12">

        <div class="grid gap-10 md:grid-cols-3">

            <div>
                <h3 class="text-xl font-bold text-white">
                    آزمون پلاس
                </h3>

                <p class="mt-4 leading-7 text-gray-400">
                    مرجع آموزش و آزمون
                </p>
            </div>

            <div>
                <h3 class="font-bold">
                    دسترسی سریع
                </h3>

                <div class="mt-4 space-y-3 text-gray-400">

                    <a href="#" class="block hover:text-white">
                        صفحه اصلی
                    </a>

                    <a href="#" class="block hover:text-white">
                        دوره‌ها
                    </a>

                    <a href="#" class="block hover:text-white">
                        درباره ما
                    </a>

                </div>
            </div>

            <div>
                <h3 class="font-bold">
                    ارتباط با ما
                </h3>

                <p class="mt-4 text-gray-400">
                    برای اطلاع از دوره‌ها و مطالب جدید با ما در ارتباط باشید.
                </p>
            </div>

        </div>

        <div class="mt-10 border-t border-gray-700 pt-6 text-center text-sm text-gray-500">

            © تمامی حقوق برای آزمون پلاس محفوظ است.

        </div>

    </div>

</footer>

ساختار نهایی صفحه اصلی

اکنون صفحه اصلی ما چنین ساختاری دارد:

Header
└── Navbar

Hero

معرفی آزمون پلاس

دوره‌های آموزشی
├── Course Card
├── Course Card
└── Course Card

ویژگی‌ها
├── ویژگی اول
├── ویژگی دوم
└── ویژگی سوم

CTA

Footer

این ساختار برای صفحه اصلی سایت کافی است و Sidebar در آن قرار نمی‌گیرد.

Responsive Design

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

Tailwind برای این کار از Breakpointها استفاده می‌کند.

برای مثال:

<div class="grid md:grid-cols-2 lg:grid-cols-3">

یعنی:

صفحه کوچک
→ یک ستون

صفحه متوسط
→ دو ستون

صفحه بزرگ
→ سه ستون

بنابراین لازم نیست برای هر اندازه صفحه یک طراحی کاملاً جداگانه ایجاد کنیم.

ساختار کلی قالب نهایی

قالب نهایی آزمون پلاس به این شکل خواهد بود:

                آزمون پلاس
                     │
                  Header
                     │
                  Navbar
                     │
                    Hero
                     │
                  معرفی
                     │
              دوره‌های آموزشی
                     │
                 ویژگی‌ها
                     │
                    CTA
                     │
                  Footer

در صفحات داخلی نیز از همین ساختار اصلی استفاده خواهیم کرد.

برای مثال:

base.html
    │
    ├── home.html
    ├── courses.html
    └── about.html

به این ترتیب بخش‌های مشترک سایت مانند Header، Navbar و Footer را لازم نیست در هر صفحه دوباره بنویسیم.

مرحله بعدی پروژه

در این مرحله ظاهر اصلی سایت را ایجاد کردیم، اما اطلاعات دوره‌ها هنوز ثابت هستند.

برای مثال:

<h3>
    آموزش Django
</h3>

در ادامه دوره، زمانی که با Model و Database کار کنیم، این اطلاعات دیگر به صورت دستی داخل HTML نوشته نخواهند شد.

جریان واقعی سایت به این شکل خواهد شد:

Database
    ↓
Model
    ↓
View
    ↓
Template
    ↓
Tailwind
    ↓
نمایش دوره در قالب سایت

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

سربرگ

دانلود فایل‌های پروژه نهایی

عنوان توجه

پاراگراف نوشته شود.

some code here

📝 تمرین

متن تمرین 
some code

عنوان مطلب بعدی

پاراگراف نوشته شود.

گام بعدی :

برای شرکت در آزمون آماده‌اید؟

با ورود به پنل کاربری می‌توانید جهت ثبت نام در آزمون‌ها و دسترسی به منابع آموزشی اقدام نمایید. کارشناسان ما در اسرع وقت با شما تماس می‌گیرند.
اینجا کلیک کنید

شروع کار با Django

شروع کار با Django در دوره آموزش جامع پایتون با مفاهیمی مانند متغیرها، شرط‌ها، حلقه‌ها، توابع، کلاس‌ها، فایل‌ها و کار

ادامه مطلب »
admin آگوست 11, 2026 بدون دیدگاه

عملیات CRUD در SQLite

عملیات CRUD درSQLite در بخش قبل با مفهوم پایگاه داده، SQLite و نحوه اتصال پایتون به پایگاه داده آشنا شدیم.

ادامه مطلب »
admin آگوست 10, 2026 بدون دیدگاه

توابع در پایتون

توابع در پایتون اگر هنگام برنامه‌نویسی مجبور شوید یک قطعه کد را بارها تکرار کنید، برنامه شما طولانی، شلوغ و

ادامه مطلب »
admin آگوست 3, 2026 بدون دیدگاه

مجموعه در پایتون

مجموعه (Set) در پایتون به زبان ساده، Set مجموعه‌ای از عناصر منحصربه‌فرد (Unique) است که ترتیب مشخصی ندارد و اجازه

ادامه مطلب »
admin آگوست 1, 2026 بدون دیدگاه

تاپل در پایتون

تاپل (Tuple) در پایتون بعد از آشنایی با لیست (List)، نوبت به یکی دیگر از ساختارهای داده در پایتون یعنی

ادامه مطلب »
admin آگوست 1, 2026 بدون دیدگاه

لیست در پایتون

لیست (List) در پایتون پرکاربردترین ساختار داده​ تا اینجا یاد گرفتید که هر متغیر فقط یک مقدار را در خود

ادامه مطلب »
admin جولای 29, 2026 بدون دیدگاه

آموزش نصب پایتون

آموزش نصب پایتون و ابزارهای موردنیاز (راهنمای کامل برای ویندوز) اگر تصمیم گرفته‌اید برنامه‌نویسی را یاد بگیرید، احتمالاً نام زبان

ادامه مطلب »
admin جولای 24, 2026 بدون دیدگاه

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

دسترسی سریع

صفحه اصلی آزمون پلاس

کنکور کارشناسی ارشد

کنکور دکتری تخصصی

آموزش برنامه نویسی

وبلاگ مقالات

تماس با ما

نشانی و راه‌های ارتباطی

support@azmoonplus.com
Whatsapp Telegram Youtube Instagram
Enamad