Изображения в HTML: вставка картинок и работа с ними

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Создание таблиц в блокноте
  7. Цвета в HTML
  8. Как создать форму в HTML?
  9. Табличная верстка сайта
  10. Теги в HEAD
  11. CSS
  12. Работа с текстом и изображениями в CSS
  13. Блочная структура сайта
  14. Блочная верстка

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

<img src="название рисунка.png"  width="285"  height="52">

В этом теге src=” “ обозначает место, откуда загружается изображение,  width обозначает ширину рисунка,  height обозначает высоту рисунка. Откроем файл index.html, с нового абзаца вставим

<img src="images/img1.png"  width="169"  height="250">

Таким образом мы вставили картинку из папки images. Изображения могут также выступать как гиперссылки на другую страницу. Вставим другую картинку как гиперссылку на страницу second_page.html

<a href=”second_page.html”><img src=”image/img2.png” width="169"  height="250"></a>

Здесь в тег гиперссылки ( <a href=)  мы вложили тег изображения. Если мы кликнем по картинке, то перейдем на другую страницу.

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

Хорошим тоном в сайтостроительстве является использование атрибута alt. Этот атрибут описывает изображение, в случае, если нет возможности загрузить рисунок. В нашем случае тег изображение-ссылку на другую страницу можно прокомментировать так:

<a href=”second_page.html”><img src=”image/img2.png” width="169"  height="250" alt=”ссылка на другую страницу”></a>

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

Работа в Dreamweaver.

Сделаем подготовительную работу. Зайдите в папку, где  Dreamweaver хранит файлы вашего сайта. Создайте там новую папку images. Скопируйте туда 2 рисунка. Откройте index.html.  Щелкните мышкой в области кода перед закрывающим тегом </body>. Нажмите несколько раз enter чтобы освободить место. Во вкладке Files (она находится внизу справа от рабочей области) откройте папку images. Левой кнопкой мыши щелкните по рисунку img1.png перетащите изображение в освободившееся место в области кода.

Вставка изображений в Dreamviewer

Щелкните в области дизайна по картинке. Внизу появится панель редактирования изображений.

Панель редактирования изображений

В поле W зададим ширину, а в поле H зададим высоту рисунка (цифра 1). В нашем случае W=169 H=250.

В поле кода после рисунка img1 переместите рисунок img2.png (рис.1). Это будет рисунок-ссылка на другую страницу. Щелкните в поле дизайна по этому рисунку и в панели редактирования зададим такие параметры: W=169 H=250.

Щелкните по рисунку папки в поле Link (цифра 2) и выберите second_page.html. Так мы создали ссылку на страницу second_page.html.

В поле Alt (цифра 3) напишите «ссылка на другую страницу». Таким образом мы создали атрибут alt .

В поле названия рисунка (цифра 4) напишите название рисунка «img2».

Посмотрите в области кода что получилось. Мы создали рисунок-ссылку.

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

Оставить ответ

Ваш email не будет показан.