Оптимизация

[crysis007]

Добрый день, посетители форума. Я здесь недавно. Очень много информации. Это хорошо.

У меня мало времени, поэтому со всем на форуме ознакомиться не смог. Прошу прощения, если тема уже была затронута.

Речь пойдёт об оптимизации сайта под различные браузеры.

Мой сайт сделан без применения рнр и других языков програмирования. Он создан исключительно на html. Так же присутствует и javascript. Просматриваю его в основном через ie8 (пока что в разработке). Мне этот браузер кажется наиболее удобным. Но когда я увидел сайт через FF и Оперу, то сильно расстроился. Сайт выглядел иначе. Многие элементы дизайна не отображались. Я решил всё-таки доделать сайт в ие, а уже потом перейти к оптимизации. И вот настало это время. Я посещал многие другие форумы, читал статьи. Много информации не нашёл. Узнал только про несколько элементов, которые и исправил. Так же догадался сам о других проблемах. Но всё равно это не исправило общую проблему.

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

[rus]

1) Выкладывайте конкретные проблемы с пояснениями (как не должно быть и как должно быть).

2) Выкладывайте сюда куски проблемного (локализованного) кода, а не всю страницу, в противном случае ссылку на страницу с проблемой и ее описанием. Так же можно выкладывать скрины.

Кажется все..., только при таких условиях вам тут могут помочь, но это в лучшем случае, в худшем послать в гугл.

[Justnewone]

Одним словом это все называется "кроссбраузерность", в интернете полно информации, или же приведите ссылку или подробное описание в картинках и с кодом.

[Great Rash]

Вы в корне неверно начали делать сайт.

Надо было сначала делать для браузеров (Мозилла, Опера и т.п.), а уже потом исправлять баги недобраузеров (ИЕ 6, 7, 8). Ибо только браузеры поддерживают стандарты, а программы для скачивания браузера (ага это я про семейство ИЕ) работают так как им этого хочется. А без соблюдения стандартов не возможно сделать кроссбраузерный сайт.

[Игорь Ермаков]

Сайт на чистом html бред.

Что вы должны сделать: снести ваш сайт с локалхоста или где он у вас, это во-первых, в во-вторых, садимся за литературу, читаем книжки, смотрим как устроены макеты, учим html/css, читаем классные блоги, пытаемся вникнуть, общаемся на форуме, практикуемся, но сайтов не делаем, подключаем грамотность, знание русского языка и математики, далее приступаем к практике, верстаем много-много макетов, несколько бессонных ночей, доводим свои макеты до того, чтобы они нормально работали во всех браузерах.

Вот потом, можно рискнуть и приступить делать сайты.

[Светлёнка]

Сайт на чистом html бред.

Что вы должны сделать: снести ваш сайт с локалхоста или где он у вас, это во-первых, в во-вторых, садимся за литературу, читаем книжки, смотрим как устроены макеты, учим html/css, читаем классные блоги, пытаемся вникнуть, общаемся на форуме, практикуемся, но сайтов не делаем, подключаем грамотность, знание русского языка и математики, далее приступаем к практике, верстаем много-много макетов, несколько бессонных ночей, доводим свои макеты до того, чтобы они нормально работали во всех браузерах.

Вот потом, можно рискнуть и приступить делать сайты.

А если МАЛО ВРЕМЕНИ?, что и есть в данном случае...

А если сайт нужен всего один и очень-очень простой - зачем много-много макетов?

[rus]

Светлёнка, затем что сайт всегда нуждается в оптимизации, доработки, развитии и внедрении новшеств, вот поэтому и нужен опыт в начале, а не в конце. Вы же не сядете за руль и по ходу движения будете учиться? Таких дров можно наломать! Так и тут.

[Zippovich]

А если МАЛО ВРЕМЕНИ?, что и есть в данном случае...

А если сайт нужен всего один и очень-очень простой - зачем много-много макетов?

Если времени мало, то всегда есть добрые дядьки, которую потратят свое время на Вас за умеренную плату.

