Лекция 2. Использование программных средств для создания

Лекция 2. Использование программных средств для создания
Web-сайтов
2.1. Обзор программных средств для создания WEB-сайтов.
Вы уже попробовали создавать простейшие web – страницы с помощью языка разметки
гипертекста и создавали их вручную, набирая в блокноте. Конечно, в блокноте или другом
простейшем текстовом редакторе делать небольшие страницы или сайты можно, но ручной набор
страниц несколько утомителен: сложно уследить за точностью написания тэгов (малейшая
неточность, кавычка, скобочка и страница отражается совсем не так, как хотелось бы). Кроме
того, хотелось бы более наглядно конструировать страницу, подобно тому, например, как мы
конструируем текстовый документ в текстовом процессоре Word. И такая возможность есть.
Программные средства для создания сайтов можно условно разделить на два типа: первый
– программные пакеты для создания сайтов, которые работают непосредственно с HTML – кодом,
второй – HTML – редакторы типа WYSIWYG (“what you see is what get” – англ., что ты видишь, то
и получаешь). Редакторы первого типа эффективны при создании средних и крупных сайтов,
значительно экономят время, необходимое на создание и редактирование, но для работы с ними
требуются достаточно глубокие знания языка HTML. Редакторы второго типа делают процесс
создания более наглядным, и позволяют создавать сайт активно используя мышь, но, зачастую,
существенно засоряют HTML – код лишними тэгами, а то и просто создают некорректно
работающий код. Так что потом страницу все равно приходится подправлять вручную.
Приходится искать разумный компромисс: делать сайт в редакторе, контролируя и подправляя при
необходимости получаемый код.
Довольно популярен редактор Frontpage, который допускает не очень глубокие знания
HTML и делает процесс создания сайта вроде бы простым и привлекательным. Но с начинающим
web – мастером этот редактор может сыграть злую шутку, так как без надлежащей настройки, он
сделает почти сам за Вас привлекательный сайт, который будет замечательно смотреться, но …
только на Вашем компьютере. 
В настоящее время довольно популярным пакетом является WYSIWYG HTML – редактор
фирмы Macromedia DreamWeaver. Это достаточно мощный инструмент, позволяющий создавать
достаточно сложные сайты на основе HTML, внедрять на страницы различные сопутствующие
объекты (Flash, JavaScript, CSS и т.п.). При этом DreamWeaver дает возможность в любой момент
заглянуть в код, подправить, дописать что-то вручную, контролируя Вас в части синтаксиса языка,
т.е. позволяет эффективно сочетать конструктор с ручной версткой. При этом редактор не так
много ставит и лишнего. Что тоже весьма важно.
2.2.
Основы работы в Macromedia DreamWeaver
Итак, давайте познакомимся именно с этим пакетом. Во-первых, редактор позволяет создавать не
только отдельные страницы сайта, но сразу планировать всю структуру сайта, контролируя, при
необходимости, и обновление сайта на удаленном сервере. Ограниченность времени не позволит
нам познакомиться со всеми возможностями пакета, поэтому ограничимся только наиболее
важными на первом этапе.
2.2.1.
Интерфейс редактора.
Рассмотрим интерфейс Macromedia Dreamweaver MX (Рис. 2.5.1)
Рис. 2.5.1
Как в любом окне приложения Windows в Macromedia DreamWeaver имеется строка
главного меню, в котором сосредоточены все команды. Кроме привычных для любого
приложения меню File (Файл), Edit (Редактирование), View (Вид), Insert (Вставить), Window
(Окно), Help (Помощь), есть и характерные именно для DreamWeaver: Modify
(Модифицировать), Text (Текст), Commands (Команды) и Site (Сайт). Есть, конечно,
специфические команды и в каждом из меню.
Под строкой меню расположена панель объектов для вставки в HTML – документ
(Insert). Она имеет 12 вкладок, в которых сгруппированы объекты по назначению (Рис. 2.5.2).
Рис. 2.5.2
В рабочей зоне окна может располагаться только конструируемый HTML – документ со
вставленными объектами (Рис. 2.5.5), только HTML – код или и то, и другое, как на рисунке 5.1.
Выбрать нужный вид можно в меню View или нажав соответствующую кнопку на панели
инструментов (Рис. 2.5.3)
1. Code – HTML – код;
Рис. 2.5.3
2. Design – дизайн страницы (Рис. 2.5.5);
1 3 2
3. Code and Design – код и дизайн (Рис. 2.5.1).
Кроме того, на панели инструментов есть еще несколько кнопок (Рис. 2.5.4)
Рис. 2.5.4
1
1.
2.
3.
4.
5.
6.
7.
2
3 4
5 6
7 8
Просмотр документа на сервере.
Содержимое тэга <Title>.
Обмен документов на сервере.
Просмотр документа в браузере (можно выбрать в каком).
Обновление вида страницы после редактирования кода вручную.
Контекстная подсказка по тэгам HTML (там, где стоит курсор).
Установка точек прерывания при отладке кода.
8. Некоторые опции при редактировании кода (выделение разным цветом тэгов, параметров,
просто текста и т.д.)
В нижней части окна располагается панель свойств объекта (Properties). В ней
отображаются свойства выделенного объекта страницы. Например, если выделен рисунок, то мы
увидим значение параметров тэга <img>, если он к тому же является гиперссылкой, то еще и URL.
(Рис. 2.5.5).
Справа может находиться еще несколько панелей, наиболее важная из них – панель Files,
отображающая структуру сайта и позволяющая осуществлять выбор файла для редактирования
(вкладка Site). Выбрав вкладку Assests, Вы можете быстро просмотреть все, что Вы используете
на сайте (рисунки, Flash, URL, цвета, скрипты и т.п.). Для этого нужно только выбрать
соответствующую группу в левом ряду кнопок этой вкладки (Рис. 2.5.4).
Рис. 2.5.5
Рис. 2.5.6
Все панели могут быть в развернутом или свернутом состояние или вообще убраны. Осуществляется
сворачивание с помощью стрелочки рядом с названием панели, вызвать или убрать панель можно из меню Window.
2.2.2. Объекты документа и их свойства
Рассмотрим подробнее вкладки панели объектов (Рис. 2.5.2).
 Common (Общие) – наиболее часто использующиеся объекты (рисунки, гиперссылки,
таблицы и т.п., назначение видно во всплывающей подсказке)
 Layout – используется при разметке таблиц и слоев.
 Text (Текст) – для оформления текста, в том числе заголовков, списков и т.п.
 Table (Таблицы) – вставка таблиц.
 Frame (Кадры) – для создания многооконных страниц.
 Forms (Формы) – для вставки форм.
 Templates (Шаблоны) – для работы с шаблонами (заготовками) страниц.
 Characters (Символы) – для вставки спец. символов.
 Media – для вставки специальных объектов «оживления» страниц (Flash, Applet и т.п.)
 Head (Головная часть документа) – для вставки meta – тэгов и других тэгов между
тэгами <HEAD> ..</HEAD>
 Script (Скрипт) – вставка тэгов для оформления скриптов.
 Application (Приложение) – оформление вставляемых приложений.
Для того, чтобы поместить нужный объект на web – страницу, достаточно выбрать его на
панели объектов, указать место расположения объекта на странице и задать его свойства в панели
свойств (на рисунке 5.5 в панели свойств указаны свойства выделенного объекта – рисунка с
эмблемой ОСО). Далее можно просмотреть страницу (кнопка 4 на панели инструментов, рисунок
5.4) и при необходимости внести изменения.
2.2.3.
Редактирование HTML – кода.
При вставке объекта автоматически записывается HTML – код, который можно
просматривать в окне кода (кнопка 1 или 3, Рис. 2.5.3). При этом редактор одновременно с
выделением объекта в окне дизайна, выделяет соответствующий код в окне кода. Можно перейти
в окно кода и отредактировать его, потом вернуться в окно дизайна и просмотреть полученный
результат. При необходимости обновить (кнопка 5, Рис. 2.5.3). Если редактор заметит какие-то
ошибки (несогласование открывающих и закрывающих тэгов и т.п.), он выделит это место в окне
дизайна и предложит изменить (Рис. 2.5.8, пометки в коде –МВК).
Примечание. Сам редактор постарается Вас обезопасить от подобных ошибок: при вставке открывающего тэга
вручную, он сразу вставит закрывающий и при наборе Вам будет предложено выбрать тэг и параметры из списка
(Рис. 2.5.7).
Рис. 2.5.8
Рис. 2.5.7
Кроме того, разные тэги, их параметры, значения параметров, скрипты и т.п. выделены в
тексте разным цветом. Просто текст, присутствующий на странице, обычно имеет черный цвет.
Настройку цветового оформления может изменять пользователь. Так что можно сразу заметить,
что в коде у Вас что-то не так.
2.2.4.
Создание WEB – узла
Рассмотрим последовательно процесс создания HTML – документа в редакторе
Macromedia DreamWeaver. После запуска программы, перед Вами будет примерно такой вид как
на рисунке 5.1, только в панели Files не будет структуры сайта, поскольку сайта еще нет. Лучше
сразу определится с местоположением сайта у Вас на жестком диске и дать ему имя. Тогда проще
будет обновлять и редактировать сайт.
Упражнение 2.1. Создание сайта в редакторе Macromedia DreamWeaver.
Для создания нового сайта (или подключения уже имеющегося к редактированию в
редакторе), выбираем пункт New Site (Новый сайт) меню Site (Сайт) из строки меню и далее
действуем по алгоритму, предлагаемому редактором:
1. Дать сайту имя. Дадим какое-нибудь осмысленное имя и пойдем дальше (Next)
2. Выбрать технологию работы с сервером или без. Для начала возьмем без сервера: No, I don’t
want to use a server technology.
3. Выбрать способ редактирования: на локальном компьютере, на сервере через локальную сеть
или по FTP. Выберем редактирование на локальном компьютере: Edit local copies on my
machine..
4. Выбрать способ соединения с сервером. Выберем без соединения (None) и …
5. получим информацию о проделанной работе. Если нас все устраивает, соглашаемся (Done).
На любом шаге можно вернуться назад (Back), отказаться вообще (Cancel) или попросить
помощи (Help). Есть также возможность отредактировать параметры сайта позже:
Site (Сайт)Edit Sites (Редактировать Сайт)выбрать имя сайтаEdit (Редактировать).
Итак, место под сайт отведено. Если у Вас уже были некоторые файлы в выбранной папке,
например, первая страница сайта, страницы с заданиями, графика, Вы увидите все это в
проводнике справа (панель Files, вкладка Site). Выбрав файл, например, index.htm вы увидите его
в окне редактора.
2.2.5. Создание и редактирование документов
Упражнение 2.2. Создание новой страницы в редакторе Macromedia DreamWeaver
Если Вы уже закрыли DreamWeaver, откройте его снова. По умолчанию он Вам откроет
последний редактируемый Вами сайт, т.е. только что созданный. Если это не так, то выберите
меню SiteEdit Sitesвыберите имя сайтаDone (Готово). Попробуем теперь добавить
страницу к нашему сайту.
1. Создаем новый документ: FileNew..(Новый), на вкладке General (Главная) выбираем тип
файла Basic Page (Основная страница)Create (Создать). Перед Вами откроется новый
документ, при этом в окне дизайна будет просто белое поле, а в окне кода такой текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
</body>
</html>
Первая строчка комментария указывает на тип HTML – документа и генерируется редактором. По
ней можно определить с помощью какого редактора создавался документ. Обратите внимание на
тэг <meta…>. Там указана кириллическая кодировка (charset=windows-1251) для правильного
чтения документа в браузере. Проследите, чтобы стояла именно эта кодировка, иначе русские
буквы будут не читаемы (Рис. 2.5.9).
Рис. 2.5.9
2. Настраиваем параметры страницы: Modify (Изменить)Page Properties (Свойства Страницы)
В открывшемся диалоговом окне можно установить цвет фона, текста, ссылок, кодировку,
заголовок (<title>) и некоторые другие параметры (Рис. 2.5.9).
Примечание. Чтобы задать рисунок фона, надо сначала сохранить файл, так как редактор должен
задать относительную ссылку на файл рисунка.
3. Если Вы еще не сохранили файл, самое время это сделать: FileSave Asвыбрать папку и
задать имя файла (латинские буквы нижнего регистра). Например, создадим новую папку
task5, а имя файлу дадим proba3.htm (Рис. 2.5.10).
4. Поместите картинку на страницу: Insert (Вставить)Image (Рисунок) или кнопка панели
объектов Common. Откроется диалоговое окно (Рис. 2.5.10)
Рис. 2.5.10
Примечание. В окне выбора файла с рисунком должно быть указано, что положение файла с
рисунком указывается относительно документа (в поле Relative To должно стоять Document),
иначе при публикации в Интернет, Вы не увидите своего рисунка на странице, браузер будет
«искать» его на Вашем локальном компьютере. Обратите внимание на взаимное расположение
файла документа proba3.htm в task5 и файла рисунка bluecar.gif в task4 и значение поля URL.
5. Установите параметры рисунка в панели свойства, например, поставьте рамку толщиной 2
пикселя (поле border), добавьте гиперссылку на другую страницу, созданную ранее (поля Link и
Target).
Примечание. Можно также разбить рисунок на части и каждой части приписать название
(параметр alt) и гиперссылку (href). Для этого в HTML есть тэг <map…>. В DreamWeaver на
панели свойств рисунка в нижнем левом углу есть квадрат, круг и многоугольник. Выберите одну
из фигур и «нарисуйте» ее на части вашего рисунка. Далее можно заполнять соответствующие
поля (рисунки 5.11 и 5.12)
6. Наберите текст и отформатируйте его по своему усмотрению, используя панель свойств (для
этого надо выделить фрагмент текста) или вкладку Text панели Insert.
7. Добавьте гиперссылку. Для этого надо выделить фрагмент текста или рисунок и в панели
свойств объекта в поле Link (Ссылка) написать URL или выбрать нужный файл нажав на
кнопку (папку) рядом с полем. Можно также указать окно, в которое будет загружаться
страница в поле Target (_blank, _parent и т.п.).
8. Просмотрите страницу в браузере (кнопка 4, Рис. 2.5.4), подправьте, если что-то не так и
сохраните.
9. Закройте DreamWeaver и просмотрите страницу еще раз.
В качестве самостоятельного упражнения попробуйте отредактировать уже имеющиеся у Вас
страницы.
2.2.6.
Создание собственных шаблонов для документов.
Каждый сайт должен иметь свой стиль, т.е. страницы отличаясь контентом, должны
гармонировать друг с другом, иметь одно цветовое решение, навигационную панель и т.п.
Разработчику сайта хорошо бы иметь возможность легко и быстро менять дизайн или вносить
изменения в оформление сразу на всех страницах. Такую возможность дает использование
шаблонов.
Шаблон – это документ, на основе которого создаются другие документы.
В Macromedia DreamWeaver есть две возможности создания шаблонов:
 С чистого листа: FileNew.. Category: Template Page (выбрать категорию Шаблон)Create
(Создать)
 Из существующей страницы: FileSave as Templateзадать имя файла Шаблона
Все шаблоны автоматически сохраняются в папке Templates корневой папки сайта. Она создается
при сохранении первого шаблона.
Упражнение 2.3. Создание шаблона страниц с навигационной панелью
1. Создайте новый шаблон: FileNew.. поле Category: Template Page, поле
Template Page: HTML TemplateCreate (Рис. 2.5.14). Если у Вас уже есть страница, которую
Вы хотели бы использовать в качестве шаблона, то пропустите п. 1.
2. Установите параметры страницы: ModifyPage Properties. Укажите цвет фона, кодировку,
цвета ссылок, цвет текста.
Примечание. Если Вы хотите использовать белый цвет в качестве фона и черный для текста, то это
тоже лучше указать. Далеко не у всех пользователей стоят такие настройки браузера по
умолчанию, будет обидно если они увидят страницу не так как Вы задумали.
3. Лучше сразу сохранить шаблон: FileSave as Template тут Вы получите сообщение, что в
Вашем шаблоне нет редактируемых областей (This template doesn’t have any editable regions)
Не обращайте внимания, Вы их зададите потом, вводите имя шаблона.
4. Теперь можно вернуться к свойствам страницы и задать, если хотите рисунок фона.
5. Вставьте таблицу: InsertTable. Можно также использовать соответствующую кнопку из
вкладки Table панели объектов или контекстное меню. Определите в панели свойств объекта
параметры таблицы (границы, цвет и т.п.). Для объединения или разбивки ячеек можно
использовать кнопки
и
 Merges
панели свойств таблицы.
 Splits
6. Расставьте в ячейках таблицы
название страницы, гиперссылки, возможно в виде
рисунков-кнопок, на другие разделы, рисунки, поместите эмблему ОСО и т.д.
7. Теперь определитесь с теми областями, которые у Вас будут изменяться (название и
содержание страницы, характерный рисунок и т.п.). Эти области надо пометить как
изменяемые: нажмите кнопку вставки изменяемой области на вкладке
Templates
панели объектов и введите название областей, например, name и content
(Рис. 2.5.13)
Рис. 2.5.13
8. Сохраните шаблон.
Код страницы – шаблона.
Серым цветом выделены изменяемые области.
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellpadding="1">
<tr>
<td width="14%"> </td>
<!-- TemplateBeginEditable name="name" -->
<td width="70%"><div align="center">
<h2><font color="#000033">Название страницы</font></h2>
</div></td>
<!-- TemplateEndEditable -->
<td width="16%"><img src="../oso2005/oso_ikt.jpg" width="135" height="36"></td>
</tr>
<tr>
<td>раздел 1</td>
<!-- TemplateBeginEditable name="content" -->
<td rowspan="5"> </td>
<!-- TemplateEndEditable -->
<td rowspan="5"> </td>
</tr>
<tr>
<td>раздел 2</td>
</tr>
<tr>
<td>раздел 3</td>
</tr>
<tr>
<td>раздел 4</td>
</tr>
<tr>
<td>автор</td>
</tr>
</table>
</body>
</html>
Рис. 2.5.14
Теперь, чтобы создать страницу, используя этот шаблон, идем по цепочке:
FileNew..Basic Pageвкладка Templates выбираем нужный шаблонCreate (Рис. 2.5.15)
Рис. 2.5.15
В открывшейся странице Вы сможете вносить изменения только в области, помеченные как
редактируемые. Если Вы потом измените шаблон, то все страницы, созданные на его основе,
будут тоже автоматически изменены после предупреждающего сообщения Dreamweaver.
2.3.
Практические задания
Задание 1. Отредактируйте визитку команды с помощью Dreamweaver. Если вы не участвовали в
секции в прошлом году и у вас затруднения с таблицами, просмотрите задание по таблицам
прошлого года http://web-begin.narod.ru/oso2005/task6/mvk/frames.htm, если останутся вопросы,
пишите, разберемся.
Задание 2. Продумайте и подготовьте шаблон вашего будушего сайта (итоговый проект)
Используйте указания упражнения 2.2:
1. Выберите фон, разместите в таблице текст «Название страницы», необходимые графические
элементы, навигацию.
2. Оформите навигационное меню: определите гиперссылки для каждого элемента навигации,
используя панель свойств объекта (поле Link).
3. Определите изменяемые области: «Название страницы», содержание (основной текст),
возможно, графические элементы, относящиеся к конкретной странице и т.п.
4. Сохраните шаблон под именем page2.
5. Просмотрите папку Templates Вашего сайта. Там Вы должны обнаружить файл page2.dwt
Задание 3. На основе созданного шаблона создайте страницы второго уровня для сайта. Замените
текст «Название страницы» на название конкретной страницы, используя структуру, введите для
начала несколько строк текста содержания страницы, разместите графические элементы.
1. В меню File выберите пункт New.. , далее в появившемся диалоговом окне выберите
Basic Page (Основная страница), перейдите к вкладке Templates (Шаблоны) и выберите
имя созданного шаблона - page2 (Рис. 2.5.15).
2. Измените содержимое изменяемых областей в соответствии с разделами Вашего сайта.
3. Сохраните страницу (не забудьте использовать только латинские буквы нижнего регистра
для имен файлов).
4. Просмотрите структуру Вашего сайта. Для этого справа в панели Files выберите вкладку Site
и в правом списке – Map View.
Щелкая по знаку «+» рядом с изображением файла, можно проследить все переходы между
страницами.
Присылать эти задания не нужно. Зачетным является только визитка команды. Кстати, ее тоже можно сделать в
Dreamweaver и с использованием шаблонов.