3.2.4. Форматирование текста
Теперь можно набрать какой-нибудь абзац и применить к нему форматирование стандартными средствами программы Dreamweaver. Меню на рис.3.8 определяет формат абзаца (заголовок 1, заголовок 2, параграф и т.д.).
Рис.3.8. Определение формата абзаца
Меню на рис.3.9 определяет вид шрифта.
Рис.3.9. Определение группы шрифтов
Обратите внимание, используется определение группы шрифтов, а не какого-то одного наименования (в соответствии со спецификацией HTML 3.0) – если первый из указанных шрифтов отсутствует на компьютере конечного пользователя, браузер автоматически подставит второй, а если нет и второго – то похожий (вместо Arial – любой Sans-Serif, например), при этом общий дизайн страницы не утратится. Если же указывать конкретный шрифт, то при его отсутствии браузер применит шрифт, используемый по умолчанию (например, вместо Arial – Times New Roman), и шрифт с засечками испортит тщательно продуманный дизайн.
Меню на рис.3.10 определяет размер шрифта.
Рис.3.10. Определение размера шрифта
Размер шрифта определяется в относительных единицах – при данном способе форматирования размер шрифта в окне браузера конечного пользователя будет зависеть от настроек этого самого пользователя (выбираемые в меню браузера «Вид» размеры шрифта – крупный, средний и т.д.). Избежать этой зависимости и принудить пользователя видеть шрифт того размера, который задуман вами для полного соответствия с вашим дизайном, можно только используя CSS (таблицы стилей).
Дальше находится кнопка выбора цвета шрифта, функционирующая подобно вышеописанным кнопкам выбора цвета элементов, кнопки «bold» и «italic», кнопки выравнивания. Автоматическое выравнивание по ширине, к сожалению, не поддерживается, но если в исходном HTML-тексте для текущего абзаца прописать align="justify", то программа Dreamweaver легко с вами согласится и будет придавать всем последующим абзацам (после каждого нажатия Enter) аналогичное выравнивание.
В нижней строке этой панели доступны также кнопки выбора ссылки (выделите текст, который будет являться гиперссылкой, и нажмите на папочку рядом с полем «Link» для обзора; или просто введите адрес в это поле), выбора окна, в котором будет открываться ссылка (target, при отсутствии ссылки кнопка недоступна), маркированного и нумерованного списков, вертикального и горизонтального отступов.
Кнопка «?» – вызов контекстной справки (в отдельном окне браузера, на английском языке).
Кнопка с изображением карандаша (рис.3.11), вызывает Quick Tag Editor (если вам, допустим, понадобилось обозначить данный абзац как цитату – нажимаете эту кнопочку и из выпавшего списка выбираете blockquote, и т.п.) Вообще-то эта панель является панелью свойств любого объекта, и при использовании таблицы на ней появляются дополнительные кнопки свойств таблицы, при выделении рисунка – дополнительные кнопки свойств рисунка.
3.2.5. Вставка изображения и редактирование его свойств
Для вставки картинки рис.3.12, следует воспользоваться кнопкой с изображением картинки на панели «Objects».
|
|
Рис.3.11. Быстрый редактор тегов |
Рис.3.12. Панель Objects с кнопкой для вставки изображений |
После нажатия этой кнопки вы автоматически обозреваете свою рабочую директорию на предмет пригодных для использования картинок. Если картинка находится за пределами рабочей директории, вы ее находите и вставляете. Явным достоинством программы Dreamweaver является то, что «Preview» работает во всех директориях, а не только в директории сайта (в отличие от FrontPage). После того, как вы выбрали картинку и нажали «Select», возможны два варианта развития событий.
Выбранная картинка находится в рабочей директории сайта (или в одной из её поддиректорий). В этом случае она спокойно вставится, и всё.
Выбранная картинка находится за пределами рабочей директории сайта. В этом случае Dreamweaver предложит сразу скопировать её в рабочую директорию и предложит выбрать, куда именно и под каким именем. Надо соглашаться, иначе путь к изображению будет прописан неправильно (в виде file://../image.gif).
Когда изображение вставлено, автоматически прописываются в код страницы путь к нему, его ширина и высота. Поле "alt", в отличие от FrontPage, автоматически не прописывается, что позволяет избежать случайного попадания на страницы нежелательных комментариев, например, вида "image.jpg, 33800 bytes". Если вам не требуется комментарий к рисунку, Dreamweaver вообще не вписывает параметр alt в код страницы (но лучше все же заполнить это поле – большинство современных поисковых машин учитывает комментарии к рисункам при поиске).