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

Как сделать главную страницу сайта

Рассмотрим в картинках, как делается обычная, хорошо индексируемая, первая страница сайта на html табличным способом построения с помощью программы Adobe Dreamweaver. Использовать любой другой html редактор не запрещенно. Для удобства обращения с сайтом страницу, как и весь будущий сайт позже можно переделать на php.

Я надеюсь, что вы сможете уловить главную суть, как сделать первые шаги в создании сайта, даже если пока вы незнакомы с языком html. Для начала создадим папку, на одном из локальных диске D,E,F…., в ней и будет храниться ваш сайт.

Открываем Dreamweaver справа в окне жмем “файлы” и находим свою папку, кликаем на ней правой кнопкой выбираем “новый файл”.

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

Задаём ему имя index.html.

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

Кликаем на нем, в рабочим окне откроется наш созданный файл. В левом верхнем углу есть кнопки “Код”, “Раздельно”, “Дизайн” так вот, жмем кнопку “Раздельно” и у вас получится в рабочем окне сверху код снизу дизайн.

Прописываем между тегами <head>...</head> мета-теги, для того чтобы наша страничка хорошо индексировалась и продвигалась в поисковых системах.

  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - кодировка сайта
    <meta http-equiv="Content-Language" content="ru"> - язык вашей страницы
    <title> Здесь прописывается название вашего сайта или страницы</title>
    <meta name="author" content="Василий Тёркин"> - автор контента
    <meta name="description" content="Описание содержимого страницы">
    <meta name="keywords" content="Ключевые слова и фразы">

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

Теги:
<tr></tr> - означает строчка.
<td></td> - означает столбец.

Сколько пропишете тегов <tr><td></td></tr> столько и будет рядов (ячеек) по вертикали.

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

А каждый ряд можно поделить на столбцы: <tr><td>1 столбец </td><td>2 столбец </td></tr>

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

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

FTP клиент с поддержкой UTF- 8 кодировки, для загрузки и редактирования файлов на хостинге.

Скачать!

Cute FTP9 Prof Rus

Все строчки и столбцы прописываются между тегами <table>Здесь</table> это обязательно. А <table></table> встает между <body>Здесь</body>.Между тегами <table></table> вставляем строчку, а между строчки столбец и в нем пишем какой нибудь для себя ориентир (например 111) получается так:
<table><tr><td>111</td></tr></table>.

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

На нашем ориентире кликаем правой кнопкой и выбираем “Таблица” – “Разделить ячейку…”

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

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

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

Ладно, идем дальше. Я сделаю к примеру так: выбрал 3 строчки, обновил (справа в верху кнопка), затем на ориентире (222) правой кнопкой “Таблица” – “Разделить ячейку…” на два столбца и получилось вот так:

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

Как сделать сайт в табличном построении

Теперь нам потребуется задать ширину и высоту таблице и ячейкам. Посмотрите на ячейку с единицами в коде, в тег <td> вставлен “colspan=” ширина равная количеству столбцов (222) (444)", в нашем случае получаем <td colspan="2"> т.е. ширина страницы. В программе имеется подсказка, когда в коде, в теге <td перед закрывающей скобкой (>) клавишей spase вы делаете пробел, выскакивает подсказка с набором тегов (ширина, высота, толщина рамки, цвет…там есть все что нужно). Так вот находим код первой ячейки (111) в теге <td после colspan="2" перед (>) жмем на пробел и находим в открытом окошке "width" -это ширина, кликаем по нему двойным щелчком.

Как сделать сайт в табличном построении

Между кавычек вписываем ширину которая вам требуется например 900 и жмем обновить и сохранить.

Как сделать сайт в табличном построении

Высоту ячейки задаем точно также (если это требуется) только при помощи “height” - высота. Страничка наша должна находится всегда по центру монитора. Для этого пропишем в <table align="center" border="2"> Вот что получилось в итоге:

Как сделать сайт в табличном построении

P.S. Такой способ построения называется ТАБЛИЧНЫМ и больше подходит для простых сайтов, которых сейчас делается гораздо меньше чем раньше.

20.03.2010 год