Ответов

[agnitium]

Допустим я разрезал в фотошопе картинку на кусочки,прикрепил к нужным картинкам ссылки, а теперь встала задача сделать так, что бы на листочке ( на котором обычно пишется текст) отображалось, то что мне надо т.е. текст, Вопрос таков: какая должна быть запись, да бы текст отображался именно на этом листке и не вылазил за пределы листка.

[Radar]

Ну поехали...



Итак порежем макет (я беру во внимание только главный блок, который мы и будем растягивать) следующим образом:

• 1, 3, 6 и 8 элементы разрезать лучше одинаковыми равносторонними квадратами (т.к. проще верстать будет), но из-за того что ввержу присутствует градиент надо быть повнимательнее с этим делом.
• Далее отрежем 2, 4, 5 и 7 элементы тоже равными долями например квадратами 10 х 10px.
• Ну и наконец элемент обозначенный на рисунке номером 9 - тут все зависит от того из чего он состоит, в данном случае это тупо белый цвет (при условии того что в вырезанные элементы 1,2,3 уместился весь Градиент), следовательно тут нам резать ничего ненадо мы просто сделаем заливку Белым цветом посредством HTML

Все картинки порезанные выше я буду обозначать по соответствующим номерам (1.jpg, 2.jpg, ..., 8.jpg. А фон элемента 9 в формате RRGGBB выглядит так - F1EFFO)

Ну вроде бы разрезали.
Теперь приступим к сбору элементов в одну таблицу (т.к. речь идет о табличной верстке) и постараемся перенести то что мы видим на картинке в HTML:

Начнем с HTML и впишем туда для начала просто таблицу, состоящую из 3-х ячеек и 3-х столбцов.

HTML

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Она у нас будет основой - с ней мы и будем работать.

Далее мы либо с помощью css либо с помощью тега style в HTML вставляем эти картинки в таблицу, при этом мы обязательно указываем что элементы 1,3,6 и 8 повторяться не должны с помощью параметра no-repeat, а вот элементы 2, 4, 5 и 7 делаем повторяющимися по следующей схеме - 2 и 7 по оси Х, а 4 и 5 по оси У, то есть repeat-x и repeat-y соответственно.
а элемент 9 мы воспроизведем цветом фона нужной ячейки таблицы.

Ну и немного поманипулировав получаем такой код:

HTML

<table align="left" valign="top" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="64px">
<td style="background: url('img/1.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
<td style="background: url('img/2.jpg') repeat-x; height:64px;">&nbsp;</td>
<td style="background: url('img/3.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
</tr>
<tr>
<td style="background: url('img/4.jpg') repeat-y; width: 64px;">&nbsp;</td>
<td style="background: #F1EFF0;">Сюда мы вставляем нужный текст и смотрим на разных разрешениях экрана.</td>
<td style="background: url('img/5.jpg') repeat-y; width: 64px;">&nbsp;</td>
</tr>
<tr height="64px">
<td style="background: url('img/6.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
<td style="background: url('img/7.jpg') repeat-x; height:64px;">&nbsp;</td>
<td style="background: url('img/8.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
</tr>
</table>

Уаля.
Теперь у нас таблица растягивается как по вертикали, так и по горизонтали, не теряя при это форму.

Ну если вопросы будут - милости прошу - описываем ситуацию, на выходе получаем мини урок.
Но весь ХТМЛ разжевывать каждому не собираюсь, так что прошу обращаться знающих хотя бы минимум в ХТМЛ.

© Radar.