i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟

html-background

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

آشنایی با HTML و CSS و دسترسی به سورس قالب

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

استفاده از تگ background و bgcolor در HTML


اولین و آسان ترین روش تنظیم یک تصویر در پس زمینه صفحات وب استفاده از تگ ساده background در HTML است، برای رنگ نیز می توانید از تگ bgcolor و یک مقدار کد هگز (Hexadecimal یا Hex) استفاده کنید، کدهای هگز به صورت ترکیبی از اعداد و حروف هستند که در وب برای نمایش یک رنگ بخصوص استفاده می شود (این کدهای استاندارد در برنامه های گرافیکی و برنامه نویسی کاربرد دارند)، برای مثال در کد زیر ما تصویری کوچک با نام bg.gif و رنگی با کد 009966 را به صفحه خود اختصاص داده ایم (به خصوصیات تگ body دقت کنید):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر پس زمینه صفحه وب با خاصیت های HTML</title>
<!-- Webgoo.ir -->
</head>
<body background="bg.gif" bgcolor="#009966" dir="rtl">
<hr>
تصویر پس زمینه این صفحه، از تکرار یک تصویر کوچک ایجاد شده است.
</body>
</html>
پیش نمایش
توضیح:
- ابتدا باید فایل تصویر خود را در سرور سایت یا یک سرویس میزبان فایل آپلود و سپس آدرس URL تصویر را در قسمت background درج کنید، به طور مثال این آدرس می تواند مانند نمونه زیر باشد:
http://yoursite.com/upload/images/bg.gif
در صورتی که فایل تصویر در سایت خودتان آپلود شده باشد می توانید از آدرس دهی نسبی نیز استفاده کنید، به فرض:
/upload/images/bg.gif
- در حالت عادی مرورگر تصویر پس زمینه را تا جایی که تمام صفحه را پوشش دهد، در کنار هم به صورت عمودی و افقی تکرار می کند.
- برای دیدن و بررسی رنگ پس زمینه، باید نمایش تصاویر را در مرورگرتان غیر فعال کنید.
- برای بدست آوردن کدهای هگز می توانید از برنامه های ویرایشگر کدهای HTML یا برنامه هایی نظیر فتوشاپ استفاده کنید.

استفاده از background در CSS


اگر چه شیوه ای که در بالا گفتیم بسیار ساده و سریع است اما روش استاندارد و توصیه شده نیست، در حال حاضر به جای استفاده از کدهای خطی HTML توصیه می شود از استایل CSS برای تتنظیمات مربوط به ظاهر صفحات، از جمله رنگ و تصویر پس زمینه استفاده کنیم که از قدرت و انعطاف پذیری بیشتری برخوردار است، به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر پس زمینه صفحه وب با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat;
}
</style>
</head>
<body>
</body>
کد بالا نیز مانند مثال قبل عمل خواهد کرد با این تفاوت که این بار می توانیم از تنظیمات حرفه ای بیشتری استفاده کنیم، به عنوان مثال ما تصویر bg.gif را تنها در راستای محور X ها تکرار می کنیم و به تصویر پس زمینه قابلیت اسکرول در متن ها و صفحات طولانی را می دهیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر پس زمینه صفحه وب با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat-x;
    background-attachment:scroll;
    direction:rtl;    
}
</style>
</head>
<body>
<hr>
 پس زمینه این صفحه، از تکرار یک تصویر کوچک در راستای محور X ها ایجاد شده است.
