نحوه ایجاد پس زمینه در وب سایت

فهرست مطالب:

نحوه ایجاد پس زمینه در وب سایت
نحوه ایجاد پس زمینه در وب سایت

تصویری: نحوه ایجاد پس زمینه در وب سایت

تصویری: نحوه ایجاد پس زمینه در وب سایت
تصویری: Как создать яркий абстрактный фон для сайта в Фотошоп | Туториал 2024, آوریل
Anonim

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

نحوه ایجاد پس زمینه در وب سایت
نحوه ایجاد پس زمینه در وب سایت

دستورالعمل ها

مرحله 1

ابتدا باید بفهمید پس زمینه در نسخه فعلی سایت کدام یک از راه هاست. برای انجام این کار ، کد HTML صفحه را باز کنید. با بارگیری فایل از سرور از قبل می توانید این کار را با یک ویرایشگر متن ساده انجام دهید. یا اگر می توانید از ویرایشگر صفحات سیستم مدیریت محتوا استفاده کنید. ویرایشگر صفحه نیازی به بارگیری پرونده نیست ، اما آن را مستقیماً در سرور با استفاده از مرورگر به عنوان رابط تغییر می دهد. کد HTML (HyperText Markup Language) صفحه ای که باز می کنید از خطوط دستورالعمل برای مرورگر تشکیل شده است. آنها انواع ، شکل ظاهری و مکان هر یک از عناصر یک صفحه وب را توصیف می کنند. این دستورالعمل ها معمولاً با عنوان "برچسب" شناخته می شوند. ترتیب برچسب ها در کد صفحه نیز از قوانین زبان HTML پیروی می کند - آنها به بلوک هایی تقسیم می شوند که اولین آنها باید یک بلوک عنوان باشد که با یک برچسب شروع می شود و به پایان می رسد. باید بلوکی دنبال شود که اکنون بیشتر به شما علاقه مند می شود - متن اصلی سند. این فقط به برچسب ها و. در برچسب آغازین این بلوک () ، می توانید اطلاعات مربوط به پس زمینه صفحه را قرار دهید. به چنین اطلاعاتی در برچسب ها "ویژگی" گفته می شود. ویژگی برچسب بدن که رنگ پس زمینه را تنظیم می کند به عنوان bgcolor نشان داده می شود و در کد ممکن است به این شکل باشد: در اینجا ما رنگ زمینه را برای صفحه نقره ای تنظیم می کنیم. مرورگر می تواند برخی از رنگ ها را با نام آنها تشخیص دهد ، اما برای اینکه اشتباه نشود ، بهتر است کدهای شانزده دلاری آنها را نشان دهید. این نسخه با رنگ نقره ای در عبارت هگزادسیمال به صورت زیر خواهد بود: بنابراین ، شما باید برچسب شروع شده با <body را در کد صفحه پیدا کنید و بررسی کنید که آیا رنگ زمینه دارد. اگر چنین است ، نشانگر رنگ موجود در آن را با نسخه جدید خود جایگزین کنید و تغییرات را در صفحه ذخیره کنید.

گام 2

پس زمینه در طراحی فعلی سایت شما را نمی توان براساس رنگ ، بلکه توسط یک تصویر تنظیم کرد. ویژگی مربوط به برچسب body پس زمینه نامیده می شود و می تواند در کد به صورت زیر باشد: در اینجا ، پس زمینه تصویر bg.jpg

مرحله 3

هنگام توصیف ظاهر صفحات با طراحی نسبتاً پیچیده ، از "ورق های سبک آبشار" - CSS (Cascading Style Sheets) استفاده کنید. بلوک های کد CSS می توانند مستقیماً در کد صفحه قرار بگیرند یا در یک فایل خارجی با پسوند "css" موجود باشند. شما باید به دنبال برچسب توصیف سبک باشید که با <style در قسمت هدر کد صفحه شروع می شود (بین برچسب ها و). اگر حاوی پیوندی به یک پرونده خارجی باشد ، مانند این خواهد بود:import "style.css" ؛ در اینجا پیوندی به یک صفحه سبک به نام style.css وجود دارد. شما باید فایل مشخص شده را برای ویرایش باز کنید. و اگر پیوندی وجود ندارد و پس از باز کردن <برچسب style ، دستورالعمل های سبک وجود دارد ، پس باید آنها را در اینجا ویرایش کنید. در هر دو گزینه ، در میان توصیف سبک ها ، باید به دنبال موارد مربوط به متن سند (متن) باشید. این مجموعه توضیحات ممکن است به این شکل باشد: body {

رنگ زمینه: نقره ای

رنگ سیاه؛

} در اینجا شما باید مقدار پارامتر background-color را با مقدار رنگ جدید و بهتر در همان مقادیر هگزادسیمال جایگزین کنید. گزینه تصویر پس زمینه در دستورالعمل های CSS باید به این شکل باشد: body {

پس زمینه: # C0C0C0 url (img / bg.jpg) repeat-y؛

رنگ سیاه؛

} در اینجا پیوند به تصویر همان پیوندی است که در بالا مورد بحث قرار گرفت و # C0C0C0 قبل از پیوند بدان معنی است که فضای صفحه ای که توسط تصویر پس زمینه اشغال نشده است ، دارای پس زمینه نقره ای خواهد بود. "تکرار-y" نشان می دهد که تصویر پس زمینه باید در امتداد محور Y (عمودی) ضرب شود."Repeat-y" را می توان با "تکرار-x" (تکرار افقی) یا "بدون تکرار" جایگزین کرد (تکرار نکن). اگر تکرار را به طور کامل مشخص نکنید ، پس زمینه تصویر از همه جهات به فضای پس زمینه صفحه کاشی می شود.

توصیه شده: