Александр Чиртик - HTML: Популярный самоучитель

Тут можно читать онлайн Александр Чиртик - HTML: Популярный самоучитель - бесплатно ознакомительный отрывок. Жанр: comp-programming, издательство 046ebc0b-b024-102a-94d5-07de47c81719, год 2008. Здесь Вы можете читать ознакомительный отрывок из книги онлайн без регистрации и SMS на сайте лучшей интернет библиотеки ЛибКинг или прочесть краткое содержание (суть), предисловие и аннотацию. Так же сможете купить и скачать торрент в электронном формате fb2, найти и слушать аудиокнигу на русском языке или узнать сколько частей в серии и всего страниц в публикации. Читателям доступно смотреть обложку, картинки, описание и отзывы (комментарии) о произведении.
  • Название:
    HTML: Популярный самоучитель
  • Автор:
  • Жанр:
  • Издательство:
    046ebc0b-b024-102a-94d5-07de47c81719
  • Год:
    2008
  • Город:
    Санкт-Петербург
  • ISBN:
    978-5-91180-937-9
  • Рейтинг:
    4.25/5. Голосов: 81
  • Избранное:
    Добавить в избранное
  • Отзывы:
  • Ваша оценка:
    • 80
    • 1
    • 2
    • 3
    • 4
    • 5

Александр Чиртик - HTML: Популярный самоучитель краткое содержание

HTML: Популярный самоучитель - описание и краткое содержание, автор Александр Чиртик, читайте бесплатно онлайн на сайте электронной библиотеки LibKing.Ru

В книге кратко и просто описывается язык HTML. Прочитав ее, вы научитесь создавать собственные веб-страницы, причем не только простые, но и содержащие таблицы, видео и звук. Более гибко оформить веб-страницы вам поможет рассмотренная в книге технология CSS. А при желании вы сможете сделать веб-страницы динамичными с помощью сценариев JavaScript: описание этого языка вместе с кратким описанием DOM (объектной модели документа) также приведено в этой книге. В последних главах рассматривается пример создания небольшого сайта с использованием всех рассмотренных в книге технологий, а также освещаются основные вопросы публикации сайта в сети Интернет.

Приведенные в книге коды можно найти на сайте www.piter.com.

HTML: Популярный самоучитель - читать онлайн бесплатно ознакомительный отрывок

HTML: Популярный самоучитель - читать книгу онлайн бесплатно (ознакомительный отрывок), автор Александр Чиртик
Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

menu.style.left = main_menu.offsetLeft + item.offsetLeft;

lastMenu = menu;

//Сделаем так, чтобы до BODY событие onClick не дошло event.cancelBubble = true;

}

//Функция скрывает меню, открытое ранее

function hide_menu(){

if (lastMenu != null){

lastMenu.className = "hidden";

lastMenu = null;

}

}

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

Теперь рассмотрим, как реализованы раскрывающиеся меню. Они реализуются даже проще, чем сама строка меню. Как и в примерах предыдущей главы, раскрывающиеся меню основаны на использовании свободно позиционируемых таблиц (хотя это можно сделать на основе любого свободно позиционируемого элемента, например DIV, причем внешний вид такого меню будет ничуть не хуже). Каждая строка таблицы представляет собой отдельный пункт меню. Ниже приводится HTML‑код, добавляемый сценарием для создания раскрывающегося меню Информация (это меню самое маленькое и поэтому его реализацию удобнее изучать) (пример 14.5).

Пример 14.5. Таблица, соответствующая меню Информация
История
Пищевая ценность яблок
Сбор и хранение яблок

При просмотре текста примера 14.5 можно увидеть, что текст пунктов меню, как и текст пунктов строки меню, заключен в теги и . Это сделано для упрощения, ведь, кроме навигации (основная функция гиперссылок), других функций на меню не возлагается.

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

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

История

на

История

Если же просто поместить внутрь элемента A ячейку (не помещая еще и текст), то меню тоже будет работать, но форма указателя над текстом будет уже не та (текстовый I‑указатель).

