Новости
Будь-сайт неможливий без художнього оформлення. Тому перш за все необхідно вміти вставляти зображення на сайт.
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» вставляєте посилання на на раніше скопійоване зображення.
приклад посилання