КАК НОВИЧКУ ВСТАВИТЬ КАРТИНКУ В СТАТЬЮ И СДЕЛАТЬ КАРТИНКУ ССЫЛКОЙ НА САЙТЕ WORDPRESS

04.02.2014 00:01

 Сегодня мы  будем учиться тому ,  как вставить картинку , фотографию , скриншот  – одним словом изображение в статью на сайте wordpress . Изображение  статью делает более привлекательной . Картинки, фотографии и конечно ,  скриншоты , поясняют текстовое содержание статьи , для новичков это очень важно.

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

Прежде  чем перейти непосредственно к теме нашего урока , как вставить картинку в статью , давайте вспомним , как к нам на ПК(персональный компьютер) попадают картинки , фотографии и скриншоты.

Простейший рисунок –картинку можно нарисовать в программе Paint , мы это изучали на Уроке №4 Как создать рисунок в Paint , там же рассмотрен вопрос о сохранении рисунка.

Фотографии мы загружаем из цифрового фотоаппарата в ПК.  Все знают , как это сделать ? Кто забыл , почитайте Урок № 5  Как загрузить фото из цифрового фотоаппарата в ПК . Этот урок является , на сегодняшний день , самым востребованным у посетителей сайта .

Скриншоты – мгновенный снимок с экрана монитора . Как снять скриншот с экрана монитора , описано в Уроке № 6 Как сделать скриншот. Очень полезная статья. Почитайте , обязательно  пригодится.

Как создать изображение для работы вспомнили. Так , теперь вспоминаем , где же на ПК у нас хранятся изображения?  Если этот вопрос поставил вас в тупик , то вам обязательно нужно почитать и изучить Урок № 1 и Урок № 2

Какой то сегодня урок воспоминаний получился , когда же будет тема урока- Как добавить  картинку в статью . Терпение друзья  мои ,  мы должны хорошо подготовиться , чтоб  этот урок не вызвал трудностей понимания . Продолжим .

Прежде чем , добавить изображение в статью , необходимо поработать с этим изображением – уменьшить его размер , особенно это касается фотографий. Как это сделать ? Правильно , почитать уроки на сайте . Здесь нам очень помогут несколько уроков – Урок № 7 Свойства изображения , Урок №8 Виды мониторов , Урок № 9  Единицы измерения количества информации и  Урок № 10 Как уменьшить размер изображения .  Вот теперь всё !

Важное дополнение к Уроку № 2 Создание папок для хранения информации

Внимание !!! К Уроку № 2 я хочу сделать одно важное дополнение. Вы создали папку для картинок (Фотокартинки) и папку ,  подготовленных фотографий (картинок)  для размещения в Интернет , (Webкартинка) . Я настоятельно рекомендую вам в этих папках создавать папки под каждую статью. Сейчас объясню почему. Я пишу уроки для новичков, картинок использую много . Сначала все картинки у меня находились в одной общей папке. Сортировка картинок идет по алфавиту. Когда было еще немного картинок , было терпимо, но количество их росло с каждым уроком ,  найти нужную картинку становилось всё труднее  и это очень раздражало , что приходилось искать , терять время.

Чтоб навести порядок раз и навсегда – я решила в каждой папке завести папки для каждого урока(статьи). Получилось так . Папка  Фотокартинки – в ней папка Урок № 1 , когда картинки подготовлю для размещения в Интернет , то они попадают уже в папку Webкартинки – папка web Урок № 1. Всё понятно !   Попробуйте облегчить себе жизнь, наведением порядка в хранении изображений в ПК.

Итак , чтоб приступить в теме Урока № 22 Как загрузить картинку в статью на сайте wordpress , необходимо  освежить память , прочитав  девять уроков , да уж многовато будет . А что делать, если без этих знаний не обойтись. Читайте , изучайте и применяйте свои знания при создании сайта с нуля  !!!

Как добавить картинку в статью сайта на wordpress

Заходим на свой сайт wordpress ,  вот опять вынуждена , тех кто не знает или забыл  приглашать ознакомиться с Уроком  № 15 Как создать сайт на бесплатном хостинге . В админке сайта , выбираем раздел Записи,  находим вкладку Все записи , нажимаем на надпись . Открывается страница  Записи . Будем работать с Тестовой записью . Находим статью -Тестовая  запись нажимаем Изменить.


Открывается страница Редактировать запись. Заголовок мы менять не будем.  Открыта вкладка Визуального Редактора WordPress . Устанавливаем курсор туда , куда будем вставлять картинку и нажимаем кнопку Добавить медиафайл , которая находится над панелью инструментов  Редактора WordPress .


Открывается страница Добавить медиафайл . Существует несколько способов загрузки картинок на сайт wordpress . Посмотрите на вкладки ,  мы можем загрузить картинку с компьютера


С другого сайта , этой возможностью пользоваться не будем.


С библиотеки файлов(изображений) взять ничего  пока не сможет ,т.к. сайт у нас новый и в  библиотеке файлов ещё изображений  (картинок) нет.

Итак , будем загружать картинку , фотографию с компьютера . Загрузка картинок с компьютера , выполняется так – нажимаем кнопку Выберите файлы .