Разворачивающиеся абзацы

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

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

Собственно так и реализовано представление рецептов на сайте. Фрагмент HTML‑документа, в котором используется описанный подход (разворачивающиеся абзацы), приведен в примере 14.6.

Пример 14.6. Использование разворачивающихся абзацев

...

Текст страницы...

Рецепт 1

Порядок приготовления блюда

Состав блюда

Рецепт 2

Порядок приготовления блюда

Состав блюда

Прочий текст страницы...

...

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

Страница, фрагмент которой приведен в примере 14.6, выглядит так, как показано на рис. 14.3. Типа загрузка рекламы documentwrite Здесь могла быть Ваша - фото 121");

//Типа загрузка рекламы...

document.write("

Здесь могла быть Ваша реклама");

document.write("");

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

Еще один сценарий используется для заполнения ячейки в нижней части страницы сведениями об авторских правах. Он записан в файле copyright.js и состоит из одной‑единственной строки:

document.write(«© Чиртик Александр 2006»);

Используемые таблицы стилей

В двух CSS‑файлах помещены используемые таблицы стилей. В файле page.css находится таблица стилей, используемая для оформления текста страниц (плюс оформление основной таблицы страниц) (пример 14.9).

Пример 14.9. Содержимое файла page.css

/*

Определения стилей для таблицы, форматирующей страницу

*/

TABLE.main_table {width: 100%; border-style: none;

background-color: green}

COL.info {width: 100px; background-color: rgb(180,255,200)}

COL.content {background-color: rgb(200,255,200)}

TR.copyright {background-color: green; color: white; text-align: right;

padding: 5; font-size: 3mm}

/*

Стили рецептов

*/

.process {font-size: 85%}

.products {font-style: italic; font-size: 85%}

/*

Прочие стили разметки

*/

H1 {text-align: center}

В файле menu.css находится таблица стилей, используемая для оформления пунктов меню и рецептов (пример 14.10).

Пример 14.10. Содержимое файла menu.css

/*

Стиль строки меню и ее пунктов

*/

.menu_line {border-style: none; background-color: green;

width:100%; text-align: center}

.main_item {background-color: green}

.main_selected {background-color: magenta}

A.main_href {color: rgb(230,230,230); text-decoration: none;

font-family: "times new roman"}

/*

Стиль пунктов меню

*/

.item {background-color: rgb(230,230,230)}

.selected {background-color: magenta}

A.main_href {}

/*

Стили отображаемого и спрятанного меню

*/

.menu {border-style: solid; border-width: 1px;

visibility: visible; position: absolute;

background-color: rgb(230,230,230); border-color: black}

.hidden {display: none}

/*

Определение стилей для разворачиваемых элементов exp – класс элемента, при щелчке кнопкой мыши на котором будет показан соответствующий элемент класса expbody

*/

.exp {background-color: rgb(150, 255, 200)}

.exp_ref {text-decoration: none; font-weight: bold}

.expbody {display: block; background-color: rgb(150, 255, 150)}

.exp_hidden {display: none}

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

14.5. Примеры работы сайта

При открытии сайта пользователь попадает на главную (стартовую) страницу (файл index.html), показанную на рис. 14.4. Рис 145 Страница с рецептами Сами рецепты выглядят так как показано на - фото 122

Рис. 14.5. Страница с рецептами

Читать дальше
Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать


Александр Чиртик читать все книги автора по порядку

Александр Чиртик - все книги автора в одном месте читать по порядку полные версии на сайте онлайн библиотеки LibKing.




HTML: Популярный самоучитель отзывы


Отзывы читателей о книге HTML: Популярный самоучитель, автор: Александр Чиртик. Читайте комментарии и мнения людей о произведении.


Понравилась книга? Поделитесь впечатлениями - оставьте Ваш отзыв или расскажите друзьям

Напишите свой комментарий
x