- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
В этой главе мы будем учиться верстать страницу нашего сайта. Т.е. мы применим все полученные знания, чтобы сделать сайт, который уже можно будет показать в сети. Верстать сайт будем на основе таблиц. Структура сайта показана на рис.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.