Web дизайн с Macromedia HOMESITE




Разработка страниц публикации


Глава 4 Разработка страниц публикации
Глава 4. Разработка страниц публикацииРазработка страниц публикацииУстановка общих параметров страницы Вставка тегов <МETA> Установка атрибутов тега <BODY> Ввод и форматирование текст...
Разработка страниц публикации
Разработка страниц публикацииВ этой главе рассматривается общая технология создания и редактирования HTML-страниц в HomeSite, вне зависимости от того, какое место занимает страница в структуре узл...
Установка параметров шрифта
Установка параметров шрифта Шрифт является вспомогательным, хотя и очень мощным средством обеспечения комфортности пребывания пользователей Интернета на ваших страницах. С его помощью могут быть р...
Вкладка Fonts панели быстрой вставки
Рисунок 4.18. Вкладка Fonts панели быстрой вставки Щелчок на любой из этих кнопок приводит к непосредственной вставке соответствующего тега в код страницы. Исключение составляет лишь кнопка Font,...
Диалоговое окно Font редактора тегов
Рисунок 4.19. Диалоговое окно Font редактора тегов Относительно применения этих списков требуется сделать следующее пояснение. Приоритет каждого из этих списков соответствует его расположению в ок...
Работа с графическими элементами
Работа с графическими элементами HomeSite ориентирован на работу с наиболее распространенными графическими форматами Web — GIF, JPEG и PNG. Кроме того, поскольку многие броузеры, работающие под уп...
Перечень графических форматов распознаваемых HomeSite
Рисунок 4.20. Перечень графических форматов, распознаваемых HomeSite С учетом приведенного выше замечания все последующее изложение относится к файлам указанных четырех типов. Поскольку графика яв...
Включение изображений с помощью панели быстрой вставки
Включение изображений с помощью панели быстрой вставки Чтобы вставить изображение (точнее, тег <IMG>) в код страницы, достаточно щелкнуть соответствующую кнопку на вкладке Common панели быст...
Вкладка IMG Tag окна редактора тегов
Рисунок 4.21. Вкладка IMG Tag окна редактора теговНа вкладке IMG Tag имеются следующие элементы (Рисунок 4.21): поле Source (Источник), предназначенное для ввода значения атрибута SRC; значение мо...
Вкладка Browserspecific
Рисунок 4.22. Вкладка Browser-specificНа вкладке Browser-specific могут быть установлены значения следующих атрибутов (Рисунок 4.22): DYNSCR, который задаст URL файла видеоклипа; значение атрибута...
Замечания
Замечания1. При вставке видеоклипа следует обязательно предусмотреть использование альтернативного статического изображения, которое будет отображаться на странице в том случае, если броузер читат...
Вставка изображений из окна ресурсов
Вставка изображений из окна ресурсов С графическими файлами можно работать на вкладках Files (обеих) и Projects.Перечень возможных действий на всех вкладках идентичен. Вы можете: вставить в код до...
Вставка изображений из окна результатов
Вставка изображений из окна результатов При создании страниц, насыщенных графикой, приходится одновременно работать с несколькими графическими файлами. В такой ситуации полезно иметь возможность в...
Представление миниатюр изображений в окне результатов
Рисунок 4.24. Представление миниатюр изображений в окне результатов...
Контекстное меню миниатюры
Рисунок 4.25. Контекстное меню миниатюры Reset to current folder (Обновить с помощью текущей папки) — при выборе команды содержимое окна обновляется; команду целесообразно применять после того, ка...
Таблицы
Таблицы Таблицы, используемые на Web-страницах, практически ничем не отличаются от таблиц, создаваемых с помощью текстовых процессоров: те же строки, столбцы и ячейки. Однако большой набор регулир...
Создание таблицы с помощью мастера
Создание таблицы с помощью мастера Это наиболее простой и удобный способ для тех, кто не очень силен в языке HTML вообще и в применении таблиц в частности. Щелчок на кнопке Table Wizard приводит к...
Первое окно мастера создания таблицы
Рисунок 4.27. Первое окно мастера создания таблицы В исходном состоянии таблица в окне просмотра содержит две строки и два столбца, то есть четыре ячейки равного размера. Вы можете произвольным об...
Index17
Инструмент Table Sizer Данный инструмент (его название можно перевести как «разметчик таблиц») активизируется щелчком на кнопке Table Sizer вкладки Tables панели быстрой вставки. Хотя эта кнопк...
Установка параметров таблицы с
Установка параметров таблицы с помощью редактора тегов Редактор тегов может быть вызван щелчком на одной из четырех кнопок вкладки Tables: Table Dialog (Диалог таблицы) — вызов диалогового окна дл...
Index19
Редактирование таблиц с помощью Tag Tree и Tag Inspector В отличие от инструментов, рассмотренных выше, Tag Tree и Tag Inspector не позволяют создавать новые таблицы, однако предоставляют удобн...
Установка общих параметров страницы
Установка общих параметров страницы Под общими параметрами страницы в данном случае понимаются: заголовок страницы (содержимое тега <TITLE>); краткая характеристика содержания страницы, ключ...
Index20
Работа с таблицами стилей Весьма сложно выбрать такой стиль оформления Web-узла, который отвечал бы как вкусам разработчика, так и интересам посетителей. Но, пожалуй, еще труднее многократно во...
Index21
Основы технологии CSS Решение указанных проблем было найдено в 1996 году, когда Консорциумом 3W (WWW Consortium — W3C) была стандартизована технология каскадных (или иерархических) таблиц стиле...
Замечания
Замечания1. Несколько забегая вперед, отметим, что приложение TopStyle Lite может использоваться в составе HomeSite в двух форматах: расширенном, который обеспечивает редактирование CSS-файлов, и...
Редактирование таблиц стилей в
Редактирование таблиц стилей в TopStyle Lite В предыдущем подразделе было сказано, что в зависимости от контекста выполняемой операции приложение TopStyle Lite может быть открыто в одном из двух ф...
Кнопка Style Editor позволяет
В окне просмотра отображается текст, оформленный в соответствии с имеющимися в файле стилями. При этом используется следующее правило: для представления стиля класса выводится строка Class <им...
Представление стилей на вкладке Selectors
Рисунок 4.45. Представление стилей на вкладке SelectorsЧтобы добавить в CSS-файл новый стиль, необходимо:1. Щелкнуть на кнопке New Selector на панели инструментов окна редактирования;2. В открывше...
Диалоговое окно для создания нового стиля
Рисунок 4.46. Диалоговое окно для создания нового стиля В результате выполненных действий в окне редактирования появится имя стиля с парой фигурных скобок. Чтобы ввести значения параметров нового...
Ввод параметров стиля с помощью всплывающих списков
Рисунок 4.48. Ввод параметров стиля с помощью всплывающих списков Сокращенный формат окна TopStyle Lite используется в том случае, ecj; приложение открывается из окна редактора тегов (с помощью кн...
Вставка тегов <МЕТА>
Вставка тегов <МЕТА> Тег <МЕТА> -- один из немногих популярных тегов, которые почему-то не были удостоены чести включения в состав панели быстрой вставки. Правда, вы можете создать соб...
Вставка тегов <МЕТА> с помощью шаблонов кода
Рисунок 4.1. Вставка тегов <МЕТА> с помощью шаблонов кода Для вставки тегов <МЕТА> с помощью Tag Chooser необходимо: 1. Щелкнуть правой кнопкой мыши в позиции вставки тега и в контекст...
Вставка тега <МЕТА> с помощью Tag Chooser
Рисунок 4.2. Вставка тега <МЕТА> с помощью Tag Chooser...
Окно редактора тегов для установки атрибутов тега <МЕТА>
Рисунок 4.3. Окно редактора тегов для установки атрибутов тега <МЕТА> Третий способ вставки тега <МЕТА> - - с помощью мастера Quick Start Wizard -- отличается от двух предыдущих тем, ч...
Вкладка Common панели быстрой вставки
Рисунок 4.4. Вкладка Common панели быстрой вставки...
Окно мастера Quick Start Wizard
Рисунок 4.5. Окно мастера Quick Start WizardЗамечаниеЗамечаниеВ оценочной версии HomeSite 5 после щелчка на кнопке Finish на экране появляется диалоговое окно редактора тегов для тега <BODY>...
Установка атрибутов тега <BODY>
Установка атрибутов тега <BODY> В заготовке кода страницы этот тег присутствует, хотя при необходимости может быть помещен в документ и с помощью панели быстрой вставки (вторая левая кнопка...
Диалоговое окно редактора тегов для тега <BODY>
Рисунок 4.6. Диалоговое окно редактора тегов для тега <BODY> Большая часть атрибутов тега, влияющих на визуальные параметры страницы, устанавливаются на вкладке BODY Tag: раскрывающийся спис...
На вкладке Browserspecific устанавливаются размеры полей страницы
Рисунок 4.7. На вкладке Browser-specific устанавливаются размеры полей страницы 1. В меню File главного окна HomeSite выбрать команду Save as Template... и затем в открывшемся диалоговом окне ввес...
Ввод и форматирование текста
Ввод и форматирование текста Несмотря на все более широкое использование при создании Web-страниц графики и мультимедийных элементов, текст по-прежнему является основным средством информационного...
Общий подход к подготовке текстовых материалов
Общий подход к подготовке текстовых материалов Разумеется, стиль определяется в первую очередь характером освещаемой предметной области и спецификой вашей аудитории. Но при всем при том любому пос...
Установка визуальных атрибутов текста
Установка визуальных атрибутов текста Теперь обратимся к третьей составляющей стиля текстового содержимого документа — его визуальным атрибутам. Наиболее важными из них являются два: способ формат...
Форматирование текста
Форматирование текста Кнопки для форматирования текста собраны в основном на вкладке Common. К ним, в частности, относятся следующие (Рисунок 4.8):...
Теги форматирования текста представленные на вкладке Common
Рисунок 4.8. Теги форматирования текста, представленные на вкладке Common Paragraph (Параграф) — обеспечивает вставку тега <Р>; тег помещается в код страницы без атрибутов, но (по умолчанию)...
Автоматическое форматирование фрагмента текста
Рисунок 4.9. Автоматическое форматирование фрагмента текста Тег <HR> обеспечивает удобный и эффективный способ форматирования больших текстовых фрагментов, а также позволяет в какой-то степе...
Создание списков
Создание списков Кнопки, обеспечивающие создание различных типов списков, представлены на вкладке Lists (Рисунок 4.11). При щелчке на любой из этих кнопок открывается диалоговое окно, с помощью ко...
Вкладка Lists
Рисунок 4.11. Вкладка ListsДля быстрого создания списка необходимо: 1. Установить курсор в требуемую позицию. 2. На вкладке Lists щелкнуть на кнопке Quick List (Быстрое создание списка). 3. В откр...
Диалоговое окно для создания списка
Рисунок 4.12. Диалоговое окно для создания списка В результате выполнения описанной процедуры в код документа будет помещен тег-контейнер, соответствующий типу выбранного списка (<OL> или &l...
Пример создания вложенных списков
Рисунок 4.13. Пример создания вложенных списковНапример, для создания списка, приведенного на Рисунок 4.13, требуется выполнить такую последовательность действий: 1. На панели быстрой вставки щелк...
Окно редактора тегов для маркированного списка
Рисунок 4.14. Окно редактора тегов для маркированного списка...
Вкладка Content окна редактора тегов для элемента списка
Рисунок 4.15. Вкладка Content окна редактора тегов для элемента спискаЗамечаниеЗамечаниеВо всех приведенных выше диалоговых окнах имеется флажок Compact, если он установлен, то соответствующий тег...
«Заготовка» списка определений созданная с помощью кнопки Definition List
Рисунок 4.17. «Заготовка» списка определений, созданная с помощью кнопки Definition List Эта конструкция помещается в страницу без вызова окна редактора тегов. По умолчанию закрывающие теги для те...








Начало