|
|
Интересные статьи
|
|
|
|
|
Располагаем элементы на странице. 
В начале этого урока мы снова поговорим о структуре сайта. Связано это с тем, что сегодня мы будем вставлять картинки на нашу страницу и необходимо понять, где мы будем их хранить. Скоро вы убедитесь, что это важно.
Наш сайт сейчас состоит из одной html-страницы, сегодня к ней добавятся картинки, в следующем уроке - еще пару страниц. В принципе все это можно хранить в одной папке, но представьте, что этих страниц у вас стало много, и к каждой прилагается картинка, а то и не одна. Кроме того, развиваясь и обучаясь, вы можете захотеть использовать и другие web-технологии, например, css, javascript, php. Если все это складывать в одну папку, то вскоре вы и сами не разберетесь, что здесь к чему. Поэтому организуем сразу правильную структуру хранения для нашего сайта.
Шаг 1.
На любом диске вашего компьютера заведите папку и назовите ее, например site.
В этой папке создайте папку под названием images (здесь мы будем хранить картинки) и страницу index.html.
У вас должна получиться следующая структура:
Для начала нам этого достаточно. Имейте в виду, что все последующие примеры будут правильно работать именно для такой структуры папок. Если у вас они расположены по-другому, то вам придется кое-что менять в коде.
Шаг 2.
С помощью HTML можно осуществить верстку сайта двумя способами - табличным и блочным. В основе первого лежит таблица (теги <table> </table>), в основе второго - блоки (теги <div> </div>). Сегодня мы рассмотрим первый способ.
А делать мы будем вот такую страницу.
Давайте посмотрим из чего она состоит:
Вот мы и разделили нашу страницу на структурные элементы. Как известно, таблица состоит из строк и столбцов, образуя ячейки. Наша страничка, как видно из рисунка, состоит из 5 строк и 2 столбцов. Каждый элемент нашей страницы будет располагаться в своей ячейке таблицы.
Для продолжения вам понадобятся картинки, скачайте их здесь и положите в папку images, которую создали ранее (только картинки, а не папку с ними).
Теперь можно перенести все это в HTML.
Шаг 3.
Откройте в блокноте, созданную сегодня страничку index.html и наберите в ней (или скопируйте) основу html-страницы, т.е.
<html>
<head>
<title> Моя первая страница </title>
</head>
<body>
</body>
</html> Теперь в теги <body> </body> вставим каркас таблицы, а именно
<html>
<head>
<title> Моя первая страница </title>
</head>
<body>
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</body>
</html> Здесь теги <table> </table> означают начало и конец таблицы, а теги <tr> </tr> - строки в ней. У нас 5 строк, а потому и 5 пары тегов строк.
Далее. У нас 2 столбца, за обозначение столбцов отвечают теги <td> </td> , но посмотрите на картинку, где их действительно два? Только в четвертой строке (где блок новостей и контент), в эту строку мы и поместим две пары тегов столбцов. А в остальных строках столбец один, как бы включающий в себя два. На такой случай у тега <td> есть атрибут colspan, объединяющий столько столбцов, сколько необходимо. В нашем случае их 2, так и напишем colspan="2".
Теперь ваша страница должна выглядеть так.
<html>
<head>
<title> Моя первая страница </title>
</head>
<body>
<table>
<tr><td colspan="2"> Здесь будет шапка сайта</td></tr>
<tr><td colspan="2"> Здесь будет меню сайта</td></tr>
<tr><td colspan="2"> Здесь будет шапка блока новостей</td></tr>
<tr><td>Здесь - блок новостей </td> <td>Здесь - контент</td> </tr>
<tr><td colspan="2">Здесь - низ сайта</td></tr>
</table>
</body>
</html> Если сейчас вы посмотрите на нашу страничку в браузере, то увидите, что она очень маленькая. Это связано с тем, что у нашей таблицы нет размера, она меняется в зависимости от содержимого. Не очень удобно. Давайте зададим размеры. За это отвечают два атрибута: width - за ширину, height - за высоту.
Наша картинка шапки имеет размеры 780 Х 165, их мы и зададим для соответствующей ячейки. Строка меню должна иметь такую же ширину, а высоту - как у соответствующей картинки, т.е. 38. Ширина шапки блока новостей равна также 780, а высота - 33 (как у соответствующей картинки). Ширина блока новостей и контента должны в сумме давать те же 780 (отведем 200 на новости, а 580 - на контент), а высоту зададим 320 (просто для удобства). Строка низа сайта аналогична строке с меню, т.е. 780 Х 38.
<html>
<head>
<title> Моя первая страница </title>
</head>
<body>
<table>
<tr> <td colspan="2" width="780" height="165"> Здесь будет шапка сайта </td> </tr>
<tr> <td colspan="2" width="780" height="38"> Здесь будет меню </td> </tr>
<tr> <td colspan="2" width="780" height="33"> Здесь будет шапка блока новостей </td> </tr>
<tr> <td width="200" height="320"> Здесь - блок новостей </td> <td width="580" height="320"> Здесь - контент </td> </tr>
<tr> <td colspan="2" width="780" height="38"> Здесь - низ сайта </td> </tr>
</table>
</body>
</html> Теперь самое время вставить вместо слов "Здесь будет шапка" саму картинку шапки и сделать так для всех осталных ячеек, но есть один нюанс. В остальных блоках мы собираемся что-то писать поверх картинок, т.е. наши картинки должны быть в них фоном. Для этого у столбцов существует атрибут background, в качестве значения которого мы и укажем соответствующие картинки.
Наши картинки лежит в папке images. Поэтому путь к ним будет выглядеть так: background="images/имя картинки". Если у вас другая структура хранения страниц и картинок, то вам следует указать ваш путь к картинке.
Наконец, у блока новостей и контента нет фоновых картинок, поэтому в них используем уже знакомый тег bgcolor, где укажем номер цвета. Источник: http://www.site-do.ru
|
|
|
Соединяем html-страницы между собой
Посмотрите на них в браузере, пощелкайте по ссылкам и убедитесь, что они стали белыми и в адресной строке с каждым переходом меняется адрес html-страницы |
|
|
|
|