Верстка сайта в виде таблиц

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Создание таблиц в блокноте
  7. Цвета в HTML
  8. Как создать форму в HTML?
  9. Теги в HEAD
  10. Изображения в html
  11. CSS
  12. Работа с текстом и изображениями в CSS
  13. Блочная структура сайта
  14. Блочная верстка

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

Структура сайта

Создадим в блокноте файл под названием site.html. Наша страница будет состоять из нескольких таблиц. Схематически это выглядит так:

Схематичное отображение таблиц на сайте

Внешнюю таблицу сделаем с такими параметрами:

<table width="100%" border="1">

Здесь ширина задана не в пикселях, а в процентах. Это значит, что таблица должна занять по ширине 100% экрана, граница=1 пиксель.

В первую строку внешней таблицы вставим рисунок.

<html>
<head>
<title>Site</title>
</head>
<body>
<table width="100%" border="1">
<tr>
<td ><img src="images/header.png" width="100%" height="100">
</td>
</tr>
</table>
</body>
</html>

Заметьте, что картинка задана с параметрами: width=«100%» height=«100». Т.е. она должна занять всю ширину таблицы, высота картинки будет 100 пикселей.

Во вторую строку вставим внутреннюю таблицу шириной width=«100%».

Вторая таблица должна быть с 2 колонками.  Сделаем так, чтобы 1 колонка занимала по ширине 20% места, а вторая колонка оставшуюся часть.

<table width="100%">
<tr>
<td  width="20%"><!колонка №1>
</td>
<td  width="80%"><!колонка №1>
</td>
</tr>
</table>

После тега <td> стоит тег комментария (<!__>). Комментарии используются для пояснения кода, и браузером не показываются. В колонку №1 мы вставим список, с помощью которого мы сможем переходить на другие страницы сайта.

По умолчанию ячейки таблицы заполняются с середины. Но страницы сайта заполняются сверху вниз, поэтому, чтобы текст заполнял ячейку таблицы сверху вниз  в тег столбца вставим атрибут valign=«top».

Первый столбец внутренней таблицы заполним списком, с помощью которого можно будем  переходить на другие страницы.

Код выглядит так:

<table width="100%">
<tr>
<td  width="20%  valign="top"><!колонка №1>
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="second_page.html">Вторая страница</a></li>
<li><a href="third_page.html">Третья страница</a></li>
</ul>
</td>
<td  width="80%  valign="top"><!колонка №2>
</td>
</tr>
</table>

Список содержит гиперссылки на другие страницы.

Второй столбец внутренней таблицы будет служить для вставки отформатированного текста.

Текст будет начинаться с заголовка  (тег <h1>) и отформатированного параграфа (возьмем в качестве текста 1 часть нашего учебника).

Теперь код изменится так:

<table width="100%">
<tr>
<td width="20%  valign="top"><!колонка №1>
<ul>
<li><a href="index.html">Главная страница </a></li>
<li><a href="second_page.html">Вторая страница</a></li>
<li><a href="third_page.html">Третья страница</a></li>
</ul>
</td>
<td width="80% valign="top"><!колонка №2>
<h1 align="center">Введение</h1>
<p align="justify">текст 1 части</p>
</td>
</tr>
</table>

Обычно в нижней части страницы пишут контактные данные или автора сайта. Поэтому в нижнюю строку внешней таблицы вставим надпись:

<tr>
<td>
<h2 align="right">Этот сайт был сделан собственными руками</h2>
</td>
</tr>

Полный код страницы выглядит так:

<html>
<head>
<title>Site</title>
</head>
<body >
<table width="100%" border="1" >
<tr>
<td><img src="images/header.png" width="100%" height="100" /></td>
</tr>
<tr>
<td>
<table width="100%"  >
<tr>
<td width="30%" height="80%" valign="top" >
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="second_page.html">Вторая страница</a></li>
<li><a href="third_page.html">Третья страница</a></li>
</ul>
</td>
<td width="70%" valign="top" >
<h1 align="center">Введение</h1>
<p align="justify">Текст 1 части</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><h2 align="right">Этот сайт был сделан собственными руками</h2>
</td>
</tr>
</table>
</body>
</html>

Здесь код внутренней таблицы выделен зеленым цветом.

Все, верстка закончена. Давайте теперь чуть разукрасим нашу страницу. Изменим тег <body> так, чтобы фон стал бордовым:

<body bgcolor=#601721>

Наша страница стала выглядеть так:

Полученный сайт

На этом фоне сделаем так, чтобы наш текст был черными буквами на белом фоне. Также отделим  список от текста. Для этого тег внутренней таблицы изменим так:

<table width="100%" bgcolor="white" border="1">

Сделаем также нижнюю  строку внешней таблицы черными буквами на белом фоне:

<tr>
<td bgcolor="white"><h2 align="center">Этот сайт был сделан собственными руками</h2>
</td>
</tr>

У вас должна получиться вот такая страничка:

Сайт после изменения фона

Если что-то не получилось, сравните код с приложенным файлом.

Работа в Dreamweaver.

Сохраните в папке images рисунок header.png. Создайте новый сайт site.html.

Создайте  таблицу с 1 колонкой и 3 строками, c такими параметрами:

width="100%"  border="1"

Для этого войдите в меню Insert, потом Table, там заполните все поля, как учили в уроке по созданию таблиц.

Перетащите рисунок header.png из меню File верхнюю строку  таблицы. Щелкните по рисунку и в панели форматирования задайте такие параметры (смотри урок по работе с изображениями):

W=100%

H=100

Щелкните по второй строке таблицы. Вставьте в эту строку таблицу с 1 строкой и 2 колонками и шириной width=«100%»

У вас во второй строке внешней таблицы должна получиться внутренняя таблица с 2 колонками. Щелкните на линию, которая разделяет таблицу на колонки и перетащите линию так (как в Excel), чтобы 1-я колонка занимала 30% места по ширине, а 2-я 70%.

Вставьте в теги столбцов внутренней таблицы атрибут valign=«top»

Щелкните по 1-й колонке и создайте маркированный список с такими элементами (смотри урок по работе со списками):

<ul>
 	<li>Главная страница</li>
</ul>
<ul>
 	<li>Вторая страница</li>
</ul>

<ul>
 	<li>Третья страница</li>
</ul>

Создайте гиперссылки к этим элементам списка (смотри урок по работе с гиперссылками):

Главная страница-index.html
Вторая страница- second_page.html
Третья страница- third_page.html
Щелкните во второй колонке. Вставьте заголовок h1 «Вступление» и расположите по центру (смотри урок по работе с текстом).

Ниже вставьте параграф с текстом, который вы возьмете с 1 главы этого учебника.

Отформатируйте текст параграфа так, чтобы он расположился по всей ширине таблицы.

Щелкните по нижней строке внешней таблицы. В эту строку вставьте заголовок h2 «Эту страницу сделал я сам»

Расположите заголовок по центру.

Найдите в области кода тег <body> и измените его так:

<body bgcolor="#601721">

Найдите тег внутренней таблицы и измените также , как мы это делали в блокноте:

<table width="100%" bgcolor="white" border="1">

Измените также нижнюю строку внешней таблицы:

<tr>
<td bgcolor="white"><h2 align="center">Этот сайт был сделан собственными руками</h2>
</td>
</tr>

Сохраните страницу и посмотрите в браузере, что получилось.

А для того чтобы отредактировать HTML код онлайн, воспользуйтесь инструментом editorhtmlonline.com.

 

Оставить ответ

Ваш email не будет показан.