logo

Колонка меню сайта

Урок - 7

Создание колонки для меню

Теперь попробуем сделать колонку для меню. Колонка будет располагаться с левой стороны. Придётся немного подкорректировать код шаблона. Для начала посмотрите на рисунок, на котором цифрами обозначены все рисунки шапки шаблона.<

А теперь посмотрим общий код шаблона с обозначенными кодами этих рисунков

У нас получается две линии три колонки рисунков. В коде обозначены линии. Поскольку мы будем делать колонку на контентной части шаблона, то обратим внимание на код с текстом контента:

Обратим внимание на такой параметр как colspan="3". Colspan объединяет ячейки в одной строке. Белая контентная часть занимала все три ячейки, вот в коде и было прописано colspan="3". Теперь нам надо освободить одну ячейку для колонки меню. Для этого вместо colspan="3" надо прописать colspan="2".

Теперь определяемся с шириной колонки. Поскольку колонка будет слева, то ширина её должна равняться ширине картинок 1 и 4, чтобы шаблон не разъехался.


< img src="images/index_01.gif" width="252" height="126" alt="" >

< img src="images/index_04.gif" width="252" height="126" alt="" >


Отсюда видно, что ширина колонки будет 252 пикселя. Теперь прописываем код ячейки -

< td width=''252'' align=''center'' bgcolor=''#1E90FF'' >Меню сайта< /td >

где

width — ширина колонки
align=''center'' — надпись «Меню сайта» располагается по середине
bgcolor — цвет колонки

Добавим в код еще один атрибут valign="top", чтобы надпись «Меню сайта» находилась вверху колонки

< td width=''252'' align=''center'' valign="top" bgcolor=''#1E90FF'' >Меню сайта< /td >

Теперь добавим этот код в код контентной части, после открывающего тега< tr >


< tr >
< td width="252" align="center" valign="top" bgcolor="#1E90FF" >Меню сайта< /td >
< td width="1000" height="698" colspan="2" valign="top" >На данном сайте вы найдёте
очень много способов заработка в интернете< /td >
< /tr >


А если будете делать колонку справа, то код колонки поставите перед закрывающим тегом < /tr >. Теперь посмотрите как будет выглядеть общий код шаблона:

Общий вид получившегося шаблона:

В итоге получился простенький шаблон. Поняв принцип его создания, можно дальше работать над ним. Это будет зависеть от Ваших знаний и желания. На этом пока остановлюсь, но продолжение будет. В следующих уроках хочу затронуть темы о жестком и резиновом шаблоне сайта, о независимых таблицах, о том как добавить фон в бордюры жесткого сайта. Следите за продолжением.

Колонка меню сайта обновлено: Апрель 10, 2017 автором: admin

Оставить комментарий

▲Вверх