«Камчатский форум» logo

Здравствуйте, гость ( Вход | Регистрация )

5 страниц   1 2 3 > »    ( К первому непрочитанному сообщению )
Ответить · Открыть тему
> Верстка, Как лучше? :)
Vetinary
02.09.2005, 18:46
Сообщение #1


Заслуженный участник
*****

Награды: 3
Группа: VIP
Сообщений: 818
Регистрация: 18.09.2004

Репутация: 20 [ - / + ]


Продолжение (начало) темы о верстке....

Несколько поправок, являющихся моим выработанным ИМХО:
1. относительно тега center: стилями CSS невозможно описать позиционирование по центру для элемента, скажем, IMG - таким образом получется, что без данного тега не обойтись, если, скажем, нужно выровнять один рисунок по центру идущий, предположим, после текста, выровненного по левому краю.
2. кавычки для ВСЕХ параметров эелементов: ранее придерживался точно такого же мнения. поменял своё мнение после того, как один профессиональный верстальщик убрав ТОЛЬКО КАВЫЧКИ у некоторых HTML-элементов, где это было возможно, уменьшил "вес" HTML-шаблона на 7 Кб... шаблон был большой. может это и экономия "на спичках", но когда много разных шаблонов выстраиваются в конечном итоге в одну страницу - количество кавычек почти пропорционально умнажается. т.е. экономия получается очень приличная на траффике и скорости загрузки страницы.
3. в качестве рекомендаций к правилам я б добавил, необходимость много раз подумать перед тем, как влепить куда-либо ещё одну вложенную талицу - а может это можно реализовать DIV'ом? да и вообще изначально рассмотреть возможность бестабличной вёрстки страниц, потому как опять же, загрузка происходит не в пример быстрее, из-за того, что таблица отображается лишь после полной прогрузки, а дивы - во время загрузки...
вот такие дела... извините, если помешал...


--------------------
"Коммерчески успешно принародно подыхать,
Об камни разбивать фотогеничное лицо,
Просить по-человечески, заглядывать в глаза
Добрым прохожим..."
© Янка, "Продано"

Mac OS X Hints — секреты Mac OS X
Офлайн · Карточка · Приват
^
artyom_b
02.09.2005, 20:57
Сообщение #2



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Цитата

1. относительно тега center: стилями CSS невозможно описать позиционирование по центру для элемента, скажем, IMG - таким образом получется, что без данного тега не обойтись, если, скажем, нужно выровнять один рисунок по центру идущий, предположим, после текста, выровненного по левому краю.


Рисунок можно запихнуть в <DIV> smile.gif. Но согласен, без тега <center>
не обойтись, так как style="text-align: center;" не все браузеры
воспринимают одинаково. Еще заметил интересный эффект
Opera неадекватно воспринимает ширину ячеек таблицы если
она задана в CSS, а не в атрибутах тегов <TD>...
Цитата

2. кавычки для ВСЕХ параметров эелементов: ранее придерживался точно такого же мнения. поменял своё мнение после того, как один профессиональный верстальщик убрав ТОЛЬКО КАВЫЧКИ у некоторых HTML-элементов, где это было возможно, уменьшил "вес" HTML-шаблона на 7 Кб... шаблон был большой. может это и экономия "на спичках", но когда много разных шаблонов выстраиваются в конечном итоге в одну страницу - количество кавычек почти пропорционально умнажается. т.е. экономия получается очень приличная на траффике и скорости загрузки страницы.

C Михаилом Дубаковым я согласен, но на большинстве шаблонов экономия
незначительное, зато есть некоторое единообразие smile.gif
Цитата

3. в качестве рекомендаций к правилам я б добавил, необходимость много раз подумать перед тем, как влепить куда-либо ещё одну вложенную талицу - а может это можно реализовать DIV'ом? да и вообще изначально рассмотреть возможность бестабличной вёрстки страниц, потому как опять же, загрузка происходит не в пример быстрее, из-за того, что таблица отображается лишь после полной прогрузки, а дивы - во время загрузки...

Блоки не для всех страниц пока применимы, к сожалению...
Мне кажется разумный компромисс именно тот подход, который предлагается
Михаилом - смешанная верстка.
Цитата

вот такие дела... извините, если помешал...

наооборот, ОЧЕНЬ рад, что ты принимаешь участие в обсуждении.


--------------------
Офлайн · Карточка · Приват
^
droid
03.09.2005, 21:29
Сообщение #3


Участник
**

Группа: ?????????
Сообщений: 126
Регистрация: 27.06.2005

Репутация: 0 [ - / + ]


Цитата
кавычки для ВСЕХ параметров эелементов: ранее придерживался точно такого же мнения

