- •Министерство образования и науки российской федерации
- •Введение
- •1. Лабораторная работа № 1 «Доступ, работа и информационный поиск вInternet»
- •1.1. Цель работы
- •1.2. Теоретическая часть
- •1.2.1. Общие сведения о работе в Internet
- •1.2.2. Сервисы Internet
- •1.2.3. Информационный поиск в Internet
- •1.3. Порядок выполнения работы
- •1.4. Содержание отчета
- •1.5. Контрольные вопросы и задания
- •2. Лабораторная работа № 2 «html– язык разметки гипертекстовых и гипермедиа-документов»
- •2.1. Цель работы:
- •2.2. Теоретическая часть
- •2.2.1. Общие сведения о языке html
- •2.2.2. Синтаксис html 3.2
- •2.2.3. Основные структуры html-документа (с примерами)
- •2.2.4. Разметка текста, выделение шрифта, цитирование, код
- •2.3. Порядок выполнения работы
- •2.4. Содержание отчета
- •2.5. Контрольные вопросы и задания
- •3. Лабораторная работа № 3 «Средства и программы поддержки звука в среде осmsWindowsXp»
- •3.1. Цель работы:
- •3.2. Теоретическая часть
- •3.2.1. Средства поддержки звука и их настройка
- •3.2.2. Встроенная программа «Звукозапись»
- •3.2.3. Встроенный Проигрыватель Windows Media
- •3.2.4. Программа cDex 1.51
- •3.2.5. Программа Ahead Nero
- •3.3. Порядок выполнения работы
- •3.4. Содержание отчета
- •3.5. Контрольные вопросы и задания
- •4. Лабораторная работа № 4 «Средства и программы поддержки видео в среде осmsWindowsXp»
- •4.1. Цель работы:
- •4.2. Теоретическая часть
- •4.2.1. Средства поддержки видео и их настройка
- •4.2.2. Встроенная программа «Windows Movie Maker»
- •4.2.3. Встроенный Проигрыватель Windows Media
- •4.3. Порядок выполнения работы
- •4.4. Содержание отчета
- •4.5. Контрольные вопросы и задания
- •5. Лабораторная работа № 5 «Программы поддержки анимации»
- •5.1. Цель работы:
- •5.2. Теоретическая часть
- •5.2.1. Программа PhotoMorph 2.00
- •5.2.2. Программа hsc Digital Morph 1.1a
- •5.3. Порядок выполнения работы
- •5.4. Содержание отчета
- •5.5. Индивидуальные задания
- •6. Лабораторная работа № 6 «Инструментальные системыWeb-дизайна.Dreamweaver»
- •6.1. Цель работы:
- •6.2. Теоретическая часть
- •6.2.1. Основные возможности программы Dreamweaver 3.0
- •6.2.2. Стилевое дополнение к стандартным возможностям
- •6.2.3. Задание текущей директории и редактирование свойств сайта в целом
- •6.2.4. Форматирование текста
- •6.2.5. Вставка изображения и редактирование его свойств
- •6.2.6. Настройка свойств изображения
- •6.2.7. Работа с таблицами
- •6.2.8. Работа с отдельными ячейками
- •6.2.9. Добавление новых ячеек в таблицу
- •6.3. Порядок выполнения работы
- •6.4. Содержание отчета
- •6.5. Контрольные вопросы и задания
- •7. Лабораторная работа № 7 «Авторские системы разработки мм продуктов. Macromedia Flash mx 2004»
- •7.1. Цель работы:
- •7.2. Теоретическая часть
- •7.2.1. Общие сведения о Macromedia Flash mx 2004
- •7.2.2. Средства помощи и обучения
- •7.3. Порядок выполнения работы
- •7.4. Содержание отчета
- •7.5. Контрольные вопросы и задания
- •8. Лабораторная работа № 8 «Авторские системы разработки мм продуктов. MacromediaDirectorMx 2004»
- •8.1. Цель работы:
- •8.2. Теоретическая часть
- •8.2.1. Общие сведения о MacromediaDirectorMx 2004
- •8.3. Порядок выполнения работы
- •8.4. Содержание отчета
- •8.5. Контрольные вопросы и задания
- •Приложение 1. Оформление отчета по лабораторной работе
- •Библиографический список
- •Содержание
6.2.4. Форматирование текста
Теперь можно набрать какой-нибудь абзац и применить к нему форматирование стандартными средствами программы Dreamweaver. Меню на рис.6.8 определяет формат абзаца (заголовок 1, заголовок 2, параграф и т.д.).
Рис.6.8. Определение формата абзаца
Меню на рис.6.9 определяет вид шрифта.
Рис.6.9. Определение группы шрифтов
Обратите внимание, используется определение группы шрифтов, а не какого-то одного наименования (в соответствии со спецификацией HTML 3.0) – если первый из указанных шрифтов отсутствует на компьютере конечного пользователя, браузер автоматически подставит второй, а если нет и второго – то похожий (вместо Arial – любой Sans-Serif, например), при этом общий дизайн страницы не утратится. Если же указывать конкретный шрифт, то при его отсутствии браузер применит шрифт, используемый по умолчанию (например, вместо Arial – Times New Roman), и шрифт с засечками испортит тщательно продуманный дизайн.
Меню на рис.6.10 определяет размер шрифта.
Рис.6.10. Определение размера шрифта
Размер шрифта определяется в относительных единицах – при данном способе форматирования размер шрифта в окне браузера конечного пользователя будет зависеть от настроек этого самого пользователя (выбираемые в меню браузера «Вид» размеры шрифта – крупный, средний и т.д.). Избежать этой зависимости и принудить пользователя видеть шрифт того размера, который задуман вами для полного соответствия с вашим дизайном, можно только используя CSS (таблицы стилей).
Дальше находится кнопка выбора цвета шрифта, функционирующая подобно вышеописанным кнопкам выбора цвета элементов, кнопки «bold» и «italic», кнопки выравнивания. Автоматическое выравнивание по ширине, к сожалению, не поддерживается, но если в исходном HTML-тексте для текущего абзаца прописать align="justify", то программа Dreamweaver легко с вами согласится и будет придавать всем последующим абзацам (после каждого нажатия Enter) аналогичное выравнивание.
В нижней строке этой панели доступны также кнопки выбора ссылки (выделите текст, который будет являться гиперссылкой, и нажмите на папочку рядом с полем «Link» для обзора; или просто введите адрес в это поле), выбора окна, в котором будет открываться ссылка (target, при отсутствии ссылки кнопка недоступна), маркированного и нумерованного списков, вертикального и горизонтального отступов.
Кнопка «?» – вызов контекстной справки (в отдельном окне браузера, на английском языке).
Кнопка с изображением карандаша (рис.6.11), вызывает Quick Tag Editor (если вам, допустим, понадобилось обозначить данный абзац как цитату – нажимаете эту кнопочку и из выпавшего списка выбираете blockquote, и т.п.) Вообще-то эта панель является панелью свойств любого объекта, и при использовании таблицы на ней появляются дополнительные кнопки свойств таблицы, при выделении рисунка – дополнительные кнопки свойств рисунка.
6.2.5. Вставка изображения и редактирование его свойств
Для вставки картинки рис.6.12, следует воспользоваться кнопкой с изображением картинки на панели «Objects».
|
|
Рис.6.11. Быстрый редактор тегов |
Рис.6.12. Панель Objects с кнопкой для вставки изображений |
После нажатия этой кнопки вы автоматически обозреваете свою рабочую директорию на предмет пригодных для использования картинок. Если картинка находится за пределами рабочей директории, вы ее находите и вставляете. Явным достоинством программы Dreamweaver является то, что «Preview» работает во всех директориях, а не только в директории сайта (в отличие от FrontPage). После того, как вы выбрали картинку и нажали «Select», возможны два варианта развития событий.
Выбранная картинка находится в рабочей директории сайта (или в одной из её поддиректорий). В этом случае она спокойно вставится, и всё.
Выбранная картинка находится за пределами рабочей директории сайта. В этом случае Dreamweaver предложит сразу скопировать её в рабочую директорию и предложит выбрать, куда именно и под каким именем. Надо соглашаться, иначе путь к изображению будет прописан неправильно (в виде file://../image.gif).
Когда изображение вставлено, автоматически прописываются в код страницы путь к нему, его ширина и высота. Поле "alt", в отличие от FrontPage, автоматически не прописывается, что позволяет избежать случайного попадания на страницы нежелательных комментариев, например, вида "image.jpg, 33800 bytes". Если вам не требуется комментарий к рисунку, Dreamweaver вообще не вписывает параметр alt в код страницы (но лучше все же заполнить это поле – большинство современных поисковых машин учитывает комментарии к рисункам при поиске).