Главная Заказать статью Связь с автором Заказать сайт Статьи Сказать спасибо

Чтобы дизайн сайта не разъехался в google chrome и safari

Структура построения сайта может быть разной. И даже если в коде нет ошибок, некоторые виды браузеров могут неправильно воспринимать код и в итоге отображать объекты дизайна по-своему - не так как нужно нам - то есть дизайн сайта разъезжается. В итоге приходится подстраиваться и под другие браузеры, чтобы быть уверенным, что сайт везде отображается правильно и посетитель видит не какую-нибудь налепленную бурду, а полноценный красивый сайт. Если не переделывать структуру сайта полностью (хотя и там не факт, что все станет на свои места:)), то есть два варианта:

  • 1. Забить
  • 2. Найти причину по которой браузер воспринимает код неправильно.

Первый вариант не очень впечатляет, поэтому стоит выбрать второй.

Для того, чтобы избежать возможных проблем с совместимостью сайта к браузерам google chrome и safari и чтобы шапка нашего сайта вдруг не разъехалась в данных браузерах, например при вставке широкого объекта на страницу, как это однажды случилось у меня. Я нашел оптимальный выход из положения, позволяющий сделать сайт более гибким и надеждым к таким возможным проблемам.

Итак, продолжаем, делаем заключительные корректировки сайта, но для начала вспомним наш код

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="177">
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td width="100%" background="images/bg.jpg">
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td width="214">
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>
<tr>
<td width="177">
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td width="100%" background="images/bg1.jpg">
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td width="214">
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

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

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>


<table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">


<tr>
<td width="177">
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td width="100%" background="images/bg.jpg">
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td width="214">
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>


<tr>
<td width="177">
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td width="100%" background="images/bg1.jpg">
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td width="214">
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>


<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>


<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

А теперь перейдем к делу. У нас сайт состоит из одной таблицы, то есть код заключен в одну таблицу, состоящую из нескольких строк и столбцов, и это может оказаться причиной того, что браузер, а именно google chrome, safari неправильно воспримет код и дизайн разъедется в шапке при вставке большого объекта на страницу, например очень широкого баннера. Показываю красным цветом нашу таблицу.

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>


<table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">


<tr>
<td width="177">
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td width="100%" background="images/bg.jpg">
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td width="214">
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>


<tr>
<td width="177">
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td width="100%" background="images/bg1.jpg">
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td width="214">
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>


<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>


<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

Поэтому чтобы избежать возможных проблем и сделать сайт более гибким следует разбить код на несколько таблиц, как показано на рисунке. Можно каждый блок (шапка, контент, подвал) заключить в отдельную таблицу, но мы сделаем две таблицы, то есть первая таблица будет охватывать только шапку, вторая таблица будет охватывать контент и подвал. Почему именно две таблицы? Просто так захотелось мне, я не увидел надобности делать подвал как отдельную таблицу. Вот и все. Если вы понимаете как это делать, то пожалуйста, можете сделать сразу три, тем более что на следующих уроках мы эту третью колонку добавим. (Если добавите сразу, то и некоторые параметры тоже нужно будет поменять, например, убрать colspan="2"). Почему я сразу не могу добавить третью таблицу? Поймите, уроки делаются на ходу и переделывать потом ничего не хочется - довольно трудоемко. Но это для вас только плюс, больше практики - больше знаний!

Для этого достаточно лишь дописать в конце шапки закрывающийся тег </table> и сразу же после него начать новую таблицу <table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">, а выглядеть это будет так:

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>


<table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">


<tr>
<td width="177">
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td width="100%" background="images/bg.jpg">
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td width="214">
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>


<tr>
<td width="177">
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td width="100%" background="images/bg1.jpg">
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td width="214">
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>

</table>

<table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">


<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>


<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

НО ЭТО ЕЩЕ НЕ ВСЕ!!! Не спешите пока проверять, еще не все готово. Так как структура сайта поменялась и у нас начинается новая таблица, делаем следующее:

В первой и во второй таблице убираем параметр height="750", потом уберем в обоих строках шапки параметр width="100%", вместо него можем прописать align="left"

<table width="100%" border="0" cellpadding="0" cellspacing="0">


<tr>
<td width="177">
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td align="left" background="images/bg.jpg">
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td width="214">
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>


<tr>
<td width="177">
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td align="left" background="images/bg1.jpg">
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td width="214">
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>

</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

после шапки убираем атрибут colspan="2" в строке с контентом, он нам больше не понадобится:)

<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>

Переходим к подвалу сайта

<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>

Здесь необходимо поменять параметр colspan="3" на colspan="2", так как новая таблица содержит в себе не три ячейки в строке, а две, в итоге код получается таким:

 

return_links(1); ?>

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>


<table width="100%" border="0" cellpadding="0" cellspacing="0">


<tr>
<td width="177">
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td align="left" background="images/bg.jpg">
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td width="214">
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>


<tr>
<td width="177">
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td align="left" background="images/bg1.jpg">
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td width="214">
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>

</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">


<tr>
<td height="517" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>


<tr>
<td height="45" colspan="2" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

Далее

Уроки по созданию дизайна сайта в Photoshop
Добавление картинки в дизайн сайта
Добавление второго изображения в дизайн нашего сайта
Усложнение дизайна сайта добавлением картинки
Изменение контрастности изображения. Работа с текстом
Нарезка готового дизайна сайта в Photoshop
Доработка сайта в Adobe Dreamweaver CS3 после нарезки дизайна в фотошопе
Продолжаем работу над сайтом в Adobe Dreamweaver CS3
Дорабатываем html-код сайта в Adobe Dreamweaver CS3
Доработка сайта в Dreamweaver - добавление колонки меню
Резиновый дизайн - заканчиваем работу над сайтом в Dreamweaver
Чтобы дизайн сайта не разъехался в google chrome и safari
Жесткий дизайн сайта
Добавляем независимую таблицу в код - создаем бордюры
Убираем ненужные параметры
Добавление бэкграунда в бордюры сайта
Не отображается бэкграунд в пустой ячейке таблицы

return_links(); ?>



cubass - копирайтер на TextSale.ru Рейтинг@Mail.ru Rambler's Top100 PR-CY.ru

© 2009-2012 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!