آموزش ساخت aside(قسمت دوم-پروژه اول)

طراحی سایت اختصاصی | سید عباس حسینی 27 مهر 1399 0

آموزش ساخت aside(قسمت دوم-پروژه اول)

به نام یگانه برنامه نویس عالم امروز با آموزش ساخت aside(قسمت دوم ـ پروژه اول ) در خدمت شما عزیزان هستیم. قبل از شروع باید بدانیم که aside چیست و همینطور چه کاربردی دارد. در قسمت قبل توضیح دادیم که منو اصلی چگونه ایجاد می شود و در این قسمت پیکربندی را توضیح می دهیم گاه مشاهده کرده اید که در بعضی از وب سایت ها از دو بخش تشکیل شده اند قسمت سمت راست و قسمت سمت چپ که در یک طرف آن منو ها و محصولات ویژه نمایش داده می شود و در طرف دیگر فقط پست ها نمایش داده می شود ایجاد این بخش ها را aside و به کمک تگ aside امکان پذیر است.

قدم اول: ایجاد body

قبل از تگ نویسی باید پیکر و چارچوب اصلی سایت مشخص شود که این به وسیله تگ body صورت می گیرد.

<body>
</body>

قدم دوم: ایجاد قسمت میانی بدنه سایت (section)

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

<body>
    <section class="middle_page" id="middle_body">
    </section>
</body>

قدم سوم: ایجاد قسمت سمت راست و سمت چپ (aside)

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

<body>
    <section class="middle_page" id="middle_body">
        <aside id="aside_right">
        </aside>
        <aside id="aside_left">
        </aside>
    </section>
</body>

قدم چهارم: ایجاد قسمت اصلی برای پست های خودمان (main)

این مورد را در نظر داشته باشید در این قسمت فقط در خصوص قسمت سمت راست یعنی پست ها را ایجاد می کنیم برای اینکه پست را ایجاد کنیم اول باید زمینه اصلی آن را ایجاد کنیم تگ main برای ایجاد کردن قسمت های مهم در وب سایت به کار میرود. در تصویر مشاهده می کنید که قبل از تگ می خواهیم بدون استفاده از دستورات زبان CSS از بالا فاصله ایجاد کنیم از تگ br استفاده می کنیم این نکته را در نظر داشته باشیم از تگ article نیز می توانیم استفاده کنیم ولی در این قسمت ضروری دانستم که تگ Main را به شما عزیزان توضیح بدهم زیرا تگ article تگ زیاد کاربردی نیست ولی تگ main از کاربرد بیشتری برخوردار است. در ادامه حتما مثال هایی در خصوص تگ article برای شما عزیزان خواهم داشت.

<body>
    <section class="middle_page" id="middle_body">
        <aside id="aside_right">
            <br>
            <main class="box_of_post">
            </main>
        </aside>
        <aside id="aside_left">
            <br>
        </aside>
    </section>
</body>

قدم پنجم: ایجاد قسمت های برای قرار دادن متن پست و همینطور برچسب ها

حال که زمینه یعنی تگ main را ایجاد کردیم نیاز است آن را نیز تفکیک کنیم به دو قسمت مجزا برای متن پست و همینطور برچسب هایی که برای پست خودمان در نظر گرفته ایم برای همین تگ div استفاده خواهیم کرد.

<body>
    <section class="middle_page" id="middle_body">
        <aside id="aside_right">
            <br>
            <main class="box_of_post">
                <div class="txt_box">
                </div>
                <div class="tag_box">
                </div>
            </main>
        </aside>
        <aside id="aside_left">
            <br>
        </aside>
    </section>
</body>

قدم ششم: ایجاد محتوا پست و موضوع آن

