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

Жесткий дизайн сайта

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

Давайте вспомним наш прошлый код.

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

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

Помните что мы делали на предыдущей странице, когда делали две независимые друг от друга таблицы?

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

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

</table>

<!-- Начало третьей независимой таблицы -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">

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

Такой конструкцией обозначаются комментарии в html <!-- Начало первой независимой таблицы -->

Далее

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

Лучшая система размещения статей

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

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