Урок — 5
Дорабатываем шаблон в Dreamweaver
Для доработки шаблона воспользуемся html-редактором Adobe Dreamweaver. Я пользуюсь Dreamweaver 8. Можно и другим редактором, но на этом удобнее, т. к. есть возможность работать сразу в двух окнах, видеть одновременно код и дизайн шаблона. Удобно, когда редактируя код можно сразу видеть как меняется шаблон.
Открываем в программе файл index.html, который создали на прошлом уроке. Мы видим код своего шаблона, он выглядит так:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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> |
Для начала надо удалить лишние записи и прописать между тегами название сайта.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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 >. Теперь код будет выглядеть так:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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″>, а код изображения смело удаляем. Теперь полный код будет выглядеть так:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <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»
Вот и всё, теперь вписываемый контент будет располагаться правильно
Читайте в следующих уроках
Статья была полезной?