- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Добро пожаловать в видеоурок, посвященный
табличной верстке сайта. Изучив 12 урок по
HTML, Вы уже должны уметь работать с
таблицами. Сейчас же, мы познакомимся с табличной версткой. Наш сайт будет основан на большой таблице. Сверху у нас будет шапка сайта (наверняка вы уже видели такие сайты). Там будет располагаться логотип и еще что-нибудь. Внизу будет футер. Там будут
копирайты и годы жизни сайта. Слева – меню, справа – контент.
Как сверстать сайт? (Табличная верстка)
Давайте перейдем на рабочий стол и создадим еще одну папку. Папка будет называться site2. Поместим в нее два изображения, которые я подготовил для этого видеоурока: footer.png и logo.png. Также давайте скопируем файл index.html из папки site в папку site2. Чтобы скопировать, вы можете нажать правой клавишей мыши на файле и выбрать «копировать» либо использовать комбинацию горячих клавиш Ctrl+C. Чтобы вставить, можно нажать правой клавишей мыши и выбрать «Вставить» либо использовать Ctrl+V.
Теперь давайте откроем наш индексный файл через notepad, удалим все лишнее и ненужное нам, начиная с первой строки, размещенной в тегах <body></body>.
01 | <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN"> |
04 | <title>Главная страница</title> |
05 | <meta http-equiv="Content-Language" content="ru"> |
06 | <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> |
07 | <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт"> |
08 | <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net"> |
Теперь создадим нашу таблицу. Пропишем ей ширину в 800 пикселей. Можно прописать и в процентах: 100%, 90%, 80% — на ваше усмотрение. Я прописываю 800 пикселей, так как наш логотип будет шириной в 800 пикселей. Далее прописываем первую строку – это будет шапка сайта. Насколько мы помним, после шапки сайта идет меню и контент, то есть два столбца. Поэтому нам сейчас надо прописать один столбец для нашей шапки и, с помощью атрибута colspan разбить его на два. В первую строку помещаем наше изображение. Так как изображение находится в корневой папке, то путь прописываем просто “logo.png”. Зададим ширину изображения 800 пикселей и высоту – 100 пикселей. Кстати, нашей строке мы тоже можем задать ширину и высоту. Но ширину нет смысла задавать, так как она у нас задана уже в таблице. Зададим просто высоту.
3 | <td colspan="2"><img src="logo.png" width="800" height="100"></td> |
Теперь давайте создадим вторую строку. Это меню и контент. У нас здесь будет два столбца. Мы их оба пропишем. Сначала первый. Это меню. В ссылке я прописываю решетку. Это значит, что наша ссылка никуда не будет нас перенаправлять при нажатии на нее – оставит нас на нашей же странице. Вставим для наглядности несколько ссылок.
4 | <p><a href="#">Ссылка №1</a><p> |
5 | <p><a href="#">Ссылка №2</a><p> |
6 | <p><a href="#">Ссылка №3</a><p> |
7 | <p><a href="#">Ссылка №4</a><p> |
Кстати, нам нужно задать для левого блока «Меню» ширину. Пусть будет 200 пикселей. Для второго блока ширину можно не задавать.
4 | <p><a href="#">Ссылка №1</a><p> |
5 | <p><a href="#">Ссылка №2</a><p> |
6 | <p><a href="#">Ссылка №3</a><p> |
7 | <p><a href="#">Ссылка №4</a><p> |
Теперь займемся контентом. Пишем в нем любой текст. Ширину поставим 600.
2 | <p>Добро пожаловать на наш сайт. |
3 | Читайте наши новости каждый день и получите подарок от автора.</p> |
И создаем последнюю нашу строку – футер. Зададим ему высоту 20 пикселей, атрибут colspan =2 и пропишем путь до изображения footer.png. Не забудьте положить все изображения, которые я добавил к этому видеоуроку в корневую папку сайта, иначе они у вас не отобразятся. Либо вы можете положить их в любую другую папку и указать к ней путь. Только учтите, что придется указывать этот путь перед указанием имени самого изображения. Установим изображению высоту 20 пикселей и ширину 800 пикселей.
2 | <td colspan="2"><img src="footer.png" width="800" height="20"></td> |
Всё. Сохраняем и проверяем в браузере. Как мы видим, у нас табличная верстка получилась. Давайте создадим рамку, чтобы разделить блоки.
Переходим в код, прописываем таблице рамку.
1 | <table width="800" border="1" cellspacing="0" cellpadding="0"> |
Сохраняем, проверяем в браузере. Ну вот, более-менее.
Давайте сделаем выравнивание нашего текста по центру с помощью атрибута align. Также отцентрируем нашу табличку.
2 | <td align="center" width="200"> |
1 | <td align="center" width="600"> |
2 | <p>Добро пожаловать на наш сайт. |
1 | <table align="center" width="800" border="1" cellspacing="0" cellpadding="0"> |
Сохраняем, проверяем в браузере. Все получилось. Но тексту в контенте можно придать вертикальное выравнивание.
Перейдем в код.
1 | <td align="center" valign="top" width="600"> |
2 | <p>Добро пожаловать на наш сайт. |
Сохраним, проверим. Теперь все хорошо.
Хотя задачей данного видеоурока было рассмотрение табличной верстки сайта, мы к тому же отработали теги, которые изучили в прошлом видеоуроке.
Давайте создадим процентную таблицу. Пусть она будет на всю ширину экрана. Скопируем текст контента из прошлой индексной странички. Наша задача – создать таблицу в процентах. Как это сделать? Для начала нужно удалить ширину или просто сделать ее стопроцентной. Но так как мы вверху укажем, что у нас будет 100%-я ширина, то в футере ее прописывать не нужно. Так же с хедером и контентом. Ширину таблицы заменяем на 100%.
1 | <table align="center" width="100%" border="1" cellspacing="0" cellpadding="0"> |
А отображение шапки сайта и футера сделаем с выравнивание по левому краю, чтобы смотрелось симпатичнее.
1 | <td colspan="2"><img align="left" src="logo.png" height="100"></td> |
1 | <td colspan="2"><img align="left" src="footer.png" height="20"></td> |
Сохраняем, проверяем в браузере. Всё получилось, разве что изображение не отображается, так как у нас нет папки site, но это не страшно, потому что мы уже изучили тему «изображения» и можем это исправить.
Давайте сделаем так, чтобы меню было сверху, с помощью вертикального выравнивания.
1 | <td align="center" valign="top" width="200"> |
Сохраним. Посмотрим. В принципе, все. В меню вы можете размещать свои ссылки на какие-нибудь другие странички, и у вас получится уже полноценный статичный сайт. На этом я завершаю данный видеоурок. А вы приступайте к следующему, в котором мы рассмотрим как создавать формы используя HTML.
Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Info-line.net
здравствуйте спасибо за ваши видео уроки по html очень помогли
а где можно скачать footer и logo?
Я очень рад, что они вам помогли.
Так как это был мой первый видеокурс, я этого не предусмотрел
Однако, дополнительные материалы вы найдете в exe-файле видеокурса, который можно скачать здесь — info-line.net/html
Олег, когда я начинала учиться по твоим урокам, то у кого-то в комментариях видела вопрос, как вставить бегущую строку на сайт. Подскажи, пожалуйста. Хочу, чтобы вы сделали урок, как сделать анимированный баннер. Я понимаю, что со временем такой урок будет, но хотелось бы скорее. Вы хорошо объясняете материал, а в сети на данный момент очень мало действительно хороших уроков по изготовлению баннера.
Для создания бегущей строки предназначен тег
<marquee></marquee>. Атрибутыwidthиheightзадают ширину и высоту области прокрутки. Атрибутbgcolorзадает фон полосы прокрутки. Атрибутloopзадает кол-во прокруток. Если вы поставите -1, то содержимое будет прокручиваться бесконечно. Атрибутdirectionзадает направление бегущей строке. Могут быть значения:up | right | down | left. Остальные атрибуты вы можете посмотреть по .Анимированный баннер можно создать при помощи программы GIF Animator. Видеоурок по созданию анимации скорее всего будет в курсе по Adobe Photoshop.
на данный момент урок актуален? ИМХО я сделал все по уроку и такой таблице как у вас не видать что-то, может где и ошибся кину код посмотрите пожалуйста
01<html>02<head>03<title> Первая страница </title>04</head>05<bodybackground="img/background.png"text="white"leftmargin="0"topmargin="0"rightmargin="0">06<tableborder="1"width="100%">07<trheight="20%">08<tdcolspan="2"><imgsrc="img/logo.png"height="200"width="600"></td>09</tr>10</table>11<tr><tdwidth="20%">12<p><ahref="#">url 1</a></p>13<p><ahref="#">url 2</a></p>14<p><ahref="#">url 3</a></p>15<p><ahref="#">url 4</a></p>16<p><ahref="#">url 5</a></p>17</td></tr>18<tdwidth="60%">19<p>kontent</p>20</td>21<trheight="20">22<tdcolspan="2">copyright</td>23</tr>24</table>25</body>26</html>разобрался в чем ошибка была, тут совсем все по другому сказано!
Это радует!) Что именно по другому сказано?
Урок актуален! И будет еще актуален очень долгое время
Ну не совсем сказано, а написано...
01<html>02<head>03<title> Первая страница </title>04</head>05<bodybackground="img/background.png"text="white"leftmargin="0"topmargin="0"rightmargin="0">06<tableborder="1"width="100%">07<trheight="20%">08<tdalign="center"colspan="3"><imgsrc="img/logo.png"height="200"width="600"></td>09</tr>10<tr><tdwidth="20%">11<div>Содержание</div>12<p><ahref="#">url 1</a></p>13<p><ahref="#">url 2</a></p>14<p><ahref="#">url 3</a></p>15<p><ahref="#">url 4</a></p>16<p><ahref="#">url 5</a></p>17</td>18<tdwidth="60%">19<div>Контент</div>20<p>kontent</p>21</td>22<td>banner23</td>24<trheight="20">25<tdcolspan="3">Copyright Демидов Вячеслав</td>26</tr>27</table>28</body>29</html>то что жирным отмечено, то исправило ошибку...
у вас рано table закрывается и tr (тот что после шапки идет, т.е. следущая строка)
я смотрел на
ИМХО не мог видео глянуть, позже все таки посмотрел и на нем все ровно
Понятно. В тексте могут быть допущены ошибки, так как текст пишет другой человек
Видео — первоисточник, в нем каких-то критических ошибок не бывает, так как потом показывается результат. То есть если даже будет ошибка, то она будет сразу замечена и исправлена в видео. Поэтому советую посмотреть все в формате видео, если вдруг возникнут неполадки при работе с текстовым форматом.
скажите почему вот так:
1<ahref="#"rel="nofollow">Ссылка №1</a>Не совсем понял вопрос. Что именно не так? Или что вам объяснить?!
почему тег p не закрывается?
Если вы про текстовый вариант, то дело в том, что в реальном коде было еще продолжение и тег
pзакрывается чуть позже. Это можно увидеть на скрине №10 — info-line.net/wp-content/...y/html_13/10.png.Олег у меня такой вопрос...
Можно ли использовать фотмат изображения .jpg
если можно то как?
Я попробовал у меня на сайте написанно изображения, а его самого нет?
и подскажите есть ли прога которая меня из jpg в png??
Да, можно. Соответственно при вставке изображений пишите уже не .png, а .jpg
Есть, и не одна. Я использую для этого Photoshop.
Что посоветуете, верстать на дивах или таблицах? Я смотрю у Вас на дивах все таки. Если блочная верстка лучше, подскажите чем? А то я уже почти сайт подготовил к выходу и тут задумался.
Табличная верстка (верстка на таблицах):
— Табличная верстка содержит много кода.
— Табличная верстка дольше грузится по причине выше. Также старые браузеры не грузят ее постепенно, а ждут пока загрузится вся таблица, что очень плохо для пользователя, при его слабом интернете.
+ На таблицах сверстать куда проще, чем блоками. Особенно, это касается кроссбраузерности.
Блочная верстка (верстка на дивах):
+ Блочная содержит меньше кода, чем табличная
+ Блоки, в принципе, загружаются быстрее таблиц.
— Блоками сверстать сайт сложнее, чем таблицами. Особенно, это касается кроссбраузерности.
Блочная верстка не только современнее, но и лучше по названным выше причинам. Однако, верстать блоками занимает больше времени, чем таблицами, так как проблем с кроссбраузерностью будет достаточно.
Вот 2 больших, но очень полезных урока по блочной резиновой кроссбраузерной верстке:
Верстка одноколоночного макета
Верстка многоколоночного сайта
А вот и видеоурок по табличной верстке.