Но не зная броду, в воду лучше не лезть. Особенно это качается верстки, где мильЁн всяких разных нюансов, которые без практики и теории станут "глюками".

Edited July 24, 2009 by Zippovich

[Светлёнка]

rus, я с Вами абсолютно согласна, если будет требоваться развитие сайта, то учить или платить надо, но бывают случаи, когда в этом просто нет необходимости. Один раз создать, проверить, запустить. А если возникают проблемы спустя год - все забудется без практики и все заново учить, а время было затрачено.

Я начинала создавать сайт тоже думала, что только html, больше ничего не пригодится, но со временем поняла, что ошибалась.

Может и crysis007 поймет, что ему надо нечто другое, но сейчас он попросил помощи и советов, а ему в ответ - сносите сайт, садитесь за учебники.

Игорь, если бы у меня были такие познания, как у Вас, я бы объяснила, почему так делать нельзя, вместо чтения нотаций.

[rash]

Сайт на чистом html бред.

А статичный промо-сайт или визитка? Тоже бред? А зачем там динамическая серверная часть?

[Justnewone]

Главная кроссбраузерная рекомендация - сделайте сайт "валидным", то есть, чтобы валидатор на w3c.org показал зеленый квадратик. Как правило, много разночтений в отображении бывает из-за того, что более современные браузеры также более толерантны к элементарным ошибкам в виде незакрытых тегов и прочего, а иногда и наоборот, IE прощает что-то, что не простят все остальные.

Я, например, всегда поступаю следующим образом. Делаю сайт под Firefox, затем подгоняю (не часто) под IE с помощью специально созданных для них таблиц стилей. У Вас, вероятно, так сразу может не получиться, каждое изменение на первых порах проверяйте в максимально-разумном количестве браузеров.

Для лечения IE6 и 7 почитайте про haslayout, это особенность алгоритма парсинга именно IE, в основе своей похоже на некий симбиоз свойств position и overflow. По моему опыту, есть некоторое количство откровенных багов, косяков, зачастую имеющих в среде кодеров собственные имена, все остальные случаи лечатся через haslayout.

Еще бы порекомендовал не пользоваться атрибутами тега там, где можно применить свойства CSS.

Ну и в заключение, я использую reset.css, который сбрасывает все стили, указанные в браузере по дефольту для элементов разметки HTML. Это может показаться неудобным, но многие проблемы с кроссбраузерностью решаются. Если reset.css не используется, то все равно придется прописать стили напрямую для схожего отображения в разных браузерах.

Воспользовавшись этими рекомендациями + потеряв некоторое время на поиски уточнений, Вы можете достаточно быстро научится писать кроссбраузерный код.

Творческих успехов Вам! =)

Edited July 26, 2009 by Justnewone

[crysis007]

1. Ребята, я новичок в веб-дизайне. Взялся за изучение этой науки недавно. С момента, как я оказался в сети. Но очень много времени не мог понять с чего начать. Знакомых, которые могли быть связаны с этой темой - не было. Приходилось терять время.

2. Прошло некоторое время. Я освоил фотошоп (для графических элементов дизайна сайта). Читая разные статьи, понял основы HTMLа. Приобрёл несколько учебников. Закрепил знания по html + узнал что-то новое. Прочитал про CSS. Понял основы.

3. Чтобы закрепить знания - решил создать сайт. Мне кажется, что это наилучший способ изучения. Проверил на собственном опыте. Сидел читал, читал, а через какое-то время многое забылось. Когда же начал делать сайт, то стал лучше запоминать всю информацию. После полного создания, пройду такой этап, как сео оптимизация. Получу опыт. Паралельно с поддержкой сайта начну изучать более сложные технологии. Такой у меня маршрут.

Я попросил конкретной помощи, поэтому не хотел было получать какие то инструкции. Повторю, я новичок!

Спасибо за информацию. Некоторые факты учту в будущем

[Justnewone]

Чтож... Для того чтобы получить конкретную помощь, вы не потрудились привести конкретные вводные данные, например, ссылку на сайт, хотябы, с объяснениями что не так и чего бы хотелось. Вы сами открыли флудильник, который, собственно и получили.

[Светлёнка]

Чтож... Для того чтобы получить конкретную помощь, вы не потрудились привести конкретные вводные данные, например, ссылку на сайт, хотябы, с объяснениями что не так и чего бы хотелось. Вы сами открыли флудильник, который, собственно и получили.

+1

Edited July 26, 2009 by Светлёнка

[Игорь Ермаков]

Игорь, если бы у меня были такие познания, как у Вас, я бы объяснила, почему так делать нельзя, вместо чтения нотаций.

У меня нет таких больших познаний в веб-разработке, как вы думаете.

А статичный промо-сайт или визитка? Тоже бред? А зачем там динамическая серверная часть?

Вы много хороших сайтов-визиток видели на чистом html?

Без стилей в любом случае никуда, при создании сайта.

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

Тот же флеш, хоть он и несколько устарел, и не так сильно распространён, всё равно сайты на нём получаются очень даже не плохие.

rus, я с Вами абсолютно согласна, если будет требоваться развитие сайта, то учить или платить надо, но бывают случаи, когда в этом просто нет необходимости. Один раз создать, проверить, запустить. А если возникают проблемы спустя год - все забудется без практики и все заново учить, а время было затрачено.

Я начинала создавать сайт тоже думала, что только html, больше ничего не пригодится, но со временем поняла, что ошибалась.

Может и crysis007 поймет, что ему надо нечто другое, но сейчас он попросил помощи и советов, а ему в ответ - сносите сайт, садитесь за учебники.

Человек которому просто нужен сайт, всего на один раз и для не замысловатых целей, который к тому же, не хочет лезть в дебри разработки, пускай использует готовые решения, это будет лучше, те же CMS системы, есть очень простые.

В случае если цель коммерческая, то не стоит экономить и лучше обратиться к профессионалам.

Edited July 26, 2009 by Игорь Ермаков

[Светлёнка]

У меня нет таких больших познаний в веб-разработке, как вы думаете.

В любом случае, побольше моего

Человек которому просто нужен сайт, всего на один раз и для не замысловатых целей, который к тому же, не хочет лезть в дебри разработки, пускай использует готовые решения, это будет лучше, те же CMS системы, есть очень простые.

В случае если цель коммерческая, то не стоит экономить и лучше обратиться к профессионалам.

Не всегда готовые решения подходят.

Про профессионалов верно, но новичок, когда хочет сделать сайт самостоятельно, не подозревает о предстоящих трудностях, выглядит все значительно проще, чем есть на самом деле (когда только начинаешь изучать html).

[crysis007]

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

[rus]

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

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

В этом случае отталкиваться нужно от конкретной ситуации, а общая и размытая информация вам ничего не даст!

Вот далеко не полный ряд вопросов, которые по идее вы должны были нам выложить:

1) Сайт резиновый (100% ширины).

2) Фиксированный (определенная ширина и по центру скажем).

3) На чем сверстан таблицы, или дивы.

4) Ну а дальше сплошные ньюансы...

паддинги, маргины, флоаты, футер к низу, блок уехал, верстка разъехалась и т.д... и т.п...

[Светлёнка]

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

crysis007, ты смотрел на самом сайте htmlbook.ru? - к каждому тегу идет комментарий, поддерживается ли данный тег различными браузерами. Может это тебе поможет. На этом форуме тебе помогут, если будут знать чем. Ты вопрос конкретней задай, в этой теме несколько раз сказали, какую информацию тебе надо предоставить, что бы помочь решить проблему.

[Игорь Ермаков]

Если кто не понял, то форум htmlbook, очень своеобразен, тут много очень умных толковых людей, для которых не существует неразрешимых задач, но здесь в 90% тем, 90% сообщений не по делу За это все и любят этот форум.

[hf3]

Если кто не понял, то форум htmlbook, очень своеобразен, тут много очень умных толковых людей, для которых не существует неразрешимых задач, но здесь в 90% тем, 90% сообщений не по делу За это все и любят этот форум.

Это на всех тематических форумах, независимо от тематики.

[crysis007]

Хорошо, хорошо.

Значит, у меня есть блок - Навигация. Он очень прост, без всяких изысков, чтобы не нагружать страницу.

Вот так он выглядит в IE (8 версия)

А вот так в FF (3.5 версия)

Вот исходный HTML код:

<table class="класс"> 

<tr class="класс1"> 
<td class="класс2"> 

<p align="center"><span class="класс3">Навигация</span></p> 

</td> 
</tr> 

<tr height="14px"><td></td></tr> 

<tr><td> 

<p align="center"> 
<ul> 
<li type="square"><a href="http://site.ru/" class="класс4">пункт1</a></li>   
<li type="square"><a href="http://site.ru/" class="класс4">пункт2</a></li>   
<li type="square"><a href="http://site.ru/" class="класс4">пункт3</a></li> 
</ul></p> 

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

в CSS:

table.класс {width: 100%; height: 100%; border: 1px solid #cccccc;} 
tr.класс1 {width: 220px; height: 25px; background-color: #fab303; align: center;} 
td.класс2 {border: 1px solid #cccccc; align: center;} 
span.класс3 {font-family: Tahoma; font-size: 12px; font-weight: bold; color: #999999;} 

a.класс4:link {font-size: 11px; color: #666666; text-decoration: none;} 
a.класс4:visited {font-size: 11px; color: #666666; text-decoration: none;} 
a.класс4:hover {font-size: 11px; color: #FF9900; text-decoration: none;} 
a.класс4:active {font-size: 11px; color: #FF9900; text-decoration: none;}

Естественно у меня классы на английском. Здесь я написал для удобства. Классы ссылок тоже расписаны подробно.

Думаю, теперь я достаточно данных продемонстрировал...

[rus]

Удалено...

Что-то какая-то путаница...

в стилях есть упоминание о тегах спан, тд, тр, тейбл...

а в коде вижу ли, для которого нет стилей,

да и скрины разные абсолютно.

дайте ссылку на страницу.

Edited July 28, 2009 by rus

[crysis007]

rus,

в стилях есть упоминание о тегах спан, тд, тр, тейбл..

что вы имели ввиду?

а в коде вижу ли, для которого нет стилей,

забыл сказать. у меня есть общий стиль для LI

li {color: #cccccc; type: square;}

да и скрины разные абсолютно.

в чём и проблема. вот настолько различное отображение страницы...

дайте ссылку на страницу.

увы, сайт закрыт на разработку... не желательно бы его открывать...

[rus]

У меня все одинаково отображается в ИЕ и Фоксе:

<html>
<head>
<style>
.wrap {
width: 100%; 
height: 100%; 
border: 1px solid #cccccc;
}
.tr1 {
width: 220px; 
height: 25px; 
background-color: #fab303; 
align: center;
}
.td2 {
border: 1px solid #cccccc; 
align: center;
}
.nav {
font-family: Tahoma; 
font-size: 12px; 
font-weight: bold; 
color: #999999;
}

ul li a:link {
font-size: 11px; 
color: #666666; 
text-decoration: none;
}
ul li a:visited {
font-size: 11px; 
color: #666666; 
text-decoration: none;
}
ul li a:hover {
font-size: 11px; 
color: #FF9900; 
text-decoration: none;
}
ul li a:active {
font-size: 11px; 
color: #FF9900; 
text-decoration: none;
}
li {
color: #cccccc; 
type: square;
}
</style>
</head>
<body>


<table class="wrap">

<tr class="tr1">
<td class="td2">

<p align="center"><span class="nav">Навигация</span></p>

</td>
</tr>

<tr height="14px">
<td></td>
</tr>

<tr>
<td>

<p align="center">
<ul>
<li type="square"><a href="http://site.ru/" class="класс4">пункт1</a></li>  
<li type="square"><a href="http://site.ru/" class="класс4">пункт2</a></li>  
<li type="square"><a href="http://site.ru/" class="класс4">пункт3</a></li>
</ul>
</p>

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


</body>
</html>

Edited July 28, 2009 by rus