Краткие теоретические сведения

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ

ДЛЯ ВЁРСТКИ САЙТОВ

 

ВВЕДЕНИЕ

 

Процесс вёрстки web-страниц можно условно разделить на два этапа: подготовка графических элементов и позиционирование объектов на странице. Графический макет обычно создаётся дизайнером в формате psd (внутренний формат графического редактора Adobe Photoshop) и передаётся верстальщику. Для того, чтобы верстальщик мог подготовить графические элементы страницы, ему необходимо владеть навыками работы в Photoshop. В результате верстальщику необходимо преобразовать графический макет в web-страницу в формате html. Существуют специальные web-редакторы, которые помогают верстальщику в написании кода HTML. Web-редакторы можно условно разделить на две категории:

- редактор показывает только исходный код;

- редактор показывает готовую страницу, работая по технологии WYSIWYG ( What You See Is What You Get , «что видишь, то и получишь»), в таком случае верстальщик непосредственно видит результаты верстки.

Часть редакторов, поддерживающих технологию WYSIWYG, в том числе и Adobe Dreamweaver, одновременно отображают готовую страницу и исходный код. Изучение возможностей web-редактора Dreamweaver разобрано на примере табличной вёрстки сайтов. Табличная вёрстка выполняется с помощью таблиц, которые вкладываются друг в друга. Таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы.

Таким образом, учебно-методическое пособие охватывает разделы «Adobe Dreamweaver» и «Табличная вёрстка», изучение которых рекомендуется после освоения раздела «Основы HTML».

 

ПРАКТИЧЕСКОЕ ЗАДАНИЕ

Тема: Web-редактор Adobe Dreamweaver

Цель: приобретение навыков использования web-редактора Adobe Dreamweaver для вёрстки web-страниц, знакомство с табличной технологией вёрстки сайтов.

 

 

Краткие теоретические сведения

 

Adobe Dreamweaver позволяет работать в режиме кода (Code/Код), отображается только исходный html-код страницы с подсветкой тэгов; в режиме дизайна (Design/Проект), отображается только внешний вид страницы); в смешанном режиме (Split/Разделение), в верхней части – код страницы, в нижней – её внешний вид. На рисунке 1.1 представлены кнопки переключения режимов.

 

Рис. 1.1. Переключение режимов отображения страницы

 

Меню Insert (Вставка) предназначено для быстрой вставки объектов на страницу и имеет несколько вкладок: Common (Общий), Layout (Макет), Forms (Формы) и др. На рисунке 1.2. показана вкладка Common (Общий), с помощью которой можно вставить изображение, таблицу, гиперссылку и другие объекты.

 

Рис. 1.2. Вкладка Common

 

На рисунке 1.3 показана вкладка Forms (Формы), где размещены пиктограммы для вставки различных элементов формы: текстовых полей, флажков, переключателей, кнопок и др.

Рис.1.3. Вкладка Forms

 

Панель свойств (Properties) отображает свойства выделенного на странице объекта. Это может быть текстовый фрагмент, изображение, таблица, ячейка таблицы, элемент формы и т.д. На рисунке 1.4 показаны свойства текстового фрагмента. Для текста можно задать цвет, размер, гарнитуру шрифта, выравнивание на странице и другие свойства.

 

Рис. 1.4. Панель свойств

 

Задав в поле Link (Ссылка) url-адрес, можно сделать текстовый фрагмент гиперссылкой на указанную страницу.

При нажатии на кнопку Page Properties (Свойства страницы), представленную на рисунке 1.4, открывается диалоговое окно, показанное на рисунке 1.5, где можно задать общие свойства страницы, в том числе параметры основного шрифта, цвет фона, ширину полей, цвет гиперссылок, кодировку, название страницы и другие.

 

Рис. 1.5. Диалоговое окно «Свойства страницы»

 

Если необходимо вставить на страницу элементы формы, следует предварительно добавить границу формы, нажав пиктограмму Form (Форма) на вкладке Forms (Формы) панели Insert (Вставка). Результат добавления формы на страницу показан на рисунке 1.6.

 

Рис. 1.6. Добавление формы на страницу

 

После этого внутрь красной пунктирной рамки необходимо вставить все элементы, относящиеся к форме, включая кнопки. Кнопка вставляется нажатием на пиктограмму Button (Кнопка) на вкладке Forms (Формы) панели Insert (Вставка). Её поведение (Сброс/Reset или Отправка/Submit), а также надпись (Value), которая будет отображаться на кнопке, указывается на панели свойств.