برای اینکه موضوع پست را درج کنیم نیاز داریم از تگ h1 که به معنی موضوع یاتیتر است استفاده کنیم. و موضوع پست خودمان را درون آن قرار دهیم در قسمت قبل آموختیم که چگونه تگ li و a را ترکیب کنیم و بتوانیم از خروجی خوبی داشته باشیم حال در این قسمت می خواهیم تگ p و span را ترکیب کنیم. برای نوشتن تاریخ نیاز به یک تگ p داریم و برای اینکه بتوانیم کلمه تاریخ و زمان رو از هم تفکیک کنیم نیاز به دو تگ span داریم که در یکی متن تاریخ و در دیگری زمان درج شود این عمل را برای نام نویسنده پست تکرار می کنیم. حالا زمان به ایجاد متن اصلی پست رسیده است که آن را در یک تگ p که مخفف کلمه paragraph است قرار می دهیم. به علت اینکه ما نمی توانیم تمام محتوای پست خودمان را در صفحه مقالات نمایش دهیم و ادامه و کامل تر را باید در صفحه خود پست نمایش دهیم نیاز به یک دکمه داریم که کاربر با استفاده از آن به صفحه دیگر راهنمایی شود و ادامه مطلب را مشاهده نمایید، برای این کار از تگ button استفاده خواهیم کرد. این نکته را بدانید که علت استفاده از تگ span این بوده که این تگ از خاصیت تغییر پذیری بالایی برخوردار است که در ادامه توضیح بیشتری در خصوص آن خواهیم داد.

<body>
    <section class="middle_page" id="middle_body">
        <aside id="aside_right">
            <br>
            <main class="box_of_post">
                <div class="txt_box">
                    <h1 class="title_box">قسمت اول اموزش ساخت header پروژه اول </h1>
                    <p class="date"><span>تاریخ : </span><span>۱۸ مهرماه ۹۹</span></p>
                    <p class="author"><span>نویسنده : </span><span>سید عباس حسینی </span></p>
                    <p class="paragraph">در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
                    <button class="btn_of_box">مشاهده بیشتر</button>
                </div>
                <div class="tag_box">
                </div>
            </main>
        </aside>
        <aside id="aside_left">
            <br>
        </aside>
    </section>
</body>

قدم هفتم: ایجاد برچسب ها

حال زمان آن رسیده که قسمت برچسب ها را ایجاد کنیم برای اینکه کار عنوان برچسب که عناون اصلی نیست را در یک تگ p به نمایش می گذاریم سپس از تگ ul برای ایجاد لیست برچسب ها استفاده خواهیم کرد. و برای لینک کردن محتوا از تگ a استفاده خواهیم کرد.

<body>
    <section class="middle_page" id="middle_body">
        <aside id="aside_right">
            <br>
            <main class="box_of_post">
                <div class="txt_box">
                    <h1 class="title_box">قسمت اول اموزش ساخت header پروژه اول </h1>
                    <p class="date"><span>تاریخ : </span><span>۱۸ مهرماه ۹۹</span></p>
                    <p class="author"><span>نویسنده : </span><span>سید عباس حسینی </span></p>
                    <p class="paragraph">در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
                    <button class="btn_of_box">مشاهده بیشتر</button>
                </div>
                <div class="tag_box">
                    <p>برچسب ها :</p>
                    <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="">آموزش HTML5&CSS3</a></li>		
                    </ul>
                </div>
            </main>
        </aside>
        <aside id="aside_left">
            <br>
        </aside>
    </section>
</body>

قدم هشتم: ایجاد استایل

حال زمان آن رسیده که زیبایی را به تگ های HTML هدیه بدهیم و آنها را برای نمایش بهتر آماده کنیم.

ایجاد استایل middle_body

#middle_body
{
    min-height:600px;    
}

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

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

ایجاد استایل   asideright and asideleft

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

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

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

دستور height به معنی ارتفاع و برای تعیین کردن آن در عنصر های یک وب سایت.

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

در جلسه قبل گفتیم که دستور direction مشخص می کند که عنصر راست چین باشد یا چپ چین در طراحی وب گاه نیاز است عنصر در سمت چپ صفحه قرار داشته باشد و گاه در سمت راست صفحه و گاه به صورت کنار هم قرار گیرند مقادیر float عددی نیست بلکه به صورت right left flex مشخص می شود.

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

