litceysel.ru
добавить свой файл
1

TEMPLATE

HTML шаблон страниц веб-сайта


С помощью программы Dreamweaver создается новый html документ, который сохраняется под именем template.html в ту же папку, где храниться папка images. Что касается имени сохраняемого документа, то оно, в принципе, может быть любым. Но так сложилось исторически, что HTML шаблон страниц будущего веб-сайта, обычно, сохраняется под именем template.html (рис. 1).




Рис. 1. Структура паки site


После того как пустой HTML шаблон сохранен, необходимо произвести настройку документа. А именно с помощью команды в строке меню Modify=>Page Properties… выполнить установку следующих параметров (рис. 2).




Рис. 2. Диалоговое окно Page Properties (Параметры страницы)


В расположенном слева списке категорий (Category) обязательно нужно произвести настройки в категории Appearance и Title/Encoding.


В категории Appearance устанавливаем по нулям значения для полей HTML документа (рис. 3):


  • Left Margin (Левое поле) = 0,

  • Right Margin (Правое поле) = 0,

  • Top Margin (Верхнее поле) = 0,

  • Bottom Margin (Нижнее поле) = 0.




Рис. 3. Пример настройки параметров категории Appearance


В категории Title/Encoding устанавливаем следующие значения для параметров (рис. 4):




Рис. 4. Пример настройки параметров категории Title/Encoding

  • Encoding (Кодировка) = из ниспадающего списка всевозможных кодировок выбираем «Кириллица (Windows)» - это указывает на то, что содержимое вашего сайта будет на русском и др. языках. Если ваш сайт только на иностранных языках, т.е. вы не собираетесь использовать русские (кириллические) буквы алфавита, то о выборе кодировки можно не заботиться.


  • Document Type (DTD). Здесь в ниспадающем списке вариантов выбираем самый простой HTML 4.01 Transitional.

  • Title (Заголовок) – это то, что обычно отображается у любого документа в его верхней строке заголовка (рис. 5). Здесь обязательно вписываете название вашего сайта.




Рис. 5. Пример HTML страницы веб-сайта отображаемой в браузере IE


Чтобы сохранить выполненную настройку параметров HTML шаблона достаточно нажать на клавиатуре комбинацию клавиш CTRL+S или выполнить в строке меню команду File=>Save.


На листе бумаги формата А4 согласно исходному дизайну (рис. 7) схематично зарисовать расположение нарезанных кусков, выписать их названия и размеры ширину и высоту в пикселах (рис. 6).




Рис. 6. Набросок схематичного расположения функциональных кусков (slices) с их названиями и размерами




Рис. 7. Пример исходного разрезанного на функциональные куски (slices) дизайна страниц веб-сайта созданного в программе Photoshop


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




Рис. 8. Пример вложения простых таблиц с целью создания сложной таблицы для дизайна представленного на рис. 7

В html документе template.html в программе Dreamweaver сначала центрируем расположение будущей информации, в результате содержимое страниц веб-сайта всегда будет находиться по центру окна браузера (рис. 9).





Рис. 9. Начальное выравнивание информации по центру Align Center


Затем согласно структуре рис. 8 вставляем таблицу со следующими параметрами (рис. 10).




Рис. 10. Параметры первой вставляемой таблицы


В результате получаем таблицу из трех строк и одного столбца общей шириной 820 пикселей согласно рис. 6.




Рис. 11. Результат вставки первой таблицы


Щелкаем в первой ячейке таблицы и задаем следующие параметры (Properties) для ячейки (рис. 12).




Рис. 12. Properties (Параметры) первой ячейки таблицы


Затем щелкаем во второй ячейке таблицы и задаем следующие параметры (Properties) для второй ячейки (рис. 13).




Рис. 13. Properties (Параметры) второй ячейки таблицы


В результате таблица принимает следующий вид (рис. 14).




Рис. 14. Внешний вид документа template.html после задания параметров для первой и второй ячеек таблицы.


Согласно рис 6. и рис. 7 в первой ячейке таблицы должна находится горизонтальная таблица состоящая из одной строки и шести столбцов общей шириной 820 пикселей. Щелкаем в первой ячейке существующей большой таблицы и выполняем действие в строке меню: Insert=>Table (Вставить=>Таблица).

Затем согласно структуре рис. 6 и рис.8 вставляем таблицу со следующими параметрами (рис. 15).





Рис. 15. Параметры первой вставляемой таблицы


Затем поочередно щелкаем в ячейках второй вставленной таблицы и задаем им параметры согласно рис. 6.




Рис. 16. Properties (Параметры) первой ячейки второй таблицы




Рис. 17. Properties (Параметры) второй ячейки второй таблицы




Рис. 18. Properties (Параметры) третьей ячейки второй таблицы




Рис. 19. Properties (Параметры) четвертой ячейки второй таблицы




Рис. 20. Properties (Параметры) пятой ячейки второй таблицы




Рис. 21. Properties (Параметры) шестой ячейки второй таблицы




Рис. 22. Внешний вид документа template.html после задания параметров для ячеек второй таблицы


Теперь можно вставлять функциональные куски (slices) дизайна страницы в соответствующие ячейки таблиц. Для этого поочередно щелкаем в ячейках таблиц и выполняем действие Insert=>Image (Вставка=>Изображение). В результате на экране появится диалоговое окно Select Image Source (Выбор расположения изображения) (рис. 23).


Рис. 23. Диалогового окна Select Image Source


