Главная | Обратная связь | Поможем написать вашу работу!

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

Изменяем цвет текста

Кодирование цвета

Цветов огромное количество, но из них выделены только три, которые считаются основными: красный, зелёный и синий. При смешении двух основных цветов результат осветляется: из смешения красного и зелёного получается жёлтый, из смешения зелёного и синего — голубой. Если смешиваются все три цвета, образуется белый. Такая модель цвета носит название RGB по первым буквам английских слов red, green и blue.

Каждый цвет может иметь различную интенсивность. Интенсивность цвета кодируют шестнадцатиричным числом. Цифры в шестнадцатиричной системе исчисления располагаются так: 0 1 2 3 4 5 6 7 8 9 a b c d e f. Минимальное значение 0, а максимальное — f.

Интенсивность каждого цвета записывается не одной, а двумя цифрами: минимальное значение обозначается 00, а максимальное — ff. Цвета записывают в последовательности RGB, то есть красный, зелёный, синий. Например, зелёный цвет 00ff00, красный — ff0000, синий — 0000ff, белый — ffffff.

В программе Photoshop с помощью пиктограммы на панели инструментов можно вызвать окно Color Picker (указатель цвета), показанное на рис.1. Внизу окна после знака # показан шестнадцатиричный код цвета.

Рис. 1. Окно указателя цвета в Photoshop

Задание 1

1.С помощью окна указателя цвета в Photoshop подставьте приведённые выше коды (00ff00, ff0000, 0000ff, ffffff)и убедитесь, что они соответствуют названным цветам.

2.Какой получается цвет при смешении красного и зелёного? Красного и синего? Какой код образует серый цвет? Чёрный?

Цвет текста

Но вернёмся к нашей страничке font.html и окрасим слова «Типы шрифта для веб-дизайна» в красный цвет. Для этого внутри открывающего тега <h2> нужно добавить атрибут style и CSS-свойство color:
<h2 style="color:#ff0000;">Типы шрифта для веб-дизайна</h2>

Здесь мы встретились с двумя новыми понятиями: атрибут тега и CSS-свойство.

Атрибуты позволяют менять первоначальные характеристики тега на странице. Например, атрибут style задаёт CSS-свойство, атрибут src в теге img задаёт путь к файлу с картинкой и так далее. Атрибут записывается внутри открывающего тега вслед за его названием. Синтаксис атрибута следующий:

имя атрибута;
знак равенства;
значение атрибута в кавычках.

CSS-свойство определяет внешний вид элемента на экране. Например, color задаёт цвет текста, background-color — цвет фона. Синтаксис CSS-свойства следующий:

имя свойства, например, color;
двоеточие:;
значение свойства, например, #ff5700.

Заметьте, что атрибут style можно применить в любом теге.

Задание 2

На странице list.html покрасьте списки в следующие цвета:

· заголовок «Группа веб-дизайна» — в коричневый цвет (660000), список имён — в красный (ff0000);

· заголовок «Месяцы года» — в тёмно-зелёный цвет (006600),

o зимние месяцы — в синий (0000ff),

o весенние — в зелёный (00ff00),

o летние — в темно-зелёный (006600),

o осенние — в рыжий (ff6600).

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

Группа веб-дизайна

Олег
Володя
Ашот

Месяцы года

январь
февраль
март
апрель
май
июнь
июль
август
сентябрь
октябрь
ноябрь
декабрь

Задание 3

На своей странице font.html покрасьте

· заголовок «Типы шрифта для веб-дизайна» в красный цвет (ff0000),

· названия абзацев serif и sans-serif — в тёмно-зелёный цвет (006600),

· текст абзацев — в зелёный цвет (00ff00).

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

Типы шрифта для веб-дизайна

serif
На концах линий, составляющих буквы, есть маленькие чёрточки, засечки. Этот тип шрифта хорошо подходит для представления на экране текстов большого размера.

sans-serif
Буквы данного семейства шрифтов не имеют засечек. И хотя символы sans-serif менее отчётливы, они хорошо подходят для текстов, набранных шрифтом меньшего размера.

Цвет фона

Цвет фона задаётся CSS-свойством background-color. Если применить его к тегу body, то цвет фона изменит вся страница:
<body style="background-color:#000000;">

Задание 4

Задайте странице font.html фон цвета ffffcc.

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

Теги
<ul>	ненумерованный список
<li>	пункт списка
<ol>	нумерованный список
Атрибуты тегов
style	оформление тега
Свойства CSS
color	цвет текста
background-color	цвет фона

HTML-редактор Dreamweaver

На предыдущих занятиях вы писали HTML-коды вручную в простейшем текстовом редакторе Блокнот. Это полезно для освоения структуры HTML-документа, запоминания обязательных тегов, получения первых навыков написания веб-страницы. Однако для дальнейшей работы необходим более совершенный инструмент.

