Ваш IP: 54.92.197.82

Главная » Делаем шаблон сайта » Доработка шаблона

Доработка шаблона

Урок - 5

Дорабатываем шаблон в Dreamweaver

Для доработки шаблона воспользуемся html-редактором Adobe Dreamweaver. Я пользуюсь Dreamweaver 8. Можно и другим редактором, но на этом удобнее, т. к. есть возможность работать сразу в двух окнах, видеть одновременно код и дизайн шаблона. Удобно, когда редактируя код можно сразу видеть как меняется шаблон.

Открываем в программе файл index.html, который создали на прошлом уроке. Мы видим код своего шаблона, он выглядит так:

<html>
<head>
<title>№1</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″/>
</head>
<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin="0″ marginwidth=”0″ marginheight=”0″>
<table id=”________01″ width=”1000″ height=”1000″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<img src=”images/index_01.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_02.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_03.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td>
<img src=”images/index_04.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_05.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_06.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_07.gif” width=”1000″ height=”698″ alt=”"/></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_08.jpg” width=”1000″ height=”50″ alt=”"/></td>
</tr>
</table>
</body>
</html>

Для начала надо удалить лишние записи и прописать между тегами название сайта.

<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″>
<table id=”________01″ width=”1000″ height=”1000″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<img src=”images/index_01.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_02.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_03.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td>
<img src=”images/index_04.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_05.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_06.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_07.gif” width=”1000″ height=”698″ alt=”"/></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_08.jpg” width=”1000″ height=”50″ alt=”"/></td>
</tr>
</table>
</body>
</html>

Теперь необходимо отцентрировать сайт. Для этого надо прописать теги < center > и < /center >. Тег < center > прописываем после открывающего тега < body >, а закрывающий тег < /center > перед закрывающим тегом < /body >. Теперь код будет выглядеть так:

<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=”1000″ height=”1000″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<img src=”images/index_01.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_02.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_03.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td>
<img src=”images/index_04.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_05.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_06.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_07.gif” width=”1000″ height=”698″ alt=”"/></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_08.jpg” width=”1000″ height=”50″ alt=”"/></td>
</tr>
</table>
</center>
</body>

Теперь если посмотреть, то в браузере сайт будет находиться по центру. Пока мы не сможем наполнять сайт содержимым, т. к. в той части, где должен быть контент, у нас находится белое изображение. Его надо удалить и оставить только размеры ячейки, в которой находится картинка. Щелкнув в редакторе по белой картинке ниже шапки, автоматически выделится код этой картинки.

Код ячейки увидите выше кода картинки, он выглядит так - <td colspan="3"> и код самой картинки - <img src="images/index_07.gif" width="1000" height="698" alt="">. Размеры картинки вписываем в ячейку - <td colspan="3" width="1000" height="698">, а код изображения смело удаляем. Теперь полный код будет выглядеть так:

<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=”1000″ height=”1000″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<img src=”images/index_01.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_02.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_03.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td>
<img src=”images/index_04.gif” width=”252″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_05.gif” width=”548″ height=”126″ alt=”"/></td>
<td>
<img src=”images/index_06.gif” width=”200″ height=”126″ alt=”"/></td>
</tr>
<tr>
<td colspan=”3″ width=”1000″ height=”698″></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_08.jpg” width=”1000″ height=”50″ alt=”"/></td>
</tr>
</table>
</center>
</body>
</html>

Теперь можно что-то написать в контентной части шаблона, к примеру — «На данном сайте вы найдёте очень много способов заработка в интернете». Только вот текст расположится по середине контентной части.

Для того, чтобы текст начинался сверху сделаем одну настройку. Делаем клик по области текста и смотрим в нижнее окно программы — Рroperties (свойства) и там поменяем одно значение, где выставляем — Тор

тор

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

код
Вот и всё, теперь вписываемый контент будет располагаться правильно

Доработка шаблона обновлено: Ноябрь 29, 2015 автором: admin