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

Дорабатываем html-код сайта в Adobe Dreamweaver CS3

Далее нам необходимо, чтобы текст располагался не посередине, как у нас сейчас, а начинался сверху. Щелкаем правой кнопкой по области с нашим текстом, идем в свойства и меняем там значение по вертикали по верхнему краю.

Также заметьте, что у нас в коде появилась запись valign="top"

Еще нам нужно освободить место для текста в нижней части сайта (в подвале) - в области для копирайтов, и подготовить его для дальнейшей работы. Но здесь немного другая ситуация - у нас там лежит зеленое изображение нашего дизайна, которое мы не можем удалить так, как в предыдущем случае - как то белое изображение.

Есть такая вещь - background, которой мы сейчас воспользуемся, т.е мы наше изображение пустим на задний план. Бекграунд обладает таким свойством, что если изображение маленькое, то оно размножается по всей площади. Для того, чтобы сэкономить на весе нашей страницы, чтобы она быстрее грузилась, мы не будем пускать на задний план целое изображение, а возьмем маленький кусочек и размножим его!
Открываем фотошоп и запускааем наш сохраненный файл сайта. Увеличиваем область, показанную на рисунке. Берем инструмент Рамка

Выделим узкую вертикальную полоску и жмем Enter.

После нажатия Enter мы получим узкую полоску - только выделенную облать, ее нам нужно оптимизировать. Делаем это следующим образом: идем в меню Файл - Сохранить для Web и устройств. В окне оптимизации я оставляю значения по умолчанию, жмем сохранить, выбираем папку с нашим сайтом Yourcomp и сохраняем картинку в папке images. В итоге получаем следующее изображение которое весит всего 344 байта.

Теперь перейдем к Dreamweaver к бекграунду. Находим код нашего изображения, щелкнув по нему в графической части

<tr>
<td colspan="3">
<img src="images/index_08.jpg" width="750" height="45" alt=""></td>
</tr>

Берем размеры изображения и вставляем их в тег <td colspan="3"> получаем следующий код

<tr>
<td colspan="3" width="750" height="45">
<img src="images/index_08.jpg" width="750" height="45" alt=""></td>
</tr>

и прописываем бекграунд, для этого щелкаем в любом месте тега

<td colspan="3" width="750" height="45">

в свойствах жмем на папку рядом с "фон"

return_links(1); ?>

идем в папку images с нашим изображением и открываем его, теперь в коде у нас появилась запись бекграунд и путь к нему, удаляем код изображения и получаем следующее

<tr>
<td width="750" height="45" colspan="3" background="images/kadrir.jpg">
</td>

код у нас выглядит так

<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 width="750" height="517" colspan="3" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
</tr>
<tr>
<td width="750" height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

Далее

Уроки по созданию дизайна сайта в 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 | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!