Лекция 2 Визуальные редакторы веб-страниц. Macromedia Dreamweaver. Интерфейс программы. Установка кодировки. Рабочая среда Dreamweaver. - презентация

1 Лекция 2 Визуальные редакторы веб-страниц. Macromedia Dreamweaver. Интерфейс программы. Установка кодировки. Рабочая среда Dreamweaver

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

3

4 Macromedia Dreamweaver Dreamweaver (в пер. «ткач мечты») – HTML- редактор. Разработан компанией Macromedia.HTML Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире

5

6 Интерфейс программы При запуске программы появляется стартовая страница, позволяющая выбрать объект создания или редактирования, с которым будет осуществляться работа Создать новый HTML документ Открыть недавно созданный документ Открыть документ

7

8 Перед началом работы необходимо установить кодировку!!!!! При работе с текстами на русском языке необходимо с самого начала изменить настройку программы – кодировку!!!!

9 Установка кодировки: More – Preferences – Default Encoding – Ok

10 Создание HTML-документа

11 Панель инструментов Insert - Вставка Ярлык – имя открытого документа Панель инструментов Document Режим просмотра HTML-кода и ручной расстановки меток Визуальный режим Design (конструирование) Заголовок HTML- документа Панель Properties – отражает свойства выделенного в данный момент объекта Свойства страницы Установить/свернуть панель Properties Установить/ свернуть инструментальные панели Строка заголовка

12 Проверка установленной кодировки 1. Войти в режим просмотра HTML - кода 2. Кодировка «кириллица- Windows»: charset=windows-1251

13 Панель Вставить Каждая вкладка включает набор пиктограмм, выполняющих определённые операции.

14

15 Панель Свойств Позволяет менять параметры выделенных объектов

16

17

18 Задание: Установить кодировку кириллица-windows Создать новый HTML-документ Проверить выставленную кодировку