Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Разметка страниц, в % 
:(
    Опции темы
Urod
Дата 13.5.2005, 20:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



Вот разметка моей страницы (только тут вместо букв в коде фигня какая-то, но читабельная):
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2">Здесь титульная картинка-логотип (элемент 1) </td>
  </tr>
  <tr>
    <td width="70%" bgcolor="#7C93B3">Здесь меню (элемент 2) </td>
    <td width="30%" rowspan="3" bgcolor="#7C93B3"><table width="90%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>Таблица для картинок (элемент 8) </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
      Поле для таблицы для картинок (элемент 7) </td>
  </tr>
  <tr>
    <td width="70%"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>Контент (элемент 3) </td>
      </tr>
    </table>      
      <table width="90%"  border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td width="60%">Вся таблица (элемент 4) </td>
          <td width="20%">&nbsp;</td>
          <td width="20%">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>      
      <p>Здесь небольшой текстик-приписка (элемент 5) </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td>Здесь: Дизайн от... (элемент 6) </td>
  </tr>
</table>

</body>
</html>

Вопрос: элемент 3 имеет смысл выносить в отдельную ячейку или следует его просто вставить перед таблице (элемент 4)?
Какие будут замечания?
PM MAIL   Вверх
kometa_triatlon
Дата 13.5.2005, 22:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 384
Регистрация: 7.1.2005
Где: Киев

Репутация: нет
Всего: 6



Так у тебя элемент 3 и так в отдельной ячейке.
А вообще удобней наверное в ячейке, раз ты уж все на таблице сверстал...



--------------------
Всё очень просто: сказки обман,
Солнечный остров скрылся в туман,
Замков воздушных не носит земля,
Кто-то ошибся, ты или я.

--------------
Программирование - самое большое удовольствие, которое вы можете получить, будучи одетым.
PM MAIL ICQ   Вверх
Urod
Дата 14.5.2005, 08:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



Эээ, т.е. как грамотнее: элемент 3 выносить в отдельнут ячейку (стоящую над элементом 4) или контент (элемент 3) вставить в поле, где расположен элемент 4?
Ну что, я дальше верстаю? Тут все Ок? smile

Это сообщение отредактировал(а) Urod - 14.5.2005, 08:56
PM MAIL   Вверх
dm9
Дата 14.5.2005, 09:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дмитрий Копытин
****


Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137



Насчёт элемента 3 - это смотря что там будет. Там же ширина таблиц по задумке различается. Элемент 3 в таблице шириной 100%, а 4 - в таблице 90%.

Так что смотри сама smile

Сделаю такое глобальное замечание.

Не используй вложенных таблиц там, где это не нужно.
Лучше помещай всё сразу в ячейку таблицы, без дополнительных вложенных таблиц.
Ну или если нужно сделать разные отступы от краёв (100% и 90% у тебя в примере), используй дивы. Я про них уже рассказывал вот здесь:
http://forum.vingrad.ru/index.php?showtopi...ndpost&p=406438

То есть ставишь не громоздкую конструкцию <table тут куча параметров><tr><td></td></tr></table>, а просто <div width="90%"></div>, и этого хватит вполне.


Потом ещё нужно будет добавить глобальной табличке table-layout: fixed, чтобы быстрее отображалось всё это на медленных каналах. Сейчас времени описывать это нет, но можно добавить и потом будет.

PM MAIL ICQ   Вверх
Urod
Дата 14.5.2005, 10:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



Ок! Спасибо, буду пока разбираться...
PM MAIL   Вверх
Urod
Дата 14.5.2005, 13:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



О! Я сделала так. Элемнет 4 не стала дивами обрамлять, т.к. у этой таблички есть бордер и цвет бордера.
Вот:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table style="width: 100%; table-layout: fixed;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2">????? ????????? ????????-??????? (??????? 1) </td>
  </tr>
  <tr>
    <td width="70%" bgcolor="#7C93B3">????? ???? (??????? 2) </td>
    <td width="30%" rowspan="3" bgcolor="#7C93B3"><table width="90%"  border="0" cellspacing="0" cellpadding="0">
    </table>
      <div align="left">тут картинка (??????? 8)</div>
      <div align="right">тут картинка (??????? 8)</div>
      <div align="center">тут картинка (??????? 8)</div>
      ???? ??? ??????? ??? ???????? (??????? 7) </td>
  </tr>
  <tr>
    <td width="70%">
    <div width="100%">
      <p>??????? (??????? 3)</p>
    </div>      
      <div align="center">
      <table width="90%"  bordercolor="#7C93B3" border="2" cellspacing="0" cellpadding="0">
        <tr>
          <td width="60%">??? ??????? (??????? 4) </td>
          <td width="20%">&nbsp;</td>
          <td width="20%">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>      
      <p>????? ????????? ???????-???????? (??????? 5) </p>
      </div>
      </td> 
  </tr>
  <tr>
    <td>?????: ?????? ??... (??????? 6) </td>
  </tr>
</table>

</body>
</html>

Ну как? Есть замечания?
Если нет, я двигаюсь дальше smile
PM MAIL   Вверх
dm9
Дата 14.5.2005, 14:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дмитрий Копытин
****


Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137



Замени
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
на
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Это кодировка...

Цитата(Urod @ 14.5.2005, 14:05)
<table width="90%"  border="0" cellspacing="0" cellpadding="0">
    </table>

Это что такое? smile

Цитата(Urod @ 14.5.2005, 14:05)
      <div align="left">тут картинка (??????? 8)</div>
      <div align="right">тут картинка (??????? 8)</div>
      <div align="center">тут картинка (??????? 8)</div>

Тебе разное выравнивание нужно? Если да, то да. Если нет, просто помести эти картинки одна за одной, между ними <br />.

Цитата(Urod @ 14.5.2005, 14:05)
<div width="100%">
      <p>??????? (??????? 3)</p>
    </div> 

Не нужно.
Хватит <p width="100%">...</p>, p - это уже блочный элемент.
(Про блочные элементы читать тут: http://forum.vingrad.ru/index.php?showtopi...ndpost&p=406438 ;) )


Остальное покатит smile

Это сообщение отредактировал(а) dm9 - 14.5.2005, 14:26
PM MAIL ICQ   Вверх
Urod
Дата 14.5.2005, 15:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



А вот эти вот меты нужны? Вобще, это что такое-то? smile
Код

<meta http-equiv="Content-Language" content="hr">
<meta http-equiv="content-type" content="text/html; charset=windows-1251"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

PM MAIL   Вверх
Urod
Дата 14.5.2005, 15:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



Цитата(dm9 @ 14.5.2005, 14:25)
Цитата(Urod @ 14.5.2005, )
<table width="90%"  border="0" cellspacing="0" cellpadding="0">
    </table>

Это что такое? smile>

Так остатки эксперимента smile Убрала! smile

Цитата(dm9 @ 14.5.2005, 14:25)
Тебе разное выравнивание нужно? Если да, то да. Если нет, просто помести эти картинки одна за одной, между ними <br />.

Угу, надо.

Цитата(dm9 @ 14.5.2005, 14:25)
Цитата(Urod @ 14.5.2005, )
<div width="100%">
      <p>??????? (??????? 3)</p>
    </div> 

Не нужно.


Ок! Удалила smile
PM MAIL   Вверх
dm9
Дата 14.5.2005, 16:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дмитрий Копытин
****


Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137



Цитата(Urod @ 14.5.2005, 16:17)
А вот эти вот меты нужны? Вобще, это что такое-то?


Цитата(Urod @ 14.5.2005, 16:17)
<meta http-equiv="Content-Language" content="hr">

Язык контента? Не нужно, не используется.

Цитата(Urod @ 14.5.2005, 16:17)
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

Это оставь, это единственный тэг meta, который стоит пока оставить.

Цитата(Urod @ 14.5.2005, 16:17)
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

Не нужно.

Цитата(Urod @ 14.5.2005, 16:17)
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

Это программа, в которой ты всё делала. FrontPage smile Не нужно, можно удалять.

Цитата(Urod @ 14.5.2005, 16:17)
<meta name="ProgId" content="FrontPage.Editor.Document">

Не нужно.

PM MAIL ICQ   Вверх
Urod
Дата 14.5.2005, 16:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



Цитата(dm9 @ 14.5.2005, 16:07)
Цитата(Urod @ 14.5.2005, )
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

Это программа, в которой ты всё делала. FrontPage smile Не нужно, можно удалять.

Аа, ну у меня были такие предположения. Особенно интересно это смотрится, если знать, что я в Дриме верстаю smile smile
Вообще, это изначально был шаблон, который в итоге изменился значительно.

PM MAIL   Вверх
Urod
Дата 15.5.2005, 14:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



1 Прежде, чем картинки вставлять, их надо по размеру сделать не более 800 на 600?
2 Куда следует прописывать все слова, по которым будет эта страничка искаться в поисковиках?

Это сообщение отредактировал(а) Urod - 15.5.2005, 14:34
PM MAIL   Вверх
Urod
Дата 15.5.2005, 15:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1



Вот код:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><HEAD><META HTTP-EQUIV="Content-type" CONTENT="text/html"></HEAD>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body>
<table style="width: 100%; table-layout: fixed;" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td colspan="2">????? ????????? ????????-??????? (??????? 1) </td>
  </tr>
  <tr>
    <td width="70%" bgcolor="#7C93B3">????? ???? (??????? 2) </td>
    <td width="30%" rowspan="3" bgcolor="#7C93B3">
      <div align="left">??? ???????? (??????? 8)</div>
      <div align="right">??? ???????? (??????? 8)</div>
      <div align="center">??? ???????? (??????? 8)</div>
      ???? ??? ??????? ??? ???????? (??????? 7) </td>
  </tr>
  <tr>
    <td width="70%">
      <p width="100%">??????? (??????? 3)</p>
      <div align="center">
      <table width="90%"  bordercolor="#7C93B3" border="2" cellspacing="0" cellpadding="0">
        <tr>
          <td width="60%">??? ??????? (??????? 4) </td>
          <td width="20%">&nbsp;</td>
          <td width="20%">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="22">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>      
      <p>????? ????????? ???????-???????? (??????? 5) </p>
      </div>
      </td> 
  </tr>
  <tr>
    <td>?????: ?????? ??... (??????? 6) </td>
  
  </tr>
</table>

</body>
</html>

Я не знаю, как мне вставить по бокам глобальной таблицы по каждому краю на всю высоту таблицы по одному такому столбцу:
слева:
Код

<td width="1%" height="100%" background="../Templates/Doma_gory/pozadina.gif"><img border="0" src="../Templates/Doma_gory/pozadina.gif" width="10" height="10">

и справа:
Код

<td width="1%" background="../Templates/Doma_gory/pozadina1.gif"><img border="0" src="../Templates/Doma_gory/pozadina1.gif" ></td>


Что-то я их куда уже не ставляла, а они все не на месте smile
Добавлено @ 15:26
Только меня смущает, что при просмотре странички, как-то не похоже, что соотношений ширины столбцов 70% на 30%. Они как-то равны визуально. Так и должно быть? smile

Это сообщение отредактировал(а) Urod - 15.5.2005, 15:17
PM MAIL   Вверх
dm9
Дата 15.5.2005, 15:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дмитрий Копытин
****


Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137



Цитата(Urod @ 15.5.2005, 15:32)
1 Прежде, чем картинки вставлять, их надо по размеру сделать не более 800 на 600?


Картинки - отдельная тема. 800х600 - нафига тебе такие громадные? smile
Картинки делай какие надо. Будут очень большие, будем резать на куски и слеплять.
Только надо придумать что-то с заголовком. Ты решила, как он будет выглядеть? Я там примеры давал. У тебя там слишком много графики, лишнее это.

Цитата(Urod @ 15.5.2005, 15:32)
2 Куда следует прописывать все слова, по которым будет эта страничка искаться в поисковиках?


О поисковиках читай статью, написанную Красным Драконом smile Очень хорошая статья для начинающих.
http://forum.vingrad.ru/index.php?showtopic=39527

Добавлено @ 16:01
Блин, что-то я сам торможу насчёт этих 30-70%. Сейчас попробую разобраться.
PM MAIL ICQ   Вверх
dm9
Дата 15.5.2005, 16:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дмитрий Копытин
****


Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137



Цитата(Urod @ 15.5.2005, 16:16)
<HEAD><META HTTP-EQUIV="Content-type" CONTENT="text/html"></HEAD>


Это удали... Какой-то редактор, похоже, добавил.

Насчёт 30% и 70% разобрался. Дело в том, что table-layout: fixed заставляет документ рассчитывать ширину столбцов по первому tr (что, кстати, позволяет отображать таблицу сразу, не дожидаясь полной загрузки, убирается главный недостаток табличной вёрстки). А первый tr у тебя только с одной ячейкой, нужной информации не поступает.

Решения два.
1. Создать таблицу с хедером отдельно.
2. (Так грамотнее, особенно если ты будешь потом ещё ячейки в 1% по бокам добавлять) После тэга <table> (сразу) поставить такие строки:
Код

<colgroup>
    <col width="70%">
    <col width="30%">
</colgroup>

Таким образом ты определяешь щирину ячеек для всех столбцов (columns, cols).
В этом случае удали всю информацию о ширине столбцов из других мест, из td. Иначе это будет избыточная информация, которая никому не нужна.


Цитата(Urod @ 15.5.2005, 16:16)
Я не знаю, как мне вставить по бокам глобальной таблицы по каждому краю на всю высоту таблицы по одному такому столбцу:


Ну, добавь по ячейке ещё. Измени colgroup:
Код

<colgroup>
    <col width="1%">
    <col width="29%">
    <col width="69%">
    <col width="1%">
</colgroup>

После этого добавляешь в начало и в конец первого tr по ячейке <td rowspan="..."><img ... /></td>
И не забудь поставить нужные rowspan-ы.
Я так понимаю, ты знаешь, что такое rowspan, как он работает?

Это сообщение отредактировал(а) dm9 - 15.5.2005, 16:17
PM MAIL ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1137 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.