پروژه html css طراحی صفحه اول سایت آپارات

در این پست قصد داریم پروژه html css طراحی صفحه اول سایت آپارات را بررسی و پیاده سازی نماییم.

سوال: صفحه اول وب سایت آپارات را مشاهده نموده و مشابه آن را طراحی نمایید؟

امکانات زیر را در نظر بگیرید:

• طراحی منوها
• باکس ویدیو ها
• باکس بخش گشت و گذار ها
• دکمه بارگذاری ویدیو
• و …

پروژه html و css سایت آپارات

layout بندی صفحه اول پروژه html و css سایت آپارات

در این پروژه html و css  صفحه را به سه قسمت header و ساید چپ و ساید راست تقسیم میکنیم.

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

در قسمت چپ گشت و گذار ویدیو ها و در قسمت راست نیز ویدیو های اصلی قرار میگیرد.

همچنین میتوانید برای یادگیری بهتر نمونه پروژه طراحی صفحه اول سایت w3school را مشاهده نمایید.

پس از ثبت نام و یا ورود به حساب کاربری خود میتوانید سورس قالب را به صورت رایگان دانلود نمایید.
انجام پروژه های برنامه نویسی
وفایی مقدم
0936-328-6141

کد html و css بخش هدر سایت آپارات

در این بخش از پروژه html و css سایت آپارات میخواهیم تکه هایی از کد html و css بخش هدر را اینجا قرار دهیم.

کد اچتمل بخش هدر

در این بخش ابتدا کد html هدر را بررسی میکنیم.

<div class="header">

    <div class="head-right-left"> </div>

    <div class="head-logo"> <a href="#"> <img class="logo" src="logo.png" alt="logo-aparat" title="لوگو آپارات"> </a> </div>

    <div class="head-beain"> </div>

    <div class="head-dasteh"> <a href="#" calss="dasteh"> <img class="dasteh" src="dasteh.png" alt="دسته ها" title="دسته ها"> </a> 


    <div class="dasteh1"> 
        <div class="dasteh-zir">  طبیعت </div>

        <div class="dasteh-zir"> خبری </div>

        <div class="dasteh-zir"> علم وتکولوژی </div>

        <div class="dasteh-zir"> ورزشی </div>

        <div class="dasteh-zir"> بانوان </div>

        <div class="dasteh-zir"> سلامتی </div>

        <div class="dasteh-zir"> کودک </div>

        <div class="dasteh-zir"> طنز </div>

        <div class="dasteh-zir"> آموزشی </div>

        <div class="dasteh-zir"> فرهنگی  </div>

        <div class="dasteh-zir"> سیاسی </div>

        <div class="dasteh-zir"> حوادث  </div>
    </div>
</div>

    <div class="head-beain"> </div>

    <div class="head-search"> <input type="text" name="#" placeholder="&nbsp&nbsp&nbsp&nbspجستجوی ویدیوها رویدادها، شخصیت ها و..." class="search"> <div  class="buttom-search"><input type="image" src="search.png"> <input type="image" src="search-red.png" class="buttom-search-red"> </div> </div>
    

    <div class="head-video-upload"> <a href="#" class="video-upload"> <img src="video-upload.png" alt="اپلود ویدیو" title="اپلود ویدیو" class="video-upload"> <img src="video-upload-blue.png" alt="اپلود ویدیو" class="video-upload-blue"></a> </div>

    <div class="head-beain"> </div>

    <div class="head-import"> <a href="#"> <img src="import.png" alt="ورود" class="head-import"> </a> </div>

    <div class="poster"> <img src="poster.png" alt="poster" title="poster"> </div>
</div>

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

سپس بخش دسته ها قرار میگیرد که با استفاده از تگ div فهرست بندی منو ها تنظیم میشود.

با استفاده از کلاس head-search تنظیم کادر جستجو صورت میگیرد.

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

کلاس head-video-upload محل قرار گیری دکمه آپلود ویدیو میباشد که از یک عکس بجای button استفاده میشود.

در نهایت از کلاس head-import برای دکمه های ورود و ثبت نام استفاده میکنیم.

کد css بخش اصلی هدر

کد css بخش اصلی هدر شامل سایز بندی کلی و تنظیم جهت ها و margin , padding ها است.

.header{
margin-top:-8px;
margin-left:-8px;
background-color:#ffffff;
height:60px;
border-top:3px solid #ea1d5d;
direction:rtl;
position:fixed;
clear:both;
display:non;
}

.head-right-left{
height:60px;
width:130px;
float:right;
}

.head-beain{
height:60px;
width:40px;
float:right;
}

.head-logo{
height:60px;
width:100px;
float:right;
}

img.logo{
padding-top:15px;
}

.head-dasteh{
height:60px;
width:150px;
float:right;
}

img.dasteh{
padding-top:20px;
}

a.dasteh{

}

.head-search{
height:60px;
width:500px;
float:right;
}

input.search{
width:400px;
height:30px;
margin-top:12px;
}

.buttom-search{
top:18px;
left:505px;
position:absolute;
}

.head-video-upload{
width:120px;
height:60px;
float:right;
}

img.video-upload{
padding-top:12px;
}

img.video-upload-blue{
z-index:1;
left:291px;
top:12px;
position:absolute;
display:none;
}

a.video-upload:hover .video-upload-blue{
display:block;
}

.head-import{
height:60px;
width:100px;
float:right;
}

img.head-import{
padding-top:15px;
height:30px;
}

.poster{
width:1366px;
height:30px;
clear:both;
}

.dasteh1{
width:300px;
height:400px;
background-color: #ffffff;
z-index:1;
position:relative;
margin-top:10px;
display:none;
}

.dasteh-zir{
width:100px;
height:60px;
border-bottom:1px solid #dddddd;
float:right;
text-align:center;
vertical-align:center;
padding-top:30px;
font-family:tahoma;
}

.dasteh-zir:hover{
background-color: #dddddd;
}

.head-dasteh:hover .dasteh1{
display:block;
}

.buttom-search-red{
margin-top:-27px;
position:absolute;
z-index:1;
display:none;
}

.buttom-search:hover .buttom-search-red{
display:block;
}

جمع بندی

الباقی کد های پروژه html و css سایت آپارات پس از ثبت نام و یا ورود به حساب کاربری قابلیت دانلود دارند.

و شما میتوانید از این مثال برای یادگیری دقیق تر layout ها و نحوه قرار دادن منو ها و باکس ها در html و css بهره ببرید.

از بخش تمرین html css میتوانید مجموعه تمرین های رایگان و با جواب html و css را دریافت نمایید.