</body>
</html>
پیش نمایش
توضیح:
- مقادیر url را باید با آدرس کامل تصویر خود جایگزین کنید، همان طور که در روش HTML گفته شد، فایل یا باید در یک سایت میزبان فایل آپلود و آدرس URL آن در این قسمت درج شود یا اینکه در سرور سایت شخصی آپلود و آدرس مطلق یا نسبی URL در این قسمت درج شود.
- background-repeat در CSS برای تعیین نحوه تکرار تصویر پس زمینه در صفحه نمایش است که می تواند مقادیری از جمله  repeat ، repeat-x، repeat-y و no-repeat داشته باشد.
- background-attachment در CSS قابلیتی است که می توانیم به کمک آن پس زمینه ثابت یا متغیر (اسکرولی) داشته باشیم، مقادیر آن fixed و scroll است.
- یک قابلیت دیگر CSS که در مثال تنظیم نشده background-position است که موقعیت تصویر پس زمینه را در صفحه مشخص می کند، مقادیر آن bottom، center، left ، right و top است.

ویرایش تصویر پس زمینه استایل CSS خارجی


کدنویسی اغلب قالب های وب (سایت، وبلاگ و...) به گونه ای است که محتوای استایل CSS به صورت فایل خارجی در صفحه وارد یا به اصطلاح ایمپورت شده اند، لذا در نگاه نخست هیچ خاصیتی برای تعریف یا تغییر background مشاهده نمی کنیم، اما با کمی دقت متوجه خواهیم شد که در واقع کدهای CSS قالب در یک فایل خارجی قرار دارند که با تگ link در HTML به صفحه وب وارد شده اند، به طور مثال:
<link rel="stylesheet" type="text/css" href="style/style.css">
در اینگونه موارد برای ایجاد تغییرات دلخواه باید آدرس URL فایل CSS را بدست آوریم و کدنویسی background مورد نظر را پیدا کرده، پس از ویرایش، جایگزین کد قبلی نمائیم، انجام این کار در وبلاگ ها معمولا کمی زمانبرتر است چون قالب وبلاگ ها عمدتا در یک سایت دیگر آپلود شده اند و ابتدا باید فایل CSS را از آن سایت دریافت کنیم، به طور مثال ممکن است استایل CSS قالب وبلاگ بر روی آدرس فرضی زیر قرار گرفته باشد (از طریق بررسی سورس کد HTML قالب می توان آدرس URL فایل CSS آن را تشخیص داد):
http://yoursite.com/blog/template/style/style.css
اگر این URL صحیح باشد با ورود آن در نوار آدرس مرورگر باید کدهای CSS قالب به صورت متنی نمایش داده شوند، در این مرحله دو راه برای ویرایش قسمت background مورد نظر وجود دارد، هم می توانیم فایل CSS را پس از ویرایش و اعمال تغییرات دلخواه به کلی در یک سرویس دیگر آپلود کرده و آدرس URL آن را جایگزین مقدار فعلی در قسمت href در سورس کد HTML قالب نمائیم و هم می توانیم با تعریف استایل CSS خطی پس از قسمت link، به مرورگر بگوئیم که خاصیت خطی را به جای خاصیت تعریف شده در فایل اصلی اجرا کند، به فرض اگر در فایل style.css کلاسی با نام bg-class داشته باشیم، می توانیم با تعریف همان کلاس به صورت خطی پس از تگ link، بدون تغییر فایل اصلی، خاصیت های موجود در آن را تغییر دهیم:
<link rel="stylesheet" type="text/css" href="http://yoursite.com/blog/template/style/style.css">
<style type="text/css">
.bg-class{
    background-color:#999;
    background-image:url(bg.gif);
    background-repeat:repeat-x;
}
</style>
به این صورت مرورگر استایل مشترک کلاس موجود در فایل CSS را نادیده گرفته و استایل خطی تعریف شده ما را اعمال خواهد کرد، این روش برای وبلاگ هایی که نمی خواهند برای اعمال تغییرات جزئی، فایل CSS قالب را در سایت دیگری آپلود نمایند کاربردی خواهد بود.
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» نحوه قرار دادن جستجوی گوگل در سایت یا وبلاگ
» کاربرد متاتگ refresh در صفحات وب (HTML)
» آموزش نحوه قرار دادن آهنگ و موسیقی پس زمینه در وبلاگ و سایت
» چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
» نحوه درج علامت های خاص در HTML
commentنظرات (۹۱ یادداشت برای این مطلب ارسال شده است)
نویسنده: a.ch
زمان: ۲۰:۰۵:۰۵ - تاریخ: ۱۳۹۱/۰۳/۳۰
ممنون ... خیلی نیاز داشتم..
نویسنده: شبگردتنها
زمان: ۱۸:۵۶:۲۲ - تاریخ: ۱۳۹۱/۰۵/۰۶
سلام
چطور یه پس زمینه واسه وبلاگم بزارم؟؟؟؟ واسم ایمیل کنید ممنون راستی برنامه هم بلد نیستم بنویسم
مرسی بای
پاسخ: 
متاسفانه بدون آشنایی با HTML و CSS حداقل در حد مقدماتی، نمی توان کمک زیادی کرد، شاید مناسب ترین گزینه در شرایط شما استفاده از قالب های آماده باشد.
نویسنده: baran
زمان: ۰۱:۲۵:۲۹ - تاریخ: ۱۳۹۱/۰۵/۰۹
سلام یه سوال مهم داشتم
من می خوام بدونم چه طوری یک اهنگ تصویری رو داخل وبلاگم قرار بدم خواهش میکنم زود تر بیاین به وبم و جواب منو بدید
پاسخ: 
لطفا در وب عبارت "آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت + وبگو" را جستجو کنید.
نویسنده: zahra
زمان: ۲۳:۳۳:۱۳ - تاریخ: ۱۳۹۱/۰۷/۰۹
ببخشید اگه ممکن یه مقدار واضح تر توضیح بدید واسه من که تازه واردم چیزی متوجه نشدم ممنون میشم
پاسخ: 
تنظیم پس زمینه کار چندان سختی نیست، منتها باید ابتدا حداقل آشنایی با HTML داشته باشید، چرا که بدون آن هر چقدر هم که ساده توضیح دهیم ممکن است به نظرتان پیچیده برسد، در هر صورت اگر در قسمت خاصی مشکل دارید مطرح کنید تا بیشتر راهنمایی کنیم.
نویسنده: UHAN
زمان: ۲۰:۲۸:۰۶ - تاریخ: ۱۳۹۱/۰۷/۱۲
سلام این لینک قالبیه که من میخوام واسه یکی اماده کنم :
http://www.maxtemp.ir/engine/download.php?id=134
من کل امروز رو سعی کردم که بتونم صفحه زمینش رو عوض کنم اما نتونستم اگه میتونید این عکس رو جای صفحه زمینش بذارید و به ایمیلم بفرستید:
http://s1.picofile.com/file/7517590428/Striped_Background_New_Pink.jpg
خیلی ممنون
پاسخ: 
باید ابتدا فایل زیر را ذخیره و ویرایش کنید:
http://www.maxtemp.ir/theme/maxtemp/style.css
و در قسمت body آن، به جای آدرس
background:url("images/body_bg_wood.jpg");
آدرس زیر را جایگزین کنید:
background:url("http://s1.picofile.com/file/7517590428/Striped_Background_New_Pink.jpg");
سپس فایل style.css را از نو در یک سرویس دیگر آپلود کرده و آدرس آن را جایگزین قسمت زیر در کد اصلی قالب کنید:
 <link href="http://www.maxtemp.ir/theme/maxtemp/style.css" rel="stylesheet" type="text/css" />
