Ресурсы в Интернете • Работа с текстом. http://stepbystep.htmlbook.ru/?id= • Списки. http://stepbystep.htmlbook.ru/?id= а) Создайте страницу «Мое хобби». Страница должна содержать заголовок «Мое хобби», выровненный по центру, краткое описание вашего хобби и нумерованный список ваших интересов (спорт, науки, игры и т.п.). Название файла – hobby.html.

б) Измените тип нумерации на нумерацию буквами и римскими цифрами.

в) Измените тип списка на маркированный, используйте разные типы маркеров.

г*) Создайте текстовую надпись большого размера. Примените к ней по очереди шрифты Wingdings, Wingdings 2, Wingdings 3 и Webdings.

Лекция 2.3. Создание ссылок Для создания ссылок используется тег ….

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

Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, например: http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.

Пример для абсолютного адреса:

HTML-код: Яндекс В браузере: Яндекс В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href.

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

Например, чтобы поставить ссылку из файла file1.html на файл file2.html (см. рис. 2.3.), необходим следующий HTML-код:

файл file2.html А чтобы ссылка в файле file2.html указывала на file1.html:

файл file1.html Две точки (..) означают переход к родительскому каталогу.

Замечание: для файлов в пределах одного сайта рекомендуется использовать только относительные пути. В этом случае ссылки сохранят работоспособность при изменении адреса сайта, переносе в другую папку и т.п.

Для открытия ссылки в новом окне используется атрибут target со значением _blank.

Пример: Яндекс Цвет ссылок в документе можно указать атрибутами тега :

alink="цвет" – устанавливает цвет активных ссылок link="цвет" – задает цвет непосещенных ссылок vlink="цвет" – определяет цвет посещенных ссылок • Ссылки. http://stepbystep.htmlbook.ru/?id= • Гипертекстовые ссылки.

http://www.intuit.ru/department/internet/htmlbasics/3/1.html «Якоря»*. http://stepbystep.htmlbook.ru/?id= Ссылки на e-mail*. http://www.computerra.ru/gid/rtfm/mail/35658/ а) Модифицируйте файл index.html: добавьте ссылку на страницу «Мое хобби» и ссылку на сайт отдела (должна открываться в новом окне). На странице «Мое хобби» добавьте гиперссылку, указывающую на страницу index.html.

б*) Создайте страницу links.html. Разместите на ней ссылки на ваши любимые сайты. Ссылки должны быть расположены в нумерованном или маркированном списке и открываться в новом окне.

Лекция 2.4. Изображения Вставка изображений на странице Осуществляется непарным тегом. Обязательный атрибут src указывает абсолютный или относительный URL изображения (см. Лк 2.3.). Стандартными форматами изображений являются GIF, PNG и JPEG.

GIF – формат, реализующий сжатие без потери качества с ограниченной цветностью (от 2 до 256 цветов) и поддержкой анимации – используется для хранения графики, когда достаточно 256 (и меньше) цветов. Обычно это небольшие изображения. Также GIF поддерживает прозрачность.

JPEG реализует сжатие изображений с потерями качества, при этом ограничения на цвет отсутствуют (поддерживается 16 миллионов цветов). Размер JPEG-файла зависит от параметра «качество», который указывается при его сохранении: от 0 до 100. Чем выше качество, тем больше размер файла. Оптимальная степень качества зависит от изображения, в большинстве случаев она равна 70-80. Не стоит выставлять этот параметр меньше 50 – на изображении появятся заметные дефекты или больше 95 – размер файла сильно возрастет без видимого улучшения качества.

Формат PNG существует в двух вариантах: PNG-8 и PNG-24. PNG-8, как и GIF, поддерживает 256 цветов, обеспечивает по сравнению с ним лучшее сжатие, но не поддерживает анимацию. Формат PNG-24, как и JPEG, не имеет ограничений на количество цветов, но проигрывает ему в размере файла.

Осуществляет сжатие изображений без потери качества, поэтому его стоит применять для изображений, содержащих мелкие детали.

Ниже приведена таблица оптимального выбора формата файла в соотношении качество/размер файла с учетом особенностей изображения.

Особенности изображения Предпочтительный формат маленькое изображение с небольшим ко- GIF или PNG- личеством цветов изображение с полупрозрачностью только PNG изображение с большим количеством цве- JPEG тов, например фотография изображение с большим количеством цве- PNG- тов с мелкими деталями, например скриншот (снимок экрана) Избегайте использования других форматов изображений (например, BMP или TIFF), т.к. они могут не поддерживаться отдельными типами браузеров.

Другие атрибуты:

определяет режим выравнивания изображения относительно align="…" – alt="…" – определяет текст, описывающий изображение для браузеров без поддержки графики (или с отключенной графикой), поисковых машин и т.п.

border="N" – устанавливает толщину рамки вокруг изображений, равной N пикселей, 0 – для отключения рамки height="N" – высота изображения в пикселях или процентах width="N" – ширина изображения в пикселях или процентах Браузер определяет размер изображения автоматически. Для ускорения загрузки рекомендуется указывать размер изображения атрибутами height и width, чтобы браузер не вычислял этот размер автоматически после загрузки изображения. Также этими атрибутами можно растянуть/сжать изображение по горизонтали/вертикали, но такое масштабирование приведет к потере качества.

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

Толщина рамки задается атрибутом border. Обычно рамку убирают, указывая border="0" в теге.

Примеры:

1. HTML-страница находится в папке site, а изображение picture.jpg находится в папке site/images/.

Фоновое изображение страницы Можно задавать адрес фонового изображения для страницы в атрибуте background тега. Фоновое изображение отображается в натуральную величину. Если размер изображения меньше размера окна браузера, то рисунок повторяется по горизонтали вправо и по вертикали вниз. Например, зададим фоновым изображением страницы рисунок bg1.jpg.

В браузере:

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

Можно использовать повторяющийся фон:

Страница с шахматным фоном.

Рисунок 2.7. Использование повторяющегося «шахматного» фона Если взять картинку шириной 1 пиксель и высотой, например, 2000 пикселей на экране она будет размножаться только по горизонтали.

Используем картинку с градиентом!

Рисунок 2.8. Использование изображения, повторяющегося по горизонтали При использовании изображений в качестве фона важно обеспечить читабельность текста на странице. Поэтому не стоит применять фотографии в качестве фоновых картинок.

• Изображения. http://stepbystep.htmlbook.ru/?id= http://www.intuit.ru/department/internet/htmlbasics/7/ • Форматы графических изображений для WEB.

http://www.grafika-online.com/statia/art04_web/art01.html • Различие между PNG и JPEG. http://bit.ly/62Ek2O а) Добавьте на первую страницу (index.html) свою фотографию вместо строк «Мой первый сайт, это пример».

б) При помощи атрибутов width и height уменьшите и увеличьте размер изображения в 2 раза. Обратите внимание на потерю качества изображения при увеличении.

в) Сделайте изображение на первой странице гиперссылкой: при нажатии на фотографию должен открываться полноразмерный вариант в новом окне.

г) Добавьте графический фон на страницы сайта.

д*) Добавьте на страницу информер (небольшая картинка, показывающая погоду, курс валют и т.п. актуальную информацию). URL информера можно найти в поисковой системе или на специализированном сайте. Например:

http://www.informer.ru/, http://gismeteo.ru/ Лекция 2.5 Создание таблиц Таблица в HTML – это совокупность данных, расположенных и связанных между собой при помощи ячеек, размещаемых в строках и колонках. Таблица заполняется данными построчно. Для вставки таблиц определено 3 основных тега. Содержимое ячеек помещается в теги …, которые, в свою очередь, помещаются в теги строк …, а они уже – в тег Пример:

В браузере:

Количество тегов … определяет количество строк. В каждом теге строки должно быть одно и то же число тегов …, равное числу Можно создавать вложенные таблицы: вкладывать таблицу в ячейку другой таблицы.

