Главная

Заказать статью

Связь с автором

Заказать сайт

Статьи

Доработка сайта в Adobe Dreamweaver CS3 после нарезки дизайна в фотошопе

Теперь пора перейти к работе с визуальным редактором Adobe Dreamweaver - мощнейший помощник в создании сайтов. Если вы всерьез решили заниматься созданием сайтов, то обязательно установите его себе.

Вот у нас уже есть заготовка сайта и теперь ее следует доработать в Dreamweaver. Хочу обратить ваше внимание, что если вы не знаете основ html, то дальше вы просто не сможете работать, поэтому не забегайте вперед и начните сначала - с изучения основ html. У меня на сайте есть раздел Основы языка html, а также в разделе электронные книги есть учебники по html, также есть замечательная книга moneymaster 1, с помощью которой вы создадите свою первую интернет-страницу и поймете всю суть html, после чего можете смело возвращаться к данному уроку .

Внимание! Если вы уже знаете основы html и имеете в своем арсенале программу Dreamweaver, с помощью которой и будете делать свой сайт, то рекомендую сразу же добавить сайт в программу (зарегистрировать). В дальнейшем вы все равно будете регистрировать сайт и чтобы осваивать все по порядку рекомендую перед началом работы добавить сайт в Dreamweaver.

Я использую Adobe Dreamweaver CS3. Запускаем программу, идем в Файл - Открыть. Заходим в созданную нами папку Yourcomp, открываем нашу html-страницу с именем index.html, которую мы сделали в фотошопе (если вы зарегистрировали сайт в дримвивере, то открыть файл намного проще).

Программа позволяет работать в двух окнах одновременно, т.е. видеть одновременно код и и дизайн, а также работать с каждым окном в отдельности.

Для переключения между экранами используются кнопки на панели.

Вот какой изначально код мы имеем

<html>
<head>
<title>Безимени-6</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="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 colspan="3">
<img src="images/index_07.jpg" width="750" height="517" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_08.jpg" width="750" height="45" 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="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 colspan="3">
<img src="images/index_07.jpg" width="750" height="517" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_08.jpg" width="750" height="45" alt=""></td>
</tr>
</table>

</body>
</html>