Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
10
Добавлен:
30.05.2015
Размер:
594.33 Кб
Скачать

веб-студия

SEVIDI

разработка веб-сайтов и уроки по созданию сайтов

Урок 8

Работа с кодом HTML

Любой грамотный веб-дизайнердолжен знать язык HTML и уметь с ним работать. Визуальные средства Dreamweaver настолько богаты, что мы можем создавать с их помощью даже весьма сложныевеб-страницы,не зная о существовании HTML. Поэтому сделаем следующий шаг и влезем в дебри HTML кода. С основными средствами Dreamweaver для работы HTML кодом мы познакомились на втором Уроке данного цикла. Поэтому рассмотрим простейшие средства для работы с кодом HTML.

Код HTML набирается так же, как текст страницы. Для создания нового текстового абзаца мы ставим курсор в нужное место страницы и начинаем набирать тег <p>. Вводим значок и увидим раскрывающейся список, содержащий теги:

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

Мы можем выбрать нужный нам тег, воспользовавшись клавишами стрелками и клавишей <Enter>, либо мышью. После этого Dreamweaver автоматически подставит в это место нужный тег без закрывающего знака>. Эта функция называется

1

подстановкой. Подстановка работает не только для тегов, но и для атрибутов. Так, если вместо знака >, обозначающего

конец тега поставить пробел, на экране появится раскрывающейся список атрибутов, в котором мы можем выбрать нужный. А если при появлении списка набрать латинскую букву, список прокрутится, представляя нам теги на эту букву.

Теперь давайте закончим ввод нового тега <p> и его содержимого и введем закрывающий тег. Наберем знак < и сразу же наберем/ . Dreamweaver после этого автоматически подставит закрывающейся тег</p>. Вдоль левого края окна документа находится особая панель. Это панель кода. Она доступна только в режиме отображенияHTML-кодаи содержит кнопки, с помощью которых мы можем выполнять разные действия надHTML-кодомстраницы.

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

Выделим фрагмент текста, отступ которого хотим увеличить, и найдем на панели кода кнопки . Первая увеличивает отступ, вторая уменьшает.

Нажав кнопку панели кода, мы можем выделить родительский тег того тега, на котором стоит текстовой курсор.

Свертка кода HTML

Давайте выделим какой-либотег нашей страницы вместе с содержимым. И посмотрим после этого на толстуютемно-синюю

2

полосу, отделяющую область редактирования кода в окне документа от панели кода.

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

Мы увидим, что на этой полосе у верхней и нижней границ выделенного фрагмента видны небольшие кнопки со знаком "минус" и тонкая черная линия, соединяющая эти кнопки. Если щелкнуть по любой из этих кнопок, выделенный нами фрагмент кода сожмется до одной строки.

А слева от строки, на темно-синейполосе, появится кнопка со знаком"+". Если по ней щелкнуть, "сжавшийся" фрагмент кода "разожмется". Эта возможность называется-сверткаHTML-кода.

Помимо кнопок свертки, Dreamweaver предоставляет три кнопки панели кода и несколько пунктов меню, управляющие сверткой.

Кнопкасвертывает тег, на котором стоит текстовой курсор. Если при щелчке по ней удерживать нажатой клавишу <Alt>, будут свернуты все остальные теги, а тот, на котором стоит текстовой курсор, остается развернутым.

Кнопкасвертывает выделенный фрагментHTML-кода.Если при щелчке по ней удерживать нажатой клавишу <Alt>,

3

будут свернуты все остальные теги, а выделенный фрагмент кода остается развернутым.

Кнопкаразворачивает все свернутые фрагменты кода.

Пункты меню предоставляют примерно теже возможности по свертыванию и развертыванию кода. Все пункты находятся в подменю Свертывание кода в меню Редактировать.

Расширенные средства работы с HTML-кодом

При создании нового тега можно либо завернуть в него выделенный фрагмент кода, либо создать "пустой" тег и потом ввести в него нужное содержимое. Новый "пустой" тег будет создан там, где стоит текстовой курсор.

Проще всего создать тег, нажав на кнопкупанели кода. На экране появится небольшое окно так называемогомини-редактора:

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

4

Вводим в него HTML-коднужного тега и нажимаем клавишу<Enter>. Чтобы отказаться от создания нового тега, нужно

нажать на клавишу <Esc>.

Воспользуемся другим способом вставки тегов. Для этого нажмем кнопкуВыбор тегов на вкладкеОбщие панелиВставить. Или выбрать пунктТег менюВставка.

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

В иерархическом списке тегов, расположенном слева в этом диалоговом окне, мы можем выбрать категорию тегов. В данный момент нам понадобится категория Теги HTML. Нам останется только выбрать тег и нажать кнопкуВставить. Если щелкнуть по кнопкеИнформация, появится панель с кратким описанием выбранного тега.

После нажатия кнопки Вставить появится другое диалоговое окноРедактор тегов.

5

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

Пользуясь им, мы можем задать значения различных атрибутов выбранного тега. Закончив правку, нажимаем ОК. Нужно

заметить, что после правки любого тега окно Редактор тегов останется на экране, так что мы сможем сразу же создать еще один новый тег. Чтобы закрыть окно надо нажать кнопкуОтмена.

И еще один инструмент для вставки не просто отдельных тегов, а целых фрагментов HTML-кода,это панельФрагменты кода. Вывести ее на экран можно набором пункта выключателяФрагменты панелиОкно.

6

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

Раскрываем в иерархическом списке, занимающем большую часть панели, нужную ветвь, далее в этой ветви выбираем пункт

соответствующий фрагменту кода, который мы хотим вставить, и нажимаем кнопку Вставить в левом нижнем углу панели. В верхней части панели находится панель предварительного просмотра, в которой отображается внешний вид выбранного нами фрагмента.

Правка и удаление тегов

Для правки тегов Dreamweaver предоставляет уже знакомое нам диалоговое окно Редактор тегов, а такжеМини-редактор,и панельАтрибуты.

7

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

Чтобы вызвать ее на экран, достаточно включить пункт-выключательИнспектор тегов менюОкно.

В

 

 

 

 

 

И последнее, что мы рассмотрим на этом уроке, это какие настройки Dreamweaver влияют на создаваемый им HTML-код.

Чтобы задать параметры HTML-кода,воспользуемся уже знакомым нам диалоговым окномУстановки менюРедактирование.

8

и

Sevidi

Флажок Отступ включает или отключает использование отступов. Лучше держать его включенным. Справа от него вводится

количество пробелов или символов табуляции. В поле ввода Размеряшага табуляции вводится количество пробелов, которым

в режиме отображения кода показывается один символ табуляц . Флажок Автомататическое обтекание включает или

отключает автоматический перенос строк HTML-кода.В поле ввода справа вводится максимальное количество символов,

допускаемых в одной строке переноса.

 

 

д

Раскрывающейся список Тип разрывов строк задает символ, который обозначается конец строки. Это может быть

 

у

последовательность символов возврата каретки и перевода строки в стиле Windows (пункт CRLF (Windows)), и ряд других

 

т

 

пунктов. Изначально выбран первый пункт, и менять его в нашем случае не стоит.

Раскрывающейся список Регистр тегов по умолчаниюс

задает регистр символов, которыми набираются имена тегов. Пункт

 

-

 

 

<ПРОПИСНЫЕ> задает верхний регистр, пункт<строчные>-нижний.

Раскрывающейся список Регистр атри утов по умолчанию позволяет выбрать регистр символов, которыми набираются

 

б

имена и значения атрибутов тегов HTML.

Группа флажков Изменить регистре: включает или отключает принудительное изменение регистра символов, которыми

набраны имена тегов и атрибутов, при открытии веб-страниц.

В

 

Задав нужные настройки, нажимаем кнопку ОК.

9