Главная Заказать статью Связь с автором Заказать сайт Статьи Сказать спасибо

Доработка сайта в Dreamweaver - добавление колонки меню

Вот как выглядит наш сайт:

Сделаем еще одну колонку для меню сайта.

в теге <td width="750" height="517" colspan="3" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td> меняем colspan="3" на colspan="2" и удаляем width="750"

Colspan объединяет ячейки в одной строке. До этого, когда у нас был параметр colspan="3", у нас белая ячейка с контентом обхватывала три ячейки шапки, то есть была шириной в 750 пикселей (177+359+214 =750). После того, как мы пропишем colspan="2" в ячейке с контентом, мы скажем, что нам нужна данная ячейка шириной в две первые колонки (177+359=536). Тем самым мы освободим место под третьей колонкой (ячейкой) для вставки колонки меню. (Внимание! Я думаю, что у начинающих будет возникать следующая проблема: Если у вас имеется три ячейки: <td>1</td> <td>2</td> <td>3</td> и вы объединяете две ячейки в одну, то необходимо удалить лишнюю ячейку, так как у вас после объединения остаются только две ячейки: <td colspan="2">1</td> <td>2</td>)

В подробностях про объединение ячеек таблицы в html.

Теперь смотрим ширину изображений (3 и 6), находящихся в третьей колонке (изображения с компьютером):

<img src="images/index_03.jpg" width="214" height="87" alt=""> и <img src="images/index_06.jpg" width="214" height="101" alt="">

Важно, чтобы ширина этих изображений совпадала с шириной колонки меню, чтобы дизайн не разъезжался, итак, у нас она 214 пикселей.

Теперь вставляем ячейку сразу после закрывающегося тега </td> ячейки с контентом. Пишем код колонки <td width="214" align="center" bgcolor="daffbc">Меню сайта</td> - сразу добавляем align="center" - выравнивание по центру, пишем цвет фона bgcolor="#daffbc"

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="750" height="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td>
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td>
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td>
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td><img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
<tr>
<td width="750" height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

return_links(1); ?>

Далее

Уроки по созданию дизайна сайта в Photoshop
Добавление картинки в дизайн сайта
Добавление второго изображения в дизайн нашего сайта
Усложнение дизайна сайта добавлением картинки
Изменение контрастности изображения. Работа с текстом
Нарезка готового дизайна сайта в Photoshop
Доработка сайта в Adobe Dreamweaver CS3 после нарезки дизайна в фотошопе
Продолжаем работу над сайтом в Adobe Dreamweaver CS3
Дорабатываем html-код сайта в Adobe Dreamweaver CS3
Доработка сайта в Dreamweaver - добавление колонки меню
Резиновый дизайн - заканчиваем работу над сайтом в Dreamweaver
Чтобы дизайн сайта не разъехался в google chrome и safari
Жесткий дизайн сайта
Добавляем независимую таблицу в код - создаем бордюры
Убираем ненужные параметры
Добавление бэкграунда в бордюры сайта
Не отображается бэкграунд в пустой ячейке таблицы

return_links(); ?>



cubass - копирайтер на TextSale.ru Рейтинг@Mail.ru Rambler's Top100 PR-CY.ru

© 2009-2012 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!