Dreamweaver — профессиональный редактор HTML для создания веб-сайтов различной сложности. Нравится ли вам вручную писать HTML-код или вы предпочитаете работать в визуальной среде, Dreamweaver облегчает эту работу и обеспечивает вас полезными инструментами и средствами. Все последующие работы мы будем выполнять в редакторе Dreamweaver.

Состав рабочего окна

Рабочая область Dreamweaver настраивается под различные виды работ (рис.1). Вот некоторые наиболее используемые компоненты:

окно документа отображает текущий документ, который вы редактируете. Здесь могут быть либо коды (в режиме Code), либо внешний вид (в режиме Design);
панель вставки (Insert) содержит вкладки с кнопками для вставки на страницу различных HTML-элементов: изображений, таблиц, параграфов, списков и других. Наиболее часто мы будем пользоваться вкладками Common и Text;
панель документа содержит кнопки, которые позволяют быстро переключаться между режимом кода (Code), дизайна (Design) и совмещённым (Split). В режиме кода в окно документа выводятся теги (как в Блокноте), а в режиме дизайна отображаются их вид (как в браузере);
панель свойств (Properties) отображает атрибуты и CSS-свойства выбранного тега и позволяет их изменять прямо в режиме дизайна, не переключаясь в режим кода;
указатель тега показывает все родительские теги для выбранного HTML-элемента.

Рис. 1. Окно редактора Dreamweaver

Линейки сверху и слева проградуированы в пикселах. Если линейки отсутствуют, то они включаются из меню Dreanweaver: View > Rules > Show.

Перечисленные панели, а также множество других можно открыть с помощью пункта меню Window. Флажок рядом с элементом указывает, что данный элемент в настоящее время открыт. Панель стандартная (на рисунке не показана) открывается с помощью контекстного меню. Правой кнопкой щёлкните на панели документа и в открывшемся контекстном меню выберите Standard.

После установки Dreamweaver на компьютер нужно убедиться, что новая страница создаётся с указанием правильной кодировки, а именно UTF-8. Если это не так, то пройдите по следующему пути: Edit > Preferences > New Document > Default encoding и установите Юникод (UTF-8).

Создание HTML-страницы

Рассмотрим процесс создания новой HTML-страницы. Выполните команду File > New. В появившемся окне New Document (новый документ) ничего не меняйте и нажмите кнопку Create (создать). Появится новая страница. В режиме дизайна вы увидите чистую страницу, а в режиме кода — десяток тегов.

Вопрос. Какие теги в автоматически созданном коде вам уже известны?

DOCTYPE подсказывает браузеру стандарт, в котором написаны HTML-коды. Метатег meta задаёт, в частности, кодировку символов.

Теги абзаца <p></p> вставляются следующим образом. В режиме кода используется кнопка ¶ из панели Insert (вставка). В режиме дизайна используется клавиша Enter.

Теги заголовка <h1></h1> вставляются в режимах кода и дизайна одинаково: с помощью кнопки h1. Теги полужирного <b></b> и наклонного <i></i>текста — с помощью кнопок B и I соответственно.

При первоначальной установке Dreamweaver кнопкой B вместо тега <b></b> вставляется тег <strong></strong>, а кнопкой I вместо <i></i> вставляется <em></em>. Обычный визуальный браузер отображает эти теги правильно и можно ничего не менять. Если вы всё-таки хотите привести в соответствие, то выполните следующее: Edit > Preferences > General и снимите галочку напротив пункта Use <strong> and <em> in place of <b> and <i>

Тег обрыва строки <br> вставляется с помощью последней кнопки на той же вкладке Text. Если в данный момент на ней не изображён тег br, то, нажав кнопку с треугольничком, выберите его из списка.

Ненумерованный список удобно создавать в режиме дизайна. При нажатии кнопки ul появляется маркер в виде жирной точки. Вводится текст пункта и нажимается клавиша Enter, при этом появляется маркер нового пункта. Для выхода из списка нужно поставить курсор в конец последнего пункта, нажать Enter один раз — появится новый пункт, не вводя ничего, нажать Enter второй раз — последний маркер исчезнет, а курсор перейдёт на новый абзац.

Нумерованный список создаётся с помощью кнопки ol аналогично.

Задание 1

С помощью Dreamweaver создайте новую страницу babuin.html и сверстайте веб-страницу, показанную ниже. Постарайтесь это сделать только в режиме дизайна. Исходный текст можно найти в файле Бабуин.txt, расположенном в пособии по адресу: HTML\Материалы\Бабуин.txt

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

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

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

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

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

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

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

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

Задание 2

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

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

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

Картинки в документ вставляются с помощью тега 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 пиксел.

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

Воспользуйтесь поиском по сайту: