Далее нам необходимо, чтобы текст располагался не посередине, как у
нас сейчас, а начинался сверху. Щелкаем правой кнопкой по области с
нашим текстом, идем в свойства и меняем там значение по вертикали по
верхнему краю.
Также заметьте, что у нас в коде появилась запись 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">
в свойствах жмем на папку рядом с "фон"
электрические духовые шкафы Indesit
идем в папку 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>
|