Оформление html-страницы

Для задания цвета текста в режиме кода проделайте следующее.

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

 

Выберите атрибут style и введите его двойным щелчком мыши, появится подсказка со списком CSS-свойств.

 

Выберите CSS-свойство color двойным щелчком мыши, появится окно указателя цвета.

 

Выберите нужный цвет щелчком мыши.

 

В режиме дизайна можно менять цвет текста из панели Properties, но при этом вставляются CSS-коды, которые мы ещё не изучали. Поэтому рассмотрение этого способа мы отложим.

Задание 2

С помощью Dreamweaver оформите страницу babuin.html, как показано ниже. Постарайтесь это сделать только в режиме кода.

Что должно получиться

 

6. Как вставлять картинки

Картинки в документ вставляются с помощью тега img (image — изображение). У него есть обязательный атрибут src (source — источник), который указывает путь к картинке. Тег img является непарным, то есть у него нет закрывающего тега. Пример:  <img src="my.jpg">

Здесь файл my.jpg с картинкой лежит в том же каталоге (папке), что и наш веб-документ.

Тег img использует информацию, которая находится вне файла с HTML-страницей. На предыдущих занятиях весь контент содержался внутри HTML-файла, в котором были текст и теги. Картинка же помещается в отдельном файле, а атрибут src указывает путь от HTML-файла к файлу с картинкой.

 

Папка images для картинок

На веб-странице может использоваться большое количество картинок, и сайт состоит из множества файлов. Сайт среднего размера обычно состоит из нескольких десятков файлов. Для того, чтобы не запутаться, придерживаются следующего правила: все файлы сайта располагают в одной папке, а изображения — в подпапке images (рис.1).

Рис. 1. Подпапка images с картинками для сайта

Если картинка лежит в подпапке images, то ссылка на неё будет выглядеть так:  <img src="images/my.jpg">

 

Вставляем картинку

Для вставки картинки с помощью Dreamweaver проделайте следующее:

• сохраните HTML-файл;

• на вкладке Common нажмите кнопку с зелёным деревом  . Появится диалоговое окно Select Image Source:

• выберите нужный файл с картинкой и нажмите кнопку OK.

Задание 1

Создайте в своей рабочей папке подпапку images. Скопируйте в неё фотографию бабуина из папки HTML\Материалы\babuin.jpg. Разместите её на вашей странице babuin.html. Какой тег написал Dreamweaver в кодах вашей страницы? Какой путь записан в атрибуте src?

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

 

Дополнительные атрибуты тега

У тега img cуществует ещё несколько важных атрибутов.

Атрибут alt —альтернативный текст. Этот атрибут очень важен для поисковых машин, так как они не умеют по изображению определять его смысл. Пример: <img src="my.jpg" alt="Чёрное море, Одесса">

Атрибут width — ширина картинки на странице (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете её сделать уже или шире). Пример: <img src="my.jpg" width="100"> Атрибут height — высота картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Пример: <img src="my.jpg" height="200">

Все атрибуты могут употребляться одновременно друг с другом через пробел:  <img src="my.jpg" alt='Одесса' width="100" height="200">

Задание 2

В папке по адресу HTML\Материалы\Danilov находятся графика художника Данилова. Скопируйте их в свою папку для рисунков images. Создайте страницу danilov.html и сверстайте галерею из его работ как показано ниже. Узкая сторона каждого рисунка должна быть 100 пиксел.

Что должно получиться