Не буду утверждать, но по-моему использование кавычек - стандарт html4.
А вес страницы можно уменьшить если убрать все переводы строк и табуляции (двойные-тройные и т.д. пробелы) перед закачкой страницы на сайт (дизайн тырить неудобно будет). smile.gif

Цитата
рассмотреть возможность бестабличной вёрстки страниц, потому как опять же, загрузка происходит не в пример быстрее

Пару раз сам пытался делать вообще без таблиц, только с div. Тестировал в трех браузерах (IE, Mozilla, Opera). Но гарантии того, что все будет отображаться как задумано, не было. Например, если в Opera все нормально, то в IE какой-нибудь div норовил съехать на 1-2 пиксела. Исправишь для IE - съедет в Opera. Неделю промучился wacko.gif - сделал в таблице.
Короче, нужен разумный баланс в использовании вложенных таблиц и div. Причем выбор делать все-таки в пользу div.
Офлайн · Карточка · Приват
^
Vetinary
03.09.2005, 22:22
Сообщение #4


Заслуженный участник
*****

Награды: 3
Группа: VIP
Сообщений: 818
Регистрация: 18.09.2004

Репутация: 20 [ - / + ]


Цитата
Не буду утверждать, но по-моему использование кавычек - стандарт html4.


когда появятся браузера полностью соблюдающие рекомендации W3C - тогда можно будет заморачиваться стандартами. на данный же момент можно сказать, что есть крыловские "лебедь, рак и щука", которые пытаются утянуть одеяло на себя, так что о стандартах говорить не приходится...

Цитата
А вес страницы можно уменьшить если убрать все переводы строк и табуляции (двойные-тройные и т.д. пробелы) перед закачкой страницы на сайт (дизайн тырить неудобно будет).


обфускация - это, конечно, хорошо. но разговор был не об этом, а именно о экономии веса вычетом кавычек. если прибавить к этом обфускацию, тогда вообще кошерно будет... smile.gif

Цитата
Пару раз сам пытался делать вообще без таблиц, только с div. Тестировал в трех браузерах (IE, Mozilla, Opera). Но гарантии того, что все будет отображаться как задумано, не было. Например, если в Opera все нормально, то в IE какой-нибудь div норовил съехать на 1-2 пиксела. Исправишь для IE - съедет в Opera. Неделю промучился  - сделал в таблице.


верстальщик, о котором я говорил, сверстал 1store.ru по-моему полностью на слоях. (за вычетом некоторых элементов, которые не от него зависели... открывается сие чудо теперь "мухой" в любом браузере и никуда не уезжает... вопрос лишь в навыках... smile.gif


--------------------
"Коммерчески успешно принародно подыхать,
Об камни разбивать фотогеничное лицо,
Просить по-человечески, заглядывать в глаза
Добрым прохожим..."
© Янка, "Продано"

Mac OS X Hints — секреты Mac OS X
Офлайн · Карточка · Приват
^
artyom_b
03.09.2005, 22:33
Сообщение #5



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Таблицы там все таки есть smile.gif хотя структура страницы
полностью на div и код получился очень компактный.

Я только не понял зачем там присутствует конструкция
вида <div class="wintit wt2"><p class=r4><p class=r3><p class=r2><p class=r1></div> smile.gif

Хотя заглядывать в чужой код неправильно, ошибки надо
искать у себя smile.gif


--------------------
Офлайн · Карточка · Приват
^
Vetinary
04.09.2005, 7:15
Сообщение #6


Заслуженный участник
*****

Награды: 3
Группа: VIP
Сообщений: 818
Регистрация: 18.09.2004

Репутация: 20 [ - / + ]


Цитата(artyom_b @ 04/09/2005, 0:33)
Я только не понял зачем там присутствует конструкция
вида <div class="wintit wt2"><p class=r4><p class=r3><p class=r2><p class=r1></div> smile.gif

а это одна фишечка придуманная мной и реализованная тем верстальщиком... smile.gif ну ОООчень мудрая фишечка... smile.gif)
просто отключи картики и посмотри на скруглённые края - ничего не изменится - края останётся скруглёнными без картинок в любом браузере... или посмотри на добавление ресурса в http://catalog.ibox.ru/addnewres/ - где вводятся описания ресурса и т.д. очень удачно, на мой взгляд, реализованыые поля... smile.gif


--------------------
"Коммерчески успешно принародно подыхать,
Об камни разбивать фотогеничное лицо,
Просить по-человечески, заглядывать в глаза
Добрым прохожим..."
© Янка, "Продано"

Mac OS X Hints — секреты Mac OS X
Офлайн · Карточка · Приват
^
artyom_b
04.09.2005, 22:41
Сообщение #7



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Да, прикольно, изменение margin на 1px.
Вопрос в том, насколько это актуально,
когда нет картинок? smile.gif

