Skip to content
La2Base
Home
DownloadsWikiForumFAQ
Search
ruen
Sign up Login
HomeFilesWikiLogin
  • Home
  • Downloads
  • Wiki
  • FAQ
  • Contact Us
  • About
  • Rules
  • Privacy
  • Terms of Service

© 2026 la2base.com · All rights reserved

ruen
Forum/Работа с Графикой/[help] Вопрос по верстке
Search

[help] Вопрос по верстке

16 replies482 viewsCurrently viewing: 1
agnitium
agnitium

User

Ветеран

Posts: 1298

На форуме с: 03/07/2008

Репутация: +351

Рейтинг: 0

· 05/14/2009, 04:15 PM

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

— Дизайны на заказ 1236548

0
Андрей
Андрей

User

Ветеран

Posts: 751

На форуме с: 11/30/2008

Репутация: +119

Рейтинг: 0

· 05/14/2009, 06:14 PM

Может я чего-то не понял,но думаю тег <pre>...</pre> подойдет.(Текст будет написан также как и в редакторе - строчки также,переносы и т.д.)

— Newbie&#33;

0
Руслан
Руслан

Moderator

Ветеран

Posts: 1201

На форуме с: 12/14/2007

Репутация: +775

Рейтинг: 0

· 05/14/2009, 06:28 PM

Совсем не понял вопроса, но по моему не к картинке лучше прописывать ссылки, а к ссылке применить стиль, в бэкграунде которого будет картинка и в таком случае размещай текст на картинке так как сам этого захочешь, а вообще способов тьма, ну если я вообще говорю о том о чем ты спросил)))

На Форуме я тоже Radar!
Я везде Radar!

0
agnitium
agnitium

User

Ветеран

Posts: 1298

На форуме с: 03/07/2008

Репутация: +351

Рейтинг: 0

· 05/14/2009, 06:34 PM

Меня наверно не поняли
Допустим я разрезал в фотошопе картинку.
Вот кусочек кода, что выдает фотошоп при сохранении в веб

Код
<tr>
        <td rowspan="6">
            <img src="skins/proba/images/334_07.gif" width="62" height="243" alt=""></td>
        <td>
            <img src="skins/proba/images/334_08.gif" width="156" height="60" alt=""></td>
        <td rowspan="9">
            <img src="skins/proba/images/334_09.gif" width="46" height="815" alt=""></td>
        <td colspan="2" rowspan="8">
            <img src="skins/proba/images/334_10.gif" width="554" height="790" alt=""></td>

        <td colspan="2" rowspan="7">
            <img src="skins/proba/images/334_11.gif" width="206" height="501" alt=""></td>
        <td>
            <img src="skins/proba/images/spacer.gif" width="1" height="60" alt=""></td>
    </tr>


Код
<td colspan="2" rowspan="8">
            <img src="skins/proba/images/334_10.gif" width="554" height="790" alt=""></td>
- вот это и есть тот листочек на котором и пишется обычно текст, вот мне надо узнать, каким образом переписать это дело, что бы корректно отображался текст именно на этом листочке не корежив диз.

— Дизайны на заказ 1236548

0
Руслан
Руслан

Moderator

Ветеран

Posts: 1201

На форуме с: 12/14/2007

Репутация: +775

Рейтинг: 0

· 05/14/2009, 06:38 PM

Код
<td colspan="2" rowspan="8" style="background: url('skins/proba/images/334_10.gif') no-repeat; width: 554px; height: 790px;">ТЕКСТ</td>


ну а я имел ввиду это.

На Форуме я тоже Radar!
Я везде Radar!

0
agnitium
agnitium

User

Ветеран

Posts: 1298

На форуме с: 03/07/2008

Репутация: +351

Рейтинг: 0

· 05/14/2009, 06:53 PM

хорошо с этим я разобрался должно было получится вот это

Код
<td colspan="2" rowspan="8" style="background: url('skins/proba/images/334_10.gif') no-repeat; width: 554px; height: 790px;"><?php
if (file_exists('module/'.$id . '.php'))
include('module/'.$id . '.php');
else
{
include('module/eror.php');
}
?></td>

Но теперь другой вопрос, как сделать что бы текст не пытался растягиваться а получился "скорл" [attachment=3342:__________.png]

— Дизайны на заказ 1236548

0
Руслан
Руслан

Moderator

Ветеран

Posts: 1201

На форуме с: 12/14/2007

Репутация: +775

Рейтинг: 0

· 05/14/2009, 07:05 PM

Думаю все с нуля объяснить в топике займет достаточно много как времени так и места.
Так что просто дам ссылочки которые мне в свое время очень сильно помогали.

Именно по твоему вопросу:
_http://www.4webmaster.ru/articles/85/

И вот несколько просто полезно иметь под рукой:
_http://www.xiper.net/html-and-css-tricks/verstka-form/blochnaya-verstka-form.html
_http://softwaremaniacs.org/blog/category/web/primer/
Если что пиши (только не сегодня smile3.gif ), чем смогу помогу.

На Форуме я тоже Radar!
Я везде Radar!

0
agnitium
agnitium

User

Ветеран

Posts: 1298

На форуме с: 03/07/2008

Репутация: +351

Рейтинг: 0

· 05/27/2009, 02:39 PM

Добрый вечер.
Допустим имеется вот такой дизайн.




Как правильно его разрезать, что бы он растягивался и еще, как сделать, что бы диз растягивался ( какие махинации для этого нужны) :)

Верстка таблицами

— Дизайны на заказ 1236548

0
Руслан
Руслан

Moderator

Ветеран

Posts: 1201

На форуме с: 12/14/2007

Репутация: +775

Рейтинг: 0

· 05/27/2009, 09:55 PM

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



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

  • 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.

На Форуме я тоже Radar!
Я везде Radar!

0
sanja
sanja

User

Бывалый

Posts: 197

На форуме с: 08/26/2008

Репутация: +280

Рейтинг: 0

· 05/27/2009, 10:03 PM

использую такой же метод верстки

0
KKKrevedko
KKKrevedko

User

Бывалый

Posts: 206

На форуме с: 07/11/2008

Репутация: +346

Рейтинг: 0

· 05/30/2009, 10:25 AM

radar,жаль опередил)
Вообще хватило бы 3 ячеек.Зачем девять?

http://la2base.ru/client/dop_client/1879-djevid-blejjn-dobralsja-i-sjuda.html Девид блейн добрался и сюда.(c)KKKrevedko

— Client Developer

0
Руслан
Руслан

Moderator

Ветеран

Posts: 1201

На форуме с: 12/14/2007

Репутация: +775

Рейтинг: 0

· 05/30/2009, 01:43 PM

KKKrevedko: radar,жаль опередил)
Вообще хватило бы 3 ячеек.Зачем девять?


9-ю ячейками я показал что можно не только по горизонтали тянуть, но и по вертикали.

На Форуме я тоже Radar!
Я везде Radar!

0
BestMan
BestMan

User

Бывалый

Posts: 102

На форуме с: 09/17/2008

Репутация: +608

Рейтинг: 0

· 06/02/2009, 06:28 PM

Создай тогда лучше уже отдельный файл стиля.

0
Руслан
Руслан

Moderator

Ветеран

Posts: 1201

На форуме с: 12/14/2007

Репутация: +775

Рейтинг: 0

· 06/02/2009, 11:16 PM

BestMan: Создай тогда лучше уже отдельный файл стиля.


Читай внимательно или не пиши вообще:
Цитата
Далее мы либо с помощью css либо с помощью тега style в HTML вставляем эти картинки в таблицу,...

На Форуме я тоже Radar!
Я везде Radar!

0
KKKrevedko
KKKrevedko

User

Бывалый

Posts: 206

На форуме с: 07/11/2008

Репутация: +346

Рейтинг: 0

· 06/03/2009, 02:39 PM

Кстати

Цитата
Но теперь другой вопрос, как сделать что бы текст не пытался растягиваться а получился "скорл"

Для этого надо просто применить к ячейке с текстом стиль overflow
Почитать об этом можно тут: http://www.htmlbook.ru/css/overflow.html

http://la2base.ru/client/dop_client/1879-djevid-blejjn-dobralsja-i-sjuda.html Девид блейн добрался и сюда.(c)KKKrevedko

— Client Developer

0
agnitium
agnitium

User

Ветеран

Posts: 1298

На форуме с: 03/07/2008

Репутация: +351

Рейтинг: 0

· 06/03/2009, 03:34 PM

KKKrevedko: Кстати

Для этого надо просто применить к ячейке с текстом стиль overflow
Почитать об этом можно тут: http://www.htmlbook.ru/css/overflow.html

со скорлом давно разобрался уже)

— Дизайны на заказ 1236548

0
Topic is closed for replies