3. Рамки в HTML и их создание
Информация обведенная рамкой позволяет отделить один материал на веб-странице от другого и привлечь внимание читателя.
Кроме того, рамка вносит элегантность в оформление сайта.
Для создания рамок применяется несколько способов, их которых большая часть использует свойства таблиц. Стили дополняют возможности таблиц и позволяют сделать рамки разных видов простыми средствами. Ниже приводятся распространенные приемы получения рамок, которые можно встретить повсеместно на разных сайтах.
Параметр border
Самый простой способ создания рамки заключается в использовании параметров таблицы border, определяющего толщину рамки и bordercolor, который задает ее цвет. Рамки созданные таким образом отличаются по своему виду в разных браузерах (рис. 3.1).
| Internet Explorer | Netscape | Opera |
Рис. 3.1. Рамка полученная с помощью параметра border
Netscape имитирует трехмерность рамки, браузер Opera вообще оставляет ее цвет без изменения, а Internet Explorer делает рамку сплошной.
Пример 3.1. Использование параметра border
Параметр border определяет толщину рамки, bordercolor – ее цвет, cellpadding задает расстояние от рамки до содержимого таблицы.
Вложенные таблицы
Еще один простой и универсальный способ построения рамки, работающий одинаково в разных браузерах, основан на наложении двух таблиц друг на друга. Если мы возьмем прямоугольник из, например, красной бумаги и сверху на него наложим еще один прямоугольник белого цвета, чуть меньшего размера, то увидим красную рамку. Только вместо листа бумаги используем тег TABLE, а цвет таблицы задаем параметром bgcolor.
Пример 3.2. Использование вложенных таблиц
В верхней таблице устанавливаем ширину и высоту таблицы по желанию, параметром bgcolor задаем цвет рамки, cellspacing присваиваем нулю, а cellpadding управляет толщиной границы. Чем этот параметр больше, тем толще будет и рамка.
Для внутренней таблицы надо обязательно задать ее цвет, отличный от цвета внешней, совпадающий с цветом фона веб-страницы, в примере, например, задан белый. Параметр cellspacing или cellpadding (в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы.
Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы.
Замечание: Перенос строки в тексте кода HTML автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк.
Заливка ячеек таблицы цветом
Использование цвета фона ячеек таблицы – один из универсальных и распространенных способов создания рамки. Создаем таблицу (рис. 3.2) и заливаем крайние ячейки нужным цветом (рис. 3.3).
Рис. 3.2. Рис. 3.3
Толщина рамки определяется шириной и высотой ячеек. Обязательно следует поместить внутри этих ячеек таблицы распорку – прозрачный рисунок размером 1 на 1 пиксел (в примере он называется spacer.gif), иначе в браузере Netscape этот способ работать не будет.
Пример 3.3. Создание рамки заливкой цветом ячеек таблицы
В данном примере делается красная рамка толщиной 2 пиксела, она смотрится наиболее элегантно. Параметры таблицы cellspacing и cellpadding приравниваются нулю, чтобы рамка оставалась нужной толщины и без зазоров. Если поместить внутрь такой таблицы текст, он будет плотно прилегать к рамке, что некрасиво и плохо читается. Чтобы добавить отступы можно создать для этой цели дополнительные ячейки, использовать вложенную таблицу или воспользоваться стилями.
Замечание: Приведенный способ чувствителен к разным параметрам, поэтому, в случае неправильной отрисовки рамки следует проверить следующее:
- если размер таблицы задается в пикселах, надо задать фиксированные размеры всех ячеек;
- когда ширина таблицы указана в процентах, внутри рамки нужно поместить текст, который «распирает» внутреннюю ячейку до нужной ширины; при отсутствии текста или другого содержимого внутри таблицы с рамкой, ее ширина окажется гораздо шире желаемой;
- в ячейках, где проходит рамка, не должно быть никаких символов неразделяемого пробела (& nbsp;), что так любят автоматически добавлять некоторые редакторы веб-страниц;
- перенос строки автоматически добавляет в текст пробел, поэтому между открывающим и закрывающим тегами
и текст следует писать в одну строку, чтобы не было зазоров между ячейками.
Декоративная рамка
Для создания желаемой рамки ее необходимо предварительно нарисовать в каком-нибудь графическом редакторе. На рис. 3.4, например, показана рамка со скругленными углами. Затем это изображение разрезаем на 9 частей, помеченные на рисунке 3.5 оранжевыми линиями и номерами. Разрезать изображение можно, например, в программе ImageReady или другой подобной.
После разрезания рисунка на части получим 8 фрагментов:
Пятого фрагмента рамки не будет (5.gif), поскольку у нас его заменит содержимое. Теперь создаем таблицу размером 3х3, как показано на рис. 3.2 и в ее ячейках размещаем созданные рисунки.
Пример 3.4. Создание декоративной рамки
| width=»1″> | ||
| Содержимое | ||
| width=»1″> |
В таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой.
Уголки вставляем как обычные рисунки с помощью тега IMG, а вот горизонтальные и вертикальные линии следует задавать с помощью фона ячейки таблицы, параметром background. Это позволит сделать нашу рамку масштабируемой и размер ее будет изменяться в зависимости от содержимого.
Чтобы линии плотно прилегали друг к другу и между ними не было пробелов надо обязательно указывать все размеры ячеек и рисунков.
В ячейках, где фоном размещаются горизонтальные и вертикальные линии, необходимо поместить распорку – это либо пробел, либо прозрачный рисунок формата GIF размером 1 на 1 пиксел (в примере файл называется spacer.gif). Делается это для того, чтобы обмануть браузер Netscape, который не показывает содержимое ячейки, если она пуста.
Приведенный способ позволяет создавать рамки практически любого вида.
Использование стилей
С помощью стилей рамку можно применить к любому блочному тегу, например, параграфу (тег P), таблице и тегу DIV. Стили позволяют создать рамку проще и удобней, чем с использованием таблиц и предоставляют разные виды рамок, которые показаны на рис. 3.6.
Рис. 3.6 Вид рамок задаваемых с помощью стилей
Первые две типа рамок – dotted и dashed поддерживаются браузерами Netscape и Internet Explorer только со старших версий.
Рамка задается проще всего параметром border, который сразу указывает ее вид, толщину и цвет.
Пример 3.6. Использование стилей
При работе на вычислительной технике необходимо сесть так, чтобы
руки с предплечьями образовывали прямой угол, глаза поставить на
расстояние 30-40 см от рабочей поверхности монитора.
В примере используется двойная рамка, толщина которой складывается из толщины линий и расстояния между ними. Чтобы рамка не соприкасалась с текстом, задан отступ от рамки до содержимого параметром padding.
Замечание: Браузер Netscape 4.x не добавляет рамку для таблиц и ограничивает ширину рамки ее содержимым.
Кухня HTML-верстальщика © Copyright 2008г.
графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь
Границы, рамки и отступы HTML-таблиц
Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding , поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).
Пример границ, рамок и отступов HTML-таблиц
Границы, рамки и отступы таблиц Таблица с измененными отступами и расстояниями:
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3 Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Ячейка 3.1 Ячейка 3.2 Ячейка 3.3
Таблица только с установленными рамкой и границами ячеек:
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3 Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Ячейка 3.1 Ячейка 3.2 Ячейка 3.3
Результат в браузере
Таблица с измененными отступами и расстояниями:
| Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
| Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
| Ячейка 3.1 | Ячейка 3.2 | Ячейка 3.3 |
Таблица только с установленными рамкой и границами ячеек:
| Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
| Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
| Ячейка 3.1 | Ячейка 3.2 | Ячейка 3.3 |
Естественно не обязательно рисовать у таблицы рамку и границы ячеек, чтобы изменять внутренние отступы и расстояния между ячейками.
Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding= «10» — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.
Отступление от темы или как убрать отступы по краям страницы
Изначально все браузеры устанавливают небольшие отступы по краям HTML-страницы, которые часто бывают не нужны, поэтому сейчас вы научитесь их убирать. Вообще, эту информацию следовало бы поместить в начало учебника, но там бы она вряд ли вам пригодилась.
В свое время у тега существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.
Способ первый. B теге указать атрибут style со следующими значениями:
. — убирает отступы сразу со всех сторон HTML-страницы. . — регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: .Второй и более удобный способ. В теге , с которым вы познакомились в уроке Меняем цвета ссылок, добавить еще одну строчку:
. body . body В этом уроке я тоже не буду все подробно описывать — только общие моменты. Для полноты картины посмотрите результат примера.
- Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
- В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй — левое и правое меню, а также основное содержимое (контент), в третьей — Footer или «подвал» страницы.
- Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
- Важно. Используйте тег только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
- Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
- Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где — увеличить.
Разделы сайта
- Как сделать сайт
Самому и бесплатно - Учебник HTML
Для начинающих - Учебник CSS
Для новичков - Справочники
По HTML и CSS - Примеры
HTML и CSS - Ссылки
Полезные сайты для вебмастеров - Инструментарий
Программы для создания сайтов
Учебник HTML
- Введение
- Что такое HTML?
- Теги и синтаксис HTML
- Атрибуты HTML-тегов
- Общие и текст
- Структура HTML-документа
- Параграфы и заголовки
- Как изменить шрифт?
- Меняем цвет текста и фона
- Выравнивание содержимого
- Цитаты и обрыв строки
- Что такое спецсимволы HTML?
- Горизонтальные линии
- Группирование элементов
- Комментарии в HTML
- Ссылки
- Cсылки и их разновидности
- Меняем цвета ссылок
- Ссылки на электронную почту
- Якоря — создаем закладки
- Изображения
- Изображения
- Изображения для фонов
- Изображения — ссылки
- Таблицы
- Таблицы
- Границы, рамки и отступы HTML-таблиц
- Объединение ячеек таблицы
- Вложенные таблицы
- Списки
- Нумерованные и маркированные списки
- Метатеги
- Метатеги и их типы
Copyright © 2010-2015 seodon.ru Все права защищены.
С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.
Справочник по CSS (ЦСС) и ШТМЛ
Для добавления двойной рамки воспользуйтесь стилевым тегом border , добавляя его к селектору TABLE . Атрибут border задает сразу три параметра рамки ? толщину, ее тип и цвет, они разделяются между собой пробелом. Например, border: 2px double #000 создает рамку толщиной два пиксела (2px), двойную (double) и черного цвета (#000). В примере 1 показано применение border для рисования двойной рамки вокруг таблицы.
Пример 1. Создание двойной рамки
| Щелочные металлы | Щелочноземельные |
|---|---|
| Литий | Берилий |
| Калий | Магний |
| Натрий | Кальций |
Результат данного примера показан на рис. 1.
Рис. 1. Вид таблицы с двойной рамкой
Толщину границы при использовании двойной рамки не стоит делать меньше двух пикселов, иначе линии ?склеятся? между собой. В итоге получится не двойная, а одинарная рамка.
CSS-рамки
Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.
CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.
Сначала поговорим об оформлении border, потом перейдём к outline.
border-width
Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.
Количество значений
Результат
Одинаковая ширина рамок со всех сторон.
Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой.
1 — верхняя рамка, 2 — левая и правая, 3 — нижняя.
Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая).
Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).
border-width: 16px 12px 4px 8px;
border-style
Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style.
Значений у свойства может быть довольно много, все они наглядно продемонстрированы рисунком ниже.
Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:
border-style: solid double dotted none
border-color
Работает так же, как и предыдущие свойства, но отвечает за цвет границ. Ему тоже можно задавать от одного до четырёх значений, и результат вы уже знаете. Если правило не установить, рамки будут иметь цвет текста текущего элемента или, если не указан и он, цвет текста элемента-родителя.
border-color: #C85EFA;
border
Упрощает запись и экономит код, позволяя установить все перечисленные свойства для границ со всех сторон элемента одной строкой:
Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:
outline-width
То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.
outline-style
Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.
outline-color
Определяет цвет внешнего контура.
Пример кода ниже задаёт стиль заголовка первого уровня с зелёными внутренними границами и оранжевыми внешними контурами.
outline
Объединяющее три предыдущих свойство, аналог border.
outline h1Заголовок с внешним контуром
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).