- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
В этом уроке мы научимся работать с изображениями. Обычно все изображения хранятся в отдельной папке 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 перетащите изображение в освободившееся место в области кода.
Щелкните в области дизайна по картинке. Внизу появится панель редактирования изображений.
В поле 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, используя все полученные ранее знания.