… – определяет начало и конец кода таблицы, содержит в себе теги строк и ячеек.

Атрибуты:

align="…" – определяет режим выравнивания таблицы относительно background="URL" – задает фоновый рисунок в таблице bgcolor="цвет" – цвет фона таблицы border="N" – устанавливает толщину границ таблицы, равную N пикселей bordercolor ="цвет" – цвет рамки cellpadding="N" – размер поля вокруг содержимого каждой ячейки Пример:

cellspacing="N" – размер свободного пространства между ячейками Пример:

width="N" – ширина таблицы в пикселях или процентах от ширины окна Атрибуты:

определяет режим выравнивания содержимого ячеек align="…" – background="URL" – bgcolor="цвет" – цвет фона ячеек строки valign="…" – определяет режим выравнивания содержимого ячеек … – определяет ячейку данных таблицы Атрибуты:

определяет режим выравнивания содержимого ячейки align="…" – background="URL" – URL изображения, которое заполнит фон ячейки bgcolor="цвет" – valign="…" – определяет режим выравнивания содержимого height="N" – высота ячейки в пикселях ширина ячейки в пикселях или процентах от ширины width="N" – Объединение ячеек colspan="N" – растягивает ячейку на N столбцов влево Пример:

HTML-код:

В браузере:

rowspan="N" – растягивает ячейку на N строк вниз Пример:

HTML-код:

В браузере:

Ширина таблицы Если ширина таблицы изначально не задана, то она вычисляется исходя из содержимого ячеек.

Ширина таблицы не задана!

Ширина таблицы не задана!

Максимальная ширина таблицы в таком случае равна ширине окна.

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

Если задать атрибут width, текст начинает переноситься по словам Если задать атрибут width, текст начинает переноситься по словам Ресурсы в Интернете • Таблицы. http://stepbystep.htmlbook.ru/?id= • Таблицы. http://www.intuit.ru/department/internet/htmlbasics/4/ а) Создайте следующую таблицу:

б) Добавьте страницу «Мой компьютер» (computer.html), содержащую заголовок страницы и таблицу данных о вашем компьютере (аппаратное обеспечение: процессор, объем оперативной памяти и т.п., операционная система) и ссылку на главную страницу. Если дома компьютера нет или не известны характеристики, опишите компьютер в классе.

Добавьте ссылку на computer.html на главной странице.

У к а з а н и е: Параметры процессора и памяти можно посмотреть в свойствах пиктограммы «Мой компьютер», объем жестких дисков – в «Моем компьютере».

Пример:

в) * Создайте таблицу основных цветов палитры RGB и их комбинаций.

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

Лекция 2.6. Кодировки текста и специальные символы Лекция не является обязательной.

Однобайтные и многобайтные кодировки Все данные в компьютере: текст, графика, звук, видео – хранятся и обрабатываются в цифровой (двоичной) форме. Минимальной единицей измерения информации является бит – разряд двоичного числа, который может принимать 2 значения: 0 или 1. 8 бит составляют 1 байт – минимальную единицу адресации к хранимой информации.

Текст представляет из себя набор символов: букв, цифр, знаков препинания и других. Для работы с текстом компьютер должен представить его в «привычном» для себя виде: нулями и единицами. Для этого задаются таблицы соответствия символа и его числового кода – таблицы кодировки.

В 1960-гг. в США была создана кодировка ASCII. Числовой код символа записывался 7-ю битами, таким образом, можно было составлять тексты, используя 27 = 128 различных символов. Кодировка содержит управляющие символы (например, перенос строки, табуляция), латинские символы, цифры, знаки пунктуации и др. Так, пробелу соответствовал код 32, цифре 0 – код 48, заглавной латинской букве A – код 65, а строчной – 97.

ASCII в своей 7-битной версии не позволяет использовать символы национальных алфавитов, например кириллицу: для нее не осталось места в таблице. Так как компьютеры работают с байтом из 8 бит, в ASCII использовались только первые 7 бит, а последний бит всегда был равен 0. Задействовав этот последний бит, можно получить еще дополнительно 128 мест. Таким способом ASCII была дополнена алфавитами для различных языков. Для каждого языка создавались кодировки, первые 128 символов которых повторяли ASCII, а во второй половине таблицы кодировки располагались символы национальных алфавитов. К сожалению, конкуренция между разработчиками операционных систем привела к появлению нескольких несовместимых друг с другом кодировок для кириллицы: КОИ-8 в UNIX, CP866 в MS-DOS, Windows-1251 в Windows, MacCyrillic на компьютерах «Макинтош» фирмы Apple. Чтобы устранить «зоопарк» кодировок, Международной организацией по стандартизации (ISO) была разработана единая кодировка ISO 8859-5, но она так и не прижилась в компьютерной индустрии. Однобайтные кодировки обладают следующими недостатками.

Документы, созданные в одной кодировке, отображаются как беспорядочный набор символов в другой Использование однобайтной кодировки ограничивает набор 256-ю символами (на самом деле, еще меньше – первые 32 символа являются служебными). Это делает невозможным работу с иероглифическими языками (китайским, японским), в которых используются тысячи различных знаков, а также использование множества языков в одном документе.

Для решения этих проблем был создан стандарт кодирования Unicode (Юникод), который содержит символы практически всех существующих письменных языков и изобретенных человечеством знаков (музыкальных, математических и т.п.). Юникод устраняет проблему выбора правильной кодировки, но текст, сохраненный в этой системе, занимает больший объем байт. Существует несколько представлений Unicode: UTF-16, где на 1 символ приходится 2 байта, и UTF-8 с переменным числом байтов на символ – от 1 до 4. Если на странице используется только латиница и кириллица, то каждый символ для хранения будет занимать 2 байта, т.е. текст такой HTML-страницы в UTF-8 требует в 2 раза больше места на диске, чем текст в кодировке Windows-1251. При нынешних темпах развития систем хранения данных это уже можно не считать серьезным недостатком. На начало 2010 года UTF-8 используется более чем на 50% сайтов, а кодировки ASCII, Windows-1251 и прочие из года в год используются веб-мастерами все реже.

Кодировка в HTML Кодировка документа HTML задается в текстовом редакторе. Например, Блокнот в ОС Windows по умолчанию сохраняет текстовые файлы в кодировке Windows-1251.

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

Для того чтобы браузер правильно отобразил HTML-страницу, необходимо задать правильную кодировку в специальном теге 1.

или Если кодировка не будет указана, браузер попытается «угадать» ее, но не всегда это заканчивается успехом. Пользователь может выбрать кодировку самостоятельно в меню браузера (в Internet Explorer и Mozilla Firefox: Вид Кодировка). При разработке сайта проблем с кодировкой следует избегать, т.к. большинство пользователей сразу же покинет страницу, увидев нечитаемый набор букв на экране.

Специальные символы в HTML В HTML предусмотрен механизм вставки в документ любых символов Юникод – подстановки или сущности (англ. entities). Подстановки позволяют употреблять символы, отсутствующие на клавиатуре или даже в используеДругой способ указания кодировки будет рассмотрен в теме 9. Назначение тега описано в теме 10.

мой кодировке (т.е. даже используя кодировку Windows-1251 можно вставить букву греческого алфавита). Подстановки начинаются с символа амперсанда и записываются в виде &#DDDD; где DDDD – код символа в Юникоде в десятеричной системе счисления. Также можно записывать код в шестнадцатеричной системе счисления в форме &#xHHHH; Для некоторых символов заданы специальные названия – мнемоники. Например, знак копирайта © может быть задан кодом © или © или мнемоникой ©.

Рисунок 2.10. Интерфейс программы «Таблица символов»

Для того чтобы найти код нужного символа в ОС Windows, можно воспользоваться системной утилитой «Таблица символов» (см. рис. 2.10). Открыть программу можно нажав кнопку Пуск Выполнить charmap.

