Создание основы сайта html Печать E-mail
(7 голоса, среднее 4.29 из 5)
Создание статического сайта - Самостоятельное создание сайта html

Этап 2. Ядро и каркас сайта.

Прежде чем приступить к созданию каркаса для нашего html сайта, необходимо создать основу, т.е. html-страницу. Для этого выберите в горизонтальном меню «Файл» - «Создать …».

Основа сайта. Создать страницу.

В итоге Вы получите вот такую заготовку:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
</head>
<body>
</body>
</html>

 

 

 

Если Вы работаете в среде отличной от Adobe Dreamweaver CS5, то просто разбирайтесь и копируйте код в свой редактор. Пойдём самым простым путём и будем создавать основу  статического html сайта табличным методом. Перед изучением этого материала можете ознакомиться со статьёй Таблица html.

Приступим.

Давайте сразу определимся с темой нашего html сайта, который мы хотим создать. Это важно по той причине, что нам нужно заполнить очень важный тег <title>, на который смотрят поисковики. В идеале этот тег должен чётко отражать тематику страницы (заголовок 1-го уровня), а на главной странице должен отражать тематику всего сайта. Посему смело, заменяем бессмысленный документ без названия на тему своего самостоятельно создаваемого сайта. Я выбираю <title> Создать сайт самостоятельно</title>.

Выбираем из меню: Вставка – Таблица (Ctrl+Alt+T) или на вкладке Макет значок Таблица:

Вставка – Таблица.

Наша основа сайта будет содержать четыре строки: header (шапка), menu (область главного меню), content (область контента) и footer (подвал). Обойдёмся пока одним столбцом. Следующий параметр, который необходимо задать – это ширина таблицы. Его можно задать либо в процентах, либо в пикселях. Соответственно Вы получите либо резиновую, либо статическую основу. Зададим ширину таблицы 900 пикселей, толщину границы, поля ячеек и интервал ячеек по 0. Ok.

Размер таблицы.

Здесь всё понятно, надеюсь, и очевидно с нулевыми аргументами тега <table>.

В коде имеем:

<body>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>

В дизайне:

Основа таблицы.

В режиме дизайна Вы можете вручную варьировать высоту строк. Для этого следует подвести курсор к границе строк, и дождаться когда он примет вид двунаправленной стрелки, выжать левую кнопку мыши и перемещать вверх/вниз не отпуская, добиваясь необходимой высоты (параметр высоты height в коде при этом будет меняться автоматически). Поэкспериментируйте, создавая различную высоту строк вручную.

Hint in Dreamweaver.

Кстати, Adobe Dreamweaver CS5 снабжён продвинутыми подсказками hint.

Следующее, что мы сделаем, создавая основу сайта, так это область меню в области контента. Что же это за страница, если в ней нет меню?

Устанавливаем курсор в область контента и добавляем уже известным нам способом ещё одну таблицу, которая будет иметь одну строку и два столбца. Ширину давайте зададим 100%.

Фрагмент кода:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="105"> </td>
<td width="750"> </td>
</tr>
</table></td>

 

 

В дизайне вот такой итог:

Таблица в Dreamweaver.

Вот такая у нас получилась основа сайта. Следующим этапом заполним наши header (шапку) и footer (подвал) графическими элементами, которые предварительно необходимо самостоятельно создать для своего сайта в каком либо графическом редакторе, например всеми любимом и популярном Photoshop. Для начала можно позаимствовать графические элементы из какого-либо шаблона и откорректировать их в том же Photoshop.

Я подготовил две картинки: header.jpg – размером 900 на 143 и footer.jpg – 900 на 215. Помните, что использовать следует веб графические форматы, чтобы не перегружать свои страницы излишним весом. Photoshop с этим легко справляется, имея в своём арсенале такую команду, как Файл – Сохранить для Web …

Создадим в папке freesite папку images, куда и поместим наши изображения. У меня получилось так.

Основа сайта. Images.

Сюда мы будем помещать и всю остальную графическую часть, которая будет использоваться для создания сайта.

Откроем локальные файлы создаваемого сайта

Drag and drop.

и используя технологию drag and drop размещаем наши картинки в выбранных местах. Щёлкаем левой кнопкой мыши на изображении Footer.jpg и, удерживая кнопку, перетаскиваем графический объект в область footer (подвал). Аналогично поступаем и с шапкой.

В дизайне будет такой вид:

Основа сайта - header footer.

Когда Вы использовали технологию перетаскивания, автоматически прописался код вставки изображений, который имеет вид:

<img src="file:///C|/freesite/images/Header.jpg" width="900" height="215">
<img src="file:///C|/freesite/images/Footer.jpg" width="900" height="143">

Структура тега img несложна и надеюсь понятна. Тег img имеет известные атрибуты width – ширина и height – высота. Некоторые сложности может вызвать перенос создаваемого сайта на другой сервер из-за указанных путей к изображениям. Хотя это и не сложности вовсе. Если это потребуется, замена на относительный, либо абсолютный путь в программе Adobe Dreamweaver выполняется, например, нехитрой операцией: Найти и заменить … (Ctrl+F) по всему создаваемому сайту или отдельной странице.

Но правильнее будет указать сразу относительный путь.

  • Выбираем в горизонтальном меню Веб-сайт – Управление веб-сайтами.
  • В диалоговом окне Управление сайтами выбираем создаваемый сайт: freesite и нажимаем кнопку Правка …
  • В окне Настройка сайта для Freesite  в Дополнительных настройках, в подпункте Локальная информация устанавливаем: Ссылки относительно корня веб-сайта.
  • Выбираем папку изображений по умолчанию: C:\freesite\images\
  • Сохранить, Да, Готово.

Относительный путь.

В итоге пути к изображениям будут заменены на относительные к корню сайта.

Итоговый код имеет вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Создать сайт самостоятельно</title>
</head>
<body>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="215"><img src="/images/Header.jpg" width="900" height="215"></td>
</tr>
<tr>
<td height="18"> </td>
</tr>
<tr>
<td height="105"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="105"> </td>
<td width="750"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="34"><img src="/images/Footer.jpg" width="900" height="143"></td>
</tr>
</table>
</body>
</html>

 

 

Давайте теперь выделим таблицу в Dreamweaver и на панели свойств укажем расположение её по центру. Кроме того зададим параметр Граница – 1.

Таблица по центру.

Если мы вернёмся к коду, то увидим, что за выравнивание в теге <table> отвечает аргумент align и мы ему присвоили значение center. За границу отвечает аргумент border. В итоге имеем:

<table width="900" border="1" align="center" cellpadding="0" cellspacing="0">

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

Обновлено 10.03.2011 20:23
 
Rambler's Top100
Main page Contacts Search Contacts Search