Урок 8. Табличный дизайн сайта.
Пятница, 12 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 453
Подписаться на комментарии по RSS
На предыдущих уроках мы рассмотрели основы HTML, научились работать с текстом, таблицами и изображениями.
Давайте воспользуемся полученными знаниями и сделаем свою первую страницу для сайта, используя табличный дизайн.
Что мы хотим получить в результате? Страницы нашего сайта должны содержать в себе шапку с названием сайта, боковую колонку со ссылками на другие страницы сайта и блок с основной информацией сайта. Выглядеть это будет примерно так:
Изображение для фона и цвета всех блоков можете выбрать на своё усмотрение.
Для начала нам необходимо создать файл index.html в блокноте (обычно такое название всегда используют для главной страницы), который будет главной страницей нашего сайта. Пропишем в него следующий код.
<html> <head> <title>Мой первый сайт/Главная</title> </head> <body> <center> <!-- Задаем первую основную таблицу--> <table border="1" width="1200" height="900"> <tr> <td colspan="2" bgcolor="#666633" width="200" height="120"><center><h1>Название Вашего сайта</h1></center></td> </tr> <tr> <td bgcolor="#CCCC99" width="200" valign="top" > <br><br><center><a href="index.html">Главная</a><br><br> <a href="1t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="2t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="3t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="4t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="5.html"> Ссылка на другую страницу Вашего сайта</a><br><br> </center> </td> <td valign="top" background="g.jpg"> <!--Задаём вложенную таблицу--> <table > <tbody > <!-- само содержание таблицы--> <tr><td><h3>Здесь будет текст вашей главной страницы!</h3></td></tr> </tbody> </table> </td> </tr> </table> </center> </body> </html>
А теперь давайте в подробностях рассмотрим наш код.
Придерживаясь основной структуры HTML документа, начинаем с тэга <html>.
Далее прописываем заголовочную часть документа <head></head>, которая будет содержать название нашей страницы в тэге <title></title>.
<html> <head> <title>Мой первый сайт/Главная</title> </head>
Затем открываем тэг <body>, который содержит в себе основную часть нашей html страницы. В нём по центру (<center></center>) задаём таблицу (<table>) с заданными параметрами border=”1”(толщина рамки таблицы) width=”1200” (ширина таблицы) и height=”900” (высота таблицы).
<body> <center> <!-- Задаем первую основную таблицу--> <table border="1" width="1200" height="900">
Нашу таблицу разбиваем на две строки. Первая строка будет содержать ячейку с названием Вашего сайта. Эта ячейка будет содержать такие параметры: colspan=”2” (разбиение ячейки по горизонтали на два столбца), bgcolor=”#666633” (цвет заливки ячейки), width=”200” (ширина ячейки) и height=”120” (высота ячейки). В ней будет содержаться название Вашего сайта, расположенное по центру (<center>) и выделенное тэгом заголовка <h1>.
<tr> <td colspan="2" bgcolor="#666633" width="200" height="120"> <center> <h1>Название Вашего сайта</h1> </center> </td> </tr>
Вторая строка нашей таблицы будет так же содержать два столбца. Первый столбец будет иметь такие параметры: bgcolor=”#CCCC99”(цвет заливки этого столбца), width=”200” (ширина этого столбца) и valign=”top” (выравнивание содержимого ячейки по верхнему краю). В первом столбце этой строки по центру мы расположим наши ссылки на другие страницы с помощью еще не знакомого для Вас атрибута href, который создает ссылку на указанную страницу или URL адрес. Синтаксис у него такой: <a href=”путь к файлу”>Имя ссылки</a> В нашем случае это будут страницы 1t.html, 2t.html, 3t.html, 4t.html и 5t.html. Количество страниц, их название и путь Вы можете указать по Вашему усмотрению.
<tr> <td bgcolor="#CCCC99" width="200" valign="top" > <br><br><center><a href="index.html">Главная</a><br><br> <a href="1t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="2t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="3t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="4t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="5.html"> Ссылка на другую страницу Вашего сайта</a><br><br> </center> </td>
Второй столбец второй строки будет содержать вложенную таблицу с основным содержимым главной страницы и такие параметры: valign=”top” (выравнивание содержимого по верхнему краю) и background=”имя файла” (фоновое изображение). Вы можете не использовать фоновое изображение и оставить ячейку прозрачной, либо залить её любым цветом (bgcolor="код цвета"). Мы же выбрали такой дизайн.
<td valign="top" background="g.jpg"> <!--Задаём вложенную таблицу--> <table > <tr><td><h3>Здесь будет текст вашей главной страницы!</h3></td></tr> </table> </td> </tr> </table> </center> </body> </html>
Закрываем вложенную таблицу, ячейку, строку, основную таблицу, тэг выравнивания, тэг основного содержимого и наконец-то файл html.
Сохраним всё по именем index.html и откроем сохраненный файл в браузере.
Поздравляем!!! Вы создали свою первую полноценную страницу!!!
Но это ещё не всё! Помните мы выделили колонку для ссылок? Там есть переходы на другие страницы… Так вот давайте сделаем еще одну страничку и свяжем её с главной.
Это совсем не сложно! Создадим новый файл в блокноте (или другом редакторе, который Вы используете) и дадим ему имя (в нашем случае 1t.html).
Для того, чтобы дизайн другой страницы не отличался от главной можно просто скопировать код с index.html в новый файл и внести туда необходимые изменения, например:
<html> <head> <title>Мой первый сайт/Другая страница Вашего сайта</title> </head> <body> <center> <table border="1" width="1200" height="900"> <tr> <td colspan="2" bgcolor="#666633" width="200" height="120"><center><h1>Название Вашего сайта</h1></center></td> </tr> <tr> <td bgcolor="#CCCC99" width="200" valign="top" > <br><br><center><a href="index.html">Главная</a><br><br> <a href="1t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="2t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="3t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="4t.html"> Ссылка на другую страницу Вашего сайта</a><br><br> <a href="5.html"> Ссылка на другую страницу Вашего сайта</a><br><br> </center> </td> <td background="путь" valign="top"> <table > <tr><td><h3>Здесь будет текст другой страницы Вашего сайта!</h3></td></tr> </table> </td> </tr> </table> </center> </body> </html>
Особых изменений тут не произошло. Разве что мы изменили <title></title> и содержание вложенной таблицы:
<table > <tr> <td> <h3>Здесь будет текст другой страницы Вашего сайта!</h3> </td> </tr> </table>
Теперь можете сохранить этот файл и в браузере на главной странице Вашего сайта кликнуть по первой ссылке «Ссылка на другую страницу Вашего сайта».
Ура!!! Переход осуществился, а это значит, что наш код работает и, таким образом Вы можете добавить любое количество страниц.
Важно!!! Не забывайте прописывать путь перехода и название для ссылки на новую страницу в <a href="путь"> Имя новой ссылки</a><br><br> для каждой страницы, на которую должен быть этот переход!!!
На этом наш урок окончен! Всем удачи! До встречи на следующем уроке!
- Урок 1. Знакомство с HTML. Теория.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 14. Создаём кнопку в CSS.
- Урок 3. Форматирование текста
- Урок 2. Создание первой HTML страницы.
- Урок 4. Добавление изображения.
- Урок 5. Работа с таблицами.
- Урок 8. Табличный дизайн сайта.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 7. Работа с таблицами. Теория. Часть 3.
- Урок 14. Создаём кнопку в CSS.
- Урок 2. Установка и настройка Denwer.
- Урок 6. Работа с таблицами. Часть 2.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 4. Добавление изображения.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
Да уж, пока сам на практике не попробуешь, ничего не поймешь. Я эти статьи сначала прочитала, но как-то многое осталось непонятным, а потом методом проб и ошибок, в конце концов разобралась, можно порадоваться.
Спасибо, конечно, за такое разжевывание, это как раз для моих мозгов. Статьи очень познавательны, хорошо что я попала именно на них, когда решила сделать свой сайт.
Спасибо за урок,всё очень понятно написано.У меня почему-то постоянно возникают проблемы с таблицами.Хотелось бы ещё подробно узнать как сделать возможным редактирование созданной таблицы.
Очень подробно все объяснено, несомненно, начинающий веб-мастер должен знать основы табличного дизайна, а уж потом переходить к блокам css
Раньше я уже сталкивался с табличным методом, правда приходилось брать код с готовой страницы и методом проб и ошибок подгонять его под свою страничку. А теперь, благодаря столь подробному разъяснению, многое стало понятным.