Делаем свой сайт

Часть вторая. Разбивка страницы.

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

Кажется, что там таблица, хотя нельзя придумать лучшего средства для разбивки и оформления страницы, хотя для оформления есть еще и дополнительлные средства. Таблицы, применяемые в HTML, имеют ряд полезных свойств. Таблицам можно задать определенный размер, положение на странице, количество столбцов и строк, расположение текста в ячейках относительно их границ, толщину линий, отображение линий или их невидимость, можно что бы одна из четырех границ, или две были видны, а остальные нет, еще, таблицы можно вкладывать друг в друга, как матрешки, есть еще другие, которые можно узнать из учебников.

Давайте договоримся, здесь будет представлен код, который надо скопировать, предварительно открыв файл, созданный ранее, index.html(последняя буква л) и вставить его между тегами <body background="----"> и </body>. Если что-то не получается проверьте точность написания названия файлов и синтаксис. После того, как вставите скопированный код, незабудьте сохранить файл, можно нажатием клавиш Ctrl+S, для Windows. Потом проверить как будет все выглядеть в браузере. Что бы понять какая часть кода на что влияет можно поизменять параметры и убедиться самому.

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

<table width=100% border="0" align="center" bgcolor="#c0dcc0">
<tr>
<td align="center"><h1>Здесь может быть заголовок Вашей страницы</h1></td>
</tr>
</table>
<table width=100% border="0" align="center" bgcolor="#FEC403">
<tr>
<td></td>
</tr>
</table>
<table width=100% border="1" align="center" bgcolor="#529B9B">
<tr>
<td align="center"> меню навигации</td>
<td align="center">  1  </td>
<td align="center">  2  </td>
<td align="center">  3  </td>
<td align="center">  4  </td>
<td align="center">  5  </td>
</tr>
</table>
<table width=100% border="0" align="center" bgcolor="#FEC403">
<tr>
<td></td>
</tr>
</table>
<table width=100% border="0" align="center" bgcolor="#B8BDBD">
<tr>
  <td valign="top" width=20%><table width=100% border="0" align="center" bgcolor="#DE2E2E">
   <tr>
    <td align="center">Это левое меню</td>
   </tr>
   <tr>
    <td align="center">1</td>
   </tr>
   <tr>
    <td align="center">2</td>
   </tr>
   <tr>
    <td align="center">3</td>
   </tr>
   <tr>
    <td align="center">4</td>
   </tr>
   <tr>
    <td align="center">5</td>
   </tr>
   <tr>
    <td align="center">6</td>
   </tr>
   <tr>
    <td align="center">7</td>
   </tr>
   <tr>
    <td align="center">8</td>
   </tr>
   <tr>
    <td align="center">9</td>
   </tr>
   <tr>
    <td align="center">10</td>
   </tr>
  </table>
    <td align="left" width=60%><table width=100% border="0" align="center" bgcolor="#005059">
   <tr>
    <td valign="top">Пример текста взят из статьи на моем сайте http://www.grench21.narod.ru

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

На первое место по простоте думаю надо поставить обыкновенное попрошайничество.

В этом случае мошенничество выражается в простом попрошайничестве. Вам на почтовый ящик приходит письмо приблизительно вот такого содержания: Добрый день! ... </td>
   </tr>
   </td>
  </table>
   <td align="right" width=20%><table width=100% border="0" align="center" bgcolor="#DE2E2E">
   <tr>
    <td align="center">Это правое меню </td>
   </tr>
   <tr>
    <td align="center">1</td>
   </tr>
   <tr>
    <td align="center">2</td>
   </tr>
   <tr>
    <td align="center">3</td>
   </tr>
   <tr>
    <td align="center">4</td>
   </tr>
   <tr>
    <td align="center">5</td>
   </tr>
   <tr>
    <td align="center">6</td>
   </tr>
   <tr>
    <td align="center">7</td>
   </tr>
   <tr>
    <td align="center">8</td>
   </tr>
   <tr>
    <td align="center">9</td>
   </tr>
   <tr>
    <td align="center">10</td>
   </tr>
   </td>
  </table>
  </td>
</tr>
</table> <br><br>

<table width=100% border="0" align="center" bgcolor="#00FF80">
<tr>
  <td align="center">Здесь ставится копирайт ©, подпись, и другое</td>
</tr>
</table>

В этом примере разбивка страницы показана в таблицах. Так выглядит страница "изнутри". Три таблицы, левое меню, средняя, для текста и правое меню, являются вложенными. Таблица начинается тегом <table> и закнчивается </table>. Еще раз напоминаю, что этот код надо скопировать и вставить в страницу, которая была создана в первом уроке и вставить между тегами <body> и </body>. Будьте внимательными и у Вас все получится.

Здесь представлена такая разбивка, но можно поэксперементировать и что-то убрать или добавить. Попробуйте сами разобраться в коде, если все поймете, потом будет легче ориентироваться. В следующем уроке будем разбираться, что еще можно сделать с помощью таблиц. следующий урок >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<предыдущий урок

Полезные ссылки

О растениях от А до Я

Осторожно мошенники

Как заработать в сети?

Сколько мы живем после смерти?

Здоровье как инструмент

Как стать успешным во всем?

Невезет?

Где взять свободное время?

Что стоит за позитивным мышлением?

Путь к своей цели

Сетевые сервисы

Фотобанк

Способы заработка

Заработать не умея делать сайта

Обзорная статья о фотобанках

Как заработать в сети без сайта

Оптимизация вебстраницы. Часть 1.

Оптимизация. Часть 2.

Небольшой FAG по фотобанкам

Раскрутка сайта

Карта сайта

Ваш первый сайт

Как перевести с других языков

Страница бесплатной загрузки

Зарабатываем с Google Adsense

Заработок web-мастерам и не только.

Товары с доставкой по Москве и всей России!

Все вопросы направляйте по адресу mailto: grench21@yandex.ru

Создаем сайт.

Полезные ссылки