Урок 2-ой: делаем простенький макет
Привет друзья. Я извиняюсь, что так долго писал второй урок, к сожалению, не могу пока пообещать, что уроки будут выходить быстро, потому что помимо этого блога я сейчас занимаюсь еще несколькими и, соответственно, времени не остается, совсем учитывая то, что еще и оффлайн работа нагружает. Тем не менее, сегодня мы с вами разберем, что такое таблицы и уже сделаем каркас для нашей будущей главной странички. Советую кстати вам уже задумываться на счет тематики сайта, который вы планируете сделать.
От себя могу дать совет, что сделайте что-нибудь простенькое, я вот, например, буду делать сайт по теме форекса, но не потому что хочу заработать много денег, а просто как пример. На развитие еще одного сайта у меня сейчас точно времени не будет. Вы же если хотите развивать сайт, то можете сразу сделать что-нибудь над, чем потом будете работать в плане раскрутки. Итак, переходим непосредственно к изучению таблиц.
В конце у нас с вами получится примерно вот такой макет нашего будущего сайта.
Что такое таблица и как построить таблицу
Все таблицы, которые строятся при помощи html, записываются вот такими тегами <table> причем учтите что таблица всегда должна иметь закрывающий тег, иначе ничего хорошего из этого не получится. Изначально, все таблицы задаются без рамок, т.е если вы напишете просто теги и внутри какую-либо информацию, то она просто будет отображаться ,без каких-либо границ, однако для того чтобы сделать рамку видимой, как на рисунке, нам понадобится прописать в таблице вот такой атрибут border=»1px», который говорит что рамка таблицы (border в переводе с английского рамка) равна 1px.
Однако того что вы напишете два тега <table> мало, необходимо чтобы у таблицы были ячейки, давайте разберемся как их записывают.
Построение ячеек в таблице
Итак, ячейки таблицы состоят из рядов и столбцов. Ряды записываются тегами <tr> а столбцы тегами <td>. Таким образом, если мы напишем:
<table border="1"> <tr> <td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td> </tr> <tr> <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> </tr> </table>
то браузер отобразит нам примерно такую картинку:
Итак, как рисовать ячейки мы разобрались, теперь давайте разберемся, как объединить ячейки, потому что иногда это тоже бывает очень нужным. Итак, за объединение ячеек отвечают такие атрибуты как colspan и rowspan
Colspan объединяет ячейки по горизонтали, а rowspan по вертикали. Таким образом, если написать вот такой код:
<table border="1"> <tr> <td colspan="2">ряд 1 ячейка 1+2</td> </tr> <tr> <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> </tr> </table>
то получим вот такую картинку:
<table border="1"> <tr> <td rowspan="2">Ячейка 1, ряд 1+2</td> <td>ряд1 ячейка2</td> </tr> <tr> <td>ряд 2 ячейка 2</td> </tr> </table>
то получим вот такую картинку:
Я намерено все рисую, чтобы было нагляднее. Кто сомневается в правильности кода, то скопируйте любой код в блокнот и сохраните страницу как html документ, как это делать я говорил в первом уроке. После того откройте файл в браузере и увидите что получиться.
После того как разобрались с объединением ячеек идем дальше.
Внутренние и внешние отступы в ячейках
Ячейки также можно редактировать, задавая им отступы как внутренние, так и внешние. Делается это при помощи атрибутов CELLPADDING и CELLSPACING. cellpading отвечает за внутренние отступы, а cellspacing за внешниее. Для наглядности смотрите картинку.
И в завершении теоретической части расскажу еще про выравнивание в ячейках, а также как задать фон определенной ячейке.
Как задать выравнивание и фон ячейки таблицы
Так вот:
ALIGN — задает выравнивание по горизонтали, может иметь три значения center left right и center по умолчанию выравнивание идет по левому краю
VALIGN — задает выравнивание по вертикали, может принимать значения top bottom middle. первое прижимает содержимое к верху ячейки второе свойство к низу ну и третье выравнивает его по центру.
BGCOLOR — задает цвет фона ячейки. Цвета можно задавать как в шестнадцатеричном значении так и словами, но об этом позже.
BACKGROUND — позволяет задавать фоновое изображение для ячеек.
С этими всеми свойствами мы наглядно столкнемся уже на практике, когда будем задавать стили нашему сайту. А сейчас собственно давайте сделаем наш с вами первый макет. Для этого пишем такой код, используя все навыки которые мы с вами прошли сегодня и в прошлом уроке.
Вот что получилось у меня:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <!--Голова--> <head> <title>Моя первая страничка</title> </head> <!--Конец головы начало тела--> <body> <h1>Наш первый макет сайта</h1> <!--Начало таблицы--> <table width="100%" height="600px" border="1px"> <tr> <!--Начало логотипа--> <td width="200px" align="center"> логотип </td> <!--конец логотипа начало лозунга--> <td align="center" colspan="2"> лозунг нашего сайта </td> <!--конец лозунга начало тела макета--> </tr> <tr> <!--Начало левого сайдбара--> <td width="200px" align="center" height="300px"> левый сайдбар </td> <!--Начало контента и конец сайдбара левого--> <td align="center" height="300px"> основной контент </td> <!--Начало правого сайдбара и конец контента--> <td width="200px" align="center" height="300px"> правый сайдбар </td> </tr> <!--конец тела макета и начало подвала--> <tr> <td colspan="3" align="center"> подвал </td> </tr> <!--конец подвала--> </table> </body> </html>
Заметьте, что я использовал атрибут collspan, который объединил две ячейки в шапке, а ячейка подвала вообще расширена на 3 места. Этот макет называется резиновый. Я задал только ширину и двух сайдбаров по 200px тем самым основной контент у нас растягивается, можете поизменять окно браузера и посмотреть, что получиться.
Если вам по каким-то причинам не нравится табличный макет, то я также разбирал в одной из своих статей как верстать на дивах, можно почитать ее. Ну а на сегодня у меня все спасибо за внимание в следующем уроке мы начнем разбирать стили css, а также уже наполним нашу главную страницу. Следите за обновлениями.
После того как закончим курс, можете уже начинать экспериментировать с более сложными сайтами. Ведь если вы научитесь делать простые сайты, то вам нужно будет идти дальше и узнавать, например, что такое разработка корпоративных сайтов, потому что там крутятся хорошие деньги.