5. Html-редактор Dreamweaver
На предыдущих занятиях вы писали HTML-коды вручную в простейшем текстовом редакторе Блокнот. Это полезно для освоения структуры HTML-документа, запоминания обязательных тегов, получения первых навыков написания веб-страницы. Однако для дальнейшей работы необходим более совершенный инструмент.
Dreamweaver — профессиональный редактор HTML для создания веб-сайтов различной сложности. Нравится ли вам вручную писать HTML-код или вы предпочитаете работать в визуальной среде, Dreamweaver облегчает эту работу и обеспечивает вас полезными инструментами и средствами. Все последующие работы мы будем выполнять в редакторе Dreamweaver.
Состав рабочего окна
Рабочая область Dreamweaver настраивается под различные виды работ (рис.1). Вот некоторые наиболее используемые компоненты:
окно документа отображает текущий документ, который вы редактируете. Здесь могут быть либо коды (в режиме Code), либо внешний вид (в режиме Design);
панель вставки (Insert) содержит вкладки с кнопками для вставки на страницу различных HTML-элементов: изображений, таблиц, параграфов, списков и других. Наиболее часто мы будем пользоваться вкладками Common и Text;
панель документа содержит кнопки, которые позволяют быстро переключаться между режимом кода (Code), дизайна (Design) и совмещённым (Split). В режиме кода в окно документа выводятся теги (как в Блокноте), а в режиме дизайна отображаются их вид (как в браузере);
панель свойств (Properties) отображает атрибуты и CSS-свойства выбранного тега и позволяет их изменять прямо в режиме дизайна, не переключаясь в режим кода;
указатель тега показывает все родительские теги для выбранного HTML-элемента.
|
Рис. 1. Окно редактора Dreamweaver |
Линейки сверху и слева проградуированы в пикселах. Если линейки отсутствуют, то они включаются из меню Dreanweaver: View > Rules > Show.
Перечисленные панели, а также множество других можно открыть с помощью пункта меню Window. Флажок рядом с элементом указывает, что данный элемент в настоящее время открыт. Панель стандартная (на рисунке не показана) открывается с помощью контекстного меню. Правой кнопкой щёлкните на панели документа и в открывшемся контекстном меню выберите Standard.
После установки Dreamweaver на компьютер нужно убедиться, что новая страница создаётся с указанием правильной кодировки, а именно UTF-8. Если это не так, то пройдите по следующему пути: Edit > Preferences > New Document > Default encoding и установите Юникод (UTF-8).
Создание html-страницы
Рассмотрим процесс создания новой HTML-страницы. Выполните команду File > New. В появившемся окне New Document (новый документ) ничего не меняйте и нажмите кнопку Create (создать). Появится новая страница. В режиме дизайна вы увидите чистую страницу, а в режиме кода — десяток тегов.
Вопрос. Какие теги в автоматически созданном коде вам уже известны?
DOCTYPE подсказывает браузеру стандарт, в котором написаны HTML-коды. Метатег meta задаёт, в частности, кодировку символов.
Теги абзаца <p></p> вставляются следующим образом. В режиме кода используется кнопка ¶ из панели Insert (вставка). В режиме дизайна используется клавиша Enter.
Теги заголовка <h1></h1> вставляются в режимах кода и дизайна одинаково: с помощью кнопки h1. Теги полужирного <b></b> и наклонного <i></i>текста — с помощью кнопок B и I соответственно.
При первоначальной установке Dreamweaver кнопкой B вместо тега <b></b> вставляется тег <strong></strong>, а кнопкой I вместо <i></i> вставляется <em></em>. Обычный визуальный браузер отображает эти теги правильно и можно ничего не менять. Если вы всё-таки хотите привести в соответствие, то выполните следующее: Edit > Preferences > General и снимите галочку напротив пункта Use <strong> and <em> in place of <b> and <i>
Тег обрыва строки <br> вставляется с помощью последней кнопки на той же вкладке Text. Если в данный момент на ней не изображён тег br, то, нажав кнопку с треугольничком, выберите его из списка.
Ненумерованный список удобно создавать в режиме дизайна. При нажатии кнопки ul появляется маркер в виде жирной точки. Вводится текст пункта и нажимается клавиша Enter, при этом появляется маркер нового пункта. Для выхода из списка нужно поставить курсор в конец последнего пункта, нажать Enter один раз — появится новый пункт, не вводя ничего, нажать Enter второй раз — последний маркер исчезнет, а курсор перейдёт на новый абзац.
Нумерованный список создаётся с помощью кнопки ol аналогично.
Задание 1
С помощью Dreamweaver создайте новую страницу babuin.html и сверстайте веб-страницу, показанную ниже. Постарайтесь это сделать только в режиме дизайна. Исходный текст можно найти в файле Бабуин.txt, расположенном в пособии по адресу: HTML\Материалы\Бабуин.txt
Что должно получиться
