آموزش طراحی قالب (فصل پنجم – جلسه چهارم) : تکمیل استایل دهی قالب

- visibility ٧١ mode_comment

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

ابتدا فایل style را در ویرایشگر کد باز کنید.

از قسمت container شروع می کنیم که باید رنگ آن را سفید (پس زمینه content و sidebars) قرار دهیم و مقداری محتوای آن را از حاشیه فاصله دهیم :

و حال با استفاده float مکان sidebarها و content را تعیین می کنیم. به کدهای زیر دقت کنید :

اما با اضافه کردن این کدها طبعاً تغیری نخواهید دید ، دلیل آن این است که هنوز عرض هر قسمت را تعیین نکرده ایم برای همین هنوز به شکل زیر هم قرار دارند پس کد فوق را به شکل زیر توسعه می دهیم :

اما اگر فایل را ذخیره و نتیجه را در مرورگر ببنید انگار مشکلی پیش آمده است!!

container به اندازه ی محتوایش کشیده نشده است و فوتر نیز تغییر مکان داده و به کنار پست آمده است. اگر به یاد داشته باشید این اشکال به خاطر استفاده از خاصیت float است پس فایل index.html را در ویرایشگر کد باز کنید و خط زیر را بعد کدهای left-sidebar قرار دهید :  (خط سوم کد اضافه شده است)

حال که مشکل نیز رفع شد به content مقداری margin می دهیم تا از right-sidebar فاصله بگیرد :

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

و سپس استایل دهی عناوین بلوک ها :

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

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

حال که استایل دهی sidebarها تمام شد، نوبت به قسمت مطالب می رسد، ابتدا فاصله محتوای پست را با کد زیر از بین می بریم :

 سپس استایل عنوان مطلب رو می نویسیم : (مقداری متفاوت تر از psd)

و حال استایل تصویر بند انگشتی و خلاصه متن. اما ابتدا چونکه میخواییم اون هارو با استفاده از float کنار هم قرار بدیم، پس بهتره که اول این دو رو در داخل یک div قرار دهیم پس کد های html قسمت مطلب (class=”post”) رو به شکل زیر ویرایش می کنیم :

(خط های 3 و 8 اضافه شده)

حال استایل این قسمت ها :

سپس برای از بین بردن خاصیت float بر سایر قسمت ها کد clear رو به فایل html، قبل از کد ادامه مطلب اضافه می کنیم. (خط شماره 8 اضافه شده)

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

و در آخر استایل اطلاعات پست را می نویسیم :

پس از نوشتن این کدها، فقط قسمت فوتر سایت باقی می ماند :

اگر فایل را ذخیره کنید و نتیجه را در مرورگر ببنید، همه قسمت ها استایل دهی شده و قالبمان آماده شده است

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

اگر مشکلی طی آموزش براتون پیش اومده در قسمت نظرات مطرح کنید

comment دیدگاه کاربران
hamed_z2001

سلام من به چندتا مشکل برخوردم که لطف میکنی اگه جوابمو بدی!!
1- وقتی عکس مربوط به خط همراه با فلش زیر عنوان بلوکهای چپ و راست رو میذارم(به عنوان بک گراند،طبق آموزش) خط روی عنوان قرار میگیره ….اینم عکسش:
http://upload7.ir/imgs/2014-01/89138169478827360480.jpg

2-وقتی صفحه رو تو مرورگر ریسایز میکنم قالب بهم میریزه چیکارش کنم؟؟
اینم عکسش:
http://upload7.ir/imgs/2014-01/53908820532258069867.jpg

3-تو css چی جوری میشه اینجوری منو درست کرد؟؟با شیب؟؟
عکس:
http://upload7.ir/imgs/2014-01/04379592814705961214.jpg
مرسی دوست خوبم.ببخش که یکم سوالام زیاد شد 😀

سجاد دریس

سلام.
1. دقیقا کد رو درست نوشتین؟ انگار از padding-bottom استفاده نکردین.
2. همچین مشکلی وجود نداره، شما قالب رو تا آخر طراحی کنید حتما این مشکل حل میشه چون هنوز قالبتون ناقصه این مشکل رو دارید.
3. با استفاده از خاصیت transform skew میشه ایجادش کرد. ولی برای اینکه پیچیده نشه میتونید تصویر رو برش بزنید و به عنوان بکگراند منو ازش استفاده کنید
برا آشنایی با خاصیت transform
این آموزش رو مطالعه کنید.

hamed_z2001

ممنون سجاد جان
1- آره.کدا رو دقیق از رو آموزشت زدم.padding bottom هم وقتی تعریف میکنم فقط لینکهایی که زیر عنوان نوشته شده رو پایین میبره.مطمئنی که اون خط باید به عنوان بکگراند استفاده بشه؟؟نباید به شیوه دیگه ای واردش کرد؟؟
2-مشکلش حل شد.دستت درد نکنه.عرض wrapper رو تعریف نکرده بودم برا همین کل صفحه رو در نظر میگرفت و با ریسایز بهم میریخت
3-منظورت از استفاده از skew اینه که هر طرف منو 2تا box بذارم و یکیشو بچرخونم؟؟

سجاد دریس

1.عجیبه. کدت رو بفرست ببنیم!
3. آره

hamed_z2001

سجاد جون بیا دادا اینم کد کاملم:
http://gigpars.com/upload/ex3l_theme.rar

سجاد دریس

سلام.
این فایل رو جایگزین کن.

hamed_z2001

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

سجاد دریس

توی خصوصیت background مقدار center bottom رو و ننوشته بودی تا که background در پایین نوشته قرار بگیره

سید مجتبی علمدار

سلام.خسته نباشید.
تشکر بابت اموزش خوبتون.
یه سوال داشتم خدمتتون؟
من کدها را از اول با شما همراهی کردم و نوشتم ولی left-sidebar من درست در جای خودش قرار نگرفته؟
می خواست ببینم ایراد کار کجاست؟؟
فایل css و اچ تی ام ال:
http://uplod.ir/62u20gfx22v2/style.css.htm
http://uplod.ir/3ak6zht4n99g/index.html.htm
ممنون از اموزش خوبتون.

سجاد دریس

سلام.
یه اشتباه کوچیک تو خط 50 فایل html دارین.
این فایل اصلاح شده رو دانلود کنید

laya25

سلام من تو این جلسه هم به مشکل استفاده از float بر خوردم تو جلسه قبل تگ a رو نبسته بودم ولی الان همه تگهارو نگا کردم مشکلی نبود نمیدونم چرا بعد استفاده از float و clear کد درست عمل نمیکنه لطف میکنید بگین مشکلم کجاست
ممنون
http://upir.ir/1393.2/ghaleb_6c132.zip

سجاد دریس

سلام.
آیدی left sidebar و right sidebar رو تصحیح کنید
خط های 63 و 131
بین right و sidebar و همینطور بین left و sidebar فاصله نذارید بلکه – قرار بدین.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3 4