آموزش طراحی قالب وب سایت با استفاده از CSS

css website layout

20 آبان 1403

مقدمه

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

اول از همه لازمه بدونید که CSS یک زبان برای استایل‌دهی به صفحات وبه که به ما این امکان رو میده که ظاهر سایت‌هامون رو با انواع مختلفی از ویژگی‌ها مثل رنگ، فونت، حاشیه و غیره زیباتر کنیم. با CSS می‌تونید المان‌های HTML رو به هر شکلی که دوست دارید در بیارید.

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

در ادامه با یه مثال واقعی از کدهای CSS که می‌تونه در طراحی قالب یه سایت بهتون کمک کنه آشنا میشیم. سعی می‌کنیم مفاهیم رو به زبانی ساده توضیح بدیم تا درک اون برای همه آسون باشه.

کد نمونه


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قالب وب سایت ساده</title>
    <style>
        body {
            font-family: Tahoma, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
            color: #fff;
            padding: 10px 0;
        }
        nav a {
            color: #fff;
            padding: 0 15px;
            text-decoration: none;
        }
        .container {
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>قالب وب سایت ساده</h1>
    </header>
    <nav>
        <a href="#">خانه</a>
        <a href="#">درباره ما</a>
        <a href="#">تماس با ما</a>
    </nav>
    <div class="container">
        <p>خوش آمدید به وب سایت ما.</p>
    </div>
</body>
</html>

توضیح کد

<!DOCTYPE html>: این قسمت نشون میده که سند HTML از نوع HTML5 هست.

<html lang="fa">: این تگ، زبان سند رو فارسی مشخص می‌کنه.

<meta charset="UTF-8">: این مورد برای تنظیم کدگذاری یا انکودینگ به UTF-8 استفاده می‌شه که شامل اکثر کاراکترهای جهانی هست.

<meta name="viewport" content="width=device-width, initial-scale=1.0">: این خط برای ریسپانسیو بودن سایت، و تطبیق پذیری با اندازه‌های مختلف نمایشگر استفاده می‌شه.

<style>: بلاک سبک‌های CSS ما در اینجا قرار گرفته که شامل استایل‌های عمومی برای المان‌های HTML نظیر <body>، <header> و غیره هست.

<header>: برای نمایش عنوان سایت در بخش بالای صفحه استفاده می‌شه.

<nav>: شامل لینک‌های ناوبری سایت هست که به بخش‌های مختلف دلالت می‌کنن.

.container: این کلاس برای محتوای اصلی زیر ناوبری تعریف شده که شامل توضیحات و متون سایت می‌شه.

دسته ‌بندی آموزش ها

برچسب ها

آموزش طراحی قالب وب سایت با استفاده از CSS

مقدمه

کد نمونه

توضیح کد

سوالات متداول

چطور می‌تونم یک منو به وب سایتم اضافه کنم؟

چطور می‌تونم وب سایتم رو ریسپانسیو کنم؟

مطالب مرتبط