В программе можно посмотреть, какие символы поддерживают установленные на компьютере шрифты, и узнать шестнадцатеричные коды этих символов.

Часто используются подстановки:

« и » – для кавычек «елочек»;

— – для тире;

неразрывный пробел (см. список Интернет-ресурсов в конце лекции) < и > – для символов меньше (), которые используются для задания тегов HTML.

В приложении 3 приведена таблица других часто используемых подстановок.

Ресурсы в Интернете • О кодировках символов. http://www.arininav.ru/js/encoding.htm • Мнемоники в HTML. http://ru.wikipedia.org/wiki/Мнемоники_в_HTML • Пробел. http://ru.wikipedia.org/wiki/Пробел • Кавычки. http://www.artlebedev.ru/kovodstvo/sections/104/ • Тире, минус и дефис, или Черты русской типографики.

http://www.artlebedev.ru/kovodstvo/sections/97/ а) Найдите код и вставьте в HTML-документ символы б*) Составьте формулу объема конуса: Vкон = ··r ·h Тема 3. Технология CSS Лекция 3.1. Основы CSS CSS (Cascading Style Sheets – каскадные таблицы стилей, произносится «сиэс-эс») – технология управления внешним видом элементов (тегов) вебстраницы. CSS предоставляет гораздо больше возможностей по оформлению страницы, чем HTML. Например, с помощью стилей CSS можно убрать у ссылок подчеркивание, сделать у таблицы пунктирные границы или даже поменять курсор «мыши». Сейчас CSS используется практически на всех сайтах Всемирной паутины.

Синтаксис CSS Рассмотрим синтаксис CSS. В стилях задается набор правил отображения в парах «свойство – значение», и то, к каким элементам их применять (селектор):

свойство1: значение1;

свойство2: значение2;

свойство3: значение3 значение4;

Правила записываются внутри фигурных скобок и отделяются друг от друга точкой с запятой. Между свойствами и их значениями ставится двоеточие.

CSS, как и HTML, игнорирует пробелы. Можно добавлять комментарии, заключая их между /* и */.

Селекторы Селектор определяет, к каким элементам (тегам) страницы будут применяться правила, заданные парами «свойство – значение».

В качестве селектора можно использовать:

Название тега – тогда стиль применится ко всем таким тегам.

A {font-size: 12pt; text-decoration: none} TABLE {border: black solid 1px} Первая строчка этого CSS-кода задает всем ссылкам 12-й размер шрифта и убирает подчеркивание. На второй строчке указывается, что у всех таблиц граница будет черного цвета, сплошной (solid) и шириной 1 пиксель.

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

H1, H2, H3, H4, H5, H6 {color: red} /* делаем все заголовки красными */ Несколько тегов через пробел:

TABLE A {font-size: 120%} Правило относится ко всем тегам A, вложенным в тег TABLE. Размер шрифта увеличится на 20% от базового.

ID элемента. В стилях уникальный идентификатор указывается после знака # – правила применятся к тегу с атрибутом id="идентификатор". Пример:

#supersize {font-size: 200%} Нельзя вносить в документ несколько элементов с одинаковым id!

Символ * – правила применятся ко всем элементам документа.

Классы Часто нужно, чтобы стиль применялся не ко всем тегам на странице, а только к некоторым элементам (например, не ко всем ссылкам на странице, а только к тем, которые расположены в меню сайта). Для этого используются классы:

ТЕГ.имя_класса { … } Правила, указанные после такого селектора, будут действовать только на теги с атрибутом class="имя_класса":

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

Рассмотрим пример:

Для всех тегов с атрибутом class="class1" добавим подчеркивание текста и уменьшим размер шрифта, а для тега уберем подчеркивание.

.class1 {text-decoration: underline; font-size: 80%} A.class1 {text-decoration: none;} В HTML-коде укажем для тегов имя класса:

Мои любимые сайты В браузере будет отображаться:

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

Стили CSS могут включаться в HTML-документ 3 разными способами:

Внешние стили.

Основное преимущество: один стиль может использоваться сразу в нескольких документах HTML.

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

CSS-файл может находиться и на другом сайте – в этом случае необходимо указать его абсолютный URL-адрес.

Реализуем наш предыдущий пример. Создадим файл style.css:

.class1 {text-decoration: underline; font-size: 80%} A.class1 {text-decoration: none;} Теперь создадим саму страницу links.html:

Мои любимые сайты При открытии этой страницы браузер клиента загрузит также файл style.css и применит правила CSS к документу.

Обратите внимание: с помощью CSS можно отключить у ссылок подчеркивание. Средствами HTML этого сделать невозможно. CSS значительно расширяет возможности оформления страницы.

Второй важный момент: использование CSS позволяет разделить оформление и содержимое документа. В нашем примере правила оформления содержатся в файле style.css, а содержание – в links.html. Такое разделение существенно упрощает редактирование сайта в дальнейшем. Рекомендуется для оформления использовать только средства CSS, отказаться от использования таких тегов, как,,,, атрибутов align, border, color, height, width и т.д.

Стили уровня документа Применяются ко всему документу, записываются внутри тега …, который вкладывается в тег … в документе HTML.

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

Добавим в наш пример тег :

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

Порядок применения стилей При работе с CSS необходимо помнить, что более специфичные правила имеют приоритет над менее специфичными, например:

стиль, указанный в атрибуте style, перекрывает стиль, указанный в теге или внешнем файле CSS:

A {color: red; text-decoration: none}

INTUIT

селектор ID (#) имеет больший приоритет, чем селектор класса (.), а тот, в свою очередь, – больший, чем обычный селектор тега:

A {color: red; text-decoration: none; font-size: 120%}.links {color: blue; text-decoration: underline} #greenlink {color: green} В браузере ссылка будет зеленой и подчеркнутой, размер шрифта Другой важной особенностью CSS является то, что некоторые атрибуты наследуются от родительского элемента к дочернему. Например, если атрибут font-size задан для тега, то он наследуется всеми элементами на странице. Когда свойство размера задается в процентах, оно будет вычислено исходя из значения для родительского элемента. Узнать, является ли атрибут наследуемым, можно в справочнике по атрибутам CSS (например, http://htmlbook.ru).

Ресурсы в Интернете • Основы CSS. http://css.manual.ru/articles/css_basics • Основы CSS. http://www.intuit.ru/department/internet/operawebst/27/ • Наследование и каскадирование.

http://www.intuit.ru/department/internet/operawebst/28/ • Устаревшие (не рекомендуемые к использованию) теги и атрибуты HTML. http://www.tutorialspoint.com/html/html_deprecated_tags.htm • CSS по шагам. http://stepbystep.htmlbook.ru/?pid= CSS-селекторы*. http://www.alexilin.ru/css-selektory/ Задания:

а) Создайте внешний CSS файл. Подключите его ко всем страницам вашего сайта. Увеличьте размер шрифта, задайте для тега BODY фон свойством background-color и границу толщиной 5px.

б) На главной странице измените цвет фона на отличный от цвета на других страницах.

в) Создайте 2 различных класса стилей для ссылок на внутренние страницы (в навигационном меню) и внешних ссылок. Добавьте атрибут class в теги на страницах.

г*) Сохраните на диск копию какой-либо страницы из Интернета. Отредактируйте ее код: добавьте границу для всех элементов страницы.

Лекция 3.2. CSS-свойства: размеры, цвета, шрифты, текст Размеры Размеры в CSS можно задавать в различных единицах измерения:

em – текущая высота шрифта pt – пункты (типографская единица измерения шрифта) Гораздо реже используется указание размеров в миллиметрах (mm), сантиметрах (cm) и дюймах (in).

Единица измерения записывается сразу за значением без пробела:

