جلسه ی سی و پنجم: نحوه تولید باکس محتوا در وب

باکس محتوا

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

 

Box چیست؟

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

 

نحوه تولید باکس محتوا در وب

مرحله ی اول: اندازه ی باکس محتوا

برای اینکه یک باکس محتوا در وب سایت خود بسازید باید ابتدا در نظر داشته باشید که این باکس را برای چه کاری می خواهید. در این بخش از آموزش می خواهیم تولید یک باکس ساده را قدم به قدم توضیح دهیم. ابتدا یک کلاس به نام Box می سازیم و اندازه های یک باکس را به آن اضافه می کنیم.

کد HTML:


<div class="box">

<h1>KAMYABIHA.COM</h1>

</div>

کد CSS:


.box {

width: 400px;

height: 500px;

border: 2px solid #000;

margin: 15px auto;

text-align: center;

}

خروجی کد بالا:

باکس محتوا

همانگونه که می بینید این یک باکس ساده می باشد که از عرض ۴۰۰px و ارتفاع ۵۰۰px تشکیل شده است همچنین در این جدول دارای یک خط به ضخامت ۲px و رنگ سیاه می باشد. جدول بالا ساده ترین جدولی می باشد که شما می توانید بسازید.

 

مرحله ی دوم: اجزای باکس محتوا

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

کد HTML:


<div class="box">

<img src="image/img.jpg" alt="#">

<h2>عنوان نوشته</h2>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از
 طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است...</p>

</div>

کد CSS:


body {

background-color: #fff;

}

.box {

width: 400px;

height: 500px;

border: 2px solid #000;

margin: 15px auto;

text-align: center;

}

.box img {

max-width: 380px;

max-height:480px;

margin: 10px 0px

}

.box h2 {

font-size: 36px;

color: #00838f;

margin: 10px 0px

}

.box p {

font-size: 22px;

color: #424242;

font-weight: bold;

margin: 0px 0px 0px 10px

}

خروجی کد بالا:

باکس محتوا

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

 

مرحله ی سوم: دکمه ها در باکس محتوا

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

کد HTML:


<div class="box">

<img src="image/img.jpg" alt="#">

<h2>عنوان نوشته</h2>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از 
طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است...</p>

<button type="button" name="دیدن مقاله">دیدن مقاله</button>

<button type="button" name="مقایسه">مقایسه</button>

</div>

کد CSS:


body {

background-color: #fff;

}

.box {

width: 400px;

height: 500px;

border: 2px solid #000;

margin: 15px auto;

text-align: center;

}

.box img {

max-width: 380px;

max-height:480px;

margin: 10px 0px

}

.box h2 {

font-size: 36px;

color: #00838f;

margin: 10px 0px

}

.box p {

font-size: 22px;

color: #424242;

font-weight: bold;

margin: 0px 0px 0px 10px

}

.box button {

font-size: 40px;

float: right;

margin: 10px;

width: 180px;

color: #ffffff;

padding: 8px;

background-color: #0097a7;

border-radius: 10px

}

خروجی کد بالا:

باکس محتوا

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

 

مرحله ی چهارم: سایه در باکس محتوا

یکی از ساده ترین راه ها برای زیبا سازیه باکس محتوا در وب سایت استفاده از سایه می باشد. در اینجا ابتدا خط دور باکس را از بین میبریم سپس یک سایه ایجاد میکنیم که به زیبا تر شدن باکس ما کمک زیادی خواهد نمود.

کد HTML:


<div class="box">

<img src="image/img.jpg" alt="#">

<h2>عنوان نوشته</h2>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از 
طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است...</p>

<button type="button" name="دیدن مقاله">دیدن مقاله</button>

<button type="button" name="مقایسه">مقایسه</button>

</div>

کد CSS:


.box {

width: 400px;

height: 500px;

margin: 15px auto;

text-align: center;

box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.5);

border-radius: 17px;

}

.box img {

max-width: 380px;

max-height:480px;

margin: 10px 0px

}

.box h2 {

font-size: 36px;

color: #00838f;

margin: 10px 0px

}

.box p {

font-size: 22px;

color: #424242;

font-weight: bold;

margin: 0px 0px 0px 10px

}

.box button {

font-size: 40px;

float: right;

margin: 10px;

width: 180px;

color: #ffffff;

padding: 8px;

background-color: #0097a7;

border-radius: 10px

}

خروجی کد بالا:

باکس محتوا

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

 

مبحث تکمیلی

حال که با یاد گرفتید چگونه یک باکس محتوای خوب بسازید بد نیست چند کار جالب و بازی با کد را نیز یاد بگیرید. برای مثال شما به وسیله ی Transform ها که در آموزش استایل Transform به آن اشاره شد و استایل Filter که در آموزش فیلتر های CSS به آن اشاره شد می توانید هاور زیبایی برای باکس خود بسازید.

نکته: به مجموعه تغییراتی که در زمان قرار گرفتن ماوس بر روی باکس مورد نظر ما صورت میگیرد Hover می گویند.

کد HTML:


<div class="box">

<img src="image/img.jpg" alt="#">

<h2>عنوان نوشته</h2>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از 
طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است...</p>

<button type="button" name="دیدن مقاله">دیدن مقاله</button>

<button type="button" name="مقایسه">مقایسه</button>

</div>

کد CSS:


body {

background-color: #fff;

}

.box {

width: 400px;

height: 500px;

margin: 30px auto;

text-align: center;

box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.5);

border-radius: 17px;

}

.box img {

max-width: 380px;

max-height:480px;

margin: 10px 0px

}

.box h2 {

font-size: 36px;

color: #00838f;

margin: 10px 0px

}

.box p {

font-size: 22px;

color: #424242;

font-weight: bold;

margin: 0px 0px 0px 10px

}

.box button {

font-size: 40px;

float: right;

margin: 10px;

width: 180px;

color: #ffffff;

padding: 8px;

background-color: #0097a7;

border-radius: 10px

}

.box:hover {

box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.9);

transition: .5s;

transform: translate(0px,-10px);

position: relative;

overflow: hidden;

}

.box:hover img {

filter: brightness(40%);

transform: scale(1.05);

transition: .5s

}

خروجی کد بالا:

باکس محتوا

 

خلاصه مطلب

  1. عموما هر یک از اجزای درون سایت مانند یک باکس می باشند.
  2. ابتدا یک کلاس به نام Box می سازیم و اندازه های یک باکس را به آن اضافه می کنیم.
  3. سپس یک عکس درون این باکس قرار داده سپس عنوان و در آخر یک چکیده از متن در آن قرار می دهیم.
  4. برای اینکه دکمه ها را در باکس محتوای خود اضافه کنیم باید از ویژگی Button استفاده نموده.
  5. یکی از ساده ترین راه ها برای زیبا سازیه باکس محتوا در وب سایت استفاده از سایه می باشد.
  6. به وسیله ی Transform ها و استایل Filter می توانید هاور زیبایی برای باکس خود بسازید.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

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

    محبوب ترین برنامه های این ماه

    برترین مقالات این ماه

    متاسفم مطلبی برای نمایش وجود ندارد