Уроки MODx. Урок 6: Как добавить на сайт картинку

Автор Ruslana Chernenko
Уроки MODx. Урок 6: Как добавить на сайт картинку

урок 6.

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

Каким образом можно оптимизировать вес изображения для этого я использую графический редактор — это Photoshop обращаем ваше внимание, что схожие функции есть практически любого графического редактора и соответственно.

Вы можете использовать любой графический редактор на ваше усмотрение. И так первое, что необходимо сделать — это открыть файл изображения для этого я выбираю в верхнем меню пункт файл открыть и выбираю изображение который планирует редактировать далее с целью уменьшения веса файла мы уменьшить размер изображения и приблизила какому размеру котором картинка будет отображено на сайте для этого мы выбираем в верхнем пункт изображения размер изображения в открывшемся окне. Мы можем изменить размер изображения зададим нашей картинки равно 350 пикселей далее нажимаем на кнопку. О'кей далее. Нам необходимо сохранить изображение для этого воспользуемся функцией Photoshop сохранить для веб которое позволяет сохранить изображение в наиболее оптимальном соотношении вес качества для этого в главном меню выбираем пункт файл сохранить для веб в открывшемся окне выберите два изображения слева оригинал справа изображений в том виде в котором она будет сохранена здесь же мы видим вес оригинала и предполагает изображение после его сохранения обращаю. Ваше внимание рекомендуемый вес изображения размер которого не превышает 350 пикселей по большей стороне не должен превышать 3. КБ первое, что вам необходимо сделать — это выбрать формат файла джипег далее. Нам необходимо отредактировать качество нашего изображение. Для этого необходимо в поле качества выбрать минимальное значение при котором видимых ухудшение качества заметно не будет после этого необходимо нажать на кнопку сохранить выбираем каталог для сохранения перед тем как сохранить файл. Давайте обратим внимание на еще одно требование предъявляемые к изображениям которое планируется разместить на сайте — это требование к имени файла имя файла может содержать в себе как прописные латинские буквы арабские цифры и символы тире и нижнее подчеркивание именно по этой причине мы меняем имя нашего файла далее нажимаем на кнопку сохранить после того как изображения необходимым образом отредактирована его можно для этого. Мы открываем вкладку файлы дерево элементов и в открывшемся файл менеджере выбираем или создаем каталог в котором будет содержаться на шее изображение в нашем случае — это будет каталог Imagine обращаю. Ваше внимание на сайте рекомендуется завести отдельный каталог для изображений в котором также могут содержаться каталоги с изображениями различной тематики далее необходимо щелкнуть правой клавишей по нашему каталогу и выбрать пункт загрузить файлы в открывшемся окне нажимаем на кнопку добавить и ищем наши изображение файловой структуре компьютера поставка изображение выбрана нажимаем на кнопку открыть таким же образом мы выбираем все изображения которые необходимо загрузить на сайт после этого нажимаем на кнопку загрузить после того как загрузка завершена мы нажимаем на кнопку закрыть после того как изображение загружено на сайт можно приступить к его размещение поле. Для этого необходимо поставить курсор в том месте где будет находиться картинка и нажать на панели инструментов кнопку добавить изображение в открывшемся окне нажимаем на кнопку просмотр напротив поля адрес и ещё на шее изображение уже файловой структуре сайта поставка изображение выбранное нажимаем на кнопку. О'кей далее необходимо заполнить поле описание и заголовок в содержание этих болей может совпадать поставь-ка поле описание заголовок заполнены мы переходим на вкладку положение здесь мы подгоняем размер изображения в нашем случае мы сделаем в 300 пикселей переходим к заполнению полистиль здесь я рекомендовал бы вам запомнить конструкцию следующего вида где слова задаёт отступать сторон изображения в пикселях начиная сверху 0 пикселей сверху 0 пикселей справа 0 пикселей снизу и 25 слева слова флот определяет положение нашей картинки в данном случае стоит по правой стороне текста после этого мы нажимаем кнопку вставить. Давайте Нажми на кнопку сохранить и посмотрим как выглядят наши изображение на сайте, а теперь для примера. Давайте попробуем расположить наш изображение по левой стороне Continental поля. Для этого необходимо щелкнуть по изображению и нажать на кнопку. Изменить изображение переходим во вкладку приложение для того чтобы изменить положение изображения. Нам необходимо отредактировать конструкцию которую напомнили для этого поле стиль напротив слова флот меняем слова Right на лифт также мы меняем отступы убираем отступ с левой стороны добавляем отступ с правой стороны нажимаем на кнопку обновить сохраняем изменения и смотрим их на сайте на этом данный видео урок можно считать завершенным.

0 комментариев
0

Читайте также