آموزش ساخت منو کناری (قسمت آخر-پروژه اول)

طراحی سایت اختصاصی | سید عباس حسینی 4 آبان 1399 0

آموزش ساخت منو کناری (قسمت آخر-پروژه اول)

به نام خدا با آموزش ساخت منو کناری (قسمت آخر-پروژه اول) در خدمت شما عزیزان هستیم.

قدم اول: ایجاد کردن aside

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

<aside id="aside_left">
    <br>
</aside>

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

حالا زمان آن رسیده است که قسمت های مختلف وب سایت را ایجاد کنیم الان نیاز به دو تگ div است برای اینکه بتوانیم از آن در قسمت های دیگر نیز استفاده کنیم class قرار خواهیم داد.

<aside id="aside_left">
    <br>
    <div class="box_of_asider_left">
    </div>
    <br>
    <div class="box_of_asider_left">
    </div>
</aside>

قدم سوم: ساخت عنوان هر قسمت

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

<aside id="aside_left">
    <br>
    <div class="box_of_asider_left">
        <h1 class="title_of_left_aside">دسته بندی مقالات</h1>
    </div>
    <br>
    <div class="box_of_asider_left">
        <h1 class="title_of_left_aside">کلمات کلیدی </h1>
    </div>
</aside>

قدم چهارم: ساخت منو دسته بندی ها

برای ساخت هر منو در وب سایت می توانیم از تگ Ul استفاده نماییم. و عنصر های این مجموعه li هستند که این مجموعه را تشکیل می دهند و برای اینکه بتوانیم آنها را به صفحه مقالات دیگر متصل کنیم نیاز به تگ a خواهیم داشت.

<aside id="aside_left">
    <br>
    <div class="box_of_asider_left">
        <h1 class="title_of_left_aside">دسته بندی مقالات</h1>
        <ul class="category_menu">
                <li><a href="">آموزش HTML</a></li>	
                <li><a href="">آموزش CSS</a></li>	
                <li><a href="">آموزش طراحی وب </a></li>	
                <li><a href="">آموزش طراحی سایت </a></li>	
                <li><a href="">آموزش HTML5&CSS3</a></li>		
        </ul>
    </div>
    <br>
    <div class="box_of_asider_left">
        <h1 class="title_of_left_aside">کلمات کلیدی </h1>
    </div>
</aside>

قدم پنجم: ساخت منو کلمات کلیدی

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

<aside id="aside_left">
    <br>
    <div class="box_of_asider_left">
        <h1 class="title_of_left_aside">دسته بندی مقالات</h1>
        <ul class="category_menu">
                <li><a href="">آموزش HTML</a></li>	
                <li><a href="">آموزش CSS</a></li>	
                <li><a href="">آموزش طراحی وب </a></li>	
                <li><a href="">آموزش طراحی سایت </a></li>	
                <li><a href="">آموزش HTML5&CSS3</a></li>		
        </ul>
    </div>
    <br>
    <div class="box_of_asider_left">
        <h1 class="title_of_left_aside">کلمات کلیدی </h1>
        <ul class="tags">
                <li><a href="">آموزش HTML</a></li>	
                <li><a href="">آموزش CSS</a></li>	
                <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>	
                <li><a href="">آموزش طراحی سایت </a></li>	
                <li><a href="">آموزش HTML5&CSS3</a></li>		
        </ul>
    </div>
</aside>

قدم ششم: ساخت پایین صفحه وب سایت

زمان آن رسیده که پایین صفحه را ایجاد کنیم قبل از آن بعد از تگ body یک div با class دلخواه قرار می دهیم. سپس استایل دهی آن را انجام خواهیم داد زمان آن رسیده پایین سایت را ایجاد کنیم و برای این کار از تگ footer استفاده خواهیم کرد.در این طرح سعی شده بود که ساده باشد برای اینکه اکثر دوستان که این آموزش را دنبال می کنند برای اولین بار است که با زبان های نشانه گذاری آشنا شده اند از پروژه های بعد سعی بر این شده است قالب ها بهتر و پرتر باشند و سعی می شود آموزش قدم به قدم برای قسمت دارای عکس مخصوص همان قسمت باشد یعنی اینکه با جلو رفتن هر قسمت در وب سایت تصاویر و نتیجه آن نمایش داده بشود و همینطور توابع آن نیز درج شود نکته ای که وجود لطفا این قالب را دانلود کنید و روی آن تغییرات خود را ایجاد نمایید به دلیل از دست دادن فایل اصلی دوباره آن را نوشته ام و تغییراتی در دستورات آن داده ام. لطفا ادامه آموزش را دنبال نمایید و اگر سوالی در خصوص آموزش ها دارید لطفا کامنت بگذارید.

<div class="clear"></div>
<!-- footer -->
<footer>
    آموزش طراحی وب سایت پروژه محور رایگان سید عباس حسینی 
</footer>
<!-- end footer -->

قدم هفتم: ایجاد استایل قسمت های وب سایت

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

ایجاد استایل aside left:

#aside_left
{
    height:auto;
    width:34%;
    margin-left:2%;
    margin-right:2%;
}

خصوصیات دستور float:

دستور float به معنی شناور است و از ویژگی های مختلفی برخوردار است این ویژگی ها از جمله none,left,right است. None به معنی شناور نبودن عنصر است left به معنی شناور بودن به سمت چپ در وب سایت است و right به معنی شناور بودن به سمت راست است. در دستورات جدید این دستور حذف شده است ولی آن را خوب بیاموزید زیرا در قسمت های وب سایت نیاز است از آن استفاده نماییم.

خصوصیات دستور hright:

کلمه height در زبان انگلیسی به معنی ارتفاع است و با استفاده از این دستورات ارتفاع یک عنصر را مشخص خواهیم کرد مقادیر آن و به صورت درصد ، عدد و auto است.

خصوصیات دستور width:

کلمه width به معنی عرض است و با استفاده کردن از دستور فوق می توانیم عرض یک عنصر را تغییر دهیم به صورت پیشفرض عرض در هر عنصر به اندازه تمام صفحه و خود عنصر است. مقادیر آن به صورت عدد و auto است. Auto در دستورات CSS به معنی خودکار است یعنی اینکه اگر مقادر داخلی آن زیاد شد زیاد شود و در غیر این صورت کم شود.

خصوصیات دستور padding:

برای اینکه در وب سایت از دیواره ها عنصر فاصله ایجاد کنیم یعنی از سمت داخل به بیرون فاصله ایجاد کنیم از دستور padding استفاده خواهیم کرد. مقادیر دهی آن نیز مانند height   و width است. و برای هر جهت padding  خودش را داریم.

خصوصیات دستور margin:

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

ایجاد استایل box of left aside:

.box_of_asider_left
{
    height:auto;
    background-color:#f3f3f3;
}

خصوصیات دستور background-color:

زمانی نیاز است که رنگ پس زمینه یک عنصر را تغییر دهیم برای این کار از دستور background-color استفاده خواهیم کرد. این دستور امکان تغییر نگ را ایجاد می کند ما می توانیم نام رنگ را در آن قرار دهیم به عنوان ویژگی آن و یا کد رنگ ها را قرار دهیم.

ایجاد استایل title of left aside:

.title_of_left_aside
{
    height:50px;
    color:#fff;
    text-align:center;
    background-color:#566573;
    line-height:50px;
    font-weight:normal;
}

خصوصیات دستور color:

زمانی که نیاز باشد رنگ یک عنصر را در صفحه وب سایت تغییر دهیم از دستور color استفاده می کنیم این دستور نیز مانند background-color مقدار دهی می شود.

خصوصیات دستور text-align:

دستور فوق این امکان را ایجاد کرده است که متن ها را در صفحه وب سایت تنظیم کنیم که چپ چین باشد و یا راست چین و یا اینکه در میان صفحه قرار گیرند و یا از دو طرف سایت به یک میزان فاصله بگیرد.

خصوصیات دستور line-height:

حالا که مشاهده می کنیم متن ها را بالای هر قسمت قرار گرفته است. و می خواهیم برای زیباتر شدن کار آن را از بالا فاصله ایجاد کنیم برای همین از دستور line-height استفاده خواهیم کرد.

خصوصیات دستور font-weight:

هر عنصر وب سایت دارای یک ویژگی فونت است این ویژگی می تواند مانند تگ h1 به صورت bold باشد و یا مانند تگ p normal باشد.

ایجاد استایل category menu:

.category_menu
{
    list-style-type:none;
    box-shadow: 0 3px 5px #cbcdce;
    border: 1px solid #ccc;
}

خصوصیات دستور list-style-type:

هر منو دارای یک نشانه برای مشخص کردن آن است که به صورت دایره و مربع و حتی عکس قرار می گیرند اما در اکثر زمان ها نیاز به وجود آنها در وب سایت نیست این نکته را نیز یاد آور باشم زمانی که مجموعه li در یک منو به صورت display:inline هستند به صورت پیشفرض این دستور غیر فعال می شود.

خصوصیات دستور box-shadow:

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

خصوصیات دستور border:

برای ایجاد کردن یک حاشیه برای عنصر از دستور border استفاده می کنیم این دستور که مشاهده می کنیم به صورت خلاصه border می باشد.

ایجاد استایل category menu > li:

.category_menu > li
{
    line-height:40px;
    padding-right:15px;
    color:#555;
}

دستورات برچسب ها:

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

.tag_box
{
    height:auto;
    min-height:120px;
    padding-bottom:30px;
    background-color:#eee;
}
.tag_box > p
{
    padding:10px 10px 10px 0;
}
.tags
{
    list-style-type:none;
}
.tags > li
{
    display:inline-block;
    float:right;
    padding:8px 15px;
    background-color:#ddd;
    margin:5px;
}

ایجاد استایل footer:

دستور clear برای این استفاده می شود که عناصر در صفحه وب سایت با یکدیگر ترکیب نشوند.

    .clear
    {
        clear:both;
    }
/*-footer-*/
    footer
    {
        height:50px;
        background-color:#566573;
        color:#fff;
        width:70%;
        margin: 0 auto;
        line-height:50px;
        text-align:center;
    }
/*-end footer-*/

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

 

قسمت های دیگر این مجموعه:

آموزش طراحی سایت قسمت اول 

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



دیدگاهتان را بنویسید

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