CSS можно значительно сократить... smile.gif

Может вынесем эту тему в открытую часть,
кроме самого начала, и другие смогут принять
участие в обсуждении..?


--------------------
Офлайн · Карточка · Приват
^
Vetinary
05.09.2005, 1:53
Сообщение #8


Заслуженный участник
*****

Награды: 3
Группа: VIP
Сообщений: 818
Регистрация: 18.09.2004

Репутация: 20 [ - / + ]


Цитата
Вопрос в том, насколько это актуально,
когда нет картинок?


я часто смотрю страницы без картинок... smile.gif несмотря на безлимитный траффик и некислую скорость, всё-таки действенно увеличивает скорость загрузки... smile.gif

Цитата
CSS можно значительно сократить...


можно... smile.gif но всё-таки нтересная вещь... после того, как я данного верстальщика толкнул в данном направлении, он стал очень интересные узоры строить без картинок... просто посредством JS создавал слои и позиционировал их на странице... своеобразный пиксельный арт без картинок... smile.gif

Цитата
Может вынесем эту тему в открытую часть,
кроме самого начала, и другие смогут принять
участие в обсуждении..?


я не против... только, что тут обсуждать? smile.gif


--------------------
"Коммерчески успешно принародно подыхать,
Об камни разбивать фотогеничное лицо,
Просить по-человечески, заглядывать в глаза
Добрым прохожим..."
© Янка, "Продано"

Mac OS X Hints — секреты Mac OS X
Офлайн · Карточка · Приват
^
artyom_b
04.09.2005, 22:41
Сообщение #9



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Открытое продолжение закрытой темы smile.gif
Приглашаю всех потенциально заинтересованных
принять участие в обсуждении.

Итак...


--------------------
Офлайн · Карточка · Приват
^
artyom_b
04.09.2005, 22:41
Сообщение #10



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


не использовать теги <b>,<center>,
<font> и пр.;
2. все теги и их параметры писать
с маленькой буквы;
3. все параметры тегов заключать в кавычки;
4. все параметры влиящие на вид, положение и пр.
максимально заменять правилами в CSS;
5. разбивать на абзацы тегами <p></p>;
не используя конструкции вида <br>&nbsp;<br>
и множественные неразрывные пробелы;
6. Кавычки в русском варианте &laquo;/&raquo; ,
длинное тире - &mdash;
в английском тире также, кавычки - &ldquo;/&rdquo;.


--------------------
Офлайн · Карточка · Приват
^
Vetinary
05.09.2005, 18:04
Сообщение #11


Заслуженный участник
*****

Награды: 3
Группа: VIP
Сообщений: 818
Регистрация: 18.09.2004

Репутация: 20 [ - / + ]


а я как-то не очень к <p>... мне проще при выводе текста из БД сделать замену \n => <br> - т.е. сколько переносов хочет сделать человек в редакторе, столько пусть и будет... smile.gif


--------------------
"Коммерчески успешно принародно подыхать,
Об камни разбивать фотогеничное лицо,
Просить по-человечески, заглядывать в глаза
Добрым прохожим..."
© Янка, "Продано"

Mac OS X Hints — секреты Mac OS X
Офлайн · Карточка · Приват
^
artyom_b
05.09.2005, 19:44
Сообщение #12



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Конечно можно и без них но теги <p> позволяют
логически структурировать текст и
управлять отступами с помощью
p {
margin: n px;
}
да и пользователям будет труднее разрушить внешний
вид сайта (можно конечно добавить кучу пустых абзацев smile.gif )


--------------------
Офлайн · Карточка · Приват
^
Vetinary
05.09.2005, 20:02
Сообщение #13


Заслуженный участник
*****

Награды: 3
Группа: VIP
Сообщений: 818
Регистрация: 18.09.2004

Репутация: 20 [ - / + ]


о каких отступах идёт речь?
логически структурировать текст можно не только параграфами... smile.gif


--------------------
"Коммерчески успешно принародно подыхать,
Об камни разбивать фотогеничное лицо,
Просить по-человечески, заглядывать в глаза
Добрым прохожим..."
© Янка, "Продано"

Mac OS X Hints — секреты Mac OS X
Офлайн · Карточка · Приват
^
artyom_b
05.09.2005, 20:10
Сообщение #14



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Конечно не только параграфами,
предлагай свое решение smile.gif

Нашел интересный сайт о верстке:
http://htmlcoder.visions.ru/


--------------------
Офлайн · Карточка · Приват
^
artyom_b
06.10.2005, 14:42
Сообщение #15



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Цитата(Kevin @ 06/10/2005, 13:31)
Консерватизм — хорошо, пока он не переходит в устаревание wink.gif

