Как да вградите изображение в уебсайт

Съдържание:

Как да вградите изображение в уебсайт
Как да вградите изображение в уебсайт

Видео: Как да вградите изображение в уебсайт

Видео: Как да вградите изображение в уебсайт
Видео: 🔴 ПРЯМОЙ ЭФИР! LIVE Маша и Медведь 👱‍♀️🐻 Да здравствует осень! 🍂🍁 2024, Ноември
Anonim

Всичко, което посетителят вижда на страниците на сайта, се показва от браузъра въз основа на подробни инструкции, изпратени му от сървъра. Тези инструкции се наричат html-код на страницата и са съставени от отделни „тагове“, които описват вида, външния вид и местоположението на всеки елемент поотделно. За да поставите всеки нов елемент (например изображение) в страница, трябва да добавите съответната инструкция - таг - към нейния изходен код. Помислете за най-лесния начин да направите това.

Вмъкване на изображение в страница
Вмъкване на изображение в страница

Инструкции

Етап 1

Ако използвате каквато и да е система за управление на съдържанието, тогава е много вероятно тя да включва редактор на страници. Първо, трябва да отворите желаната страница в този редактор. Освен това - възможни са опции. В най-добрия случай редакторът на страницата ще има „визуален режим“, с други думи - „WYSIWYG режим“(What You See Is What You Get - „what you see is what you get“). В този режим изобщо няма да се налага да се занимавате с оригиналния html-код! Страницата в редактора ще изглежда по същия начин, както на сайта, ще бъде достатъчно да натиснете мишката на желаното място и да натиснете бутона "вмъкване на изображение" на панела на редактора.

Стъпка 2

В резултат на това ще се отвори диалогов прозорец, в който трябва да изберете желаната картина. Ако все още не сте го качили, има и бутон за избор на изображение на вашия компютър и качване на сървъра. Освен това, в този диалогов прозорец можете да зададете цвета и ширината на рамката около изображението, разстоянието и цвета на запълването между рамката и изображението, текста за подсказката. Не е необходимо да указвате размерите тук, но от съображения за ускоряване на зареждането на страницата и за предотвратяване на изкривяване на дизайна, все пак е по-добре да направите това. Когато всички задължителни полета на диалоговия прозорец са попълнени, щракнете върху "OK" и след това запазете редактираната страница.

Диалогов прозорец Вмъкване на изображение
Диалогов прозорец Вмъкване на изображение

Стъпка 3

Поради факта, че няма единен стандарт за системи за управление, процедурата за вмъкване на изображение във визуалния режим на вашата система може да се различава леко, но принципът ще бъде същият. По същата причина режимът WYSIWYG може да не се появи в системата за управление на вашия сайт. След това все още трябва да редактирате изходния код на страницата в HTML (HyperText Markup Language - „хипертекстов език за маркиране“). Ще трябва да вмъкнете етикет на правилното място в кода, който казва на браузъра да показва изображението тук. В най-простата си форма тя трябва да изглежда така: Ето "относителния адрес" на изображението - на този адрес браузърът трябва да се свърже със сървъра, за да получи файла с изображението от него. Ако адресът е относителен, тогава браузърът ще приеме, че файлът е в същата папка на сървъра като самата страница (или в подпапка). Но за да не се заблуди, по-добре е да посочите "абсолютния адрес" - например по следния начин: Естествено, за да може сървърът да намери и изпрати изображението в браузъра, то трябва да бъде качено на посочения местоположение. Най-лесният начин да направите това е чрез файловия мениджър, който е във всяка система за управление на съдържанието, както и в контролния панел на вашата хостинг компания. Можете да направите това и с помощта на FTP-протокол (File Transfer Protocol - „протокол за прехвърляне на файлове“), като използвате специална програма - FTP-клиент. Има много от тях, както платени, така и безплатни - например Cute FTP, FlashFXP, WS FTP и др. Но, разбира се, инсталирането, овладяването и конфигурирането на програмата ще отнеме време, така че файловият мениджър за изтегляне на всичко, от което се нуждаете, чрез браузърът е по-лесна опция.

Стъпка 4

В допълнение към адреса в html-маркера на изображението, можете да посочите допълнителна информация - "атрибути" на маркера. Например атрибутът alt="Image" съдържа текста за подсказка, който изскача, когато задържите курсора на мишката върху изображението: Той може да бъде заменен с атрибута - title: - Размерът на правоъгълника, в който браузърът трябва показване на изображението се задава от атрибутите width и height: - Атрибутът border определя ширината на границата около изображението (в пиксели): Ако изображението е направено като връзка, браузърът ще изчертае синя рамка около него. За да се отървете от него, задайте стойност на границата на нула: - Другите два атрибута съдържат информация за размера на отстъпа на картината от съседни елементи (от редове текст, други снимки и т.н.) - hspace задава размера на отстъп хоризонтално (отляво и отдясно), vspace - вертикално (отдолу и отгоре):

Препоръчано: