Лекция Использование программных средств для создания Web-сайтов Обзор программных средств для создания web-сайтов

Вид материалаЛекция

Содержание


Основы работы в Macromedia DreamWeaver
Files, отображающая структуру сайта
Table (Таблицы) – вставка таблиц. Frame (Кадры)
Упражнение 2.1. Создание сайта в редакторе Macromedia DreamWeaver.
Упражнение 2.2. Создание новой страницы в редакторе Macromedia DreamWeaver
Упражнение 2.3. Создание шаблона страниц с навигационной панелью
color="#000033">Название страницы
Практические задания
Подобный материал:

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

    1. Обзор программных средств для создания WEB-сайтов.


Вы уже попробовали создавать простейшие web – страницы с помощью языка разметки гипертекста и создавали их вручную, набирая в блокноте. Конечно, в блокноте или другом простейшем текстовом редакторе делать небольшие страницы или сайты можно, но ручной набор страниц несколько утомителен: сложно уследить за точностью написания тэгов (малейшая неточность, кавычка, скобочка и страница отражается совсем не так, как хотелось бы). Кроме того, хотелось бы более наглядно конструировать страницу, подобно тому, например, как мы конструируем текстовый документ в текстовом процессоре Word. И такая возможность есть.

Программные средства для создания сайтов можно условно разделить на два типа: первый – программные пакеты для создания сайтов, которые работают непосредственно с HTML – кодом, второй – HTML – редакторы типа WYSIWYG (“what you see is what get” – англ., что ты видишь, то и получаешь). Редакторы первого типа эффективны при создании средних и крупных сайтов, значительно экономят время, необходимое на создание и редактирование, но для работы с ними требуются достаточно глубокие знания языка HTML. Редакторы второго типа делают процесс создания более наглядным, и позволяют создавать сайт активно используя мышь, но, зачастую, существенно засоряют HTML – код лишними тэгами, а то и просто создают некорректно работающий код. Так что потом страницу все равно приходится подправлять вручную. Приходится искать разумный компромисс: делать сайт в редакторе, контролируя и подправляя при необходимости получаемый код.

Довольно популярен редактор Frontpage, который допускает не очень глубокие знания HTML и делает процесс создания сайта вроде бы простым и привлекательным. Но с начинающим web – мастером этот редактор может сыграть злую шутку, так как без надлежащей настройки, он сделает почти сам за Вас привлекательный сайт, который будет замечательно смотреться, но … только на Вашем компьютере. 

В настоящее время довольно популярным пакетом является WYSIWYG HTML – редактор фирмы Macromedia DreamWeaver. Это достаточно мощный инструмент, позволяющий создавать достаточно сложные сайты на основе HTML, внедрять на страницы различные сопутствующие объекты (Flash, " onclick="return false">ссылка скрыта, если останутся вопросы, пишите, разберемся.

Задание 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 и с использованием шаблонов.