TABLE {font-size: 12pt} Цвета В CSS цвет задается как и в HTML – 6 шестнадцатеричными цифрами: по на каждый базовый цвет (красный, зеленый, синий). Также можно использовать стандартные названия цветов на английском (см. лекцию 2.1.).

Например:

A.content {color: black} A.menu {color: #3300AA} Допускается сокращать шестнадцатеричное представление до 3 цифр: запись #3300AA можно заменить на #30A.

Реже используется конструкция rgb(…), которая позволяет задавать красную, зеленую и синюю компоненты в десятичном или процентом виде:

A.content {color: rgb(0%,0%,0%)} A.menu {color: rgb(51,0,170)} URL URL задаются конструкцией url(…). Например, следующий CSS-код добавляет фоновое изображение для страницы:

BODY {background-image: url(images/bg.jpg);} Шрифты Шрифт – набор начертаний букв и знаков. В компьютере шрифт представляет собой файл, в котором описано, как должны отображаться на мониторе или принтере различные символы: буквы, цифры, знаки пунктуации и др.

Часто шрифты содержат только начертания для латинского алфавита и не имеют, например, поддержки кириллицы. Существуют Unicode-шрифты, которые содержат символы для всех языков. Основные форматы файлов шрифтов: TTF – TrueType и его расширение OTF – OpenType.

Типы шрифтов:

serif – шрифты с засечками (антиквенные), например: Times New Roman, Georgia.

sans-serif – рубленные шрифты (шрифты без засечек или гротески), типичные представители – Arial, Impact, Tahoma, Verdana;

cursive – курсивные шрифты: Comic Sans MS;

fantasy – декоративные шрифты, например: Curlz MT.

monospace – моноширинные шрифты, ширина каждого символа одинакова.

Примеры: Courier New, Lucida Console.

Засечками называют элементы на концах штрихов букв. Сравним букву шрифта Times New Roman и букву шрифта Arial.

Рисунок 3.1. Сравнение буквы М антиквенного и рубленного шрифта.

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

Использование шрифтов с засечками облегчает чтение текста с бумаги, поэтому такие шрифты обычно используют для набора основного текста в книгах. Для web-сайтов основной текст чаще набирают шрифтом без засечек:

Arial, Tahoma, Trebuchet MS, Verdana.

Текст CSS позволяет управлять свойствами шрифта и текста.

font-family – задает начертание шрифта. Можно указать несколько значений через запятую. Браузер проверит первый шрифт из списка: если шрифт установлен на компьютере пользователя, то браузер применит его, если нет – перейдет ко второму шрифту и т.д. Последним в списке обычно указывается общий тип шрифта serif, sans-serif, cursive, fantasy или monospace. Пример:

font-family: Georgia, 'Times New Roman', serif Если на компьютере пользователя установлен шрифт Georgia, то будет использоваться он, если нет – то Times New Roman. Если же и Times New Roman отсутствует, то браузер будет использовать шрифт с засечками, который установлен на компьютере.

Еще в CSS2 была реализована поддержка метода @font-face для загрузки недостающих шрифтов с сервера, но до недавнего времени не все браузеры поддерживали эту возможность. Сейчас @font-face работает в последних версиях FireFox, Opera, Safari. Inernet Explorer реализует @font-face с 4 версии, но поддерживает только шрифты в формате EOT (Embedded OpenType), которые могут быть получены из TrueType и OpenType программой-конвертером.

font-size – размер шрифта. Может задаваться абсолютным значением в пунктах (pt) или пикселях (px) или относительным – в процентах (%) или в em. Пример:

font-size: 12pt или font-size: 150% font-style – задает начертание текста: normal (обычное), italic (курсивное) или oblique (наклонное). Курсивное начертание является специальной измененной версией шрифта, имитирующей рукописный текст с наклоном вправо. Наклонное начертание получается из обычного наклоном букв. Различие видно на примере:

Рисунок 3.2. Нормальное, курсивное и наклонное начертание.

Обычно браузер не может отобразить наклонное начертание и заменяет его курсивным.

font-weight – позволяет изменить уровень жирности текста: normal (обычная), bold (полужирная). Действие аналогично тегу.

В спецификации CSS 2.1 определены и другие значения свойства fontweight помимо normal и bold, но на данный момент браузеры плохо их поддерживают.

color – задает цвет текста (см. пункт «Цвета» этой лекции). Например, зададим красный цвет для всех заголовков:

H1, H2, H3, H4, H5, H6 {color: #ff0000} или H1, H2, H3, H4, H5, H6 {color: red} line-height – межстрочный интервал (интерлиньяж), указывает расстояние между строками текста. Может задаваться числом как множитель от текущего размера шрифта, в процентах, а также в пунктах (pt), пикселях (px) и других единицах измерения CSS. Пример:

line-height: 1.5; /* полуторный интервал */ В программировании принято отделять целую часть числа от дробной точкой, как в английском языке. В русском языке используется запятая.

text-decoration – задает оформление текста. Варианты: line-through (перечеркнутый), overline (линия над текстом), underline (подчеркивание), none (отключение эффектов). Например, отключим подчеркивание у ссылок:

A {text-decoration: none} text-align – выравнивание текста в блоке: left (по левому краю), center (по центру), right (по правому краю) или justify (по ширине). Пример:

P {text-align: justify} text-indent – отступ первой строки («красная строка»). Длина отступа может задаваться в процентах (%) от ширины текстового блока, пикселях (px), пунктах (pt) и др. Пример:

P {text-indent: 1.25cm} Свойства font-style, font-variant, font-weight, font-size, font-family и lineheight можно задать в одном правиле:

font: font-style font-weight font-size/line-height font-family Значения font-size и font-family являются обязательными, остальные можно не указывать, например:

H1 {font: bold 14pt/1.5 sans-serif} Ресурсы в Интернете • Единицы измерения. http://www.htmlbook.ru/content/?id= • Основы CSS. Текст: http://htmlbook.ru/content/?id= • Оформление текста с помощью CSS.

http://www.intuit.ru/department/internet/operawebst/29/ • Общие шрифты для всех версий Windows и их эквиваленты для Macintosh. http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html Антиквенные шрифты*.

http://paratype.ru/help/class/default.asp?ClassCode= Шрифт с засечками*. http://www.webimg.ru/node/ Читабельность*. http://designformasters.info/posts/readability/#serif Как выбрать шрифт для веб-сайта*. http://seleckis.lv/journal/shrifty/kako vyibrat-shrift-dlya-web-sayta Тенденции мировой типографики*.

http://habrahabr.ru/blogs/typography/67671/ CSS Font-Size: em vs. px vs. pt vs. percent*.

http://habrahabr.ru/blogs/webdev/42151/ @font-face или назад в будущее*. http://lovtsevich.com/2009/10/26/fonto face-ili-nazad-v-budushhee/ а) Создайте новую страницу. Поместите на нее текст произвольного содержания. С помощью CSS задайте следующие параметры для заголовка: размер шрифта – 16 pt, полужирный, выравнивание по центру. Для текста – размер шрифта 12 pt, межстрочный интервал – полуторный, красная строка – 1,5 см.

б*) Добавьте на страницу пиктограммы с помощью шрифта Wingdings.

Лекция 3.3. CSS-свойства: поля, заполнение, границы В CSS каждый элемент располагается в блоке, которому можно задать значения полей (margin), заполнения (padding) и границы (border). Поле является отступом элемента от соседних, а заполнение – пустой областью между границей и содержимым (см. рис. 3.3.).

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis Здесь и далее в примерах используется «рыба». Подробнее: «Ководство» § 67. Lorem ipsum: http://www.artlebedev.ru/kovodstvo/sections/67/ Ширина полей и заполнения задается следующими CSS свойствами:

margin-top, margin-right, margin-bottom, margin-left – для верхней, правой, нижней, левой стороны поля.

margin – сокращенная запись. Задает значение сразу для всех сторон. Пример:

P {margin: 10px} аналогично записи margin-top: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 10px;

Если для margin указать два значения через пробел, то первое из них будет задавать ширину верхнего и нижнего поля, а второе – левого и правого. Если указать три значения, то первое будет присваиваться верхнему полю, второе – левому и правое, а третье – нижнему. Наконец, при указании четырех значений, они поочередно будут указывать верхнее, правое, нижнее и левое поля.

padding-top, padding-right, padding-bottom, padding-left – устанавливают ширину заполнения1 сверху, справа, снизу и слева от содержимого соответственно.

padding – устанавливает значение сразу для всех сторон.

Padding может принимать не только одно, но и 2, 3 или 4 значения. См.

примечание для margin.

Для margin и padding можно задавать значение auto. В этом случае браузер сам автоматически рассчитает величину полей и заполнения.

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

Для границ можно задать толщину, цвет и стиль:

border-width – толщина границы;

border-color – цвет границы (по умолчанию – черный);

border-style – стиль границы. Может принимать значения solid (по умолчанию), dotted, dashed, double, groove, ridge, inset или outset.

На рис. 3.4 представлены все виды границ, border-width установлен в 5 пикселей.

Существует сокращенная запись: свойство border задает одновременно толщину, цвет и стиль. Значения указываются через пробел в любом порядке.

Например:

Текст Можно задавать стили отдельно для верхней, правой, нижней и левой границы, но это редко используется на практике. Например:

HTML-код:

border-top: 2px dashed black;

border-bottom: 2px dashed black;

border-left: 0;

border-right: 0;

В браузере:

Рисунок 3.5 Задание свойств границ по отдельности Возможно передавать в border-width, border-color и border-style не один, а до четырех параметров, как для margin и padding. Также существуют свойства для толщины, цвета и стиля каждой границы, например: border-topwidth, border-right-color, border-bottom-style и др.

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

Это произошло потому, что многие HTML элементы по умолчанию занимают 100% ширины элемента, в которые они вложены. Для определения размера в CSS существуют свойства width и height. Чаще всего ширину и высоту задают в пикселях (px) или в процентах (%) от ширины родительского элемента. Рассмотрим пример:

HTML-код:

P {font-size: 10pt} border: 1px solid black;

border: 1px solid black;

width: 300px;

border: 1px solid black;

Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Размеры первого абзаца не указаны в стиле, ширина первого абзаца задана абсолютно в пикселях, а третьего – относительно ширины окна.

Если ширина или высота не заданы, они автоматически вычисляются браузером, исходя из размеров содержимого: для первого абзаца браузер установил ширину, равную ширине окна (100%). Во втором и третьем абзаце ширина задана, но не задана высота, поэтому браузер сам подобрал ее так, чтобы весь текст поместился в элемент.

Рисунок 3.6. Отображение примера в браузере Теперь, если пользователь изменит размер окна, пропорционально изменится ширина тех элементов, где она была задана в процентах.

Уменьшим размер окна браузера. У первого и третьего абзаца уменьшится ширина, а высота увеличится, чтобы вместить весь текст. Размеры второго абзаца останутся неизменными, появятся полосы прокрутки.

Поведение браузеров различается, если для элемента заданы и ширина, и высота, а содержимое не вмещается в эти размеры. Internet Explorer увеличит размеры элемента. Браузеры, полностью поддерживающие стандарт CSS, такие как Firefox, отобразят содержимое поверх блока.

Рисунок 3.7. Отображение примера в браузере при уменьшении ширины окна Можно задавать минимальные и максимальные размеры свойствами minwidth, min-height и max-width, max-height. К сожалению, эти свойства не поддерживает браузер Internet Explorer версии 6 и ниже. Пока этим браузером пользуется значительная часть пользователей, указывать минимально и максимально допустимые размеры не рекомендуется, т.к. это может привести к ошибкам отображения в IE6.

Общие размеры элемента складываются так:

Ширина = width + padding + border + margin Высота = height + padding + border + margin Т.е. width и height задают только размеры содержимого, не включая поля, заполнение и границу! См. рис. 3.8.

height incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis Рисунок 3.8. Бокс элемента и размеры содержимого • Модель компоновки CSS – боксы, границы, поля, заполнение.

http://www.intuit.ru/department/internet/operawebst/30/ • Справочник htmlbook.ru. Границы, поля, отступы. http://htmlbook.ru/css/ а) Реализуйте пример с рис. 3.6. Текст абзацев вставьте свой. Отключите поля и заполнение для всех элементов на странице (*). Проанализируйте результат. Добавьте заголовок тегом H1. Установите поля и отступы для тегов BODY, H1 и P. Для каждого абзаца установите разный вид и толщину границ.

б) Создайте параграф размерами 300100 пикселей. Поместите туда большой текст. Сравните поведение страницы в Internet Explorer и Firefox.

