نحوه تعبیه تصویر در وب سایت

فهرست مطالب:

نحوه تعبیه تصویر در وب سایت
نحوه تعبیه تصویر در وب سایت

تصویری: نحوه تعبیه تصویر در وب سایت

تصویری: نحوه تعبیه تصویر در وب سایت
تصویری: کی معروف تره ؟ من یا پوتک ؟ 😂 خداست این وبسایت 2024, نوامبر
Anonim

هر آنچه بازدید کننده در صفحات سایت مشاهده می کند توسط مرورگر بر اساس دستورالعمل های دقیق ارسال شده توسط سرور نمایش داده می شود. این دستورالعمل ها کد html صفحه هستند و از "برچسب" های جداگانه ای تشکیل شده اند که نوع ، شکل ظاهری و مکان هر عنصر را به صورت جداگانه توصیف می کنند. برای قرار دادن هر عنصر جدید (به عنوان مثال ، یک تصویر) در یک صفحه ، باید دستورالعمل مربوطه - برچسب - را به کد منبع آن اضافه کنید. ساده ترین راه برای این کار را در نظر بگیرید.

درج تصویر در یک صفحه
درج تصویر در یک صفحه

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

مرحله 1

اگر از هر نوع سیستم مدیریت محتوا استفاده می کنید ، به احتمال زیاد شامل یک ویرایشگر صفحه باشد. ابتدا باید صفحه مورد نظر را در این ویرایشگر باز کنید. بعلاوه - گزینه ها امکان پذیر است. در بهترین حالت ، ویرایشگر صفحه "حالت تصویری" دارد ، به عبارت دیگر - "حالت WYSIWYG" (آنچه می بینید همان چیزی است که دریافت می کنید - "آنچه می بینید همان چیزی است که می گیرید"). در این حالت ، شما اصلاً نیازی به سر و کار داشتن با کد html اصلی نخواهید داشت! صفحه ویرایشگر همانند سایت خواهد بود ، کافی است ماوس را در مکان مورد نظر فشار داده و دکمه "درج تصویر" را بر روی صفحه ویرایشگر فشار دهید.

گام 2

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

جعبه گفتگوی تصویر را وارد کنید
جعبه گفتگوی تصویر را وارد کنید

مرحله 3

با توجه به اینکه هیچ استاندارد واحدی برای سیستم های کنترل وجود ندارد ، روش درج تصویر در حالت تصویری سیستم شما ممکن است اندکی متفاوت باشد ، اما اصل آن همان خواهد بود. به همین دلیل ، حالت WYSIWYG ممکن است در سیستم مدیریت سایت شما ظاهر نشود. سپس هنوز باید کد منبع صفحه را در HTML ویرایش کنید (HyperText Markup Language - "hypertext markup language"). شما باید یک برچسب را در جای درست کد وارد کنید که به مرورگر می گوید تصویر را در اینجا نشان دهد. در ساده ترین شکل ، باید به این شکل باشد: در اینجا "آدرس نسبی" تصویر وجود دارد - در این آدرس مرورگر باید با سرور تماس بگیرد تا فایل تصویر را از آن دریافت کند. اگر آدرس نسبی باشد ، مرورگر تصور می کند که پرونده در همان پوشه سرور صفحه (یا در یک پوشه فرعی) قرار دارد. اما ، برای اینکه اشتباه نشود ، بهتر است "آدرس مطلق" را مشخص کنید - به عنوان مثال ، مانند این: به طور طبیعی ، برای اینکه سرور بتواند تصویر را به مرورگر پیدا کند و ارسال کند ، باید آن را در مشخص شده بارگذاری کند محل. ساده ترین راه برای انجام این کار از طریق مدیر پرونده است که در هر سیستم مدیریت محتوا و همچنین در صفحه کنترل شرکت میزبان شما وجود دارد. همچنین می توانید این کار را با استفاده از پروتکل FTP (پروتکل انتقال پرونده - "پروتکل انتقال پرونده") ، با استفاده از یک برنامه خاص - FTP-client انجام دهید. بسیاری از آنها وجود دارد ، هر دو پرداخت می شود و رایگان - به عنوان مثال ، Cute FTP ، FlashFXP ، WS FTP ، و غیره. اما ، مطمئناً نصب ، مسترینگ و پیکربندی برنامه زمان بر است ، بنابراین یک مدیر فایل برای بارگیری هر آنچه که شما نیاز دارید از طریق مرورگر گزینه ساده تری است.

مرحله 4

علاوه بر آدرس در برچسب html تصویر ، می توانید اطلاعات اضافی - "ویژگی" های برچسب را مشخص کنید. به عنوان مثال ، مشخصه alt="Image" حاوی متنی برای راهنمای ابزاری است که هنگام قرار دادن نشانگر ماوس بر روی تصویر ظاهر می شود: می تواند با ویژگی - title جایگزین شود: - اندازه مستطیلی که مرورگر باید در آن باشد نمایش تصویر با مشخصه های عرض و ارتفاع تنظیم می شود: - ویژگی حاشیه عرض حاشیه اطراف تصویر را مشخص می کند (بر حسب پیکسل): اگر برای تصویر پیوند ایجاد شود ، مرورگر یک حاشیه آبی دور آن می کشد.برای خلاص شدن از آن ، مقدار حاشیه را روی صفر تنظیم کنید: - دو ویژگی دیگر حاوی اطلاعاتی در مورد میزان فرورفتگی تصویر از عناصر مجاور است (از خطوط متن ، تصاویر دیگر و غیره) - hspace اندازه اندازه را تنظیم می کند تورفتگی به صورت افقی (چپ و راست) ، vspace - به صورت عمودی (پایین و بالا):

توصیه شده: