— Текст непосещенных и посещенных гиперссылок — не подчеркнут, цвет #576C8C (темно-синий).
— Текст посещенных гиперссылок, расположенных в полосе навигации, — не подчеркнут, цвет #576C8C. Мы задали для непосещенных и посещенных гиперссылок в полосе навигации одинаковые параметры — так принято.
— Текст посещенных гиперссылок, не расположенных в полосе навигации, — не подчеркнут, цвет #A1AFBA (синий).
— Текст активной гиперссылки — подчеркнут, цвет #576C8C.
— Текст гиперссылки, на которую наведен курсор мыши, — подчеркнут, цвет #576C8C.
— Текст гиперссылки, имеющей фокус ввода, — подчеркнут, цвет #576C8C.
— Шрифт первой буквы первого абзаца в контейнере cmain — 18 пунктов и полужирный.
— Выравнивание текста в ячейках первого и второго столбцов таблицы — списка версий HTML — по центру. Эти ячейки содержат исключительно числа, и центральное выравнивание для них подходит больше.
Чтобы воплотить задуманное, нам потребуется добавить в таблицу стилей main.css несколько новых стилей (листинг 13.9).
Листинг 13.9
A: link { color: #576C8C; text-decoration: none }
A: visited { color: #A1AFBA; text-decoration: none }
A: focus, A: hover, A: active { color: #576C8C; text-decoration: underline }
Стили из листинга 13.9 задают параметры гиперссылок, расположенных вне полосы навигации. Здесь мы активно используем псевдоклассы гиперссылок.
Листинг 13.10
#navbar A: link, #navbar A: visited { color: #576C8C; text-decoration: none }
#navbar A: focus, #navbar A: hover, #navbar A: active { color: #576C8C; text-decoration: underline }
Стили из листинга 13.10 задают параметры гиперссылок полосы навигации. Отметим, что здесь применяются комбинированные стили, содержащие указание на список navbar, который формирует полосу навигации, — так проще и нагляднее.
Вот стиль, задающий параметры первой буквы первого абзаца в контейнере cmain (т. е. в основном содержимом Web-страницы):
#cmain > P: first-child: first-letter { font-size: 18pt; font-wight: bold }
Он представляет собой комбинированный стиль, содержащий целых три специальных селектора, и весьма сложен. Поэтому рассмотрим его по частям.
- #cmain > P — абзац должен быть непосредственно вложен в контейнер cmain.
- #cmain > P: first-child — помимо того, абзац должен быть первым дочерним элементом своего родителя (данного контейнера).
- #cmain > P: first-child: first-letter — ну и, собственно, указываем на первую букву данного абзаца. Именно к ней будет привязан этот стиль.
Обратим внимание — мы специально указали, что абзац должен быть непосредственно вложен в контейнер cmain. Если мы этого не сделаем, написав так:
#cmain P: first-child: first-letter { font-size: 18pt; font-weight: bold }
стиль будет применен и к абзацу, который вложен в тег большой цитаты — ведь этот абзац также будет первым дочерним элементом своего родителя. А нам это не нужно.
Вот два одинаковых стиля, задающих выравнивание текста по центру для первой и второй ячеек каждой строки таблицы:
table-html-versions TD: first-child,
table-html-versions TD: nth-child(2) { text-align: center }
Как видим, они представляют собой комбинированный стиль, включающий стилевой класс table-html-versions.
Чтобы данные стили начали действовать на таблицу, нам придется привязать этот
стилевой класс к ее тегу <TABLE>:
<TABLE CLASS="table-html-versions">
<CAPTION>Список версий HTML:</CAPTION>
.
</TABLE>
Вот и все. Добавим приведенные стили в таблицу стилей main.css, внесем исправления в Web-страницу index.htm, сохраним их и откроем Web-страницу index.htm в Web-обозревателе. Хороша, правда?
На этом разговор о представлении Web-страниц закончен.
Что дальше?
В этой, последней главе части II мы завершили рассмотрение CSS изучением специальных селекторов. И, разумеется, применили новые знания на практике.
Разговор о представлении Web-страниц и стилях CSS, с помощью которых оно создается, был долгим и продуктивным. Мы изучили множество атрибутов стиля, управляющих самыми разными параметрами элементов Web-страниц: шрифтом, цветом, фоном, выравниванием, отступами, рамками и др. А наш Web-сайт стал выглядеть намного лучше.
В части III мы будем рассматривать поведение Web-страниц. Мы познакомимся с принципами Web-программирования, языком программирования JavaScript и библиотекой Ext Core, сильно упрощающей работу программистов — нас с вами. Так что впереди еще много интересного!
Часть 3
Поведение Web-страниц. Web-сценарии
Глава 14
Введение в Web-программирование. Язык JavaScript
Web-дизайн состоит из трех частей: содержимого, представления и поведения. Это мы узнали еще в главе 1. Содержимому была посвящена часть I, представлению — часть II. Теперь настала очередь обсудить поведение.
Поведение — это набор правил, определяющих, как Web-страница будет реагировать на действия посетителя. Так, мы можем указать, чтобы при наведении курсора мыши на гиперссылку в полосе навигации менялся цвет и стиль рамки, в которую она заключена. Еще мы можем менять содержимое Web-страницы после ее загрузки или даже дополнять его, заставлять контейнер расширяться при щелчке мышью, открывая свое содержимое, анимировать элемент Web-страницы и делать множество других интересных вещей с самой Web-страницей и любым ее фрагментом.
Поведение создается с помощью так называемых Web-сценариев — программ, которые записывают прямо в HTML-коде Web-страниц или, что предпочтительнее, в отдельных файлах. Эти программы пишут на языке JavaScript. Web-обозреватель считывает JavaScript-код и последовательно выполняет записанные в нем выражения, проводя вычисления и выполняя на основе полученного результата заданные манипуляции над Web-страницей.
Эта глава будет целиком посвящена принципам Web-программирования, языку JavaScript и средствам, предоставляемым Web-обозревателем для написания Web- сценариев. Она будет очень большой, так что приготовимся к долгому чтению и обилию новых терминов.
Примеры Web-сценариев
Язык JavaScript лучше всего изучать, имея перед глазами пару хороших примеров. Поэтому давайте сразу создадим их.
Простейший Web-сценарий
Первый Web-сценарий, который мы напишем, будет совсем простым. Он выведет на Web-страницу текущую дату.
В самом начале этой книги, приступив к изучению HTML, мы создали небольшую Web-страничку 1.1.htm. Найдем ее и откроем в Блокноте. В самом конце ее HTML- кода, перед закрывающим тегом </BODY>, вставим код листинга 14.1.
Листинг 14.1
<SCRIPT>
var dNow = new Date();
var sNow = dNow.toString();
document.write(sNow);
</SCRIPT>
Это Web-сценарий. Мы поместили его прямо в HTML-код Web-страницы.
Сохраним исправленную Web-страницу и откроем ее в Web-обозревателе. В самом низу мы увидим новый абзац, содержащий сегодняшнюю дату в "международном" формате.
Наш первый Web-сценарий — поведение Web-страницы — работает!
Теперь немного исправим его так, чтобы он выводил дату в привычном для нас формате <число>.<месяц>.<год> (листинг 14.2).
Листинг 14.2
<SCRIPT>
var dNow = new Date();
var sNow = dNow.getDate() +"." + dNow.getMonth() +"." + dNow.getFullYear();
document.write(sNow);
</SCRIPT>
Обновим открытую в Web-обозревателе Web-страницу, нажав клавишу <F5>. Вот теперь дата отображается в привычном формате.
Более сложный Web-сценарийТеперь сделаем что-нибудь посложнее — заставим пункты списков, формирующих полосу навигации на Web-странице index.htm, менять цвет рамки при наведении на них курсора мыши. Так мы дадим посетителю понять, что данные