в*) Задайте для второго параграфа отрицательное верхнее поле. Оцените результат.

Лекция 3.4. CSS-свойства: фон, оформление таблиц Фон Как и в языке HTML, в CSS фоном служит заливка цветом или изображение.

Фоновое изображение может быть повторяющимся.

background-color – устанавливает цвет фона. Пример:

TD.head {background-color: #ffff00} background-image – устанавливает в качестве фона изображение:

BODY {background-image: url(images/bg.jpg)} background-attachment – задает поведение фонового изображения при прокрутке. По умолчанию задается значение scroll – фон прокручивается вместе с содержимым. Значение fixed делает фон неподвижным.

background-position – начальное положение фонового изображения по горизонтали (left, center, right) и вертикали (top, center, bottom). Вместо ключевых слов можно указывать расстояние в пикселях или процентах.

background-repeat – указывает, в каком направлении должно размножаться фоновое изображение:

repeat – по горизонтали и вертикали (по умолчанию);

repeat-x – только по горизонтали;

repeat-y – только по вертикали;

no-repeat – отключить повторение.

Пример:

Используя изображение одного вагона, составим в фоне поезд.

CSS код:

background-image: url('coach.png');

background-repeat: repeat-x;

background-position: 80px 100px;

В браузере:

Рисунок 3.10. Фоновое изображение на странице.

Таблицы Свойства CSS могут применяться к таблицам, их строкам и ячейкам для задания свойств текста и шрифта, управления фоном, полями, границами, размерами и т.п.

Создадим таблицу и применим к ней CSS-стили. В таблицу внесем данные о популярности различных браузеров1. Для заголовка таблицы используем тег ….

HTML-код:

Популярность браузеров в мире - По данным Net Applications для первого квартала года.

Без CSS-оформления таблица будет выглядеть так:

Рисунок 3.11. Отображение таблицы по умолчанию По умолчанию содержимое заголовочных ячеек отображается жирным шрифтом с выравниванием по центру.

Добавим в тег … тег …, а к тегу … атрибут id="browser_stats". Запишем CSS-правила для таблицы. Для заголовочных ячеек установим серый фон и отступ содержимого от границ (padding) в половину высоты строки, для ячеек с данными – выравнивание по правому краю и padding три десятых от высоты строки.

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

Код:

TABLE#browser_stats { border: 3px double black;

/* стиль заголовочных ячеек */ TABLE#browser_stats TH{ border: 1px solid black;

background-color: gray;

/* стиль ячеек с данными */ TABLE#browser_stats TD{ border: 1px solid black;

text-align: right;

В браузере:

Рисунок 3.12. Отображение таблицы с заданными CSS-стилями Виден существенный недостаток: у каждой ячейки появилась собственная рамка. Чтобы этого не происходило, необходимо указать в правилах для таблицы свойство border-collapse со значением collapse. Результат:

Рисунок 3.13. Эффект слияния границ соседних ячеек Теперь применим к той же таблице другое форматирование. Разделим таблицу двумя линиями на 3 части: названия браузеров, годы и процентные данные. Названия браузеров и процентные доли выровняем по центру, годы – по правому краю. Зададим одинаковую ширину для столбцов с информацией по браузерам.

Рисунок 3.14. Оформление таблицы с двумя разделительными линиями Чтобы применить правила CSS к левой колонке (годы), нам придется задать новый класс lc и прописать атрибут class="lc" во все ячейки левой колонки.

Горизонтальная линия создается путем указания свойства border-bottom для ячеек TH, вертикальная – border-left для ячеек класса lc.

Код-страницы:

Популярность браузеров в мире TABLE#browser_stats { border-collapse: collapse;

TABLE#browser_stats TH{ border-bottom: 1px solid black;

TABLE#browser_stats TD{ padding: 0.3em;

text-align: center;

TABLE#browser_stats.lc{ text-align: right;

border-right: 1px solid black;

width: 100px;

Ресурсы в Интернете • Оформление таблиц. http://htmlbook.ru/content/?pid= • Тег TH. http://htmlbook.ru/html/th.html • Стилевое свойство border-collapse. http://htmlbook.ru/css/bordercollapse.html Оформление таблиц.

http://www.intuit.ru/department/internet/operawebst/33/ а) Реализуйте примеры таблиц из лекции (рис. 3.13. и рис. 3.14.).

б) Измените форматирование таблицы на следующий вариант:

в) Измените форматирование: задайте одинаковую высоту строк и установите чередование фона («зебра»).

У к а з а н и е: используйте разные классы стилей для четных и нечетных строк таблицы.

г*) Модифицируйте таблицу из задания «в». Чередование цвета фона у строк д*) Отключите фон у ячеек таблицы. Добавьте фоновое изображение для таблицы.

Лекция 3.5. Теги DIV и SPAN, псевдоклассы Теги DIV и SPAN До сих пор в лекциях мы применяли стили CSS к тегам, уже имеющим заранее заданную функцию: таблицам, заголовкам, параграфам и т.д. Но иногда нужно применить стили к фрагменту содержимого, не включенного в отдельный тег. Например, выделить фоном несколько слов в тексте.

Теги … и … используются там, где не подходит никакой другой тег. Сами по себе они не определяют никакого форматирования, но удобны для привязки к ним стилей. При этом DIV является блочным элементом, а SPAN – строчным.

Основное различие между блочными и строчными элементами заключается в следующем: строчные элементы идут друг за другом в строке текста, а блочные – располагаются один по другим. К строчным элементам относятся такие теги, как,,,,,, и др.

К блочным:,, …,,,, и некоторые другие. Рассмотри различие на примере. Для тега указано стилевое правило, задающее цвет фона.

HTML-код:

Строчные элементы располагаются и идут друг за другом.

В браузере:

Рисунок 3.17. Поведение строчных элементов.

Рассмотрим пример для блочных тегов:

Блочные элементы border: black dotted 1px;

padding: 5px;

Содержимое <div>

Вложенный <div> № Вложенный <div> № Таблица из одной ячейки Рисунок 3.18. Поведение блочных элементов.

Блочные элементы располагаются друг под другом, многие занимают всю возможную ширину. Блочные элементы могут включать в себя строчные и другие блочные. Но строчные элементы не могут содержать блочные!

Еще одним отличием является то, что для строчных элементов не работают такие свойства, как margin-top, margin-bottom, padding-top и paddingbottom. Исключением являются теги,, и – для них можно задавать отступы padding-top и paddingbottom.

Псевдоклассы В лекции 3.1. мы рассмотрели способы привязки правил оформления CSS к элементам документа HTML: по названию тега, по имени класса, по ID и т.п.

В CSS также существует несколько псевдоклассов. С помощью псевдоклассов можно задать стиль в зависимости от состояния элемента или его положения в документе.

Для ссылок определено 4 псевдокласса:

link – ссылки, которые не посещались пользователем;

visited – посещенные ссылки;

active – активная (нажатая) ссылка;

hover – ссылка, на которую наведен курсор.

Пример:

A:link, A:visited { color: black;

font-family: Verdana, sans-serif;

text-decoration: none;

color: #de7300;

text-decoration: underline;

Фотоальбом Internet Explorer версии 6 поддерживает свойства hover и active только для ссылок, тогда как более современные браузеры (Firefox, IE версии 7 и выше и другие) могут применять эти свойства и к другим элементам страницы, например к ячейкам таблицы.

Псевдокласс (или псевдоэлемент) first-line – применяется для блочных элементов. Задает форматирование первой строки текста. Пример:

P:first-line {text-decoration: underline} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Рисунок 3.20. Пример использования псевдокласса first-line.

Псевдокласс (или псевдоэлемент) first-letter – позволяет задать форматирование первой буквы текста. Для примера создадим «буквицу» – начальную букву текста увеличенного размера:

P:first-letter { font-size: 200%;

border: red solid 1px;

padding: 2px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Рисунок 3.21. Использование псевдокласса first-letter для создания буквицы.

Ресурсы в Интернете • Базовые контейнеры – элементы div и span.

http://www.intuit.ru/department/internet/operawebst/22/2.html • Селекторы – псевдоэлементы и псевдоклассы.

http://www.intuit.ru/department/internet/css2/5/6.html • Псевдоклассы. http://stepbystep.htmlbook.ru/?id= Задания:

а) На основе данных о популярности браузеров за 2010 год (из предыдущей лекции) создайте столбчатую диаграмму (гистограмму). Пример показан на У к а з а н и е: используйте элементы DIV заданной ширины.

б) С помощью псевдокласса first-letter создайте свой вариант буквицы. Подберите шрифт, размер, цвет и оформление в) Добавьте эффект выделения ссылок при наведении курсора на своем сайте.

г*) Модифицируйте пример с рис. 3.17. С помощью таблицы реализуйте меню, как показано на рис. 3.23. Используя псевдокласс hover для строки таблицы, добавьте выделение пункта меню цветом при наведении курсора. Пример не будет работать в браузере Internet Explorer версии 6 и ниже.

Лекция 3.6. CSS-свойства: позиционирование Установка координат элемента С помощью CSS можно точно задать положение элемента на странице. Режимом позиционирования управляет свойство position:

position – устанавливает, каким образом вычисляется положение элемента в плоскости экрана. Существует четыре режима.

position: static – режим по умолчанию, элементы отображаются как обычно – в порядке следования в коде по правилам HTML.

position: relative – задает относительное свободное позиционирование.

Значения атрибутов top, right, bottom, и left при этом задают смещение координат элемента страницы от точки, в которой он был отображен. Например, создадим CSS-замену тегу ….

HTML-код:

Чтобы поместить цифру «8» в верхний индекс, уменьшаем ее размер в половину и сдвигаем вверх на высоту строки (1 em). Свойство top указывает расстояние от первоначального положения относительно верхней границы документа. Для того чтобы поднять «8» наверх, мы указываем отрицательное значение top. В этом примере можно вместо свойства top:

-1em написать bottom: 1em.

Рисунок 3.24. Замена тега средствами CSS.

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

Для преобразования в верхний индекс лучше использовать специально предназначенный атрибут vertical-align со значением sub для нижнего индекса или super для верхнего position: absolute – задает абсолютное свободное позиционирование.

Значения атрибутов top, right, bottom и left и при этом задают абсолютные координаты элемента страницы относительно родителя. Создадим два контейнера DIV и воспользуемся position: absolute для указания их координат.

Position: absolute width: 100px;

height: 100px;

border: 3px double black;

padding: 5px;

position: absolute;

DIV#first { background-color: #c0dcc0;

left: 40px;

DIV#second { background-color: #c0c0dc;

left: 100px;

Для блоков задается отступ от верхнего и левого края свойствами top и left. Так как второй блок объявлен в HTML-коде позже, он перекрывает первый блок на странице.

Рисунок 3.25. Использование абсолютного позиционирования.

