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

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۲۵ تیر ۱۳۹۲

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

برای شروع فایل style.css را با نرم افزار ویرایشگر کد باز کنید :

پس از کدهای قبلی کد زیر را قرار دهید

body {
background: url('../images/body-bg.png');
}

اگر ذخیره و فایل index.html را در مرورگر باز کنید، باید پس زمینه آن تغییر کرده باشد

اگر به یاد داشته باشید، در هنگام طراحی قالب در فتوشاپ عرض آن را 1024px قرار دادیم.

خب پس برای تعیین عرض قالب با کدهای css کد زیر را پس از کد قبلی قرار دهید :

#wrapper {
width: 1024px;
}

با کد فوق عرض قالب تعیین شد اما در وسط صفحه قرار نگرفته برای اینکار باید از margin استفاده کرد :

#wrapper {
width: 1024px;
margin: 0 auto;
}

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

سر صفحه (#header)

با استفاده از کد زیر ارتفاع سرصفحه، زمینه و سایه آن را تعیین میکنیم :

#header {
height: 200px;
background: url('../images/header-bg.png');
box-shadow: 0 1px 1px #000;
}

حال نوبت به سمت چپ و راست سرصفحه میرسد، برای تعیین از float استفاده می‌کنیم به صورت زیر :

#header .right {
float: right;
}
#header .left {
float: left;
}

اما اگر دقت کنید می‌بینید که منو نیز به کنار لوگو میاد، و این به خاطر خاصیت float است،

برای جلوگیری از این اتفاق باید تکه کدی را قبل از کدهای html منو به فایل index.html اضافه کنید به کدهای زیر دقت کنید

خط اول کد اضافه شده است :

<br style="clear: both" />
<ul id="menu">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">آ×وزش ها</a></li>
<li><a href="#">همکاری</a></li>
<li><a href="#">تبلیغات</a></li>
<li><a href="#">تماس با من</a></li>
<li><a href="#">درباره من</a></li>
<li><a href="#">نقشه سایت</a></li>
</ul>

هنگام استفاده از خاصیت float این خاصیت نه تنها آن عنصر را، بلکه عناصر بعد از ان را نیز تحت تاثیر خود قرار می‌دهد. اما خاصیت clear باعث خنثی شدن تاثیر خاصیت float  بر عناصر بعدی می‌شود. این تکنیک کاربرد زیادی در طراحی صفحات وب دارد.

نکته :

همیشه، هنگام استفاده از خاصیت float "باید" این تگ

<br style="clear: both" />

را قبل از تگی که تغییر موقعیت داده قرار دهیم، که در اینجا منو تغییر موقعیت داده بود.

برای راحتی نیز میتونید کد زیر رو در فایل style قرار بدین

.clearfix {clear: both;}

و سپس بجای تگ بالا از تگ زیر استفاده کنید :

<br class="clearfix" />

حال نوبت به درست کردن لوگو می‌شود، ابتدا تصاویر را وارد می‌کنیم :

#header .right #logo {
width: 253px;
height: 74px;
background: url('../images/logo.png') no-repeat;
}
#header .right #tagline {
width: 294px;
height: 35px;
background: url('../images/title.png') no-repeat;
}

نکته :

برای پیدا کردن اندازه‌های تصاویر وارد پوشه images شوید و روی تصویر مورد نظر کلیک کنید در این حال، اطلاعات تصویر در پایین نشان داده می‌شود.

راه دوم برای پیدا کردن اندازه‌های تصویر این است که :

بر روی تصویر کلیک راست کنید و گزینه properties رو انتخاب کنید سپس در پنجره باز شده در تب details اطلاعات تصویر از جمله height و width آن نوشته شده است :

حال اگر قالب را در مرورگر ببنید تصاویر وارد قالب شده اند اما مشکلی که لوگو و توضیح سایت دارد، این است که کلماتی که ما نیز نوشته ایم بر روی تصاویر افتاده اند برای برداشتن آن‌ها می‌توانیم تگ‌های h1 و h2 که در کدهای html نوشته ایم را برداریم، اما این کلمات برای موتورهای جستجو مهم هستند و باید در صفحه باشن، اگر از  display: none برای این دو تگ استفاده کنیم مشکل حل خواهد شد، اما موتور‌های جتسجو عناصری که display ان‌ها برابر با none باشد را در نظر نمی‌گیرند و به ان‌ها اهمیتی نخواهد داد. پس راه حل حتما یک تکنیک css است!!

در css از خاصیت text-indent برای تورفتگی خط اول پاراگراف استفاده می‌شود ما اینجا برای بیرون انداختن این کلمات از صفحه ، از این خاصیت استفاده می‌کنیم

#header .right #logo h1 ,
#header .right #tagline h2 {
text-indent: -9999px;
}

دقت کنید که حتما مقدار منفی باشد. (البته روش‌های دیگری هم وجود دارد، اینکه  opacity آن‌ها را 0  قرار دهید و یا که فونت‌های آن‌ها را لود کنید و بجای تصویر از متن واقعی استفاده کنید که بهترین روش می‌باشد، اما بخاطر اینکه حجم بالای فونت‌ها [هر فونت 200kb] باعث دیر لود شدن صفحه خواهد شد از این روش استفاده نکردیم.)

