آموزش برنامه نویسی و مهارتهای وب
دوشنبه ۳۱ اردیبهشت ۱۴۰۳
Monday, May 20, 2024 GMT +3:30
Monday, May 20, 2024 GMT +3:30
چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
تقریبا اولین چیزی که در بارگذاری یک صفحه وب نمود پیدا می کند، رنگ و تصویر پس زمینه آن است که می تواند بیانگر سلیقه، شخصیت کاری و حرفه ای مالک آن صفحه وب باشد، شاید برای شما هم پیش آمده باشد که بخواهید رنگ یا تصویر پس زمینه وبلاگ یا سایتتان را تغییر و باب طبع سلیقه ی خودتان تنظیم نمائید، هرچند استفاده از رنگ و تصویر در پس زمینه سایت و وبلاگ امری مرسوم است اما هنوز خیلی از کاربران نمی دانند که دقیقا چگونه باید این کار را انجام دهند، خیلی از طراحان کم تجربه تر وب نیز از برخی قابلیت هایی که می توانند از آن استفاده کنند بی اطلاع هستند، به همین دلایل در این آموزش سعی کرده ایم تا به زبان ساده، خلاصه و مفید به این موضوع بپردازیم، با امید به اینکه مفید واقع شود.
آشنایی با 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><!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">http://yoursite.com/blog/template/style/style.css<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>دسته بندی: آموزش کاربردی » HTML
قبلی »
مطالب بیشتر:چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
کاربرد متاتگ refresh در صفحات وب (HTML)
دیدگاه
۱۰۷ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.۲۰:۰۵ ۱۳۹۱/۰۳/۳۰
ممنون ... خیلی نیاز داشتم..
۱۸:۵۶ ۱۳۹۱/۰۵/۰۶
سلام
چطور یه پس زمینه واسه وبلاگم بزارم؟؟؟؟ واسم ایمیل کنید ممنون راستی برنامه هم بلد نیستم بنویسم
مرسی بای
چطور یه پس زمینه واسه وبلاگم بزارم؟؟؟؟ واسم ایمیل کنید ممنون راستی برنامه هم بلد نیستم بنویسم
مرسی بای
متاسفانه بدون آشنایی با HTML و CSS حداقل در حد مقدماتی، نمی توان کمک زیادی کرد، شاید مناسب ترین گزینه در شرایط شما استفاده از قالب های آماده باشد.
۰۱:۲۵ ۱۳۹۱/۰۵/۰۹
سلام یه سوال مهم داشتم
من می خوام بدونم چه طوری یک اهنگ تصویری رو داخل وبلاگم قرار بدم خواهش میکنم زود تر بیاین به وبم و جواب منو بدید
من می خوام بدونم چه طوری یک اهنگ تصویری رو داخل وبلاگم قرار بدم خواهش میکنم زود تر بیاین به وبم و جواب منو بدید
لطفا در وب عبارت "آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت + وبگو" را جستجو کنید.
zahra
۲۳:۳۳ ۱۳۹۱/۰۷/۰۹
ببخشید اگه ممکن یه مقدار واضح تر توضیح بدید واسه من که تازه واردم چیزی متوجه نشدم ممنون میشم
تنظیم پس زمینه کار چندان سختی نیست، منتها باید ابتدا حداقل آشنایی با HTML داشته باشید، چرا که بدون آن هر چقدر هم که ساده توضیح دهیم ممکن است به نظرتان پیچیده برسد، در هر صورت اگر در قسمت خاصی مشکل دارید مطرح کنید تا بیشتر راهنمایی کنیم.
۲۰:۲۸ ۱۳۹۱/۰۷/۱۲
سلام این لینک قالبیه که من میخوام واسه یکی اماده کنم :
http://www.maxtemp.ir/engine/download.php?id=134http://s1.picofile.com/file/7517590428/Striped_Background_New_Pink.jpgباید ابتدا فایل زیر را ذخیره و ویرایش کنید:
http://www.maxtemp.ir/theme/maxtemp/style.cssbackground:url("images/body_bg_wood.jpg");background:url("http://s1.picofile.com/file/7517590428/Striped_Background_New_Pink.jpg"); <link href="http://www.maxtemp.ir/theme/maxtemp/style.css" rel="stylesheet" type="text/css" />Ali
۲۲:۴۷ ۱۳۹۱/۰۷/۱۸
سلام ، چجوری میشه یه کاری کرد که ، پس زمینه خودشو اتوماتیک با سایز مانیتور بازدید کننده تنظیم کنه ؟
مثلاً اگر والپیپر سایت ما یک عکس در سایز فول اچ دی باشه ، اگر با مانیتور کوچکتر دیده بشه عکس نصفه باز میشه و بقیه عکس میره !
مثلاً اگر والپیپر سایت ما یک عکس در سایز فول اچ دی باشه ، اگر با مانیتور کوچکتر دیده بشه عکس نصفه باز میشه و بقیه عکس میره !
اگر پس زمینه کوچک تر از سایز مانیتور باشد، می توان آن را با CSS و repeat تکرار کرد تا همپوشانی ایجاد شود، اما اگر تصویر زمینه عریض و بیشتر از سایز مانیتورهای معمولی باشد، نمی توان کار خاصی انجام داد، تنها می توان با background-position تصویر را در وسط صفحه تنظیم کرد ولی حاشیه آن از مانیتور خارج خواهد شد.
۲۲:۴۵ ۱۳۹۱/۰۷/۱۹
من اصلا هیچی در مورد وبلاگ بلد نیستم هر چی می دونید لطفا به من یاد بدین.
مرسی
منتظرم
مرسی
منتظرم
کار با وبلاگ در حد کاربردهای عادی چندان سخت نیست، کافی است کمی وقت بگذارید و مطالعه داشته باشید، در این زمینه منابع آموزشی بسیار خوبی در وب و به زبان فارسی وجود دارد.
۰۹:۳۵ ۱۳۹۱/۰۸/۲۲
سلام می خوام بدونم اگر بخوام رنگ عنوان وبلاگ و سایز و فونتش رو تغییر بدم باید چه کار کنم؟؟؟؟؟؟
باید به قسمت ویرایش قالب بروید و جایی در بالای کد قالب خود، خط زیر را پیدا کنید:
<div id=BlogTitle>نوشته هاي جالب</div><div style="font-family:'Arial Black', Gadget, sans-serif; color:#CCC; font-size:14px; font-weight:bold;" id=BlogTitle>نوشته هاي جالب</div>۱۶:۵۶ ۱۳۹۱/۰۸/۲۸
خیلی ممنون استفاده کردم به منم یک سری بزن
ps
۱۵:۴۳ ۱۳۹۱/۰۹/۱۳
سلام
من به فایل css دسترسی ندارم آیا راهی دیگری هم هست که بتونم تصویرش رو عوض کنم
ممنون
من به فایل css دسترسی ندارم آیا راهی دیگری هم هست که بتونم تصویرش رو عوض کنم
ممنون
بله، می توانید از استایل خطی برای عناصر استفاده کنید، به طور مثال:
<div style="background-image:url(bg.jpg);"></div>۱۲:۲۴ ۱۳۹۱/۰۹/۱۷
سلام. ببخشید می خواستم برای پس زمینه یه عکس بزارم. ولی هر کاری می کنم نمیشه. میشه دقیقا بگین چی کار کنم. ممنون.
برای ویرایش و اعمال تغییرات ظاهری در وبلاگ، باید با اصول کدهای 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>ممنون میشم راهنماییم کنید زمینه و عنوان را تغییر بدم
برای ویرایش قالب های آماده باید فایل 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;"><div class="title" style="text-align: right; direction: rtl; text-decoration: none; font-size: 12pt;"></div>ناشناس
۲۲:۳۴ ۱۳۹۱/۱۰/۰۳
چگونه قالب را عریض کنیم؟
مثلا عکسی که پست کرده ایم در آن جا نمی شود
مثلا عکسی که پست کرده ایم در آن جا نمی شود
برای تغییر در قالب باید بر HTML تسلط و با CSS آشنایی نسبی داشته باشید، سپس می توانید سورس قالب را ویرایش کنید، در غیر این صورت بهتر است از تصویر کوچکتری استفاده کنید.
g.m
۱۲:۵۱ ۱۳۹۱/۱۰/۰۸
سلام ، خسته نباشید ، منم مشکل بقیه دوستان رو تو تغییر تصویر زمینه دارم ، مطالبتون خوندم خیلی مفید بودند ، ممنون .
اما بازم نتونستم مشکلم رو حل کنم ، قالب بهم می ریزه ،،،
فایل Css هم پیدا کردم ، تغییرات لازم روش میدم اما قالب بهم میریزه .
این فایل قالب هستش :
بازم ممنون .
اما بازم نتونستم مشکلم رو حل کنم ، قالب بهم می ریزه ،،،
فایل Css هم پیدا کردم ، تغییرات لازم روش میدم اما قالب بهم میریزه .
این فایل قالب هستش :
http://s3.picofile.com/file/7599691177/ghaleb_shad.txt.html بازم ممنون .
باید تصویر 378 موجود در کلاس page را تغییر دهید، یعنی این تصویر:
http://avazak.ir/Theme/style/image/378.jpgیونس
۱۲:۳۶ ۱۳۹۱/۱۰/۲۴
چگونه می شود قالب وبلاگ را عوض کنیم
برای انتخاب قالب های پیش فرض، در قسمت مدیریت وبلاگ، بخش ویرایش قالب می تواند موارد دیگری را انتخاب کنید، در همین قسمت هم می توانید از کدهای HTML قالب های رایگان نیز استفاده نمائید.
صفحه 1 از 8آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...۱۴۰۳/۰۲/۲۲
سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده ۱۴۰۳/۰۲/۲۱
سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون۱۴۰۳/۰۲/۱۹
سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...۱۴۰۳/۰۲/۱۹
پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...۱۴۰۳/۰۲/۱۸
پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...۱۴۰۳/۰۲/۱۶
vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...۱۴۰۳/۰۲/۰۵
vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...۱۴۰۳/۰۲/۰۴
پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...۱۴۰۳/۰۲/۰۲
هادی عبداله زاده
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟ ۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...۱۴۰۳/۰۱/۲۰
پـــرتو
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...۱۴۰۳/۰۱/۱۹
حسین بلاگ
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...۱۴۰۳/۰۱/۱۹
شریفی
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...۱۴۰۳/۰۱/۱۵
فرهادی
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...۱۴۰۳/۰۱/۱۰
فرهادی
با تشکر از شما یه مشکل دیگه برام پیش اومده واسه این کد وقتی echo می گیرم تومان باهاش میاد وقتی میخوام فقط...۱۴۰۳/۰۱/۰۹
سید صالح
با سلام و خسته نباشید من یک فرم ساده دارم که کاربر باید پر کنه چون سوال امنیتی و اینا نداره ربات ها همه...۱۴۰۳/۰۱/۰۷
فرهادی
با تشکر از شما یه سوال دیگه هم دارم توی تعدادی از سایتهای فروشگاهی صفحات سایت مپ به جای لینک صفحات حاوی لینکهایی هستند...۱۴۰۳/۰۱/۰۶
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.