هر تگ نیاز دارد که یک ارتفاع و یک عرض داشته باشد دستور width برای مشخص کردن عرض عنصر به کار میرود.

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

برای ایجاد کردن فاصله از سمت راست و از خارج یک عنصر می توانیم از دستور margin-right در طراحی وب استفاده می کنیم و برعکس این قسمت نیز با margin-leftبه کار میرود.

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

.box_of_post
{
    height:auto;
    box-shadow: 0 3px 5px #cbcdce;
    border: 1px solid #ccc;
    min-height:400px;
    color:#555;
    background-color:#f3f3f3;
}

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

زمانی نیاز است در طراحی وب ما یک سایه برای یک بسته استفاده کنیم و برای این کار از دستور box-shadow استفاده می کنیم.

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

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

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

کلمه color به معنی رنگ است شما از این دستور برای تغییر دادن رنگ متن در وب سایت می توانید استفاده کنید.

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

برای تغییر دادن رنگ پس زمینه می توانیم از دستور فوق استفاده کنیم.

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

.title_box
{
    padding:20px 10px 0 0;
    font-size:20px;
    color:#2e3740;
}

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

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

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

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

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

.txt_box
{
    height:auto;
    min-height:280px;
}

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

.date
{
    padding:10px 10px 0 0;
}

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

.author
{
    padding:10px 10px 20px 0 ;
}

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

.paragraph
{
    padding:10px;
    text-align:justify;
}

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

نیاز است که بدانیم دستورات CSS این قابلیت را دارد که مانند نرم افزار word متن را چپ چین و راست چین و یا حتی وسط چین کند برای همین از دستور فوق استفاده خواهیم کرد مقادیر این دستور به صورت right left center justify است.

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

.btn_of_box
{
    float:left;
    margin-left:40px;
    border:none;
    outline:none;
    padding:8px 15px;
    background-color:#566573;
    color:#fff;
    transition:.5s ease-in-out;
    border-radius:5px;
}

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

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

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

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

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

مشاهد می کنید که کلمه border نوشته شده است ولی در کمی قبل ما border را غیر فعال کرده ایم. این حالت زمانی در وب سایت استفاده می شود که ما می خواهیم خط border را غیر فعال کنیم ولی گوشه های عنصر که حالت ثابت دارند را گرد کنیم این کار باعث زیبایی وب سایت شما می شود. این نکته را بدانیم که در دستورات CSS دستور border به معنی حاشیه ها هست که ما می توانیم آنها رو تغییر دهیم.

ایجاد استایل btn_of_box:hover:

.btn_of_box:hover
{
    background-color:#2e3740;
}

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

.tag_box
{
    height:auto;
    min-height:120px;
    padding-bottom:30px;
    background-color:#eee;
}

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

.tag_box > p
{
    padding:10px 10px 10px 0;
}
.tags
{
    list-style-type:none;
}

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

هر منوی دارای چندین نوع بالت است بالت همان دایره های کوچک هستند که کنار یک لیست ایجاد می شود که ما با آن متوجه می شویم که اینها یک مجموعه هستند در حال حاضر نیاز به آنها نیست.

ایجاد استایل tags > li:

.tags > li
    {
        display:inline-block;
        float:right;
        padding:8px 15px;
        background-color:#ddd;
        margin:5px;
    }

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

در جلسه قبل توضیح کامل در مورد display داده شد که در طراحی وب چه کاربردی دارد و چه امکاناتی را به ما می دهد گفتیم که inline باعث می شود که عناصر در کنار یکدیگر قرار داشته باشند. Block نیز این امکان را می دهد که ما عناصر را زیر هم داشته باشیم و در خط مجزا باشند حالا نیاز به آن داریم که اول در کنار یکدیگر قرار بگیرند و با پرشدن فضا به خط بعد منتقل شوند برای همین از دستور inline-block استفاده می کنیم.

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

 

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

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

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

 

 



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

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