Уроки создания сайта. Предлагаю Вам пошаговую инструкцию по созданию простейшего сайта с “нуля” своими руками.  В данном уроке мы будем создавать страничку сайта на основе  жесткого табличного дизайна.

Шаг 1. Уроки создания сайта. Устанавливаем сервер на локальном компьютере.

Скачиваем программу Denwer3 здесь. Запускаем программу. После нашего согласия установить программу, появляется DOS меню. Нажимаем Enter. Соглашаемся с директорией установки папки (по умолчанию C:\WebServers). Далее жмем снова Enter. Указываем букву наименования виртуального диска – к примеру Z. Снова Enter. Выбираем режим при котором будет работать наш виртуальный диск. Ставим -1. Далее Enter. Все – процедура закончена.

После установки Denwer на нашем компьютере появился виртуальный диск Z, где в директории Z:\home\localhost\www\ мы будем создавать папку с нашим сайтом.

Шаг 2. Уроки создания сайта. Определяем сайт в программе Adobe Dreamweaver.

В директории Z:\home\localhost\www (либо C:\WebServers\home\localhost\www\, что одно и тоже) создаем папку нашего сайта, назвав ее, к примеру «htmlsite».

Открываем программу Adobe Dreamweaver, на вкладке справа находим Менеджер сайтов.

Создаем новый сайт. В появившемся окне определяем название сайта, папку, в которой будет располагаться материалы сайта (только что созданная нами папка htmlsite. Жмем: Сохранить, Готово.

Шаг 3. Уроки создания сайта. Определяем кодировку файлов программы Adobe Dreamweaver.

На вкладке Редактирование выбираем пункт Свойства (Настройки) – Новый документ выбираем Тип документа: HTML 4.01 Transitional, кодировку Кириллица (Windows). Код в файле при таком выборе будет: windows-1251.

Шаг 4. Уроки создания сайта. Создаем первый html-файл нашего сайта.

Создаем новый php-файл, сохраняем его как index.html. Это будет основной файл сайта, с которого будет происходить вся загрузка.

Шаг 5. Уроки создания сайта. Создаем таблицу стилей.

Создаем новый CSS-файл. Сохраняем его как «style.css». Здесь будут храниться стили, которые будут придавать красоту нашему сайту.

Шаг 6. Уроки создания сайта. Подцепляем таблицу стилей к файлу index.php.

В файле index.html переходим на вкладку Дизайн (Проект). На нижней панели выбираем Стили и на выпадающем списке выбираем: Подцепить таблицу стилей, и в появившемся окне указываем наш файл style.css.

Шаг. 7. Уроки создания сайта. Создаем каркас сайта

Я буду создавать каркас сайта шириной 846 пикселей. Вы можете установить любые свои размеры.

Итак, в файле index.html. создаем таблицу, состоящую из 3 строк и 1 столбца. Ширина таблицы в моем случае 846 пикселей. ОК. Выравниваем таблицу по центру через атрибут Выравнивание. Ставим фоновый цвет таблице – белый.

В файле style.css пропишем окантовку таблицу – каркаса сайта:

.main_border {border: 1px solid #000000;}

(толщиной 1 пиксель, сплошная, черная).

В файле index.html на нижней вкладке выбираем table и присваиваем класс main_border.

Пропишем стили для всех тестовых абзацев сайта, для чего в файле style.css создадим стиль:

p {font-family:Verdana; font-size:12px; margin:15px;}

Шаг 8. Уроки создания сайта. Создаем шапку и футер сайта.

Открываем программу Adobe Photoshop. Создаем новый файл (мои размеры – 846 на 100 пикселей). Создаем графический рисунок с названием сайта и доменным именем (на свой вкус).

Для создания футера (нижней графической части сайта создаем новый файл (мои размеры – 846 на 20 пикселей) и также создаем графический рисунок на свой вкус.

В директории Z:\home\localhost\www\ phpsite создаем папку img, куда сохраняем созданные в программе шапку и футер сайта в формате jpg. При сохранении в программе Adobe Photoshop используем меню Сохранить для Web.

Переходим в программу Adobe Dreamweaver, открываем index.html. Перетаскиваем графический рисунок шапки сайта из папки img в верхнюю строчку таблицы, графический рисунок футера – в нижнюю строчку.

Шаг 9. Уроки создания сайта. Добавляем фон сайта.

Открываем программу Adobe Photoshop. Создаем новый файл (мои размеры – 50 на 50 пикселей). Заполняем его любым фоном на свой вкус и сохраняем для Web как bg.jpg. в папке img.

Переходим в программу Adobe Dreamweaver, открываем файл style.css и прописываем в нем фоновый стиль:

body {background-image:url(img/bg. jpg)}

Шаг 10. Уроки создания сайта. Проверяем работает ли создаваемый нами сайт.

Запускаем Denwer, нажав на ярлык Start servers. Набираем в адресной строке браузера: http://localhost/ htmlsite

Шаг 11. Уроки создания сайта. Создаем навигационную и контентную части сайта.

Переходим в среднюю строку таблицы, ставим ей вертикальное выравнивание – по верху и создаем в ней еще одну таблицу, состоящую из 1 строки и 2 столбцов, размером 100%. Первый столбец мы будем использовать в качестве навигационной панели. Его правую ограничительную рамку сдвигаем до размера примерно 186 пикселей. Создадим для левой навигационной панели свой стиль, назвав его left, для чего в файле style.css пропишем:

.left {background-color:#f6f6f6; border-right:1px solid #000000;}

(цвет фона – серый, правая рамка 1 пиксель, сплошная, черная)

Сохраняем, переходим на файл index.html, ставим курсор в левый столбец средней строки таблицы, на нижней панели выбираем тэг нашей ячейки <td> и придаем ему стиль left.

Шаг 12. Уроки создания сайта. Создаем простейшую навигацию для сайта.

В свое время нашел в интернете простейшую навигацию для сайта, которую часто использовал на своих сайтах. Она состоит из HTML и CSS кодов:

HTML код:

<p align="center">Навигация</p><div id="coolmenu"><a href="index.php">Главная</a><a href="articles.php">Статьи</a>

<a href=”lessons.php”>Уроки</a>

<a href=”contacts.php”>Об авторе</a>

</div>

CSS код:

p.title {background-color: #A72E37;color: #ffffff;font-weight:bold;

margin:5px;

padding:5px;

}#coolmenu{

border: 1px solid gray; /*Стиль рамки */

border-bottom-width: 0;

width: 100%; /*Ширина меню */

background-color: #f6f6f6; /*Фоновый цвет ячейки*/

margin:8px; /*Ширина отступов*/

}* html #coolmenu{

width: 150px;/*Ширина меню для Internet Explorer*/

}#coolmenu a{

font: bold 13px Verdana; /*Шрифт текста*/

padding: 2px; /*Внутренний отсутп текста ссылки от краев ячейки*/

padding-left: 4px;/*Внутренний отсутп текста ссылки от левого края ячейки*/

display: block;

width: 100%; /*Ширина ячейки*/

color: #000000; /*Цвет текста*/

text-decoration: none; /*Подчеркивание у ссылок - нет*/

border-bottom: 1px solid gray;

}html>body #coolmenu a{

width: auto;

}#coolmenu a:hover{

background-color: #cccccc; /*Фоновый цвет ячейки при наведение курсора*/

color: #000000; /*Цвет текста при наведении курсора*/

}

Копируем CSS код и вставляем в файл style.css. Там все очень хорошо прокомментировано и если у Вас возникнет необходимость корректировки, очень легко можно разобраться и подогнать под свои нужды.

Копируем HTML код и вставляем в левую ячейку файл index.html. Перед этим вертикальное выравнивание в этой ячейке сделать по верхнему краю. Для вставки HTML кода перейдем на вкладку КОД и вставляем его в строку:

<td width="186px" valign="top"> &nbsp;</td>

на место параметра &nbsp;.

Как Вы понимаете HTML код содержит ссылки на страницы сайта, как на главную – index.php, так и на другие страницы сайта, которые мы создадим позднее. Вы можете добавить как свои новые страницы, так и изменить названия приводимых здесь страниц.

Переходим в браузер, проверяем. Если ширина меню вылазит за пределы ячейки, то в файле style.css подправить процентное значение Ширины меню (width: 100%; /*Ширина меню */), поставив к примеру 93-95%.

