جلسه ی سی و چهارم: آموزش طراحی باکس نوشته

آموزش طراحی سایت ابوالفضل کلهری بدون نظر 24 ژانویه 2019 190 بازدید

آموزش طراحی باکس نوشته و Content

در جلسات پیش در مورد Footer (برای دیدن آموزش فوتر در وب سایت کلیک کنید) و Header (برای دیدن آموزش Header در وب سایت کلیک کنید) یک سایت به طور کامل صحبت نموده ایم. حال در این جلسه میخواهیم درباره ی طراحی باکس نوشته و کانتنت صحبت کنیم. ( برای دیدن آموزش Html به زبان ساده کلیک کنید )

 

باکس نوشته چیست؟

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

آموزش طراحی باکس نوشته و Content

 

اجزای باکس نوشته

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

  1. عنوان
  2. Span ها
  3. محتوا

 

عنوان

عموما هر باکس نوشته دارای یک عنوان اصلی می باشد. این عنوان ها معمولا از فونت های H2 و H3 تشکیل می شوند. برای اینکه بدانید تگ های H چه تگ هایی هستند و کاربرد آن ها چیست لازم است که به آموزش Heading ها مراجعه کنید.

Span ها

در طراحی باکس نوشته تگ های ریزی وجود دارد که به آن ها Span می گویند. Span ها می توانند دسته ها، نام نویسنده، تعداد نظرات و اجزای بی اهمیت تر را که عموما به نوشته ارتباط کمتری دارند مشخص کنند. برای آشنایی بیشتر با تگ span می توانید به آموزش تگ Span مراجعه کنید.

محتوا

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

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

بخش دیگری که محتوا را تشکیل می دهند عکس ها، ویدئو ها، کد ها و در کل اجزای چند رسانه ای می باشند. برای آشنایی بیشتر با تگ های چند رسانه ای می توانید به آموزش Media در HTML مراجعه کنید.

 

چه اجزایی را نمی توان در باکس نوشته قرار داد؟

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

 

چگونه یک باکس نوشته بسازیم؟

برای طراحی باکس نوشته باید از اجزایی که در بالا گفت استفاده شود اما این اجزا در هر مکانی نمی توانند قرار بگیرند. برای ساخت یک باکس نوشت ابتدا باید یک طرح کلی از باکس خود را بر روی کاغذ داشته باشیم یا فتوشاپ داشته باشیم. (اگه می تونید تو ذهنتون هم باشه کافیه :))

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

کد های HTML:

  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="box">
          <img src="image/img.jpg">
          <div class="content">
            <h2>عنوان متن</h2>
            <p>
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از
 طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
            </p>
            <button type="button" name="button">مشاهده ی مطلب</button>
          </div>
          <span>نام نویسنده</span>
          <span>برچسب ها</span>
          <span>تاریخ</span>
          <span>بازدید</span>
        </div>
      </div>
      <div class="col-lg-3">
        <div class="box">
          <img src="image/img.jpg">
          <div class="content">
            <h2>عنوان متن</h2>
            <p>
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از
 طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
            </p>
            <button type="button" name="button">مشاهده ی مطلب</button>
          </div>
          <span>نام نویسنده</span>
          <span>برچسب ها</span>
          <span>تاریخ</span>
          <span>بازدید</span>
        </div>
      </div>
      <div class="col-lg-3">
        <div class="box">
          <img src="image/img.jpg">
          <div class="content">
            <h2>عنوان متن</h2>
            <p>
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از
 طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
            </p>
            <button type="button" name="button">مشاهده ی مطلب</button>
          </div>
          <span>نام نویسنده</span>
          <span>برچسب ها</span>
          <span>تاریخ</span>
          <span>بازدید</span>
        </div>
      </div>
    </div>
  </div>

کد های CSS:

body {
  background-color: #fff;
}
.container {
  text-align: center;
  margin: 30px 11%
}
.box {
  border-radius: 17px;
  text-align: center;
  margin: 15px 10px;
  padding: 10px;
  overflow: hidden;
  float: right;
  box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.5);
  max-width: 300px
}
.box img {
  width: 200px;
  height: 100px
}
.content button {
  margin: 5px auto 15px auto;
  font-size: 18px
}
.content p {
  font-size: 18px
}
.content {
  border-bottom: 0.5px solid #757575;
  margin-bottom: 5px
}
.box span {
  padding: 0px 10px;
  font-size: 16px;
  font-weight: bold;
  color: #9e9e9e
}

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

آموزش طراحی باکس نوشته و Content

 

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

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

 

Content چیست؟

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

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

 

خلاصه مطلب

  1. باید بگوییم که عموما اکثر مطالب یک سایت درون یک باکس یا همان جعبه قرار می گیرند به این جعبه ها باکس نوشته می گوییم.
  2. عموما هر باکس نوشته دارای یک عنوان اصلی می باشد. این عنوان ها معمولا از فونت های H2 و H3 تشکیل می شوند.
  3. در طراحی باکس نوشته تگ های ریزی وجود دارد که به آن ها Span می گویند.
  4. در طراحی باکس نوشته عموما محتوا اصلی ترین بخش آن می باشند..
  5. دقت داشته باشید که هر قسمتی از سایت جزء باکس نوشته نمی باشد برای مثال هدر یک سایت یا فوتر آن یا اسلایدر و… جزء باکس نوشته نمی باشند و نباید درون باکس نوشته قرار بگیرند.
  6. باید گفت تمامی محتوای یک پست با جزئیات کامل درون یک کلاس قرار می گیرند که این کلاس Content نام دارد.

احساس خود را درباره این مقاله بگویید 1 نظر

جلسه ی سی و چهارم: آموزش طراحی باکس نوشته
5 1
ابوالفضل کلهری

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

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.