اکنون قالب شما از فایل CSS جدید که پس زمینه جدید دارد استفاده می کند.
نویسنده: Ali
زمان: ۲۲:۴۷:۵۷ - تاریخ: ۱۳۹۱/۰۷/۱۸
سلام ، چجوری میشه یه کاری کرد که ، پس زمینه خودشو اتوماتیک با سایز مانیتور بازدید کننده تنظیم کنه ؟
مثلاً اگر والپیپر سایت ما یک عکس در سایز فول اچ دی باشه ، اگر با مانیتور کوچکتر دیده بشه عکس نصفه باز میشه و بقیه عکس میره !
پاسخ: 
اگر پس زمینه کوچک تر از سایز مانیتور باشد، می توان آن را با CSS و repeat تکرار کرد تا همپوشانی ایجاد شود، اما اگر تصویر زمینه عریض و بیشتر از سایز مانیتورهای معمولی باشد، نمی توان کار خاصی انجام داد، تنها می توان با background-position تصویر را در وسط صفحه تنظیم کرد ولی حاشیه آن از مانیتور خارج خواهد شد.
نویسنده: samin
زمان: ۲۲:۴۵:۱۶ - تاریخ: ۱۳۹۱/۰۷/۱۹
من اصلا هیچی در مورد وبلاگ بلد نیستم هر چی می دونید لطفا به من یاد بدین.
مرسی
منتظرم
پاسخ: 
کار با وبلاگ در حد کاربردهای عادی چندان سخت نیست، کافی است کمی وقت بگذارید و مطالعه داشته باشید، در این زمینه منابع آموزشی بسیار خوبی در وب و به زبان فارسی وجود دارد.
نویسنده: سارا
زمان: ۰۹:۳۵:۳۶ - تاریخ: ۱۳۹۱/۰۸/۲۲
سلام می خوام بدونم اگر بخوام رنگ عنوان وبلاگ و سایز و فونتش رو تغییر بدم باید چه کار کنم؟؟؟؟؟؟
پاسخ: 
باید به قسمت ویرایش قالب بروید و جایی در بالای کد قالب خود، خط زیر را پیدا کنید:
<div id=BlogTitle>نوشته هاي جالب</div>
سپس آن را به صورت نمونه زیر تغییر دهید:
<div style="font-family:'Arial Black', Gadget, sans-serif; color:#CCC; font-size:14px; font-weight:bold;" id=BlogTitle>نوشته هاي جالب</div>
البته این فقط یک نمونه است، برای تنظیمات بیشتر باید با استایل CSS آشنا باشید.
نویسنده: amir
زمان: ۱۶:۵۶:۳۹ - تاریخ: ۱۳۹۱/۰۸/۲۸
خیلی ممنون استفاده کردم به منم یک سری بزن
نویسنده: ps
زمان: ۱۵:۴۳:۲۶ - تاریخ: ۱۳۹۱/۰۹/۱۳
سلام
من به فایل css دسترسی ندارم آیا راهی دیگری هم هست که بتونم تصویرش رو عوض کنم
ممنون
پاسخ: 
بله، می توانید از استایل خطی برای عناصر استفاده کنید، به طور مثال:
<div style="background-image:url(bg.jpg);"></div>
نویسنده: MohaMad
زمان: ۱۲:۲۴:۱۷ - تاریخ: ۱۳۹۱/۰۹/۱۷
سلام. ببخشید می خواستم برای پس زمینه یه عکس بزارم. ولی هر کاری می کنم نمیشه. میشه دقیقا بگین چی کار کنم. ممنون.
پاسخ: 
برای ویرایش و اعمال تغییرات ظاهری در وبلاگ، باید با اصول کدهای HTML و استایل CSS آشنایی داشته باشید، سپس یا تصویر پس زمینه از طریق فایل CSS قالب یا از طریق تگ body یا سایر تگ های div قابل تغییر است.
نویسنده: سحر
زمان: ۱۸:۳۳:۲۹ - تاریخ: ۱۳۹۱/۰۹/۲۴
سلام. من تازه واردم و با html چندان آشنایی ندارم. بنابر این از قالب آماده برای وبلاگم استفاده کردم. حالا ممکنه کمک کنید من در این قالب آماده تصویر زمینه و همچنین زمینه عنوان رو تغییر بدم. فکر می کنم این کد با css طراحی شده. من قسمت css رو از داخل کد پیدا کردم و اگه درست باشه تونستم بازش کنم:
<link href="http://farsiaddons.com/theme/rahbar1/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://farsiaddons.com/code.js"></script>
ولی نمی دونم چجوری پس زمینه رو تغییر بدم. این بخشی از کد html این قالب آماده هست که در بخش head بود.
ممنون میشم راهنماییم کنید زمینه و عنوان را تغییر بدم
پاسخ: 
برای ویرایش قالب های آماده باید فایل CSS آن را پیدا کنید که شما این کار را انجام داده اید، سپس با توجه به هدفتان به دنبال عنصر مشخص باشید و آن را ویرایش کنید، به طور مثال در اینجا برای تصویر زمینه از تگ body و یک کلاس برای آن با عنوان body1 استفاده شده است، لذا در فایل CSS خاصیت های مربوط به body1 را تغییر دهید، پس از اعمال تغییرات باید آن را آپلود کرده و مجددا فایل را در قالب به جای فایل CSS قبلی آدرس دهی کنید. اگر می خواهید راه ساده تر باشد، همین کار را با تعریف استایل خطی برای تگ body می توان انجام داد، به طور مثال:
<body class="body1" style="background:#000000 url('img/bg.jpg') no-repeat fixed center top; margin-top:0; margin-bottom:0;">
در اینجا چون استایل خطی بر استایل ایمپورت شده مقدم است، مرورگر تصویر زمینه تنظیم شده شما را نشان خواهد داد، در مورد زمینه عنوان هم باید ببینید از چه عنصری و با چه کلاسی استفاده شده است، سپس همان کلاس را در فایل CSS پیدا کنید و ویژگی های آن را تغییر دهید که راه ساده تر آن هم تعریف استایل به صورت خطی است، به طور مثال:
<div class="title" style="text-align: right; direction: rtl; text-decoration: none; font-size: 12pt;"></div>
نویسنده: ناشناس
زمان: ۲۲:۳۴:۳۲ - تاریخ: ۱۳۹۱/۱۰/۰۳
چگونه قالب را عریض کنیم؟
مثلا عکسی که پست کرده ایم در آن جا نمی شود
پاسخ: 
برای تغییر در قالب باید بر HTML تسلط و با CSS آشنایی نسبی داشته باشید، سپس می توانید سورس قالب را ویرایش کنید، در غیر این صورت بهتر است از تصویر کوچکتری استفاده کنید.
نویسنده: g.m
زمان: ۱۲:۵۱:۵۶ - تاریخ: ۱۳۹۱/۱۰/۰۸
سلام ، خسته نباشید ، منم مشکل بقیه دوستان رو تو تغییر تصویر زمینه دارم ، مطالبتون خوندم خیلی مفید بودند ، ممنون .
اما بازم نتونستم مشکلم رو حل کنم ، قالب بهم می ریزه ،،،
فایل Css هم پیدا کردم ، تغییرات لازم روش میدم اما قالب بهم میریزه .
این فایل قالب هستش :
http://s3.picofile.com/file/7599691177/ghaleb_shad.txt.html 
می خواستم اگه میشه بخش که باید تغییر داد مشخص کنید .
بازم ممنون .
پاسخ: 
باید تصویر 378 موجود در کلاس page را تغییر دهید، یعنی این تصویر:
http://avazak.ir/Theme/style/image/378.jpg
نویسنده: یونس
زمان: ۱۲:۳۶:۵۱ - تاریخ: ۱۳۹۱/۱۰/۲۴
چگونه می شود قالب وبلاگ را عوض کنیم
پاسخ: 
برای انتخاب قالب های پیش فرض، در قسمت مدیریت وبلاگ، بخش ویرایش قالب می تواند موارد دیگری را انتخاب کنید، در همین قسمت هم می توانید از کدهای HTML قالب های رایگان نیز استفاده نمائید.
paged صفحه 1 از 7




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

4 × 7
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)