Ниже Навигации как правило размещают статистику по сайту, архив сайта, формы подписки (рассылки) и конечно же рекламные блоки.

Шаг 13. Уроки создания сайта. Заполняем текстовую часть файла index.html.

В правой ячейке таблицу делаем вертикальное выравнивание по верху и добавляем в нее свой текст.

Шаг 14. Уроки создания сайта. Перед тиражированием страницы index.html на другие страницы сайта сделаем левую навигационную панель сайта элементом библиотеки.

Открываем программу Adobe Dreamweaver, В правой панели выбираем вкладку Файлы – Наборы (Активы). Жмем на значок Библиотека. Выделяем нашу левую навигацию: в меню быстрых тегов, нажимая на вкладку <table>. После выделения нажимаем на значок «Новый объект Библиотеки», расположенный в самом низу вкладки Библиотека (справа внизу). Даем название новому библиотечному элементу (к примеру leftnav). Созданный элемент библиотеки окрашивается сразу в желтый цвет.

Шаг 15. Уроки создания сайта. Тиражируем файл index.html на другие страницы сайта.

Растиражируем файл index.html на необходимое нам количество страниц, т.е. сохраняя его как article0.html, article1.html, article2.html и т.д. При этом файлы article0.html и lesson0.html у нас будут содержать названия-ссылки на файлы статей и уроков (будут главными страницами статей и уроков). Также из файла index.html создадим файл about.html.

Шаг 16. Уроки создания сайта. Устанавливаем ссылки из навигации на вновь созданные файлы.

Открываем созданный нами библиотечный элемент: Library - nav.lbi. Выделяем нужный нам элемент меню, например Уроки и вкладке Параметры (внизу) в строке Ссылка находим значок «Указатель на файл» и перетаскиваем его к нужному нам файлу (в данном случае к файлу lesson0.html).

Далее в файле lesson0.html пишем вводный текст, под ним названия уроков, описания уроков и прочее. Как это сделать красиво смотри курсы уроков HTML и CSS. Создаем из названий уроков ссылки на нужные файлы, таким же образом перетаскивая на них значок «Указатель на файл».

После того как мы установили все ссылки, нам предложат обновить все файлы, содержащие данный библиотечный элемент. Мы говорим – OK.

Уроки создания сайта. Как видите, нет ничего проще создания сайта на HTML. Теперь нам останется только заполнить созданные страницы контентом.

При наполнении сайта контентом рекомендую придерживаться следующих правил (данные положения личное мнение автора):

1. Если Вы намерены самостоятельно набирать тексты «с нуля», то лучше это делать сразу в программе Adobe Dreamweaver.

2. Если Вы копируете текст из Интернета, и у Вас в это время нет доступа к Вашему сайту, то лучше его копировать не через Microsoft Word, а через Блокнот.

3. Когда Вы набираете текст в программе Adobe Dreamweaver, либо вставляете скопированный текст, на вкладке Параметры выбирайте Форма – Абзац (Параграф), т.е. тэг <p>, который затем желательно переопределить в таблице стилей сайта – файле style.css. К примеру, следующим образом:

p {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#424242; margin:10px;}

4. Для заголовка статьи (урока) выбираем Формат Заголовок 1, или 2, или 3, Для красоты желательно также в таблице стилей переопределить выбранный Вами <h1>, <h2> или <h3>. Например, на текущем сайте заголовки определены как <h2> и прописаны в таблице стилей так:

h2 { font: normal 1.7em Georgia, "Times New Roman", Arial; margin: 0 0 10px; padding: 0 0 3px; color: #333; border-bottom: 1px solid #eee; }

5.  Для удобочитаемости текста не стесняйтесь добавлять жирный текст (кнопка B), курсив (кнопка I), подчеркивание (для чего перейдите на вкладку Код и обрамите подчеркиваемый текст тэгами <u>…</u>), но старайтесь не перебарщивать.

6. Для каждой создаваемой страницы сайта не забывайте на панели Заголовок (панель вверху) вписывать название этой страницы, а также, перейдя на вкладку Код, создавать описание и ключевые слова.