Як вставити картинку (зображення) на сайт

  1. HTML
  2. спосіб 1
  3. спосіб 2
  4. Спосіб 3. Lightbox на uCoz
  5. Картинка з текстового посилання

Будь-сайт неможливий без художнього оформлення. Тому перш за все необхідно вміти вставляти зображення на сайт.

HTML

Я вже писала, що один з основних мов, за допомогою якого написані веб-сторінки, - HTML. Відповідно почнемо з самих азів. Тег HTML за допомогою якого вставляється картинка на сайт - це <img> і виглядає це так:

<Img src = "ссилка_ на_ізображеніе.jpg">

Замість «ссилка_на_ізображеніе.jpg» Вам просто потрібно вставити шлях до необхідної картинці. Природно, що мовою HTML потрібно користуватися в HTML редакторах.

Найнеобхідніший атрибут, на мій погляд, який ви будете вживати, це ширина картинки - width = "», яка задається в пікселях. Дуже часто, коли задана ширина, висоту зображення вже ставити необов'язково. Вона буде задана автоматично відносної зазначеної ширини.

<Img src = "ссилка_ на_ізображеніе.jpg" width = "100">

Увійдіть у систему uCoz , Щоб створити повноцінний сайт всього за кілька кліків.

спосіб 1

Практично у всіх текстових модулях Ви можете додати картинку на сайт за допомогою кнопочки Практично у всіх текстових модулях Ви можете додати картинку на сайт за допомогою кнопочки .
Вона знаходиться в меню зверху вікна наповнення сторінки.
У модулі «Редактор сторінок» Вам доступний тільки цей спосіб або ж додавання в Панелі HTML кодів за допомогою тегів HTML, про які я писала вище.
Після натискання кнопки перед вами відкривається наступне вікно.

Вам необхідно заповнити поля відмічені червоним. Коли звикнете будете робити це в лічені секунди. Зверніть увагу, що під усіма пунктами приклад картинки і тексту. Залежно від внесених змін на цьому прикладі буде відображатися як це буде виглядати у Вас на страніце.Еслі не робити ніякі змін, то вони будуть такими, якими є за замовчуванням.

  • Перше і найголовніше, без чого Ви ніяк не обійдетеся, це сама посилання на зображення - шлях до файлу. Якщо Ви його знаєте просто вставляйте в рядок, а якщо немає натисніть на значок папки праворуч і потрапите в файловий менеджер, де Ви зможете вибрати вже має зображення або завантажити нове.
  • Назва. Тут Ви пишіть назву картинки. За цей титул пошукові системи будуть індексувати це зображення.
  • Вирівнювання. Де буде розміщений малюнок: вліво, вправо, середина і ін. Значення.
  • Відступ. Тут мається на увазі відступ від тексту. Величина задається в пікселях.

Після того, як Ви все заповнили натискайте кнопку вставити.

спосіб 2

У модулі «Каталог сайтів» є ще одна можливість додавання зображень, крім вищезгаданої. Додаючи картинки таким чином з'являється додаткова функція: при натисканні на картинку вона відкривається в збільшеному розмірі - ефект «lightbox» (автоматично встановлено на всіх сайтах uCoz з 12..06.2012). Цим способом добре робити скріншоти в статті, статті з ілюстраціями. Плюси цього способу в тому, що всі картинки будуть однакового розміру. Це дуже зручно, так як сама картинка додається в два кроки, швидко і прямо в візуальному редакторі.
У модулі «Каталог сайтів» є ще одна можливість додавання зображень, крім вищезгаданої
Для того щоб додати зображення просто натисніть на «Виберіть файл» і в діалоговому вікні виберіть потрібну картинку на Вашому комп'ютері. Далі система сама згенерує системний код ucoz для цієї картинки і тільки для цієї сторінки.

Цей системний код, наприклад $ IMAGE1 $, ви копіюєте і вставляєте в будь-яке місце Вашої статті прямо в візуальному редакторі. Праворуч від системного коду Ви можете задати розмір зображення.

Спосіб 3. Lightbox на uCoz

2.06.2012 - на uCoz впровадили використання ефекту для зображень fancyBox v2.0.5 він же ulightbox (назва Юкоз). За замовчуванням (це означає, що скрипт вбудований за замовчуванням і є на кожній сторінці) з'явився робочий скрипт fancyBox v2.0.5 зі своїми стилями оформлення.
Fancybox - це інструмент для відображення картинок, html контенту і мульти-медіа в стилі «lightbox», при якому картинка накриває основну сторінку сайту. Як використовувати цю функцію в два кліка описано вище, в Способі №2.
Але, якщо Ви хочете поекспериментувати з цією можливістю в ручному режимі (в тегах HTML) читайте далі.
Функція «lightbox» в модулях вбудована автоматично. але якщо Ви хочете внести в неї якісь свої невеликі зміни, тоді третій спосіб для Вас:

  • Відкриваєте файловий менеджер і додаєте нове зображення (або знаходите необхідне). Копіюєте посилання на це зображення куди-небудь.
  • відкриваєте « Панель HTML кодів »І в потрібне місце вставляєте наступний код:

    <Div>

    <A href = "ссилка_ на_ізображеніе.jpg" class = "ulightbox" data - fancybox - group = "ultbx" title = "Натисніть для перегляду"> <img alt = "" style = "margin: 0; padding: 0; border : 0; width: 600; " src = "ссилка_ на_ізображеніе.jpg" title = "Назва зображення"> </ a>

    </ Div>

  • Замість «ссилка_на_ізображеніе.jpg» вставляєте посилання на на раніше скопійоване зображення. Зверніть увагу що дана посилання зустрічається в цьому коді 2 рази !!!
  • Замість «width: 600» можете поставити свою ширину картинки.
  • Замість «Назва зображення» напишіть свою назву картинки.
  • Також в теги style, який описує стилі картинки, Ви можете доповнювати і змінювати стилі на свій розсуд.

І Ви отримаєте прекрасний ефект lightbox в потрібному Вам модулі. На жаль цей код не можна використовувати на інших сайтах.

Картинка з текстового посилання

За допомогою lightbox на uCoz можна зробити так, щоб при кліці на посилання з'являлася картинка. Виходить як варіант спливаючого вікна, тільки саме вікно - завжди картинка.

<Div> <a href = "ссилка_ на_ізображеніе.jpg" class = "ulightbox" data - fancybox - group = "ultbx" title = "Натисніть для перегляду"> Анкорссилкі </ a> </ div>

замість «Анкор посилання» - вставляєте опис свого заслання
замість «ссилка_на_ізображеніе.jpg» вставляєте посилання на на раніше скопійоване зображення.
приклад посилання

Статті по темі:

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: