Лекция 3 Macromedia Dreamweaver Работа с текстом Создание списков Вставка таблиц Вставка рисунков Гвасалия Дарья Александровна

1. Работа с текстом

Для форматирования текста используется группа инструментов Text панели Insert (Вставка) и инструменты панели Properties (Свойства). Инструменты данных панелей частично дублируют друг друга

Задание 1 Откройте файл training_text.doc Выделите текст Скопируйте его в буфер обмена (Горячие клавиши Ctrl + C) Создайте новый HTML-документ Вставьте скопированный текст в рабочую область документа (Горячие клавиши Ctrl + V)

1.1 Создание и форматирование заголовков Задать заголовки нуж- ного уровня от 1 до 6 Для форматирования заголовков группа инструментов Text панели инструментов Insert содержит кнопки h1, h2, h3. Список Format панели инструментов Properties позволяет выбрать любой из шести уровней форматирования заголовков, а значение None позволяет отказать от выбранного ранее форматирования. Курсор может находиться в любом месте форматируемого заголовка

Задание 2 Задайте формат заголовка H1

1.2 Изменение начертания шрифта Начертания шрифта Для изменения начертания необходимо выделить нужный фрагмент текста и выбрать одну из следующих кнопокКнопки: B (Bold) – полужирный I (Italic) – курсивный S (Strong) – важный (отображается полужирным) Em (Emphasis) – важный (отображается курсивом)

1.3 Изменение цвета шрифта Для изменения цвета шрифта необходимо выделить нужный фрагмент текста, нажать кнопку Цвет шрифта (Text Color) и в открывшейся панели выбрать нужный цвет. При этом курсор превращается в «пипетку», что позволяет выбрать цвет из любых объектов отображаемых в данный момент экране. Кнопка Default Color – позволяет вернуть к цвету, установленному по умолчанию Кнопка System Color Picker открывает окно с большими возможностями по выбору цвета Цвет шрифта Default Color System Color Picker

Задание 3 Измените начертание заголовка (курсив) и задайте другой цвет для заголовка

Прежде чем приступать к изменению размера шрифта, следует изменить настройку программы: Edit – Preferences… Должен быть снят флажок Use CSS instead of HTML tags После этого размер шрифта будет определяться относительными единицами и в списке Size можно будет выбирать числа от 1 до 7 со знаками «+» и «-» или без знака. Выбор значения со знаком означает, что размер увеличивается или уменьшается на соответствующую величину относительно заданного по умолчанию размера. Значение без знака означает абсолютное изменение размера. Форматируемый текст должен быть предварительно выделен. Изменение размера шрифта

1.4 Изменение размера и гарнитуры шрифта Для изменения гарнитуры шрифта надо выбрать в раскрывающемся списке требуемый шрифт или Default Font (шрифт по умолчанию). Выбор Default Font позволяет удалить выбранную ранее гарнитуру. Размер шрифта (после настройки см предыдущий слайд) можно будет выбрать от 1 до 7 со знаками «+», «-» или без знака. Выбор со знаком означает, что размер увеличивается или уменьшается на соответствующую величину относительно заданного по умолчанию. Значение без знака означает абсолютное задание размера Размер шрифта Гарнитура шрифта

1.5. Создание нового абзаца Новый абзац создается нажатием клавиши Если необходимо перейти на новую строку не создавая нового абзац, нужно использовать сочетание клавиш +

Задание 4 Разделите текст на два абзаца, и разделите список книг переносом строки в пределах абзаца

1.6. Выравнивание текста На панели Properties расположены четыре кнопки, предназначенные для выравнивания текста абзаца по левому краю, по центру, по правому и по ширине. Для форматирования абзаца достаточно поместить курсор в любую точку текста. Если форматируются несколько абзацев, то их необходимо выделить. Выравнивание текста Создание абзацных отступов Каждый абзацный отступ смещает левую или правую границу абзаца на несколько позиций

Задание 5 Установите выравнивание заголовка по центру, основного текста – по ширине и задайте дополнительный абзацный отступ для списка книг.

1.7. Создание маркированных и нумерованных списков Для создания списка необходимо: 1. создать последовательность абзацев, нажимая клавишу (Важно!!!!) 2. Выделить все абзацы и нажать кнопку ul (маркированный список) или ol (нумерованный список) в группе инструментов Text панели Insert. Или соответствующие кнопки на панели инструментов Properties Создание списков

Задание 6 Создайте нумерованный список произведений

Вставка специальных символов Данное меню открывается щелчком по кнопке с треугольником, вид данной кнопки зависит от того какая команда из списка использовалась последней Переход на новую строку в переделах абзаца Вставка символа неразрывного пробела Вставка левых кавычек Вставка правых кавычек Вставка длинного тире Вставка знаков Вставка других символов

Работа с текстом Для форматирования текста используется группа инструментов Text панели Insert (Вставка) и инструменты панели Properties (Свойства). Инструменты данных панелей частично дублируют друг друга: Задать заголовки нуж- ного уровня от 1 до 6 Размер шрифта Гарнитура шрифта Начертания шрифта Цвет шрифта Вставка спец.символов Выравнивание текста Создание абзац- ных отступов Создание списков

Вставка предварительно отформатированного текста Существует возможность импорта документов, приго- товленных в Word. File – Import – WD… и указать файл, который необходимо открыть. Либо через буфер обмена: Выделить весь текст в Word, скопировать его в буфер обмена (Ctrl+C); вставить текст из буфера (Ctrl+V) в окне Design

2. Работа с графикой

Размещение графических файлов Размещение графических файлов InsertCommonImage Панель инструментов Вставка Insert – Common – Image. Если рисунок находится за пределами папки сайта, то откроется диалоговое окно, предупреждающее об этом. Следует нажать кнопку ОК и тогда будет сохранена копия изображения в папке сайта.

Задание 7 Вставьте рисунок potter.jpg

Выравнивание текста относительно изображения После того как изображение выделено, на панели свойств Properties отображаются его свойства Выравнивание текста относительно рисунка. В раскрывающемся списке нужно выбрать тип выравнивания (см. следующий слайд) Выравнивание рисунка по горизонтали

Выравнивание текста относительно изображения Default Выравнивание по умолчанию Baseline и Bottom Базовая линия текста (или другого объекта) будет выровнена по нижнему краю изображения Top Самый высокий элемент строки (не обязательно текстовый) выравнивается по верхней границе изображения Middle Выравнивание базовой линии текста по середине изображения TextTop Самый высокий текстовый элемент строки выравнивается по верхней границе изображения Absolute Middle Середина строки выравнивается посередине изображения AbsoluteB ottom Нижняя граница строки выравнивается по нижней границе изображения Left Текст обтекает рисунок справа Right Текст обтекает рисунок слева Выравнивание по одной строке текста абзац

Задание 8 Выравните текст относительно рисунка. Установите в поле Align: Left

Установка зазора между текстом и рисунком Зазор между текстом и изображением V - по вертикали H - по горизонтали

Задание 9 Установите зазор между текстом и изображением по горизонтали 10

Свойства изображения После того как изображение выделено, на панели свойств Properties отображаются его свойства Текст-подсказка, который появляется в окне браузера при наведении указателя мыши на рисунок Размеры рисунка, но их лучше менять с помощью графических редакторов Выравнивание текста относительно рисунка Зазор между текстом и изображением Выравнива- ние рисунка по горизон- тали Нужно выставить «0», чтобы не было рамки.

3. Работа с таблицами

3. Таблицы в Web-дизайне Таблицы используются для: Структуризации данных Компоновка элементов web-страницы (рисунков, фрагментов текста) Для создания таблиц используются следующие метки: TABLETABLE … – начало и конец таблицы TRTR … – начало и конец строки TDTD … – одна ячейка TНTН … – заголовок столбца (выделяется полужирным шрифтом) Если размеры таблицы указывать в пикселях, то будет создаваться таблица с фиксированной шириной. Если в процентах относительно размеров окна, то таблица будет с относительной шириной.

Работа с таблицами в программе Dreamweaver TableCommon Insert Вставка таблицы кнопка Table в группе инструментов Common (общие) панели Insert (вставка). В появившемся диалоговом окне Table можно задать параметры таблицы: Число столбцов Толщина рамки Число строк Ширина таблицы Расстояние между границами ячейки и её содержимым Расстояние между ячейками «шапка» таблицы заголовок таблицы Выравнивание заголовка Примечание, ко- торое не отобра- жается браузером

Задание 10 Создайте таблицу из четырех колонок, для отображения результатов опроса:

Изменение свойств таблицы Properties Свойства таблицы можно менять с помощью панели Properties: Внимание должен быть выделен объект – таблица!!!!!!!!!! Выравнивание по горизонтали таб- лицы относитель- но страницы Цвет фона Цвет рамки Фоновый рисунок Ширина рамки

Изменение свойств ячейки Properties Свойства ячейки также изменяют с помощью панели Properties. Для этого нужно установить курсор в ячейку свойства которой нужно изменить Объединение смежных ячеек Разделить ячейку Выравнивание содержи- мого ячейки по верти- кали или горизонтали Запрет переноса строк Ячейка становиться заголовком