Возможно вам это пригодится)
На сегодняшний день в связи с обновлением WordPress
изменился порядок редактирования загруженной фотографии. В целом, редактирование упростилось. Порядок загрузки фото с компьютера остался таким же.
Для того чтобы вставить фото на сайт или в текст статьи поставьте для начала курсор в то место вашего текста, куда вы хотите разместить фотографию. Затем нажмите кнопку «Добавить медиафайл». Она располагается между Заголовком статьи и консолью редактирования текста (См. рис 1)
(См. рис 1)
В открывшемся окне «Вставить медиафайл» нажмите ссылку «Загрузить файлы» (см. рис 2)
(рис 2)
В следующем окне нажмите кнопку «Выберите файлы» (см. рис. 3)
(см. рис. 3)
Перед вами откроется дополнительное окно. Подготовьте заранее фотографии которые вы хотите разместить на сайте и соберите их в отдельной папке на вашем компьютере. Через дополнительное окно войдите в эту папку и выберите фотографию нажав на изображение мышкой один раз.
Если вам необходимо вставить все фотографии сразу, тогда выделите их все.
После этого нажмите кнопку «Открыть», которая располагается в правом нижнем углу дополнительного окна
(см. рис. 4)
(см. рис. 4)
Выбранная фотография загрузится на сайт и будет находиться во вкладке «Медиафайлы» и в дальнейшем при необходимости может загружаться в другие статьи сайта, повторно её загружать с компьютера уже не требуется. В активные окна справа введите необходимую информацию (см. рис. 5):
— в «Заголовок» и «В атрибут alt «
— введите название вашей статьи.
— в «Описание» — напечатайте одним предложением о чем ваша статья. В тексте предложения должен присутствовать заголовок статьи (см. рис. 5).
Затем нажмите кнопку «Вставить в страницу». Если вы пишите текст не в «Страницу», а в «Запись», то у вас будет кнопка «Вставить в запись» — нажмите eё.
(рис. 5)
Фотография появится в том месте куда вы перед этим поставили курсор. Изначально фотография загрузится не в том размере, который будет оптимально смотреться на станице сайта (см. рис 6). Но это легко исправимо.
(рис. 6)
Чтобы редактировать изображение, наведите на него курсор и нажмите левой кнопкой мыши 1 раз. Изображение покроется синим фоном, з
атем нажмите на изображение в верхнем левом углу (см. рис.7)
(рис. 7)
После того, как нажмете на иконку, как это показано на рис 7, вы попадете в панель редактирования фотографии (см. рис 8). Здесь тоже необходимо ввести нужную информацию для улучшения индексации загруженной фотографии:
— в строку «Заголовок» введите заголовок вашей статьи;
— в строку «Атрибут alt» — также введите заголовок вашей статьи;
Затем выберите расположение вашей картинки на сайте: «Слева», «Справа», «По центру» или «Нет».
После того, как введете всю необходимую информацию нажмите вкладку «Дополнительно» в верхней строке дополнительного окна»
(рис 8)
На этой страничке можно устанавливать размеры фотографии, то есть ширину, высоту и расстояние отступа текста от границ фотографии. Поставьте размеры чуть меньше тех, которые будут стоять по умолчанию. Потом когда посмотрите. как фотография будет выглядеть на сайте, размеры можно будет без труда изменить и установить подходящие.
В активном квадратике «Открывать в новой вкладке» поставьте галочку. Если нажать на фото непосредственно на сайте, то оно откроется в новом окне (см. рис. 9).
(рис 9)
После того, как введете всю необходимую информацию, нажмите кнопку «Обновить» в левом нижнем углу дополнительного окна. Все, ваша фотография вставлена в текст. В редакторе это будет выглядеть вот так (см. рис 10).
Нажмите кнопку «Сохранить».
Перед публикацией
нажмите вкладку «Посмотреть» и взгляните, как статья с фото выглядит на сайте. При необходимости внесите корректировки по размерам и пересохраните страницу. Затем нажмите кнопку «Опубликовать».
(рис 10)
Фото вставлено в статью и корректно выглядит на сайте (см. рис 11)
(рис 11)
Если фотографию необходимо резместить не по середине, а справа или слева, (см. рис 12) то действуйте следующим порядком.
(рис 12)
Кликните на фотографию и войдите панель редактирования. Здесь выберите «Выравнивание» «Слева» (см. рис 13)
(рис 13)
Заполните все необходимые данные аналогичным порядком и нажмите кнопку «Обновить» (см. рис 14)
(рис 14)
После того как опубликуете статью, фото на сайте будет выглядеть как показано на рисунке 15.
(рис 15)
Надеюсь у вас не возникнет трудностей по размещению фотографий и рисунков на сайте. При обнаружении каких-то неточностей или непонятных моментов прошу сообщить в комментариях.
Читайте статью на этом сайте
За вставку картинок в HTML-документ отвечает тег ![]()
и его атрибуты, главным из которых можно считать src
, задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.
Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
Раньше у тега ![]()
был ещё один обязательный атрибут - alt
, но с приходом HTML 5 он был переведён в разряд желательных. alt
устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.
Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width
(указывает ширину) и height
(определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).
Допустим, нам требуется добавить на страницу изображение image.png
с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:
Навигационная карта
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
- - контейнер, внутри которого описывается карта изображения.
-
- тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов
и придётся поставить. Связка -
работает точно так же, как связки
--
и --
, создающие списки.
- shape
- атрибут тега
, задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
- cords
- определяющий координаты области атрибут. Также принадлежит тегу
. Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
- usemap
- атрибут тега img
, который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.
Пример карты изображения
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg
. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
5. Закрываем карту:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
Навигационная карта
