ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 02.04.2024
Просмотров: 421
Скачиваний: 0
СОДЕРЖАНИЕ
Как списки помогают организовать нам информацию
Как создать список на вашей странице
Объединение нескольких столбцов в одну ячейку
Предварительное форматирование
Где вы сможете найти графику, изображения и рисунки
Как поместить изображение на страницу
Оптимальные размеры изображений
Как браузеры работают с прозрачными изображениями
Создание прозрачных gif-изображений
Создание якоря и присвоение ему якоря
Компоновка ссылок в виде списков
Текст ссылок должен быть понятным
Как работают изображения-карты
Изображения-карты не являются новой технологией
Различия между серверными и клиентскими изображениями-картами
Разбиение изображения на фрагменты
Совершенствования веб-страницы
Развертывание веб-страницы в веб-узел
И посмотрим что получилось:
|
||||||||||||||||||||||||
Цвета в таблице
До недавнего времени не было возможности управлять цветами в таблице на веб-страницах. Сетка таблицы была черной, фон совпадал по цвету с фоном самой страницы. Было очень трудно выделить какую-то ячейку другим цветом.
Теперь существует ряд новых тегов, позволяющих задать цвета фона и сетки таблицы. В первом случае ключевое слово bgcolor вставляется в тег <table> следующим образом:
|
<table bgcolor="yellow"> </table> |
Мы изучали цвета на втором уроке. Кроме bgcolor, существуют другие способы управления цветом:
|
Значение ключевого слова |
Описание |
|
BORDERCOLOR="..." |
Изменяет цвет сетки таблицы |
|
BORDERCOLORDARK="..." / BORDERCOLORLIGHT="..." |
Используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти аттрибуты, ваша таблица выглядет трехмерной. |
|
|
||||||||||||||||||||||||
Такого вида таблицы мы добились лишь с помощью этих самых ключевых тегов:
|
<table align="center" bordercolordark=navy bordercolorlight=blue border="1"> <tr bgcolor="yellow"> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> <tr valign=top bgcolor="#abcdef"> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td bgcolor="#bcdefa"> <li>команда "All-Star Team" <li>награда MVP <li>Серебряная летучая мышь </td> </tr> <tr bgcolor="#abcdef"> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> </tr> <tr bgcolor="#abcdef"> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> </tr> </table> |
Альтернативы таблицам
Если вас беспокоит то, что ваши таблицы не смогут увидеть некоторые посетители, потому что они используют браузеры, которые не поддерживают таблицы (например Lynx, или старые версии Mosaic или Netscape), или таблицы вообще кажутся вам слишком трудоемкими и неинтересными, для вас создан ряд популярных альтернатив, например использование списков или предварительного форматирования (о нем чуть позже). Оба эти способа сходны с созданием таблицы, но их возможности гораздо более органичены.
Вместо таблицы используем список
Несмотря на то что списки "одномерны", парой списков при надлежащем использовании можно заменить практически любую таблицу. Например, вы можете замеить бейсбольную таблицу несколькими списками. Конечно, эти списки не так легко читать, как таблицу, и они заставляют пользователя перемещаться по экрану. В общем случае списки менее компактны, чем таблицы. Кроме того, информацию в списках труднее сравнивать. Посмотрите на список, заменяющий нам бейсбольную таблицу:
|
Предварительное форматирование
При использовании тегов <pre> и </pre> информация отображается браузером точно в таком виде, в каком вы ее напечатаете, без всякой интерпритации. Вы можете воспользоваться этими тегами для эмуляции таблицы. Результат не так эффектен, как таблица, и здесь невозможно ввести сетку таблицы, но большинство людей не заметит особой разницы. Предварительно отформатировав текст с использованием возвратов каретки, пробелов и табуляций так представит все ту же бейсбольную информацию:
|
<PRE><B> Имя Команда Победы/поражения Очки Ауты</B> Джон Хеппи Цинциннати 16-2 2.73 194 Гидео Немо Лос-Анджелес 19-8 2.94 399 Грег Энгриус Атланта 24-6 2.21 275 </PRE> |
Что получится:
|
Имя Команда Победы/поражения Очки Ауты Джон Хеппи Цинциннати 16-2 2.73 194 Гидео Немо Лос-Анджелес 19-8 2.94 399 Грег Энгриус Атланта 24-6 2.21 275 |
Итак, подводя итоги пройденного сегодня материала, хочу сказать что мы изучили сегодня: способы выравнивания текста в таблице, цвета в таблице, нашли способы замены таблиц списками и предварительным форматированием. Если у вас есть вопросы по пройденному материалу, присылайте их сюда.
Уроки html'а. Урок # 9.
Как оживить веб-страницу с помощью графики
Вот и добрались до графики. Имея за плечами страницу украшенную списками, таблицами, заголовками и красивым форматированным текстом начнем ее "оживлять".
"За" и "против" применения графики на веб-страницах
Вы, наверное, потратили много времени, просматривая различные веб-узлы, видели личные страницы, коммерческие, и я уверен, что практически на каждой из них тем или иным образом использовалась графка. В WWW можно найти любую графику, начиная от логотипов фирм и броских пиктограмм до фотографий домашних животных и репродукций известных картин.
Рисунки и графика жизнено важны для WWW. Это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст. Представьте себе, что вы берете любимую газету, а там нет иллюстраций. Она будет выглядеть скучно, независимо от того, как отформатирован текст. Веб-страница без графики подобна рекламному проспекту без рисунков - в нем просто нет смысла.