Для управления порядком наложения элементов друг на друга необходимо использовать свойство z-index. Значением z-index является положительное или отрицательное число, задающее «высоту», на которой расположен элемент. Элементы с большим z-index накладываются сверху элементов с меньшим z-index. Чтобы в предыдущем примере первый блок оказался выше второго, необходимо для первого блока задать z-index, к примеру, равным двум, а для второго – единице.

Рисунок 3.26. Использование z-index для изменения порядка наложения элементов position: fixed – фиксирует элемент относительно окна. Элемент остается на месте даже при прокрутке страницы. К сожалению, режим fixed не работает в браузере Internet Explorer версии 6 и ниже, поэтому пока применять его не рекомендуется.

Плавающие элементы В прошлой лекции мы узнали, что по умолчанию блочные элементы идут строго друг под другом. Изменить этот порядок можно сделав элементы «плавающими». Для этого служит CSS атрибут float. Он задает, по какой стороне будет выравниваться элемент: левой (left) или правой (right).

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

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

Наглядно работа float видна на примере:

Плавающие элементы DIV#floating { Per Apollinem medicum et Aesculapium, Hygiamque et Panaceam juro, deos deasque omnes testes citans, mepte viribus et judicio meo hos jusjurandum et hanc stipulationem plene praestaturum.

Illum nempe parentum meorum loco habiturum spondeo, qui me artem istam docuit, eique alimenta impertirurum, et quibuscunque opus habuerit, suppeditaturum.

Victus etiam rationem pro virili et ingenio meo aegris salutarem praescripturum a pemiciosa vero et improba eosdem prohibiturum. Nullius praeterea precibus adductus, mortiferum medicamentum cuique propinabo, neque huius rei consilium dabo. Caste et sancte colam et Контейнер DIV с изображением стремится к левому краю документа, а с остальных трех сторон он обтекается текстом (рис. 3.27.).

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

Плавающие элементы border: double black 3px;

width: 150px;

padding: 5px;

border: dashed black 1px;

height: 30px;

text-align: center;

Рисунок 3.28. Пример: несколько плавающих блоков.

Первый блок выравнивается по левому краю родительского контейнера. Второй блок тоже стремится к левому краю, но так как место уже занято первым блоком, второй блок становится (обтекает) справа от первого. Аналогично поступает третий блок. Четвертый блок уже не может встать справа от третьего, поэтому он помещается ниже остальных и выравнивается по левому краю. И наконец, пятый блок обтекает четвертый справа.

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

← налево направо →

Рисунок 3.29. Пример: блоки с выравниванием по разным краям.

Еще одним свойством, связанным с плавающими элементами, является clear. Clear запрещает обтекание элемента с левой (left), правой (right) или с обеих сторон (both). По умолчанию значение – none – обтекание разрешено. Рассмотрим пример:

border: solid black 1px;

DIV.floating { Блок с запретом обтекания Рисунок 3.30. Использование правила clear.

При создании сайтов плавающие элементы, свойства float и clear часто используются для создания «каркаса» страниц сайта. Более подробно этот вопрос будет рассмотрен в следующей теме.

Ресурсы в Интернете • Плавающие элементы и очистка.

http://www.intuit.ru/department/internet/operawebst/35/ • Статическое и относительное позиционирование CSS.

http://www.intuit.ru/department/internet/operawebst/36/ • Абсолютное и фиксированное позиционирование CSS.

http://www.intuit.ru/department/internet/operawebst/37/ • CSS Float в теории и на практике. http://www.tultip.net/verstka/105-cssfloat-v-teorii-i-na-praktike.html Задания:

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

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

в*) Посредством абсолютного позиционирования изобразите точечный график математической функции. Пример для y=x2 показан на рис. 3.33.

У к а з а н и е: Создайте изображение с нарисованными на нем осями X и Y.

Поверх него поместите точки графика абсолютным позиционированием.

Тема 4. Верстка сайтов.

Лекция 4.1. Основы верстки. Табличная верстка.

Основы верстки Под версткой веб-страницы понимают процесс ее создания путем компоновки текстовых и графических элементов. При создании дизайна сайта дизайнер разрабатывает макет в графическом редакторе. Макет является обычным изображением. Поэтому, чтобы использовать дизайн на сайте, верстальщик «превращает» макет в веб-страницу, где расположение элементов задается с использованием HTML и CSS.

Рисунок. 4.1. Основные блоки страницы1 сайта http://w3.org Как правило, веб-страница представляется как набор прямоугольных блоков.

- Скриншот сайта сокращен по высоте, вырезана средняя часть.

В качестве примера рассмотрим сайт консорциума W3C (рис. 4.1.). Основные блоки на странице: 1 – логотип, 2 – верхняя часть (header), 3 – левая колонка, 4 – центральная колонка, 5 – правая колонка, 6 – нижняя часть (footer), 7 – общий фон страницы. Блоки в свою очередь могут содержать в себе другие более мелкие блоки: пункты меню, панели, и т.п. В верхней части располагается основное навигационное меню и форма поиска, в левой колонке – меню раздела, в правой колонке – важные объявления, в центральной – основное содержание страницы, а в нижней части дублируется верхнее меню (чтобы для перехода в другой раздел не нужно было прокручивать всю страницу снизу вверх) и контакты. Такая верстка страницы называется трехколоночной. Наиболее популярными являются трехколоночная и двухколоночная верстки. В двухколоночной, как правило, отсутствует правая колонка. Разумеется, существуют и другие варианты компоновки элементов, например в одну колонку. На рис. 4.2. показаны модели одно- и двухколоночных страниц.

Рисунок 4.2. Одноколоночная и двухколоночная страницы.

Пример одноколоночной страницы – поисковая выдача Google.com, двухколоночной – страницы сайта президента России kremlin.ru, блога habrahabr.ru, gismeteo.ru и другие.

Фиксированная и нефиксированная верстка Помимо способа компоновки блоков важнейшей характеристикой страницы является способ задания ее ширины. Существует два основных подхода:

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

Примеры: поисковая выдача Google, microsoft.com.

Привязка ширины страницы к ширине экрана. В этом случае размер блоков страницы пропорционально зависит от размеров экрана. Если окно сужается, то сужаются и блоки. Если окно растягивается, блоки расширяются. Такая верстка часто называется «резиновой». Примеры: www.w3c.org, www. icann.net.

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

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

Чтобы этого избежать, необходимо задавать минимальную и максимальную ширину «резиновой» страницы. Поэтому такой способ верстки является технически более сложным, чем фиксированный. Мы будем рассматривать преимущественно создание сайтов с неизменяемой шириной.

Совместимость с браузерами В процессе верстки необходимо добиться корректного отображения сайта в наиболее популярных браузерах при различных разрешениях экрана. К сожалению, браузеры реализуют не полностью или неправильно некоторые возможности CSS. Самые большие нарекания вызывает работа браузера Internet Explorer версии 6. Например, IE6 не поддерживает CSS свойства min-width, min-height, max-width и max-height. Из-за этого разработчикам сайтов приходится использовать различные приемы, позволяющие создать сайт, одинаково отображающийся во всех браузерах. Необходимо просматривать страницы в браузерах Internet Explorer версий 6-8, Mozilla FireFox 3, Opera версии 9 и 10 – этими браузерами пользуется более 90% аудитории Интернета (на начало 2010 года). В оставшиеся 10% входят Google Chrome, Safari, а также мобильные версии Opera и Internet Explorer. Из наиболее популярных браузеров наилучшим образом текущую версию CSS 2.1 поддерживают Internet Explorer 8, Mozilla Firefox 3, Opera 9 и 10, Safari 3 и 4. Ведется постепенное внедрение возможностей готовящейся спецификации CSS 3. Более старые версии браузеров не поддерживают определенные свойства CSS 2. или реализуют их с ошибками.

