Использование html-таблиц для размещения материалов в эпиграфе
23-08-2006 12:06
к комментариям - к полной версии
- понравилось!
Для improved
Ранее ты обратился за помошью:
Это делается так:
Чтобы добиться разрыва текста с переходом на следующую строчку, достаточно вставить в нужном месте тег <br>.
Чтобы отредактировать расположение текста и картинки в эпиграфе есть два способа.
Способ 1 (простой)
Достаточно добавить атрибут align, который задает расположение графического изображения относительно текста, в тег <img>, содержащий ссылку на вашу картинку, и присвоить атрибуту соответствующее значение:
texttop - выравнивание верхнего края изображения по верхней линии текста,
abscenter - выравнивание центра изображения по центральной строки текста,
center - выравнивание центра изображения по нижней линии строки текста,
bottom - выравнивание базовой линии строки текста по нижнему краю изображения,
absbottom - выравнивание нижнего края изображения по нижней линии текста с учетом элементов символов, опускающихся ниже базовой линии,
left - расположение текста в левой части текстового потока,
right - расположение текста в правой части текстового потока.
Недостаток этого способа заключается в том, что при наличие более двух разнородных объектов предсказать их поведение сложно. Результат часто может сильно отличаться от ожиданий.
Способ 2
На мой взгляд, удобнее всего представить поле эпиграфа ввиде таблицы, ячейки которой можно заполнять по своему усмотрению, объединять, изменять их размер. Подогнать макет таблицы не так сложно, достаточно разобраться с несколькими тегами и их атрибутами. А результат будет соответствовать желаниям.
Понадобятся следующие теги:
<table> ... </table> - начальный и конечный теги таблицы
Возможные атрибуты:
background=URL - Задается фоновое изображение для таблицы.
bgcolor=цвет - Задается цвет фона ячейки.
cellpadding=n - Между границами ячейки и её содержимым поместить область свободного пространства шириной n пикселей.
cellspacing=n - Задается интервал между ячейками таблицы размером в n пикселей.
hspace=n - Задается размещение справа и слева от таблицы областей свободного пространства заданной ширины (в пикселях).
vspace=n - Задается размещение над таблицей и под ней областей свободного пространства
<tr> ... </tr> - начальный и конечный теги строки ячеек в таблице.
Возможные атрибуты:
align=тип - Задается способ выравнивания содержимого ячейки:
left - по левому краю;
center - по центру;
right - по правому краю.
background=URL - Задается фоновое изображение ячейки.
bgcolor=цвет - Задается цвет фона ячейки.
bordercolor=цвет - Задается цвет обрамления ячейки.
valign=тип - Задается размещение содержимого данной ячейки:
top - вверу;
center - по центру;
bottom - внизу;
baseline - по базовой линии ячейки.
<td> ... </td> - начальный и конечный теги данных в ячейке таблицы.
Возможные атрибуты:
align=тип - Задается способ выравнивания содержимого ячейки:
left - по левому краю;
center - по центру;
right - по правому краю.
background=URL - Задается фоновое изображение ячейки.
bgcolor=цвет - Задается цвет фона ячейки.
colspan=n - Данная ячейка охватывает n соседних столбцов.
rowspan=n - Данная ячейка охватывает n соседних строк.
valign=тип - Задается размещение содержимого данной ячейки:
top - вверу;
center - по центру;
bottom - внизу;
baseline - по базовой линии ячейки.
width=n - Установка ширины данной ячейки в пикселях или в процентах от ширины окна.
Что переписываем:
0) Прикидываем размерность таблицы, т.е. сколько в ней будет строк и столбцов.
1) Вставляем в поле эпиграфа теги таблицы <table> ... </table>.
2) Вставляем соответствующее количество тегов строк <tr> ... </tr> в нашу таблицу.
3) Вставляем теги ячеек <tb> ... </tb> в каждую строку таблицы, количество ячеек в строке должно соответствовать количеству столбцов таблицы.
В результате, получаем пустой макет таблицы.
пример: <table><tr><tb> ... </tb><tb> ... </tb></tr><tr><tb> ... </tb><tb> ... </tb></tr></table> - таблица 2х2
4)Теперь можно заполнять ячейки соответствующими объектами.
Далее я буду описывать частный случай заполнения таблицы, связанный с вопросом improved. Вы можете заполнять таблицу, исходя из собственных пожеланий.
0)Создадим макет таблицы 1х2, т.к. нам нужно разместить всего два объекта, выстроив их по горизонтали.
1)Вставим тег <img>, содержащий ссылку на нужную картинку, в первую ячейку.
2)Вставим текст во вторую ячейку.
3)Размер ячеек будет выбран автоматически, но лучше указать размер каждой ячейки вручную, что обеспечит единообразное отображение таблицы вне зависимости от расширения экрана.
4)Если не изменять размер ячеек вручную, текст в нашем таблице будет приклеен к правой стороне картинки. Решить эту проблему можно, указав в атрибутах таблицы размер свободного пространства между ячейками или между границами ячеек и объектами.
5)Чтобы добиться желаемого расположения текста в ячейке нужно вставить соответствующие атрибуты со значениями в эту ячейку.
6)Можно выбрать задний фон таблицы, отличный от настроек дневника. Для этого нужно вставить соответствующий атрибут в тег таблицы. В нашей таблице я выбрал черный фон, соответствующий основному цвету картинки, чем добился визуального объединения содержащихся в таблице объектов. Можно так и не делать...
7)Шрифт и цвет любой части текста также можно изменить по собственному усмотрению, используя тег <font>..изменяемый текст..</font>. В нашей таблице я выбрал цвет текста "silver", соответствующий цвету текста дневникаimproved, но отличный от цвета текста дневника данного сообщества. Весь текст в этом посте должен был быть голубым :( Так тоже можно не делать...
Теперь сравните код в эпиграфе:
вверх^
к полной версии
понравилось!
в evernote
Для improved
Ранее ты обратился за помошью:
"помоги с Тэгами... надо чтобы текст в эпиграфе был сбоку от картинки..и чтобы был не в 1 строчку а столбиком..."
Это делается так:
Чтобы добиться разрыва текста с переходом на следующую строчку, достаточно вставить в нужном месте тег <br>.
Чтобы отредактировать расположение текста и картинки в эпиграфе есть два способа.
Способ 1 (простой)
Достаточно добавить атрибут align, который задает расположение графического изображения относительно текста, в тег <img>, содержащий ссылку на вашу картинку, и присвоить атрибуту соответствующее значение:
abscenter - выравнивание центра изображения по центральной строки текста,
center - выравнивание центра изображения по нижней линии строки текста,
bottom - выравнивание базовой линии строки текста по нижнему краю изображения,
absbottom - выравнивание нижнего края изображения по нижней линии текста с учетом элементов символов, опускающихся ниже базовой линии,
left - расположение текста в левой части текстового потока,
right - расположение текста в правой части текстового потока.
Недостаток этого способа заключается в том, что при наличие более двух разнородных объектов предсказать их поведение сложно. Результат часто может сильно отличаться от ожиданий.
Способ 2
На мой взгляд, удобнее всего представить поле эпиграфа ввиде таблицы, ячейки которой можно заполнять по своему усмотрению, объединять, изменять их размер. Подогнать макет таблицы не так сложно, достаточно разобраться с несколькими тегами и их атрибутами. А результат будет соответствовать желаниям.
Понадобятся следующие теги:
<table> ... </table> - начальный и конечный теги таблицы
Возможные атрибуты:
background=URL - Задается фоновое изображение для таблицы.
bgcolor=цвет - Задается цвет фона ячейки.
cellpadding=n - Между границами ячейки и её содержимым поместить область свободного пространства шириной n пикселей.
cellspacing=n - Задается интервал между ячейками таблицы размером в n пикселей.
hspace=n - Задается размещение справа и слева от таблицы областей свободного пространства заданной ширины (в пикселях).
vspace=n - Задается размещение над таблицей и под ней областей свободного пространства
<tr> ... </tr> - начальный и конечный теги строки ячеек в таблице.
Возможные атрибуты:
align=тип - Задается способ выравнивания содержимого ячейки:
center - по центру;
right - по правому краю.
background=URL - Задается фоновое изображение ячейки.
bgcolor=цвет - Задается цвет фона ячейки.
bordercolor=цвет - Задается цвет обрамления ячейки.
valign=тип - Задается размещение содержимого данной ячейки:
center - по центру;
bottom - внизу;
baseline - по базовой линии ячейки.
<td> ... </td> - начальный и конечный теги данных в ячейке таблицы.
Возможные атрибуты:
align=тип - Задается способ выравнивания содержимого ячейки:
center - по центру;
right - по правому краю.
background=URL - Задается фоновое изображение ячейки.
bgcolor=цвет - Задается цвет фона ячейки.
colspan=n - Данная ячейка охватывает n соседних столбцов.
rowspan=n - Данная ячейка охватывает n соседних строк.
valign=тип - Задается размещение содержимого данной ячейки:
center - по центру;
bottom - внизу;
baseline - по базовой линии ячейки.
width=n - Установка ширины данной ячейки в пикселях или в процентах от ширины окна.
Что переписываем:
0) Прикидываем размерность таблицы, т.е. сколько в ней будет строк и столбцов.
1) Вставляем в поле эпиграфа теги таблицы <table> ... </table>.
2) Вставляем соответствующее количество тегов строк <tr> ... </tr> в нашу таблицу.
3) Вставляем теги ячеек <tb> ... </tb> в каждую строку таблицы, количество ячеек в строке должно соответствовать количеству столбцов таблицы.
В результате, получаем пустой макет таблицы.
пример: <table><tr><tb> ... </tb><tb> ... </tb></tr><tr><tb> ... </tb><tb> ... </tb></tr></table> - таблица 2х2
4)Теперь можно заполнять ячейки соответствующими объектами.
Далее я буду описывать частный случай заполнения таблицы, связанный с вопросом improved. Вы можете заполнять таблицу, исходя из собственных пожеланий.
0)Создадим макет таблицы 1х2, т.к. нам нужно разместить всего два объекта, выстроив их по горизонтали.
1)Вставим тег <img>, содержащий ссылку на нужную картинку, в первую ячейку.
2)Вставим текст во вторую ячейку.
3)Размер ячеек будет выбран автоматически, но лучше указать размер каждой ячейки вручную, что обеспечит единообразное отображение таблицы вне зависимости от расширения экрана.
4)Если не изменять размер ячеек вручную, текст в нашем таблице будет приклеен к правой стороне картинки. Решить эту проблему можно, указав в атрибутах таблицы размер свободного пространства между ячейками или между границами ячеек и объектами.
5)Чтобы добиться желаемого расположения текста в ячейке нужно вставить соответствующие атрибуты со значениями в эту ячейку.
6)Можно выбрать задний фон таблицы, отличный от настроек дневника. Для этого нужно вставить соответствующий атрибут в тег таблицы. В нашей таблице я выбрал черный фон, соответствующий основному цвету картинки, чем добился визуального объединения содержащихся в таблице объектов. Можно так и не делать...
7)Шрифт и цвет любой части текста также можно изменить по собственному усмотрению, используя тег <font>..изменяемый текст..</font>. В нашей таблице я выбрал цвет текста "silver", соответствующий цвету текста дневникаimproved, но отличный от цвета текста дневника данного сообщества. Весь текст в этом посте должен был быть голубым :( Так тоже можно не делать...
Теперь сравните код в эпиграфе:
Вы сейчас не можете прокомментировать это сообщение.
Дневник Использование html-таблиц для размещения материалов в эпиграфе | Критика_дизайнов - Дневник Критика_дизайнов |
Лента друзей Критика_дизайнов
/ Полная версия
Добавить в друзья
Страницы:
раньше»