Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

HTML теги, атрибуты и параметры, определяющие звук

⇐ ПредыдущаяСтр 8 из 9Следующая ⇒

FAQ по теме: Фоновый звук – музыка на сайте

Как установить фоновый HTML звук на сайт для браузеров IE и Opera?
Как установить фоновый HTML звук или музыку на сайт для всех видов браузеров?

Фоновый HTML звук для браузеров Internet Explorer и Opera:

<title>HTML звук на сайте</title> <bgsound src="music.wav" loop="1" volume="-1000" balance="0" /> </head> <body> <img src="../images/bg_sound_img.jpg" alt="Музыка на сайте" /> </body> </html>

Результат: фоновый HTML звук для IE и Opera

Теги, атрибуты и значения

<bgsound /> – определяет фоновый HTML звук, музыку на сайте. Располагается в секторе <head> </head>.
src="" – определяет url звукового файла в формате Wav или Mp3.
loop="" – определяет количество проигрываний.
volume="-1000" – регулирует громкость звука. В данном случае обозначенная величина будет вычтена из текущего уровня громкости, установленного на компьютере пользователя.
balance="0" – регулирует баланс звучания.

Описанный выше метод внедрения фонового звука в HTML -страницу приемлем только для браузеров Internet Explorer и Opera.

Звук в HTML или музыка на сайте для всех видов браузеров

Фоновый HTML звук для Opera, Firefox, Chrome, Internet Explorer...:

<title>HTML музыка на сайте для всех браузеров</title> </head> <body> <embed src="music.mp3" autostart="true" hidden="false" loop="false" width="300" height="65" align="bottom"> </embed> </body> </html>

Результат: HTML звук (музыка) на сайте для всех видов браузеров

Размещается код в секторе <body> </body>.

Aтрибуты и значения

autostart="" – определят будет ли музыка проигрываться автоматически при открытии web-станицы или нет. Возможны значения: true – да или false – нет.
loop="" – определяет будут ли повторяться проигрывания. Возможны значения: true – да или false – нет.
hidden="" – определяет будет ли скрыта панель управления плейера Quick Time (именно Quick Time требуют браузеры по умолчанию, кроме браузеров Chrome, которые укомплектованы своим собственным проигрывателем) или нет. Возможны значения: true – да или false – нет. Если не будет, то указываются размеры панели: width="" height="".

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

Совет напрашивается сам собой! Используйте фоновый HTML звук или музыку на своем сайте только в случае, когда это действительно оправдано!

Дополнительно смотрите: фоновый звук, музыка в HTML 5

Блочная верстка сайта или верстка блоками

В процессе верстки, при создании сайтов HTML не используется самостоятельно.

W3C консорциумом, с целью управления внешним видом деталей web-страницы, был придуман и разработан инструмент под названием CSS. И если HTML можно сравнить с корпусом здания, то CSS в этой аналогии является деталью интерьера.

Цель данного урока — показать web-страницу изнутри.

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

Жесткая блочная верстка

Итак, исходный код файла index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Первая страница</title> <link rel="stylesheet" href="file.css" type="text/css" /> </head> <body> <div class="werty"> <div id="header"> <h2 align="center">Моя первая страница!</h2> </div> <div id="spisok"> <ul class="nav"> <li><a href="#">llllllll</a></li> <li><a href="#">oooooooo</a></li> <li><a href="#">mmmmmmmm</a></li> <li><a href="#">kkkkkkkk</a></li> <li><a href="#">eeeeeeee</a></li> </ul> </div> <div id="l"> <h3 style="text-align:center">wwwwwwwwwwww</h3> <p>wwwww www wwww wwww www www wwwww wwww wwwwww wwwww wwwwww wwwww wwwwww wwwww wwwwww www www wwwwwwwwww wwwwwwwww www ww www ww wwwwww wwww wwwwww wwww www www www wwww ww wwwwww wwwwwwwwww ww wwww wwwwwww ww ww wwwwwwww wwwww wwwww wwwwwwwwww ww wwwwwww www www www wwww wwwww ww wwwwww ww ww wwwww wwwww ww www www wwww wwww wwwwww www wwwwwww www wwwwwww wwwww wwww wwwwwww wwww ww wwwwwwwww wwwwww wwww wwww wwwwwwww wwww www wwww ww wwww wwww wwwwwww www wwwwww www www wwwwww wwww www ww wwwww wwwww wwwww wwww www wwwwwww www wwwww www www wwwwww www wwww www wwww wwww wwww www wwwwwww www wwwwwww www wwwwwwww ww wwwww wwww</p> <p style="text-align:center"><a href="#">wwwwwwwwwww</a></p> </div> <div id="r"> <h3 style="text-align:center">mmmmmmmmmmmm</h3> <p>mmmmm mmmmmmm mm m mmmm mm mmmm mmmm mm mm mmm mmmmmm mmmmm mmmmmm mm mmmm mmmmm mm mmmm mmmm mmm mmm mmmm mmm mmm mmmmmm mmm mmm mmmmm mm mmm mmmm mm mmmm mmmmm mm mmmm mmmm mm mmmm mmmmmm mmmm mm mmmmm mmm mmmmm mm mmmmm mmmm mm mmmm mmmm mmm mmmmm mm mmm mmmm mm mmmmmm mmmm mmmm mmm mm mmm mmmm mm mmm mmm mmm mmmm mm mm mmm mm mmm mmm mmmm mmm mmm mmm mmmm mmm mmmm mm mmmm mmmm mmm mmmmm mmm mmm mm mmmm mmmmmmmm mm mm mmm mmmmmm mm mmm mmm mmmmm mmmmm mm mm mmmmmmm mmmmm m mmmm mm mmmm mmm mm mmmm mmm mmmmm mmmm mm mmmm mmmmm mmmmm mm mmm mmmm mm mmm mmm mm mm mm</p> <p style="text-align:center"><a href="#">mmmmmmmmm mmmm</a></p> </div> <img src="images/fon.jpg" alt="" hspace="36" /> <p id="bottom">eeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeee eeeeeee eeeeeeee eeeeeeee eeeeeeeeee eeeeeeeee</p> </div> </body> </html>

