|
p align="left">ПОДДЕРЖКА: все распространенные браузеры. В предыдущем примере свойство CSS float использовалось, чтобы поместить в правой части страницы блок навигации. На самом деле у него иное предназначение -- определять обтекание одного элемента другим. Листинг 3_float - Обтекание рисунка текстом и врезка к статье. <html> <head> <title>ОБТЕКАНИЕ РИСУНКА ТЕКСТОМ И ВРЕЗКА К СТАТЬЕ </title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style type="text/css" media="screen"> body { background-color: #e5f8be; font: 0.8em Verdana, Tahoma, Arial, Helvetica, sans-serif; } p { text-align: justify; } p img { float: left; margin-right: 8px; } .vrezka { float: right; margin-left: 8px; width: 30%; background-color: #99cc33; padding: 1%; } </style> </head> <body> <p><img src="3_picture.png" />Поясним CSS-код для обтекания рисунков текстом и создания врезки. Абзацы текста растянуты по ширине (text-align: justify;) исключительно ради того, чтобы нагляднее показать расположение врезки к статье. Текст внутри врезки выровнен по умолчанию по левому краю. CSS-селектор p.img означает "определить свойства всех элементов (тегов) <img>, вложенных в элементы <р>". Первым делом для вложенных в абзацы текста картинок задаем обтекание float: left. Это свойство указывает браузеру, что элемент помещается в крайней левой части экрана, а все остальные элементы должны обтекать его справа. Чтобы буквы не прилипали к картинке, мы создаем прозрачное внешнее поле шириной 8 пикселей справа от нее (margin-right: 8px;).</p> <div class="vrezka">Врезка помещается к правому краю контейнера, основной текст обтекает ее слева. Внешнее поле шириной 8 пикселей создано слева от врезки. Ширина блока (свойство width:) - 30% окна браузера. Чтобы визуально выделить врезку на странице, мы залили ее темно-зеленым фоном.</div> И последний штрих: улучшим удобочитаемость текста врезки с помощью отбивки сверху, снизу, слева и справа от границ блока на 1%.</p> </body> </html> Поясним CSS-код для обтекания рисунков текстом и создания врезки. Абзацы текста растянуты по ширине (text-align: justify;) исключительно ради того, чтобы нагляднее показать расположение врезки к статье. Текст внутри врезки выровнен по умолчанию по левому краю. CSS-селектор p.img означает «определить свойства всех элементов (тегов) <img>, вложенных в элементы <р>». Первым делом для вложенных в абзацы текста картинок задано обтекание float: left. Это свойство указывает браузеру, что элемент помещается в крайней левой части экрана, а все остальные элементы должны обтекать его справа. Чтобы буквы не прилипали к картинке создано прозрачное внешнее поле шириной 8 пикселей справа от нее (margin-right: 8px;). Врезка помещается к правому краю контейнера, основной текст обтекает ее слева. Внешнее поле шириной 8 пикселей создано слева от врезки. Ширина блока (свойство width:) -- 30% окна браузера. Чтобы визуально выделить врезку на странице, ее залили темно-зеленым фоном. И последний штрих: для улучшения удобочитаемости текста врезки применена отбивка сверху, снизу, слева и справа от границ блока на 1%. Рис.4. Обтекание рисунка текстом и врезка к статье улучшают качество страницы сайта. 4. ВЕРСТКА ТАБЛИЦ ТЕХНОЛОГИЯ: XHTML ПОДДЕРЖКА: Internet Explorer поддерживает все функции, тег <col> не работает в Mozilla, в Opera не работает стилевое оформление <col>. Верстать таблицы в (X)HTML -- утомительное занятие. Упростить эту работу можно с помощью табличных тегов. Структура таблицы не ограничивается элементами <table>, <tr> и <td>. Рекомендуется применять и другие теги. Листинг 4_table - Верстка таблицы с помощью «продвинутых» тегов. <html> <head> <title>ВЕРСТКА ТАБЛИЦ</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> <table border="1" width="100%"> <caption>Баланс</caption> <colgroup span="4"> <col width="25%" align="center" /> <col width="25%" align="right" /> <col width="25%" align="right" /> <col width="25%" align="right" style="color: red; font-weight: bold;" /> </colgroup> <thead> <tr> <th>Дата</th> <th>Приход</th> <th>Расход</th> <th>Остаток</th> </tr> </thead> <tfoot> <tr> <td>Дата</td> <td>Приход</td> <td>Расход</td> <td>Остаток</td> </tr> </tfoot> <tbody> <tr> <td>01.01.06</td> <td>3000</td> <td>2000</td> <td>1000</td> </tr> <tr> <td>02.01.06</td> <td>1000</td> <td>0</td> <td>2000</td> </tr> <tr> <td>03.01.06</td> <td>500</td> <td>1500</td> <td>1000</td> </tr> </tbody> </table> </body> </html> Заголовок таблицы задан с помощью элемента <caption>. Далее следуют очень полезные теги <col/>, каждый из которых отвечает за столбец таблицы. Без использования этого тега пришлось бы прописывать код для каждой ячейки таблицы (<td>). В этом простом примере таблица содержит 20 ячеек, а в рабочих таблицах их значительно больше. Поэтому применение тега <col/> очень упрощает и ускоряет создание таблицы. Основное содержимое таблицы разделено тегами <thead>, <tfoot> и <tbody> на шапку, нижнюю часть и тело таблицы соответственно. Эти теги должны следовать в указанном порядке. В <thead> помещены ячейки с заголовками столбцов, в <tbody> -- основные данные, в <tfoot> продублированы названия столбцов для удобства, если таблица получится большой. Рис.5. Таблица, при верстке которой применены «продвинутые» теги. 5. ЗАЩИТА E-MAIL АДРЕСА ОТ СПАМА ТЕХНОЛОГИЯ: Java Script ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script. Чтобы спрятать e-mail от спам-роботов применяют функцию на языке JavaScript. Она получает части адреса e-mail и собирает из них гиперссылку. Внутри секции документа <head> размещают следующий код: <script language="javascript" type="text/javascript"> //<!-- //<![CDATA[ function maillink(mailprefix, maildomain, mailsuffix, mailname) { var mailprefix; // первая часть адреса до @ var maildomain; // домен var mailsuffix; // зона домена (ru, com и т. п.) var mailname; // текст ссылки (имя получателя) if (mailname == null) { mailname = "e-mail"; } document.write('<a href="mailto:' + mailprefix + '%40' + maildomain + '.' + mailsuffix + '">' + mailname + '</a>'); } //]]> //--> </script> С помощью тега <script> объявляют, что в документ встроен код JavaScript. Функция JavaScript получает четыре параметра: ? первую часть e-mail-адреса до @ (var mailprefix;), ? домен почтового сервера (var maildomain;), ? зону домена (var mailsuffix;), ? текст гиперссылки (var mailname;). Последний параметр необязателен, и, если он не задан, для ссылки используется текст «e-mail». В финале JavaScript печатает («document.write()») на странице гиперссылку с адресом электронной почты. Использовать эту функцию в документе необходимо следующим образом: Пишите на мой <script language="javascript" type="text/javascript">maillink("e-teach","mail","ru");</script>. Спамерским роботам, собирающим на сайтах почтовые адреса, будет непросто разобраться в подобном представлении электронного адреса. Листинг 5_js_email - Полный код страницы со ссылкой на адрес e-mail электронной почты. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ЗАЩИТА E-MAIL АДРЕСА ОТ СПАМА</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <script language="javascript" type="text/javascript"> //<!-- //<![CDATA[ function maillink(mailprefix, maildomain, mailsuffix, mailname) { var mailprefix; // первая часть адреса до @ var maildomain; // домен var mailsuffix; // зона домена (ru, com и т. п.) var mailname; // текст ссылки (имя получателя) if (mailname == null) { mailname = "e-mail"; } document.write('<a href="mailto:' + mailprefix + '%40' + maildomain + '.' + mailsuffix + '">' + mailname + '</a>'); } //]]> //--> </script> </head> <body> <p>Для того, что бы спрятать e-mail от спам-роботов размещают внутри секции документа код JavaScript. С помощью тега script объявляют, что в документ встроен код JavaScript. Функция JavaScript получает четыре параметра: первую часть e-mail-адреса до @, домен почтового сервера, зону домена, текст гиперссылки. Последний параметр необязателен, и, если он не задан, для ссылки используется текст "e-mail". В финале JavaScript печатает ("document.write()") на странице гиперссылку с адресом электронной почты.</p> <p>С радостью отвечу на все вопросы. Пишите на мой <script language="javascript" type="text/javascript">maillink("e-teach","mail","ru");</script>.</p> <hr /> <p>© 2005 <script language="javascript" type="text/javascript">maillink("e-teach","mail","ru","Прохоров Виктор Сергеевич");</script></p> </body> </html> Рис.6. Страница сайта, содержащая ссылку на электронный адрес. Рис.6. Форма для электронного письма, которая открывается, если щелкнуть ссылку на электронный адрес. 6. ПРОВЕРКА ПОЛЕЙ ФОРМЫ ТЕХНОЛОГИЯ: Java Script ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script. Часто на web-сайте размещают форму для отправки сообщений на e-mail: <form name="mailer" id="mailer" action="/mail.php" method="post" onsubmit="return checkmailform();"> E-mail отправителя:<br /> <input type="text" name="mailsender" id="mailsender" /><br /> Текст письма:<br /> <textarea name="mailtext" id="mailtext" cols="35" rows="5"></textarea><br /> <input type="submit" value="Отправить" /> </form> Она состоит из полей ввода e-mail, текста и кнопки отправки данных серверному скрипту mail.php. Для формы и полей данных в атрибутах id и name указаны уникальные имена, которыми оперируют из JavaScript. С помощью события документа (action) onsubmit, возникающего при отправке формы, вызывают функцию JavaScript: function checkmailform() { if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) )
Страницы: 1, 2, 3
| 