Открывается новое окно – Выберите файлы для отправки blogfloret.wordpress.com.  Я урок пишу на примере своего нового сайта blogfloret.wordpress.com . Итак , все знают ,  как искать информацию на ПК ? Вспоминайте (Урок № 1 , 2) , давайте  подробно рассмотрим , как найти нужное изображение у себя на компьютере.   Нажимаем на надпись- Компьютер .


В правой части появились обозначения локальных дисков. Нажимаем по надписи- Диск D .


Открывается содержание диска D , нажимаем на папку с  надписью Интернет .


Открывается содержание папки Интернет , нажимаем по папке сайта  надписью Blogfloret .

 

Открывается содержание папки Blogfloret , нажимаем по надписи Webкартинки .


Находим необходимую фотографию и  щелкаем по ней ЛКМ .


Наша фотография появилась в окне  Добавить медиафайл.  Приступаем к оформлению фотографии ,т.е. будет подписывать картинку – заполните все , предложенные окна – это нужно для того , чтоб  вы поняли , как эта картинка  будет выглядеть в статье .   Что в последствии вам будет не нужно , вы заполнять не будете .

Заголовок – Оранжевые лилии

Текст-  Пожелания новичкам успешного создания сайта с нуля

Подпись- Фотография с пожеланием. Желаю всем новичкам успехов в создании своего сайта.

Описание- На фотографии оранжевые лилии. По изображению нанесена надпись blogfloret.wordpress.com и пожелания для новичков в Интернете.

Ссылка – ничего не меняем

Размер – оставляем средний

Нажимаем кнопку Вставить в запись.

 

Фотография с пожеланием. Желаю всем новичкам успехов в создании своего сайта.

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

 

Можно полюбоваться нашей картинкой , если что то не устраивает можно изменить .


Как редактировать картинку в wordpress ? Щелкните по картинке в левом верхнем углу картинки появились две значка . Подведите курсор мыши к одному из них и прочтите. Редактировать , удалить. Нажимаем Редактировать картинку .


Открывается вкладка Редактировать . Я установлю выравнивание картинки по центру и нажимаю кнопку Обновить .


Вот результат –картинка теперь в центре. В окне Опубликовать , нажимаем кнопку Сохранить  и нажимаем кнопку Просмотр . Вот так будет выглядеть наша картинка в статье , после опубликования.

 

Фотография с пожеланием. Желаю всем новичкам успехов в создании своего сайта.

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

Как это у нас получилось? Объясняю . Должно быть выполнено два условия .

1.В окне Добавить медиафайл в строке Ссылка , мы ничего не меняли – оставили ссылку на картинку .

2. Размер картинки выбирается меньше ,чем сама картинка. Например , когда я готовлю картинки для Интернета – это обычно размер 600х300 или 450х300 , в окне Добавить медиафайл в строке  Размер выбираю средний  (300х162) , я как бы уменьшаю размер своей картинки.

Если вам такой эффект на сайте не нужен , то ссылку на картинку можно удалить , т.е.в окне Добавить Медиафайл в строке  Ссылка нажать кнопку – Нет 

Что еще можно сделать с картинкой?  Нажмите на картинку , затем на значок редактировать. Рядом с вкладкой Редактировать  находится вкладка Дополнительно. Нажимаем на надпись Дополнительно. Вкладка открывается. Давайте рассмотрим.

Дополнительные параметры изображения.


В строке Свойства картинок зададим размер рамке – 10 ,  появилась надпись в строке Styles – это описание рамки на языке HTML , по умолчанию рамка будет черной – black. Аккуратно удаляем слово black , напишем  другое , я пишу orange . Нажимаем кнопку  Обновить.


Теперь у картинки  появилась рамочка оранжевого цвета . Чтоб   правильно задать цвет , посмотрите названия цветов  в Википедии  Таблицу цветов .

Если у вас в тексте картинка находится в левой или в правой части текстового поля , то можно задать отступы от картинки до текста  .  Устанавливаете величину отступа и нажимаете кнопку Обновить.


Как картинку сделать ссылкой на сайт

В заключении урока давайте сделаем картинку ссылкой , для этого откройте Редактор HTML , найдите  код вашей картинки , будет начинаться <img src=”адрес картинки”>/ Посмотрите на скриншот , от стрелки 1 до стрелки 2 ничего не меняем. Перед стрелкой 1 пишем адрес ссылки, т.е. адрес сайта на который будет вести ссылка , например: <a href=”http://site.infoinet.ru “>(здесь код картинки ), а после стрелки 2 пишем </a>. У вас должно получиться так , как бы пишем ссылку , а вместо текста ссылки ,  будет картинка.


На скриншоте вид ссылки полностью. Ссылка сделана на главную страницу сайта site.infoinet.ru .

 


В окне Опубликовать нажимаем кнопку Сохранить , затем  Просмотреть.  Подводим курсор к нашей картинке и нажимаем на неё. И вы должны оказаться на том сайте , адрес которого  написали в ссылку . Если вы всё сделали правильно , как показано на скриншотах , то ваша картинка стала ссылкой .  У меня получилось, а у вас ? Будьте внимательны , когда будете дописать адрес сайта , ничего не пропустите , а то картинка ссылка не получится. Проверяйте все знаки , которые есть при написании ссылки. Это важно !

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

comments powered by HyperComments

Последние