A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Продолжаем работать над страницей сайта в рамках нашего курса «Как создать простой сайт». На данный момент, на нашей странице расположена шапка сайта и статья.

Как добавить картинку на сайт – это тема сегодняшнего урока.

Чтобы добавить картинку на сайт, сначала создадим в папке нашего проекта дополнительную папку с именем images. В эту папку, мы будем копировать картинки нашего проекта.

Скопируем в папку images файл картинки myfoto.png, на примере этой картинки, мы собственно и рассмотрим, как можно добавить картинку на страницу сайта.

Теперь откроем в визуальном HTML редакторе файл страницы сайта index.html. Как вы помните, в таблице с контентом, находится статья, над которой мы работали в прошлый раз.

Поставим перед собой задачу – добавим в верхнюю правую часть статьи – картинку.


 

С помощью визуального редактора NVU, добавить картинку достаточно просто, но когда картинка находится рядом с текстом, ее бывает сложно выровнять по горизонтали и вертикали.

Чтобы у нас не было проблем с выравниванием картинки, давайте добавим на нашу страницу, таблицу с двумя ячейками. Причем новую таблицу, мы разместим внутри таблицы для контента.

В правой ячейке новой таблицы, мы разместим картинку, а в левой – текст. В рамках такой таблицы, текст и картинка будут выровнены так, как нам надо.

Таблица для картинки

Для того, чтобы добавить новую таблицу, кликнем левой кнопкой мыши прямо под название статьи на странице. На клавиатуре, нажмем несколько раз клавишу «Enter», чтобы переместить текст статьи ниже.

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

Что касается ширины таблицы для картинки, то, так-как она является вложенной по отношению к таблице для контента, то ширину следует выбрать 100%.

И еще, в параметрах таблицы, не забудьте установить значения бордюра равными нулю, чтобы рамка таблицы не была видна.

 

Добавляем картинку в таблицу

Ну что же, таблицу мы создали, чтобы добавить картинку в правую ячейку таблицы, кликнем в нее мышкой. Далее, в панели инструментов выберем инструмент «Изображение».

 

Как добавить картинку на сайт - Урок 7

 

Появится окно формы свойства изображения. В этом окне кликаем кнопку «Выбрать файл», откроется окно поиска. В новом окне выбираем файл картинки myfoto.png, в верхней части окна мастера добавления картинки, отобрзится путь к добавляемой картинке.

После добавления пути к картинке, отметьте галкой бокс - «Относительный URL». Это нужно сделать для того, чтобы после публикации сайта в Интернет, картинка отображалась на странице сайта.

Заполните поля «Всплывающая подсказка», «Альтернативный текст» и жмите на кнопку «ОК».

В результате, картинка будет добавлена на страницу сайта. Но, картинка будет смещена влево, так как левая ячейка таблицы у нас пока пустая, а выравнивание по горизонтали в таблице, мы сделали «Влево».

Чтобы исправить ситуацию, кликните в панели инструментов - «Таблица». В свойствах правой ячейки таблицы отметьте бокс «Ширина» и добавьте сюда ширину картинки – 180 пикселов.

 

Как добавить картинку на сайт - Урок 7

 

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

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

Переносим текст и при необходимости редактируем его. Далее сохраняем файл страницы сайта в визуальном HTML редакторе.

Теперь осталось посмотреть на изменения страницы в браузере. Откроем файл index.html в Internet Explorer и смотрим, как выглядит статья с картинкой.

Если что-то не так, вновь редактируем страницу в визуальном редакторе и снова смотрим изменения в браузере. Если все получилось, переходим к следующему уроку.

Перейти к Уроку 8: Футер простого сайта

Перейти к Уроку 6: Статья для сайта

Автор: Виктор Милованов
 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации