Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
| ← Декабрь 2004 → | ||||||
|
2
|
3
|
4
|
5
|
|||
|---|---|---|---|---|---|---|
|
6
|
7
|
8
|
9
|
10
|
11
|
12
|
|
13
|
14
|
15
|
16
|
17
|
19
|
|
|
20
|
21
|
22
|
24
|
25
|
26
|
|
|
28
|
29
|
31
|
||||
Статистика
-26 за неделю
Рецепты HTML # 140
| Информационный Канал Subscribe.Ru |
  |
 Помощь по сайту |
   |
|
 |
 |
Добрый день.
Спасибо всем, кто поздравил меня с двухлетием сайта. Ради благодарности читателей,
по большей части и работаем.
Моя книга «Ускорение работы сайта» уже появилась в продаже. Тираж относительно небольшой, поэтому спешите приобрести. Тема книги – создание веб-страниц, в которых быстро бы происходила загрузка и отображение содержимого. На русском языке подобная книга выходит впервые, несмотря на то, что тема достаточно актуальна. В конце каждой главы приводятся задания и вопросы для самостоятельной проверки, так что вы можете самостоятельно определить, как усвоен материал. Подробные примеры и описания позволят легко повторить все шаги, особенно это касается верстки веб-страниц.
Купить книгу в магазине Books.Ru
Содержание книги
Вступление
Часть I. Ускорение загрузки и сокращение кода веб-страниц.
Глава 1. Способы ускорения загрузки веб-страниц
Глава 2. Последовательность загрузки веб-страницы
Глава 3. Использование стилей
Глава 4. Ускорение загрузки таблиц
Глава 5. Верстка с помощью слоев
Глава 6. Применение фреймов
Часть II. Сжатие графических файлов при сохранении их качества
Глава 7. Какой графический формат выбрать
Глава 8. Как влияет разрешение на объем файла
Глава 9. Использование Adobe Photoshop для уменьшения объема графических файлов
Глава 10. Оптимизация формата GIF
Глава 11. Сглаживание краев или антиальясинг
Глава 12. Оптимизация формата JPEG
Глава 13. Использование масок и альфа-каналов для повышения качества изображений
Глава 14. Разрезание изображений
Глава 15. Уменьшение объема анимированных графических файлов в формате GIF
Глава III. Ускорение запуска и выполнения скриптов на языке
Глава 16. Основы языка JavaScript
Глава 17. Быстрая загрузка скриптов
Глава 18. Быстрое выполнение скриптов
Глава 19. Примеры использования JavaScript для ускорения работы веб-страниц
Глава IV. Применение серверных технологий для ускорения работы сайта
Глава 20. Используемые серверные технологии и их влияние на работу сайта
Глава 21. Настройка веб-сервера Apache
Глава 22. Оптимизация SQL-запросов для уменьшения нагрузки на сервер баз данных
Глава V. Приемы и хитрости
Глава 23. Кэш — ваш друг и помощник
Глава 24. Рецепты по сокращению объема кода
Глава 25. Советы по работе с графическими изображениями
Заключение
Предметный указатель
На сайте практически закончен раздел теги HTML, в него не входят лишь редкие и малораспространенные теги. Последние описания со ссылкой на сайт приведены ниже. Кроме того, теперь все теги сгруппированы по категориям, и вы можете сразу посмотреть все теги, которые, например, относятся к таблицам.
Если вы считаете, что на сайте нет описания какого-то нужного тега, напишите об этом мне. Также принимаются любые замечания и предложения по улучшению раздела с тегами.
Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом INPUT предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент INPUT не требуется помещать внутрь контейнера FORM, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной параметр тега INPUT, определяющий вид элемента — type. Он позволяет
задавать следующие элементы формы: текстовое поле (text), поле с паролем (password),
переключатель (checkbox), флажок (radiobutton), скрытое поле (hidden), кнопка
(button), кнопка для отправки формы (submit), кнопка для очистки формы (reset),
поле для отправки файла (file) и кнопка с изображением (image). Для каждого
элемента существует свой список параметров, которые определяют его вид и характеристики.
Тег FRAME определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере FRAMESET, который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью параметра src. Хотя обязательных атрибутов у тега FRAME и нет, рекомендуется задавать каждому фрейму имя через атрибут name. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.
Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера
на отдельные области, расположенные вплотную друг к другу. В каждую из таких
областей загружается самостоятельная веб-страница определяемая с помощью тега
FRAME. С помощью фреймов веб-страница делится на два или более документа, которые
обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет
открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме.
Тег FRAMESET заменяет собой элемент BODY на веб-странице.
Допустимо использовать вложенную структуру элементов, это позволяет разбить
один фрейм на две и более области.
Тег IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Тег IFRAME является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и <iframe>.
Тег MARQUEE создает бегущую строку на странице. На самом деле содержимое контейнера MARQUEE не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.
Первоначально тег MARQUEE был предназначен только для браузера Internet Explorer, но современные версии других браузеров (Netscape 6, Opera 6 и старше) также понимают и поддерживают этот тег.
Вопросы и ответы
Как отменить повторение фонового рисунка?
Используйте стилевой атрибут background-repeat: no-repeat. Его можно присвоить к селектору BODY, тогда повторения не будет для всей страницы, или для TABLE, если фон нужно поместить в таблице.
<head>
<style>
BODY { background-image: url(mybg.gif); background-repeat: no-repeat }
</style>
</head>
<body>
...
</body>
</html>
Как выровнять таблицу по центру?
Выравнивание таблицы по центру делается через параметр align=center тега TABLE.
...
</table>
Также можно использовать свойство text-align, применяя его к селектору BODY.
<head>
<style type="text/css">
BODY { text-align: center }
TABLE { margin: auto }
P { text-align: left }
</style>
</head>
<body>
<table width=200 bgcolor=#c0c0c0 border=1 bordercolor=black>
<tr><td>...</td></tr>
</table>
<p>Текст</p>
</body>
</html>
Добавление свойства text-align: center к селектору BODY заставляет выравниваться по центру все содержимое веб-страницы, включая таблицы, поэтому для текста требуется установить дополнительное выравнивание по нужному краю.
Как сделать версию для печати?
В версии для печати желательно:
- убрать баннеры, кнопки и другие не относящиеся к содержанию элементы;
- не использовать фоновый рисунок (он на печати не воспроизводится, если не
указывать это специально);
- ширину лучше использовать "резиновую".
В остальном, это обычная страница.
Как загрузить свой собственный шрифт?
Через CSS и атрибут @font-face
@font-face {
font-family: comic; // имя шрифта для CSS
src: url(http://www.fonts.com/comic.eot); // адрес
}
Как сделать красную строку в параграфе?
Воспользуйтесь параметром text-indent, который задает отступ первой строки текста. Отступ можно указывать в пунктах (pt), пикселах (px), дюймах (in), миллиметрах (mm) и др.
<head>
<style type="text/css">
P { text-indent: 20px }
</style>
</head>
<body>
<p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить охлажденную смесь в фужер. Пить залпом.</p>
</body>
</html>
Как сделать, чтобы при наведении на элемент появлялась всплывающая подсказка, но не стандартная, а своя?
Скрипт для решения этой задачи предоставил DeFacto.
<head>
<style>
.tooltip {
background: #ffffee;
border: 1px solid black;
padding: 2px
}
</style>
<script language="JavaScript">
function showmessage(msg, n){
d = document.getElementById(n);
x = event.x;
y = event.y;
d.style.top = y+20;
d.style.left = x;
d.innerHTML = msg;
d.style.display = "block";
}
function hidemessage(n){
d = document.getElementById(n);
d.style.display="none";
}
</script>
</head>
<body>
<A href="http://www.cebis.uz/"
onmousemove="showmessage('Просто тест<br> Посмотрим что будет дальше
', 1)" onmouseout="hidemessage(1)" target=_blank>Home Page</A>
<div id='1' class='tooltip' style=""xposition:" absolute; display: none"></div>
<A href="http://www.cebis.uz/"
onmousemove="showmessage('Просто тест<br> Посмотрим что будет дальше ', 2)" onmouseout="hidemessage(2)" target=_blank>Home Page</A>
<div id='2' class='tooltip' style=""xposition:" absolute; display: none"></div>
</body>
</html>
Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.
| http://subscribe.ru/
http://subscribe.ru/feedback/ |
Подписан адрес: Код этой рассылки: inet.webbuild.htmlbook |
Отписаться |
| В избранное | ||
