طراحي وب

آموزش جامع طراحی وبلاگ(قسمت یازدهم)

تبلیغات
کانال تلگرام فتولیا
4 سوالی شهرداری

تبدیل قالب به صفحه ی وب

بخش پنجم)

۱۸.در این بخش می خواهیم قسمت محتویات را اضافه کنیم.این بخش یک تفاوت با بخش های بالایی دارد و آن هم این است که ارتفاع (Height) آن متغیر است،پس نمی توانیم یک تصویر ثابت به عنوان پس زمینه انتخاب کنیم و باید از پس زمینه ی تکرار شونده استفاده کنیم.فقط در بالا،کمی سایه ی خاکستری هست که ثابت خواهد بود.به PS رفته و پوشه های لایه (LayerSet) ی panel و post را مخفی کنید(با برداشتن چشم از کنار آنها).حالا از مسیر Layer > Flatten Image تمام لایه ها را یکی می کنیم، بعد از زدن ok.آن قسمت خاکستری را انتخاب نموده و در یک لایه ی جدید،کپی کرده و با نام “main-fixed-bg.jpg” ذخیره کنید.منظورمان شکل زیر است:

حالا نوبت به پس زمینه ی تکرار شونده می رسد.یکی از نکات مثبت این نوع پس زمینه،حجم پایین آن است که در ادامه مشاهده می کنید.بعد از انتخاب ابزار Rectangular Marquee Tool یا همان کلید M،روی آن راست کلیک کرده و گزینه ی سوم را انتخاب کنید.مزیت این کار این است که با یک بار کلیک،محدوده ای به ارتفاع px1 و طول کل صفحه انتخاب می شود.دقیقا همان چیزی که نیاز داریم.پس کمی پایین تر از بخش خاکستری کلیک کرده مثل تصویر قبل و با نام “main-repeated-bg.jpg” ذخیره کنید.

برای جایگذاری این بخش چند کد کوچک HTML را باید اضافه کنید.به سراغ EW رفته و کد زیر را قبل از تگ پایانی “container” اضافه نمایید.

همانطور که می بینید،۲ تگ div استفاده شده است.یکی برای نگهداری کل این بخش که دارای پس زمینه ی تکرار شونده است و یکی هم در داخل آن و برای پس زمینه ی ثابت بالا.برای آغشته کردن این کد به CSS،در بخش استایل ها،کد های زیر را اضافه کنید.

فکر نمی کنم نیازی به توضیح باشد فقط در بخش اول از repeat-y برای تکرار تصویر در محور عمودی استفاده کردیم.

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

کد CSS زیر را هم به بخش استایل ها اضافه نمایید:

برای درک بهتر اندازه ها،می توانید به آخر بحث هشتم مراجعه کنید.

در PS نوار زرد رنگ عنوان پنل را طبق معمول گذشته و با نام panel-title.jpg ذخیره کنید(با عرض px1).برای بدنه ی پنل نیز همین کار را بکنید و با نام panel-body.jpg ذخیره نمایید.در این قسمت باید تصمیم بگیریم با توجه به اینکه تعداد پنل ها مشخص نیست، از چه ساختاری برای طراحی پنل ها استفاده کنیم.می توانیم از ساختاری شبیه زیر استفاده کنیم:

چطورِس؟خوبِس.پس کد را داخل menu قرار دهید.فقط دقت کنید که از class به جای id استفاده کردیم.در داخل title عنوان “دوستان” رو وارد کنید و در بخش css،سبک زیر را اضافه کنید:

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

برای خوشمزه تر شدن بخش محتویات پنل ،می توانیم CSS زیر را استفاده کنیم:

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

همانطور که مشاهده می کنید این ساختار از سه بخش تشکیل شده است.اولین بخش “entry_title” است که حاوی عنوان و تاریخ ارسال مطلب هست.دومین قسمت،”entry_body” نام دارد که در بردارنده ی متن پست ماست و بخش آخر “entry_meta” است که اطلاعات دیگر پست از قبیل تعداد نظرات،ادامه ی مطلب و نویسنده ی مطلب را ارائه می دهد.

کد CSS این بخش از قرار زیر است:

این کدها و دیگر سبک های CSS ای که در بالا آمدند ساده هستند و فکر نمی کنم نیاز به توضیح اضافه باشد فقط شاید برایتان سوال بوجود آمده باشد که چرا از کد زیر استفاده کرده ایم؟

برای اینکه اگر دقت کرده باشید در داخل “entry_title” دو تگ h2 و span را،یکی در سمت راست و دیگری در سمت چپ شناور کرده ایم(float).در این صورت مرورگر آنها را نادیده گرفته و محتویات پایین را به سمت بالا حرکت می دهد تا جایگزین آنها کند.این قطعه کد مثل یک سد مانع از این کار می شود.البته ما که دیدیم با خذف این کد نیز مشکل حادی ایجاد نمی شود ولی هدفمان آشنایی شما به این راهکار بود که در طراحی CSS based کاربرد مهمی دارد.

پاسخ دهید

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

آخرین مقالات فتولیا در ایمیل شما

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