Для проверки соблюдения браузерами веб-стандартов HTML, CSS и др. был создан тест Acid. Многие браузеры не могут пройти этот тест из-за ошибок в реализации технологий, однако разработчики ведут работу по их устранению.

Рисунок 4.3. Прохождение теста Acid3 браузером Internet Explorer 8 (слева) Также необходимо предусмотреть работу сайта при различных разрешениях экрана. В настоящее время практически все пользователи (98%) работают с разрешением экрана 1024768 и выше. Поэтому максимальная ширина сайта не должна превышать примерно 990 пикселей, т.к. необходимо оставить запас для полосы прокрутки и рамки окна браузера. В противном случае у пользователя с небольшим экраном появится горизонтальная полоса прокрутки, что сильно затруднит чтение сайта.

Основными способами верстки является использование таблиц и использование блоков.

Табличная верстка Наиболее простым способом является верстка таблицами. Идея заключается в том, что все элементы страницы размещаются в таблице с невидимыми границами.

Для примера создадим трехколоночную страницу:

Каркасом такой страницы будет таблица с пятью ячейками. У таблицы будет три столбца и три строки, причем в первой и последней строке одна ячейка будет растянута на 3 столбца при помощи атрибута colspan.

Используя таблицы, удобно задавать размеры ячеек (блоков страницы). В нашем примере ширина боковых колонок будет равна 200 пикселям, центральной – 500 пикселям. Таким образом, мы получим жесткий «каркас»

страницы. Высота блоков будет зависеть от количества содержимого в них.

Высоту «шапки» и «подвала» зададим 60 и 20 пикселей соответственно.

Код страницы:

Табличная верстка margin: 0; /* обнуляем поля у страницы */ text-align: center; /* выравнивание по центру */ margin: 0 auto; /* центрируем таблицу */ border-collapse: collapse; /* смыкаем ячейки */ TD { /* задаем стиль для всех ячеек */ vertical-align: top;

padding: 5px;

#header { /* стиль заголовка */ background-color: #999999;

text-align: center;

height: 60px;

#left_col { /* стиль левой колонки */ background-color: #bbbbbb;

#center_col { /* стиль центральной колонки */ width: 500px;

#right_col { /* стиль правой колонки */ width: 200px;

background-color: #bbbbbb;

#footer { /* стиль нижнего блока */ background-color: #999999;

text-align: center;

height: 20px;

Общая ширина страницы, учитывая padding 5 пикселей будет равна 5 + + 5 + 5 + 500 + 5 + 5 + 200 + 5 = 930 пикселей. Результат показан на рис 4.5.

Рисунок 4.5. Верстка в три колонки с помощью таблицы Внеся небольшие изменения в CSS стили, можно сделать страницу растягивающейся. Например, можно оставить ширину боковых колонок фиксированной, а общую ширину таблицы привязать к ширине окна. Тогда размер центральной колонки браузер будет вычислять, вычитая из ширины таблицы ширину боковых колонок. Для этого достаточно для #main добавить правило width: 90%, а у #center_col убрать свойство width.

Для компоновки сложных страниц можно использовать вложенные таблицы.

В качестве примера рассмотрим сайт Министерства образования и науки Российской Федерации. Для того чтобы понять, как устроен сайт, включим отображение границ у таблиц и ячеек. Для этого можно сохранить копию страницы на диск и редактировать ее или воспользоваться инструментами разработчика, такими как Firebug для браузера Firefox или Developer Tools в Opera.

Сайт содержит состоит из таблицы, которая разделяет его на две части – большую левую (1) и меньшую правую (2). Основное содержание располагается в левой части. В нее вложены еще 2 таблицы: таблица с основным горизонтальным меню (3) и таблица с меню раздела (4) и текстом страницы (5).

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

Спецификация CSS предлагает другой инструмент: построение страниц из блочных элементов DIV. Такой подход является более логичным, соответствует требованиям веб-стандартов и рекомендаций, но с другой стороны гораздо более сложный. К сожалению, на настоящий момент браузеры недостаточно полно поддерживают спецификацию CSS 2. Особенно это касается Internet Explorer версий 6 и 7. И разработчику приходится тратить значительное время на борьбу с различными ошибками отображения. Блочная верстка рассматривается в следующей лекции.

Ресурсы в Интернете • CSS макеты. фиксированные, резиновые, эластичные. Плюсы и минусы. http://habrahabr.ru/blogs/css/31209/ • Всегда ли нужна «резиновая» верстка?

http://habrahabr.ru/blogs/webdev/48735/ • Табличная верстка. http://www.htmlbook.ru/content/?pid= а) Создайте табличный макет для своего сайта. Выберите количество блоков/колонок, определите способ задания их ширины: фиксированный или «резиновый», напишите HTML и CSS код макета. Примените созданный шаблон для всех страниц сайта.

б*) Рассмотрите компоновку страниц сайтов с табличной версткой (например, edu.ru, msu.ru, mirea.ru). Включите отображение границ для ячеек всех таблиц. Сколько таблиц используется? Используется ли вложенность?

Лекция 4.2. Блочная верстка Блочная верстка является гораздо более сложной в освоении, чем табличная. Ввиду невозможности описания всех приемов блочной верстки в лекции дается лишь краткое введение в эту тему.

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

Реализуем пример с рис. 4.5 с помощью блочной верстки.

Сначала необходимо определить в HTML-коде страницы основные блоки:

Блок wrap является контейнером («оберткой») для всех остальных блоков страницы: заголовка, левой, средней и правой колонок и «подвала».

Теперь зададим правила CSS. Рекомендуется сначала сбросить параметры отступов для всех элементов:

Зададим ширину блока wrap и отцентрируем его:

Теперь зададим параметры остальных блоков. Для того чтобы левая и правая колонки заняли свое место, используем правило float. Чтобы опустить «подвал» вниз используем clear.

background-color: #999999;

text-align: center;

background-color: #bbbbbb;

background-color: #ffffff;

background-color: #bbbbbb;

background-color: #999999;

text-align: center;

Результат показан на рис. 4.7.

Рисунок 4.7. Верстка в три колонки с помощью блоков DIV Сразу в глаза бросается проблема, которой нет при использовании табличной верстки: высота колонок получается разной. К сожалению, в CSS не предусмотрено правил для задания равной высоты колонок, так как предполагается, что высота блока должна зависеть только от его содержимого. Поэтому разработчикам приходится прибегать к разного рода «трюкам».

Самый простой вариант в нашем случае – задать такой же цвет фона для блока wrap, как у боковых колонок.

background-color: #bbbbbb;

Рисунок 4.8. Верстка в три колонки с помощью блоков DIV Хотя высота колонок не изменилась, пользователю это заметно не будет.

В Интернете существует множество готовых CSS-шаблонов и инструментов для генерации новых. Во многих случаях разумно воспользоваться ими.

Коллекции шаблонов:

• http://opensourcetemplates.org/ • http://www.minimalistic-design.net/ • http://csseasy.com/ • http://www.ex-designz.net/template/tempcat.asp?cat_id= • http://www.csstemplates.net/free-css-templates.php • http://blog.html.it/layoutgala/ Генераторы:

• http://csstemplater.com/ • http://www.inknoise.com/experimental/layoutomatic.php • http://csscreator.com/version2/pagelayout.php • http://www.maketemplate.com/csstemplate/ Ресурсы в Интернете • CSS: блочная верстка. http://zhilinsky.ru/2007/05/24/css-blochnayaverstka/ • Блочная верстка. http://www.websovet.com/blochnaya-verstka-urok- • Колонки одинаковой высоты. http://www.htmlbook.ru/content/?id= • Две колонки, навигация слева. http://htmlbook.ru/content/?id= а) Переделайте табличный макет своего сайта в блочный.

б*) Рассмотрите компоновку страниц сайтов с блочной версткой (например, vkontakte.ru, habrahabr.ru). Включите отображение границ для всех блоков.

Изучите структуру шаблона.