حال برای تعیین موقعیت لوگو و توضیح از margin استفاده می‌کنیم پس کد را به شکل زیر توسعه می‌دهیم :

#header .right #logo {
width: 253px;
height: 74px;
background: url('../images/logo.png') no-repeat;
margin-right: 20px;
margin-top: 10px;
}
#header .right #tagline {
width: 294px;
height: 35px;
background: url('../images/title.png') no-repeat;
margin-right: 60px;
}

حال نوبت به آیکون شبکه‌های اجتماعی میرسه، ابتدا باید آن‌ها را چپ به راست کنیم

#header .left #sn-icons {
direction: ltr;
}

حال با استفاده از margin موقعیت آن‌ها را به پایین و سمت چپ بکشیم پس :

#header .left #sn-icons {
direction: ltr;
margin-top: 3px;
margin-right: 37px;
}

به تصاویر نیز سایه می‌دهیم و کمی آن‌ها شفاف میکنیم :

#header .left #sn-icons img {
opacity: .50;
box-shadow: 1px 1px 1px #333;
}

حال با کد زیر هنگامی که تصاویر hover می‌شوند را کاملا نمایان کنید :

#header .left #sn-icons img:hover {
opacity: 1;
}

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نظرات کاربران

saeede

ببخشید اشتباه کردم اینم لینک
http://upir.ir/934/manim-site.rar

سجاد دریس

سلام.
شما کلاس های right و left رو به عنوان id برای عناصر درنظر گرفتین. لطفا طبق کدهای آموزش کدهاتون رو اصلاح کنید

saeede

باعرض سلام وخسته نباشید وممنون ازسایت خوبتون
من ی مشکلی داشتم اونم اینه که #header .right {
float: right;
}
#header .left {
float: left;
}
بعدازاینکه این کدارو نوشتم جهت نوشته های هدرم تغیییر نکرد وهمشون سمت راسته
ممنون میشم اگه راهنماییم کنید.

حسین(مسیحا)

body {
background: url(‘../images/body-bg.png’);
}

سلام میشه اینو واضح تر بگید یعنی دقیقا بعد از چه کدهایی؟؟
در مورد ذخیره ، فایل css رو ذخیره میکنی تغییری تو فایل html ایجاد نمیشه ، از دریم هم استفاده میکنم

سجاد دریس

سلام.
یعنی ادامه ی کدهای css ای که در جلسه قبلش نوشتیم، (بعد از کدهای css reset)
در مورد سوال دومتون، لینک کردین فایل css رو به فایل html؟

حسین(مسیحا)

بله لینک کردم

حسین(مسیحا)

سلام جناب آقا مشکل از من بود ببخشید حل شد

سجاد دریس

فایل هاتون ارسال کنید تا بررسی بشه

laya25

چرا از دیروز تا الان کسی جواب نمیده تو این سایت؟!!
لطفا یکی جواب سوالمو بده

سجاد دریس

عذرخواهی می کنم به خاطر دیر پاسخ دادن!

laya25

سلام من کد بعد از float رو قرار دادم ولی منو سر جای خودش نمیره البته وقتی float رو نوشتم غیر از منو بقیه عناصر هم جا بجا شدن میشه یه نگا بندازین ببینین مشکلم کجا بوده ممنون
http://upir.ir/1393.2/ghaleb_2a80f.zip

سجاد دریس

سلام.
توی خط 31 فایل index.html
تگ a رو نبستین.

laya25

سلام ببخشید لینک بالا درست نیست لطفا از این لینک استفاده کنید
ممنون
http://upir.ir/1393.2/my-web.zip

سجاد دریس

سلام.
شما باید کدهای استایل دهی به قالب رو بعد از استایل reset قرار بدین،
همچنین آدرسی دهی به تصویر اشتباه بود، باید یک /.. فبل از آدرس دهی قرار بدین، تا یک پوشه به عقب برگرده،
فایل css اصلاح شده : http://up.persianscript.ir/uploads/cb9a-style.rar

laya25

سلام من این کدی که اول گفتین رو نوشتم ولی اصلا پس زمینه عوض نمیشه کد رو بعد از end load font گذاشتم ولی هیچ تغییری نمیکنه در ضمن من برای قالبم یه فولدر تو درایو c ساختم و همه فایل های مربوط به سایت رو تو اون گذاشتم میگم شاید آدرس دهی مشکل داره یعنی من همون آدرسی که تو کد هست رو میزنم همون آدرس url
اگه نه پس مشکلم کجاست 🙁
ممنون

سجاد دریس

کل قالب رو zip کنید و یجا آپلود و لینک شو بفرستین، تا چِکِش کنم

سجاد دریس

لطف داری آقا بهرام.
ایشالا که موفق باشی.

بهرام

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

سجاد دریس

😀 شرمنده.

بهرام

نشد بازم با فایر فاکس باز میکنم اما تو اپرا درست شد. ممنون، راستی من میخواستم رای مثبت بدم به پاسخ ها اما چون نشون نمیده اون مثبت منفی رو اشتباه زدم شرمنده.

نیاز به لاگین

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