Новая версия сайта
 
Seozar
Новая версия сайта
 
 
 
 
 
 

Первая страничка

Теперь переходим к основе нашего сайта. Задумаемся, что же это такое. Из чего состоят все сайты? Не догадались? Верите, нет, но в основе любого сайта лежит простая таблица :) С помощью таблицы мы сможем выделить место под название. Равномерно распределить контент, изображения и всё, что решили впихнуть на сайт :) В создании сайта это самое простое. Конечно если у вас уже готовы материалы для сайта. Я для примера приведу три таблицы, первые, что в голову взбредут. Не надо из них, что то выбирать и сделать такие же. Просто посмотрите, подумайте. Представьте мысленно, как будет выглядеть ваша будущая страничка. Наверняка, что то более интересное в голову придёт :)


Название сайта
Главная
Программы
Анекдоты
Рассказы
Форум
Наполнение (контент)

Три строки, один столбец. Средняя строка разбита на столбцы.

Код странички с данной таблицей будет выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
</head>

<body>
<table width="100%" border="1" cellpadding="1" cellspacing="1" bordercolor="#666666">
<tr>
<td colspan="5"><div align="center"><strong>Название сайта</strong></div></td>
</tr>
<tr>
<td><div align="center"><strong>Главная</strong></div></td>
<td><div align="center"><strong>Программы</strong></div></td>
<td><div align="center"><strong>Анекдоты</strong></div></td>
<td><div align="center"><strong>Рассказы</strong></div></td>
<td><div align="center"><strong>Форум</strong></div></td>
</tr>
<tr>
<td colspan="5"><div align="center"><strong>Наполнение (контент)</strong></div></td>
</tr>
</table>
</body>
</html>


Название сайта
Главная
Наполнение (контент)
Программы
Анекдоты
Рассказы
Форум

Две строки, один столбец. Нижняя строка разбита на два столбца. После этого левая, дополнительно разбита на строки.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
</head>

<body>
<table width="100%" border="1" cellpadding="1" cellspacing="1" bordercolor="#666666">
<tr>
<td colspan="2"><div align="center"><strong>Название сайта</strong></div></td>
</tr>
<tr>
<td><div align="center"><strong>Главная</strong></div></td>
<td rowspan="5"><div align="center"><strong>Наполнение (контент)</strong></div></td>
</tr>
<tr>
<td><div align="center"><strong>Программы</strong></div></td>
</tr>
<tr>
<td><div align="center"><strong>Анекдоты</strong></div></td>
</tr>
<tr>
<td><div align="center"><strong>Рассказы</strong></div></td>
</tr>
<tr>
<td><div align="center"><strong>Форум</strong></div></td>
</tr>
</table>
</body>
</html>


Главная
Название сайта
Форум
Гостевая
Почта
Программы
Анекдоты
Рассказы
Наполнение (контент)

Две строки, один столбец. Верхняя строка разбита на три столбца. Далее - левый столбец дополнительно разбит на строки. В правый вставлена таблица - три строки, один столбец.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
</head>

<body>
<table width="100%" border="1" cellpadding="1" cellspacing="1" bordercolor="#666666">
<tr>
<td width="200" bgcolor="#389241"><div align="center"><strong>Главная</strong></div></td>
<td rowspan="4"><div align="center"><strong>Название сайта</strong></div></td>
<td width="200" rowspan="4"><table width="200" border="3" cellpadding="3" cellspacing="3" bordercolor="#666666">
<tr>
<td background="../../SpryAssets/a.jpg"><div align="center"><strong>Форум</strong></div></td>
</tr>
<tr>
<td background="../../SpryAssets/a.jpg"><div align="center"><strong>Гостевая</strong></div></td>
</tr>
<tr>
<td background="../../SpryAssets/a.jpg"><div align="center"><strong>Почта</strong></div></td>
</tr>
</table></td>
</tr>
<tr>
<td width="200" bgcolor="#0791E2"><div align="center"><strong>Программы</strong></div></td>
</tr>
<tr>
<td width="200" bgcolor="#F58912"><div align="center"><strong>Анекдоты</strong></div></td>
</tr>
<tr>
<td width="200" bgcolor="#F858EC"><div align="center"><strong>Рассказы</strong></div></td>
</tr>
<tr>
<td colspan="3"><div align="center"><strong>Наполнение (контент)</strong></div></td>
</tr>
</table>
</body>
</html>


Придумали? В путь. Открываем вашу первую страницу index в программе Adobe Dreamweaver CS3. В меню выбираем Вставка - далее Таблица. Выбираем сколько будет строк и столбцов. Ширину таблицы лучше всего сделать 100%. Ширина сайта будет автоматом подстраиваться под ширину экрана монитора. Мониторы у всех разные, не забывайте об этом. По желанию, можно сделать и фиксированный размер, допустим 1024 пикселей, лучше 600 -800. Шире не советую, 1024 - 768 пикселей - среднее разрешение экрана монитора.

Толщина границы, Поля ячеек, Интервал ячеек - поставьте нолики. Вашу таблицу не будет видно. В таблицах, которые я приводил для примера - размеры выставлены по единичке. Опять же это всё по желанию.


Таблица сделана, теперь надо сделать ячейки, для названий ваших будущих страничек. Вы ещё помните, что замыслили? Это хорошо :) Под каждой таблицей я написал, сколько она содержит строк и столбцов. Какие столбцы и строки - на какое количество ячеек разбиты. Наводим курсор на столбец, или строку - которую решили разбить на ячейки. Нажимаем правую кнопку мыши. Всплывёт меню, находим верхнюю строчку Таблица. Выбираем что и на сколько разбить.

Для удобства можно вставлять таблицы в ячейки. Пример - нижняя таблица. Слева - ячейка разбита на строки. Справа - в ячейку вставлена таблица


Выбрать фон для ячеек - нижнее меню. Хотите покрасивее? Тогда надо сделать небольшие фончики, как и для общего фона страницы, но поменьше размером :) Пример, на нижней таблице. Слева - фон, справа - сделанные фончики :)


Внимание. Обязательно проверьте как отображается страничка в нескольких браузерах. Всё то, что работает в опере, или мозиле, может не работать в Internet Explorer. Что то может не правильно отображаться - цвет, размер, местоположение, или не работать панель навигации. Много всяких мелочей. Браузеров сотни и все они разные - тут уж ни чего не поделаешь. Проверяйте хотя бы на основных.


Итак, первая страничка готова. Не спешите заполнять контентом. Осталась пара штрихов, сейчас доштрихуем :) Только не забудьте сохранить страничку :)


Главная Создание сайта, хостинг Тема, контент Программы Начало Структура Фон Первая страничка Таблица CSS Завершение Простое меню Выпадающее меню Движок для сайта Карта сайта - Sitemap