Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
HTML теги, атрибуты и параметры, определяющие звукСодержание книги
Поиск на нашем сайте
FAQ по теме: Фоновый звук – музыка на сайте
Фоновый HTML звук для браузеров Internet Explorer и Opera:
Результат: фоновый HTML звук для IE и Opera Теги, атрибуты и значения
Описанный выше метод внедрения фонового звука в HTML -страницу приемлем только для браузеров Internet Explorer и Opera. Звук в HTML или музыка на сайте для всех видов браузеров Фоновый HTML звук для Opera, Firefox, Chrome, Internet Explorer...:
Результат: HTML звук (музыка) на сайте для всех видов браузеров Размещается код в секторе <body> </body>. Aтрибуты и значения
Недостатки второго метода заключаются в том, что если на компьютере пользователя отсутствует вышеупомянутый проигрыватель, то программa браузера ему предложет его установить, а это далеко не каждому может понравиться. Помните! Посетителю ничего не стоит покинуть ваш сайт. Совет напрашивается сам собой! Используйте фоновый HTML звук или музыку на своем сайте только в случае, когда это действительно оправдано! Дополнительно смотрите: фоновый звук, музыка в HTML 5 Блочная верстка сайта или верстка блоками В процессе верстки, при создании сайтов HTML не используется самостоятельно. W3C консорциумом, с целью управления внешним видом деталей web-страницы, был придуман и разработан инструмент под названием CSS. И если HTML можно сравнить с корпусом здания, то CSS в этой аналогии является деталью интерьера. Цель данного урока — показать web-страницу изнутри. Подробно механизм взаимодействия двух основных инструментов сайтостроения, а также все возможные способы верстки рассматриваются в следующем разделе, Жесткая блочная верстка Итак, исходный код файла index.html:
Исходный код file.css:
Результат: жесткая блочная верстка Мы имеем 2 файла: index.html и file.css. <link rel="stylesheet" href="file.css" type="text/css" /> в секции <head> </head> файла index.html не что иное, как ссылка на отдаленный документ file.css. Атрибуты style="" со значениями – прямое включение Каскадных таблиц стилей в HTML документ, что не является оптимальным вариантом внедрения стилевых описаний – семантически правильным есть способ ввода атрибутов class="" и id="" в теги документа и последующее описание их значений (значений атрибутов class="" и id="") во внешнем файле с расширением.css — такой способ не засоряет код страницы, что очень важно для поисковых роботов. В этом демонстрационном уроке был представлен тип жесткой верстки, реализованной с помощью блоков <div> </div>. Верстка называется жесткая, потому что размеры блоков установлены в пикселях. Другой вариант – табличная верстка рассматривается в cледующем уроке. Так выглядит страница index.html без использования стилей: страница Конечно же самый элементарный дизайн можно обеспечить с помощью HTML атрибутов и значений, но в нашем самоучителе не был описан такой метод, так как это нерационально и не способствует движению вперед. Блочная верстка, жесткая или резиновая является наиболее распространенным видом верстки среди профессиональных сайтов. или примеры верстки сайта с помощью таблиц Посмотрим как верстаются web-страницы при помощи таблиц. Способ табличной верстки сайта не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась обычными контейнерами <div> </div> со стилевыми описаниями. В современном XHTML таблицы рекомендуется использовать только для представления данных, но никак не для верстки сайта. Невзирая на это, мы все же рассмотрим такой способ как дополнение к уроку по таблицам.
Жесткая табличная верстка Пример жесткой табличной верстки сайта:
Результат: жесткая табличная верстка Отметим, что использована структура XHTML документа, о чем свидетельствует <!DOCTYPE> и открывающий тег <html>. Параграф <p class="left_col"> содержит CSS атрибут class="", значение которого – селектор описывается в секции <style type="text/css"> </style>. Дальше вспоминаем уроки по таблицам...... Указываем ширину первой и третьей ячейки среднего ряда: width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2, получаем 300px. Ширина среднего столбца (ячейки) = (равна) ширина таблицы (860px) - (минус) ширина левого и правого столбца (300px). Что касается высоты, то все ячейки одого ряда автоматически выравниваются по самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной — крайней левой. При расчете размеров всегда нужно учитывать значения padding, margin, border. Значения этих атрибутов задаются так: padding:20px – внутреннее поле элемента по всему своему периметру равно 20-ти пикселям или так: padding:10px 0 8px 60px – верхнее внутреннее поле равно 10-ти пикселям, правое – нулю, нижнее – 8-ми пикселям и левое – 60-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера. Резиновая табличная верстка Пример резиновой табличной верстки сайта:
Результат: резиновая табличная верстка Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний вид страницы. Подробно взаимодействие основных инструментов сайтостроения: HTML и CSS, а также все способы верстки рассматриваются в следующем разделе самоучителя, в уроке CSS верстка. Дата публикации: Ноябрь 2009 | Обновление: Ноябрь 2010
|
||||||||||
Последнее изменение этой страницы: 2016-08-01; просмотров: 445; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.218.95.236 (0.01 с.) |