Верстать полностью на слоях еще рановато (IMHO smile.gif )...
лучше всего смешанная верстка.


--------------------
Офлайн · Карточка · Приват
^
Kevin
06.10.2005, 15:58
Сообщение #16


*******
*******

Награды: 9
Группа: ????. ??????
Сообщений: 3 738
Регистрация: 02.04.2004

Репутация: 42 [ - / + ]


Цитата(artyom_b @ 06/10/2005, 16:42)
Цитата(Kevin @ 06/10/2005, 13:31)
Консерватизм — хорошо, пока он не переходит в устаревание wink.gif

Верстать полностью на слоях еще рановато (IMHO smile.gif )...
лучше всего смешанная верстка.

Думаю данная тема — разговор для отдельного топика.
Лично я совершенно не считаю использование слоев преждевременным, тем более это реализовано в браузерах лет 5 как... Под современной версткой я в первую очередь предполагал не использование DIVов, а отделения представления от структуры. Т.е. конструкции вида:
Код
<font color="#940C2B">04.10.2005</font>&nbsp;&nbsp;

или
Код
<td width="28" height="13" background="images/oda_09.gif">

реализовывать их CSS аналогами.
А делать структуру слоями или таблицами — это дело вкуса и уровня мастерства.
Офлайн · Карточка · Приват
^
artyom_b
06.10.2005, 18:14
Сообщение #17



*******

Награды: 11
Группа: ?????????
Сообщений: 8 327
Регистрация: 21.04.2004

Репутация: 1 [ - / + ]


Цитата(Kevin @ 06/10/2005, 16:58)
Думаю данная тема — разговор для отдельного топика
....
Под современной версткой я в первую очередь предполагал не использование DIVов, а отделения представления от структуры.
....
А делать структуру слоями или таблицами — это дело вкуса и уровня мастерства.


Ну зачем так категорично smile.gif
хотя, может, я тоже...
С конструкциями полностью согласен,
верстка на Дивах нужна и возможна,
я же написал "полностью..."

Реализована поддержка слоев.. да,
жаль, реализована она несколько по-разному...

P.S. отдельная тема у нас уже есть...
http://www.kamforum.ru/index.php?showtopic=2479


--------------------
Офлайн · Карточка · Приват
^
Rownt
06.10.2005, 20:30
Сообщение #18


Учитель созерцания
*******

Награды: 7
Группа: ??????
Сообщений: 3 261
Регистрация: 04.04.2004

Репутация: 25 [ - / + ]


Цитата(Kevin @ 06/10/2005, 13:31)
Консерватизм — хорошо, пока он не переходит в устаревание wink.gif

Консерватизм - хорошо, пока он не причиняет никому вреда. (У.Черчиль по этому поводу выразился гораздо более выразительно).

Кстати, ты уже смог определить рубеж или момент "устаревания"?...smile.gif


--------------------
... сами не летаем и другим не дадим...:)

Камчатская студия дизайна Art Fashion Line
Офлайн · Карточка · Приват
^
Kevin
06.10.2005, 21:04
Сообщение #19


*******
*******

Награды: 9
Группа: ????. ??????
Сообщений: 3 738
Регистрация: 02.04.2004

Репутация: 42 [ - / + ]


Цитата
Кстати, ты уже смог определить рубеж или момент "устаревания"?...
Для себя, в общем, смог... :-)
Офлайн · Карточка · Приват
^
Rownt
07.10.2005, 9:34
Сообщение #20


Учитель созерцания
*******

Награды: 7
Группа: ??????
Сообщений: 3 261
Регистрация: 04.04.2004

Репутация: 25 [ - / + ]


Понятно... Почитал я эти статейки по scc. Кое что заинтересовало. Кое что, откровенный бред. Все, что касается позиционирования, настолько не убедительно, что становится жалко авторов. У меня Камфорум раз в неделю открывается без полной подгрузки стилевика. Зрелище не для слабонервных. Поэтому, учитывая реалии российских каналов связи, и вакханалию стандартизации браузеров в общем, думаю, что табличное форматирование еще лет пять останется наиболее надежным способом, не взирая на определенные минусы.

P.S. Подправил сайт. Кевину, за самый объективный бета-тест - мой особый респект...smile.gif


--------------------
... сами не летаем и другим не дадим...:)

Камчатская студия дизайна Art Fashion Line
Офлайн · Карточка · Приват
^

5 страниц   1 2 3 > » 
Ответить · Открыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



Код кнопки 88x31 Текстовая версия Русская версия Invision Power Board v2.1.7 © 2006  IPS, Inc.