Исходный код file.css:

body {font-family: Verdana, sans-serif} div.werty {margin: 0 auto; width: 800px; background-color: #ff66cc} #l, #r {width: 340px; margin-top: 30px; float: left} #l {padding: 30px 20px 30px 40px; text-align: right} #r {padding: 30px 40px 30px 20px} #bottom { width: 740px; background-color: #cc66ff; margin: 35px 0 0 0; border-top: 1px solid #ff3366; padding: 20px 30px 20px 30px; line-height: 180%; text-align: center; font-size: 10px } #header { height: 130px; width: 800px; margin: 0; padding: 0; background: #cc66ff; border-bottom: 1px solid #ff3366 } #header h2 {padding-top:47px} ul.nav { display: block; margin: 0; padding: 0 0 0 91px; list-style-type: none } ul.nav li {background-color: #660033; display: inline; padding: 0} ul.nav li a:link, ul.nav li a:visited, ul.nav li a:active { background-color: #660033; padding: 5px 15px 1px 15px; color: #cccccc; text-decoration: none; border-bottom: 2px solid #660033 } ul.nav li a:hover { background-color: #ffffff; padding: 5px 15px 1px 15px; color: #cc0000; text-decoration: none; border-bottom: 2px solid #660033 } #spisok {margin-left: 30px} a:link {color: #cccccc} a:visited {color: #ffffff}

Результат: жесткая блочная верстка

Мы имеем 2 файла: index.html и file.css.

В этом демонстрационном уроке был представлен тип жесткой верстки, реализованной с помощью блоков <div> </div>. Верстка называется жесткая, потому что размеры блоков установлены в пикселях. Другой вариант – табличная верстка рассматривается в cледующем уроке.

Так выглядит страница index.html без использования стилей: страница

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

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

или примеры верстки сайта с помощью таблиц

Посмотрим как верстаются web-страницы при помощи таблиц.

Способ табличной верстки сайта не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась обычными контейнерами <div> </div> со стилевыми описаниями. В современном XHTML таблицы рекомендуется использовать только для представления данных, но никак не для верстки сайта. Невзирая на это, мы все же рассмотрим такой способ как дополнение к уроку по таблицам.

Жесткая табличная верстка сайта
Резиновая табличная верстка

Жесткая табличная верстка

Пример жесткой табличной верстки сайта:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Жесткая табличная верстка сайта</title> <style type="text/css">.header {width:100%; height:60px; background-color:#717dc9; padding:20px; text-align:center}.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}.center_col {width:500px; background-color:#ffffff; padding:15px; vertical-align:top}.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px} </style> </head> <body> <table cellpadding="0" cellspacing="0" width="860" align="center"> <tr> <td colspan="3" class="header">Мой сайт</td> </tr> <tr> <td class="left_col">Меню</td> <td class="center_col">Содержание</td> <td class="right_col">Ссылки</td> </tr> <tr> <td colspan="3" class="footer">© Все права защищены</td> </tr> </table> </body> </html>

Результат: жесткая табличная верстка

Отметим, что использована структура 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-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера.

Резиновая табличная верстка

Пример резиновой табличной верстки сайта:

<title>Резиновая табличная верстка сайта</title> <style type="text/css">.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}.center_col {background-color:#ffffff; padding:15px; vertical-align:top}.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px} </style> </head> <body> <table cellpadding="0" cellspacing="0" width="100%" align="center"> <tr> <td colspan="3" class="header">Мой сайт</td> </tr> <tr> <td class="left_col">Меню</td> <td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td> <td class="right_col">Ссылки</td> </tr> <tr> <td colspan="3" class="footer">© Все права защищены</td> </tr> </table> </body> </html>

Результат: резиновая табличная верстка

Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний вид страницы.

Подробно взаимодействие основных инструментов сайтостроения: HTML и CSS, а также все способы верстки рассматриваются в следующем разделе самоучителя, в уроке CSS верстка.

Дата публикации: Ноябрь 2009 | Обновление: Ноябрь 2010

⇐ Предыдущая 1 2 3 4 5 6 789 Следующая ⇒

Читайте также:

Где возникла философия и почему?

Относительная высота сжатой зоны бетона

Сущность проекции Гаусса-Крюгера и использование ее в геодезии

Тарифы на перевозку пассажиров

Последнее изменение этой страницы: 2016-08-01; просмотров: 420; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.223.106.100 (0.019 с.)