Printable View
سلام
من می خوام تو دریم ویور با استفاده از ساده ترین کدهای css و یا هر زبون دیگه ای سربرگهایی رو مثل چیزی که توی تصویر دورش خط کشیدم ایجاد کنم یعنی سربرگی که حاوی یک تصویر پس زمینه زیبا و یک لوگو باشه و متن داخل اون قرار بگیره . اگر ممکنه آموزش اون نوع کد نویسی رو بزارین
تصویر مورد نظر : [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
تشکر می کنم
سادترین راهش این است که شما خودتان کدهای این سایت رو ببینید
و بسته به کارتون ازش استفاده کنید
برای این کار بهتر است شما از css استفاده کنید که اگر در سایت بگردید نمونه های بهتری پیدا می کنید
این کار خیلی ساده هست و چندین راهم داره با CSS .
ساده ترین و بد ترینش اینه که عین کل اون قسمت رو یعنی کل کادر با گوشه ها و همچی رو به عنوان یه عکس بکگراند یه لایه بزاری و بعد متون رو داخل لایه بنویسی یه Padding هم میتونی بدی که فاصله بیفته از متون تا کناره ها یا اینکه یه لایه دیگه بزاری تو لایه اصلی و اگر بتونی عکس بکگراند رو کم حجم دربیاری اتفاقا این به روش خوبی تبدیل میشه . راه دیگه و حرفه ای تر و سخت تر اینه که هر کدوم از قسمت بالا و پایین کادر رو که شامل گوشه ها هم میشه در یه لایه جدا بزاری متن هم در لایه جدا که این راه بهترین راهه از نظر من من خودم اگه میخواستم درست کنم اینطوری درست میکردم فقط یکمی ممکنه تو تنظمیات بین مرورگرهای مختلف دردسر داشته باشه راه سوم و چهارمی هست که باشه . ولی اگر دنبال راه ساده هستی همون اولی رو برو خیلی سادست فقط سعی کن حجم عکس رو تا جایی که کیفیتش از دست نره کم کنی.
قا لطفا یه نفر کمک کنه یا لااقل یه کتابی چیزی معرفی کنین .
برای این کار همونطوریکه دوستمون فرمودن شما میتونید با استفاده از table ( یا div که بهتره ولی کمی قلق! داره ) چارچوب خودتون رو ایجاد کنید بعد با استفاده از css یا حالت عادی عکس مورد نظرت به عنوان پس زمینه بخش مورد نظرت که با table ساختی قرار بدی وبعد به راهتی هر متنی که خواستی بهش اضافه کنی فقط باید مراقب حجم عکس باشی تا لود صفحت زیاد نشه
.....
شاد باشی
ببین من این قسمت از سایت خودم رو برات می زارم !
این کد رو یا در فایل css قرار بده یا به صورت مستقیم در صفحه سایتت قرار بده ( بهتر است که از فایل css استفاده کنی )
در هر حال اگر از فایل استفاده کردی یک فایل با نام دلخوا با پسوند css ایجاد می کنی و کد زیر رو توش قرار می دی ( مثلا style1.css )
[HTML]
.menuright {
width:175px;
margin-bottom:10px;
background-color:#F2F2FF;
overflow:hidden;
}
.titleright {
height:20px;
padding:6px 8px 3px 5px;
background-image:url(akse/titletitle.png);
color:#33FF00;
font-weight:bold;
font-size:16px;
}
.memoright {
padding:5px 5px 5px 5px;
border-left:solid 1px #FF9900;
border-right:solid 1px #FF9900;
border-bottom:solid 1px #FF9900;
color:#000000;
}
[/HTML]
حالا در صفحه سایتت از این کد استفاده می کنی !
اگر کدهای بالایی رو در فایل ذخیره کردی فایل رو آپلود می کنی و تک زیر رو در اول صفحه قرار می دی ( مابین تک head )
[HTML]
<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
[/HTML]
حالا در هر کجا که که خواستی می تونی از تک ها استفاده کنی یک مثال هم برات می زارم :
[HTML]
<div class="menuright">
<div class="titleright">عنوان </div>
<div class="memoright">
هر چیزی که می خواهی در صفحه قرار بگیره
</div>
</div>
[/HTML]
این هم یک مثال کلی :
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menuright">
<div class="titleright">عنوان </div>
<div class="memoright">
هر چیزی که می خواهی در صفحه قرار بگیره
</div>
</div>
</body>
</html>
[/HTML]