Где вы должны указать источник расположения изображений и имя самого изображения. Поскольку источник расположения изображения является папка images для текущего сайта, то именно она и выбирается в поле Папка (рис. 23). После того как требуемое изображение выбрано, щелкаем на кнопке «OK», а затем на еще одном появивщемя диалоговом окне Image Tag Accessibility Attributes щелкаем еще раз на кнопке «OK» (рис. 24).




Рис. 24. Диалоговое окно Image Tag Accessibility Attributes


В результате выполнения этих действий в документ template.html будут вставлены функциональные изображения дизайна страниц веб-сайта (рис. 25).




Рис. 25. Внешний вид документа template.html после заполнения ячеек таблицы функциональными кусками (slices) элементов дизайна страниц веб-сайта


Поскольку в результате создания HTML шаблона страниц веб-сайта выявились некоторые дополнительные свойства, которые не были учтены в самом начале, а именно цвет фона страницы html документа. Для настройки цвета фона (background color) c помощью команды в строке меню Modify=>Page Properties… вызываем диалоговое окно Page Properties (рис. 2). В разделе Appearance щелкаем указателем мыши на пустом сером квадратике Background color, а затем переводим указатель мыши уже в виде пипетки и щелкаем на требуемом зеленом цвете. Подтверждаем, щелкнув на кнопке «OK». В результате получаем страницу с заполненным зеленым фоном (рис. 26).




Рис. 26. Внешний вид документа template.html после настройки цвета фона (background color)

В третьей самой нижней ячейке первой таблицы можно напечатать фразу: «Здесь будет контент (информация) страницы».



Теперь, если вы собираетесь использовать при оформлении контента каскадные таблицы стилей (css), то вам необходимо выполнить их подключение (attach) к данному файлу template.html с помощью команды из строки меню Text=>CSS Styles=>Attach Style Sheet… В результате у вас на экране появится диалоговое окно Attach External Style Sheet (рис. 27).




Рис. 27. Диалоговое окно Attach External Style Sheet


С помощью кнопки Browse (Выбор) отыскиваем файл со стилями (styles.css) располагающийся в папке images вашего сайта (рис. 27).


Таким образом, на настоящий момент мы имеем созданный файл template.html с графической частью дизайна страниц веб-сайта.


Следующий этап это создание ссылок. Но прежде чем их создавать небольшое лирическое отступление. Обычно любой веб-сайт представляет собой набор страниц связанных между собой с помощью гипертекстовых ссылок. Как минимум количество ссылок, а значит и страниц веб-сайта определяется количеством разделов, т.е. кнопок меню на навигационной строке. В нашем случае (рис.7) это разделы: About Us, Portfolio, Clients, Contacts. Четыре раздела, значит должно быть как минимум четыре html документа. Эти 4 html документа должны физически находится в папке site чтобы между ними можно было переключаться. Эти четыре документа должны иметь имена, например, about.html, portfolio.html, clients.html, contacts.html. Или как чаще всего поступают страница дают одинаковые имена и цифровое обозначение текущего раздела. Итак, по порядку: page1.html, page2.html, page3,html и page4.html. Т.е. первая страница – это первый раздел, вторая – второй и так далее. В результате будущая структура веб-сайта должна выглядеть выглядеть в следующем виде (рис. 28).



Рис. 28. Предполагаемое на будущее содержимое папки site



Таким образом, возвращаясь в программу Dreamweaver в документ template.html мы должны задать изображениям About Us, Portfolio, Clients, Contacts ссылки (link) на соответствующие страницы page1.html, page2.html, page3,html и page4.html. Для этого поочередно щелкаем на функциональных кусках навигации и внизу на панели Properties (Параметры) в поле Link (Ссылка) вводим полные имена файлов, на которые будут отправлять соответствующие пункты меню.




Рис. 29. Пример выбранного функционального куска menu1.gif и его значение Link


При вводе имени файла обязательно нужно печатать его именную часть и расширение, т.е. page1.html и т.д. соответственно.


После того как вы введете значения Link для каждого изображения навигационной строки сохраните изменения в файле template.html Теперь вы получили практически законченный вариант шаблона страниц будущего веб-сайта. И прямо сейчас уже можно создать набор файлов под именами page1.html, page2.html, page3.html и page4.html которые и будут представлять собой структуру веб-сайта. Но поскольку на настоящий момент у нас нет еще подготовленного контента для каждой страницы, то мы можем поступить следующим образом. У нас есть фраза: «Здесь будет контент (информация) страницы» ввденная в третью самую нижнюю ячейку первой таблицы. Мы допечатаем «1-ой» и получится фраза «Здесь будет контент (информация) 1-ой страницы». Полученный html документ с помощью команды File=>Save As… сохраним под именем page1.html в папку site. Затем заменяем цифру «1» на цифру «2» и получаем фразу «Здесь будет контент (информация) 2-ой страницы» и снова с помощью команды File=>Save As… сохраняем, но уже под именем page2.html в папку site. И так далее. Сколько разделов, столько страниц и сохраняем. В результате у вас содержимое папки site примет вид как на рис. 28.

Таким образом, набор html страниц веб-сайта создан. Все они связаны между собой с помощью ссылок. Если вы откроете папку site и дважды щелкните на любом из файлов page .html. Файл откроется в браузере и с помощью навигационных кнопок вы сможете переходить со страницы на страницу (рис. 30).




Рис. 30. Пример отображения html страницы в окне браузера IE


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