This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Структура страницы. Команды языка разметки HTML Элементы интерфейса Создание локальной папки (папки сайта) Настройка свойств сайта Объекты: размещение объектов на странице; выделение объектов и установка их свойств.
Стилевое оформление: команды HTML; классы; гиперссылки; «уточнение стиля».
Типовые ошибки формирования страниц:
копирование и вставка сторонней информации; «сор в избе»; имена файлов; размещение файлов; изменение адресации; сканирование изображений; вставка изображений; изменение размеров изображений; альтернативная информация для изображения; «уточнение стиля»; назначение «чего-нибудь чему-нибудь» (стиль, поведения); «наведение порядка».
DreamWeaver. Основные правила работы
Структура страницы. Команды языка разметки HTML HTML-страницы представляют собой перечень команд (тегов) для программы их просмотра – браузеров. Наиболее распространенным является браузер Imternet Explorer (разные версии) компании Microsoft. «Пустая» страница имеет определенный шаблон для размещения информации Untitled Document <meta http-equiv="Content-Type" content="text/html; charset=windows1251"> Строки просматриваются последовательно по мере загрузки страницы. Строки образуют блоки для размещения соответствующей информации. Характеристика элементов страницы (блоков) и команд приведена ниже. Указание объектной модели документа и адреса размещения Стандарта языка гипертекстовой разметки HTML. Указание на язык разметки, в котором выполнена страница. Начало разметки. Заголовок страницы. Начало. Здесь размещается информация о названии страницы, ключевые слова (для поисковых машин), справочная информация, комментарии. Здесь же могут размещаться сценарии, обеспечивающие интерактивное управление информацией пользователем, гиперссылки (адреса) на другие страницы, другая дополнительная информации. Untitled Document Титул страницы – ее название, определяющее основное содержание, размещенное между открывающей () и закрывающей () командами. В данном случае страница не имеет названия (Untitled Document). Примеры названий: Способы селекции картофеляПример оформления типовой страницы Информация, размещенная между этими командами, указывается при ее просмотре в титульной строке браузера.
2
DreamWeaver. Основные правила работы
<meta http-equiv="Content-Type" content="text/html; charset=windows1251"> Эта команда (метатег) устанавливает для браузера кодировку, в которой выполнена страниц. В данном случае это КИРИЛЛИЦА, windows-1251, одна и пяти кодировок, предусмотренных для кириллицы. При формировании страницы тип кодировки устанавливается в разделе «Свойства страницы». Для всех страниц сайта такая установка производится в разделе «Свойства сайта». При просмотре страницы тип кодировки можно устанавливать в опции «Вид» главного меню браузера.
Окончание заголовка страницы 3
DreamWeaver. Основные правила работы
… Тело страницы. Основное содержание страницы (строки команд) размещаются между тегами … - начало тела страницы и окончание тела страницы. Окончание блока информации в языке разметки HTML (конец страницы)
Элементы интерфейса Для запуска системы DreamWeaver используется ярлык, размещенный на рабочем столе (двойной щелчок ЛКМ). Активизированная система предлагает выбрать тип документа для последующей работы с ним.
Следует выбрать тип документа (Create New – создать новый) HTML. Если показ этого окна отключен, то при запуске системы производится выбор типа создаваемого документа из главного меню системы File > New, или сочетанием клавиш Ctrl + N.
Окно для выбора документа в этом случае имеет такой вид
4
DreamWeaver. Основные правила работы
Интерфейс системы показан ниже
Главное меню обеспечивает доступ ко всем командам управления процессом разработки документа. Необходимость частого обращения к нему отсутствует, так как практически все важные инструменты разработки документа размещены на остальных панелях.
5
DreamWeaver. Основные правила работы
Стандартная панель содержит объекты, внедряемые в документ – размещаемые в поле документа. По умолчанию доступна вкладка Common (общие). Если прижать эту кнопку ЛКМ мыши, то появляется возможность выбора других типов объектов. Панель документа содержит позиции, управляющие его видом, режимом работы (работа с кодом, визуальная верстка, совмещение режимов). Здесь же доступны опции просмотра ошибок кодирования, просмотра документа в браузере и настройка типа браузера для просмотра, а так же опции управления видимостью элементов страницы.
Для перехода в разные режимы верстки следует воздействовать ЛКМ мыши на соответствующие кнопки. Вид документа в различных режимах верстки показан ниже.
Панель свойств обеспечивает настройку свойств выделенного пользователем объекта. По умолчанию доступны свойства только текста. Докер дополнительных панелей. Здесь размещаются панели управления разработкой, полный перечень которых находится в опции главного меню Window, часть панели показана на рисунке. В докере размещены только те дополнительные панели, которые отмечены «галочкой» на панели Window главного меню. Дополнительные панели в докере можно свернуть и развернуть по мере необходимости. Для этого воздействуют ЛКМ мыши на стрелки перед названием дополнительной панели. На рисунке слева развернута только панель Files, остальные свернуты. На дополнительных панелях можно размещать несколько вкладок для удобства работы. На открытой панели показаны вкладки Files (файлы сайта, в примере это сайт v81, указан в окне ниже) и Assets (активы сайта). 6
DreamWeaver. Основные правила работы
Весь докер можно свернуть, воздействуя на кнопку в его средней части левой границы (на рисунке обведена эллипсом). Повторное воздействие по кнопке приведет к развертыванию докера. Ширину докера можно менять так же, как и ширину таблицы или ячейки. ВНИМАНИЕ!!! Панель свойства можно свернуть и развернуть аналогичным образом Поле документа предназначено для размещения: объектов, обеспечивающих содержательное наполнение страницы (текстовая и графическая части); объектов, обеспечивающих позиционирование частей содержания относительно страницы и друг друга; элементов навигации (объектов-гиперссылок).
Создание локальной папки – папки сайта
Папка сайта создается для обеспечения целостности ресурса, удобства доступа к его элементам, упрощения адресации между элементами сайта. Для программы организация сайта обеспечивает контроль наличия элементов в папках сайта. Для выполнения этих функций следует указать, какой сайт используется разработчиком в данный момент. Варианты указания папки. 1. Использование панели установки свойств в главном меню: Edit > Preferences (или сочетание клавиш Ctrl+U) > Category > Site > кнопка Manage Sites… 2. Использование главного меню: Site > кнопка Manage Sites… 3. Использование позиции Manage Sites…непосредстве нно в окне выбора сайта на вкладке Files докера дополнительных панелей (справа). Независимо от выбранного варианта в итоге откроется окно, показанное слева. Следует выбрать позиции New > Site, после чего откроется панель непосредственной установки свойств сайта.
7
DreamWeaver. Основные правила работы
1. На вкладке Advanced (расширение) в окне Category (категории) указываем Local Info (локальная информация). 2. В окне имени сайта (Site name) указываем имя сайта (произвольное, латиницей, в нижнем регистре, без пробелов и специальных символов, первый символ - буква). 3. В окне локальной корневой папки (Local root folder) полый адрес размещения корневой папки. Для исключения ошибок записи следует использовать кнопку поиска в виде папки справа от этого окна (на рисунке обведена эллипсом). 4. В окне ниже целесообразно указать папку, в которую следует сохранять изображения, размещаемые на страницах сайта. Для этого используйте кнопкупапку справа (обведена пунктирным прямоугольником). ВНИМАНИЕ!!! При попытке внедрения на страницу изображения не из ресурсов сайта, программа выдаст сообщение (коротко – это не от Вас!) с указанием корневой папки сайта, который на этот момент находится в разработке. На вопрос программы (сделать копию?) отвечаем всегда утвердительно! Далее откроется знакомая панель для указания места сохранения (это и будет указанная Вами в п.4 папка). При необходимости можно указать иное место для сохранения. Пример указания сайта v81 показан на рисунке выше (вклейка «лево-низ»). 5. Подтвердите установки – кнопка ОК. После некоторых манипуляций программа отразит указанный сайт в окне панели Files докера. DreamWeaver обеспечивает множество других возможностей по управлению сайтом, но для начала работы можно остановиться на этом.
8
DreamWeaver. Основные правила работы
Настройка свойств сайта
Для настройки свойств сайта используется упоминаемая ранее панель свойств: Edit > Preferences (или сочетание клавиш Ctrl+U). Установки свойств (правая сторона панели) практически для всех категорий (левая сторона панели) можно оставить как есть, по умолчанию. В указанных «галочкой» (реально их там нет) категориях следует установить: General – максимальное число откатов (возвратов). На рисунке указано 50; Fonts – указать вид кодировки – Кириллица; New Document – конкретизировать вид кодировки – Кириллица (Windows). Остальные свойства можно подстраивать по мере необходимости.
Объекты
Размещение объектов на странице Для размещения объектов на странице можно использовать опцию Insert главного меню (рисунок справа). Для ускорения верстки целесообразно использовать панели объектов, собранные в стандартную панель. Об этом говорилось при рассмотрении интерфейса среды. Стандартную панель можно «разложить» по вкладкам панелей объектов. Для этого используется опция Show as Tabs открытой кнопки Common стандартной панели (рисунок слева). Вид «разложенной» стандартной панели показан ниже. Каждый пользователь средой DreamWeaver самостоятельно настраивает интерфейс «под себя».
Размещение текста Текстовая информация заносится на страницу либо с клавиатуры, либо через буфер обмена. Кроме того, некоторые элементы текста, такие как теги и специальные символы, можно внести с панели текстовых объектов. 9
DreamWeaver. Основные правила работы
При редактировании текста корректировку его элементов можно проводить на панели свойств.
Размещение изображений Для вставки изображения используются: главное меню (Insert > Image > …) и панель Common (показано на рисунке справа). Во втором случае последняя из использованных опций этой панели остается в виде ярлыка на кнопке изображений. В обоих случаях открывается панель выбора файла. При активизации файла на правой стороне панели выбора можно просмотреть (уменьшенное) изображение, его размеры, объем и ориентировочное время загрузки. Все размещаемые на сайте изображения следует предварительно обработать (размер, качество) и сгруппировать удобным для разработчика образом. (Корректировка «по ходу дела» ни к чему хорошему не приводит). В случае предварительной подготовки изображений их можно легко просматривать, выбирать и размещать на странице из окна активов сайта (вкладка Assets дополнительной панели Files – рисунок слева). Для этого нужно указать место вставки, выбрать рисунок и нажать кнопку Insert. Можно так же отбуксировать изображение из верхнего окна в нужное место, прижав изображение ЛКМ мыши. Размещение таблиц Таблицы используются как содержательный (информационный) элемент, и как элемент позиционирования информации. Их размещение возможно: Insert > Table или сочетание клавиш Ctrl+Alt+T - из главного меню; - с панели Common (Общие); - с панели Layout (Расположение). Во всех случаях открывается панель предварительной настройки свойств таблицы.
10
DreamWeaver. Основные правила работы
Целесообразно указать: строки (Rows) -1; столбцы (Columns) – 1; ширина таблицы (Table width) – в процентах или пикселях – по потребности; граница (Border thickness) и отступы (Cell padding и Cell spacing) – 0. Остальные установки, относящиеся к оформлению таблицы, можно не производить. При необходимости таблицу далее можно разделить на любое число строк и столбцов. Подтвердите назначенные свойства (ОК). В указанном месте (в месте расположения курсора) появится назначенная таблица. Для корректировки положения таблицы возможна ее буксировка и другие обычные средства, применяемые практически во всех текстовых редакторах. Указанный способ не позволяет формировать таблицы сложной структуры. В этом случае таблицу можно нарисовать (раздел «Компоновка страницы»). Аналогичным образом устанавливаются и другие элементы страниц. Выделение объектов и установка их свойств Выделение объектов производится для назначения их свойств и размещения на странице. В момент размещения на странице все объекты выбелены – обведены контуром с различным числом маркеров. Примеры доступа к настройке свойств объектов в режиме визуальной верстки показаны ниже.
Для настройки доступны свойства таблицы: имя (Table Id), число строк (Rows), число столбцов (Cols), ширина (W) и высота таблицы (H), отступы ячеек от границы таблицы (CellPad), отступ между ячейками (CellSpace), выравнивание таблицы на странице (Align), класс стилевого оформления (Class), цвет фона таблицы (Bg color), 11
DreamWeaver. Основные правила работы
фоновое изображение (Bg Image), толщина (Border) и цвет границы (Border color).
Для настройки доступны свойства ячейки (в нижней половине панели свойств): горизонтальное (Horz) и вертикальное (Vert) выравнивание в ячейке размещаемых в ней объектов, ширина (W) и высота ячейки (H), возможность переноса текста (No wrap), наличие заголовка (Header), цвет фона ячейки (Bg – нижняя позиция), фоновое изображение ячейки (Bg – верхняя позиция), цвет границы (Bgdr). В верхней половине панели свойств имеется доступ для настройки свойств текста, размещаемого в ячейке. ВНИМАНИЕ!!! На панели свойств только можно устанавливать свойства объектов. Необходимость установки определяется разработчиком. Так, например, высоту ячейки устанавливают в случае крайней необходимости, а высоту таблицы – практически никогда. Если в ходе разработки страницы программа сама устанавливает высоту таблицы, то значения высоты следует удалить! Ширину таблиц и ячеек можно устанавливать «жестко» - в пикселях, или «резиново» в процентах. Для таблицы это проценты от ширины окна, определяемой пользователем страницы. Для ячейки – проценты от ширины таблицы.
Для настройки доступны свойства: имя изображения (под надписью Image) с указанием его объема. В примере это указанное стрелкой изображение, емкостью 31 килобайт), ширина (W) и высота (H) изображения (всегда в пикселях), адрес изображения (Src) – путь к месту хранения изображения относительно папки сайта, альтернативная 12
DreamWeaver. Основные правила работы
надпись (Alt) – всплывающая подсказка при наведении на изображение курсора, класс стилевого оформления (Class), отступы по вертикали (V Space) – равные для обеих сторон, отступы по горизонтали (H Space) – равные с обеих сторон, адрес изображения пониженного качества (Low Src), если оно используется для ускорения загрузки страницы, толщина границы (Border), выравнивание рисунка относительно текста (Align). Для выравнивания по горизонтали можно использовать три кнопки, размещенные над этим окном. ВНИМАНИЕ!!! Изображение может использоваться в качестве карты, для каждой части которой – «горячей области» реализуют свои гиперссылки. Для этого используют инструменты назначения, выделения и редактирования областей. В окне над этими инструментами имеется окно для назначения имени карты. Изображения следует готовить (размеры и качество изображения) заранее в одном из графических редакторов. Вместе с тем, DreamWeaver предоставляет возможность редактирования изображения. Инструменты редактирования размещены справа от метки Edit на панели свойств. Редактировать изображение в графическом редакторе Fireworks. Система интегрирована с этим редактором. Оптимизировать изображение в графическом редакторе Fireworks (изменение соотношения 0бъем-качество). Кадрировать изображение (обрезать выделенные края). Закрепить изменение размера области размещения изображения (активизируется после изменения размеров с помощью мыши – перетаскивание маркеров). Настроить яркость и контрастность изображения. Изменить резкость изображения.
Гиперссылки
Гиперссылки обеспечиваю навигацию по сайту. Для этого «отсылочному» элементу страницы назначается соответствующее свойство – воздействие на этот элемент приводит к переходу по указанному адресу. Для назначения такого свойства следует: выделить элемент; назначить адрес перехода; указать способ представления нового документа (в каком окне открыть). Указание адреса перехода производится в окне Link (ссылка) панели свойств, а способа представления – в окне Target (цель). Ссылка с части текста (слово Культура) показана справа. Для выбора адреса новой страницы активизируйте кнопкупапку справа от окна Link, и укажите в открывшемся окне имя файла, к которому следует перейти при воздействии на ссылку. 13
DreamWeaver. Основные правила работы
В окне Target обозначено: _blank – открыть документ в новом окне; _self – заменить новым документом в этом же окне. Остальные обозначения используются при фреймовой структуре экрана. Они рассматриваются в разделе «Компоновка страницы». Примеры создания гиперссылок с изображения и части изображения показаны на рисунках ниже.
Ссылки могут указывать на целую страницу, а так же на ее определенную часть, конкретное место. В последнем случае такое конкретное место обозначается именованным «якорем» с панели Common, как показано на рисунке ниже слева. В окне Link зразу за именем файла ссылки указывается имя якоря через знак #.
Если ссылка идет на якорь внутри самой страницы, то в окне Link указывается только имя якоря со знаком #. 14
DreamWeaver. Основные правила работы
Для формирования гиперссылки можно, выделив ссылочный объект, активизировать кнопку Hyperlink (гиперссылка) панели Common. При этом появляется панель для полного описания ссылки.
При ссылке на страницу, расположенную вне сайта, в окне Link следует указать полный адрес страницы, например: http://www.rambler.ru. Для контроля правильности выполненных ссылок используется карта сайта. Просмотр карты сайта становится возможным, если при настройке сайта указана запускающая страница. В языке разметки HTML такая страница имеет одно из специальных имен: index.htm; index.html; default.htm. Имя и адрес запускающей страницы указывается при настройке свойств сайта как показано на рисунке ниже, слева для сайта (пример) v81. После этого в панели Files в правом окне следует выбрать просмотр карты – Map view (рисунок ниже, справа).
Представленное окно можно раскрыть во весь экран (кнопка, показанная на рисунке). Далее можно отразить только карту сайта, или, одновременно с этим, и файла сайта. Последний вариант показан на рисунке ниже. Страницы, которые связаны гиперссылками с другими страницами, имеют рядом с именем файла знак «+». Если эти связи раскрыты, то знак «+» заменяется знаком «-». Страницы с неправильной адресацией выделяются красным цветом. На рисунке это связь с файлом kult.htm. Действительно, здесь использована ссылка
15
DreamWeaver. Основные правила работы
непосредственно на файл, тогда как правильная адресация – через папку page «page/kult.htm».
Компоновка страницы
Таблицы Компоновка страницы заключается в позиционировании ее элементов относительно друг друга, а всех элементов – непосредственно на странице. Для этого таблица разбивается на ячейки.
Таблицы могут иметь довольно сложную структуру. Следует помнить, что таблица отражается браузером толь после полного расчета (строки страницы – последовательно по мере загрузки). Это приводит к увеличению времени загрузки. Поэтому, если есть такая возможность, лучше использовать несколько простых таблиц вместо одной сложной. Пример разделения таблицы приведен ниже.
Одна таблица. Во вторую строку вставлена Три простые таблицы (первая и вторая таблица «меню». Ниже приведен код этой имеют нижний отступ в 2 пикселя.). Ниже страницы. приведен код этой страницы.
16
DreamWeaver. Основные правила работы Пример разделения таблицы <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Пример для трех таблиц <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Технологические дипломные темы представляют собой разработку или анализ технологического процесса изготовления, ремонта и эксплуатации
Второй вариант для пользователя предпочтительнее, так как он сразу наблюдает последовательную грузку страницы. Для разработчика такое строение удобно при редактировании страницы Особенностью таблиц является зависимость ее ячеек друг от друга. Пример такой зависимости приведен ниже.
Простые приемы работы не позволяют сформировать таблицу сложной структуры. В этом случае можно воспользоваться инструментом «рисования» таблицы – вкладка Layout стандартной панели. 17
DreamWeaver. Основные правила работы
Далее следует последовательно активизировать кнопки Layout и Layout Table, после чего обычным образом разместить на поле документа таблицу (отрисовать ее рамку). Выбирая каждый раз инструмент Draw Layout Cell, определить границы ячеек.
После перехода в стандартный режим (Standard mode) получим таблицу. Отрисованные ячейки специально подсвечены серым цветом (программа этого не делает).
18
DreamWeaver. Основные правила работы
Полученная таблица имеет все те же недостатки, что и ранее рассмотренные. Поэтому такое построение целесообразно использовать только в случаях, когда размеры таблицы и всех ячеек не будут изменяться в процессе наполнения их информацией. Для обеспечения точности позиционирования ячеек целесообразно использовать фоновое изображение, размещаемое «под таблицей». На практике такие таблицы (фрагменты) делают в графических редакторах (Fireworks, Photoshop). При этом получают и таблицу, и связанные с каждой ячейкой фрагменты изображений. Слои Это то, что так любит Шрек. Слои можно ассоциировать с детской аппликацией – прямоугольные вырезки, размещаемые на экране. В каждом слое размещается своя часть информации. Слои можно перемещать независимо от положения других слоев. Слои имеют ряд существенных преимуществ перед остальными инструментами верстки страниц: точное (до пикселя) размещение на странице; размещение одного слоя над другим – третье измерение экрана; управляемость поведением слоев; возможность динамически изменять содержание слоя; возможность просмотра обширной информации в ограниченных габаритах – в рамках слоя; возможность вложения одного слоя в другой и наследование свойств родительского (несущего, несущих) слоя дочерними – вложенными слоями; размещение кода слоя в любом месте страницы. Строго говоря, все, кроме последних трех, перечисленные свойства слоев можно обеспечить практически для каждого элемента страницы с помощью стилевого оформления и/или сценария. 19
DreamWeaver. Основные правила работы
И последнее, слои можно конвертировать в таблицы, а таблицы – конвертировать в слои.
Для размещения слоя на поле документа следует: перейти на вкладку Layout стандартной панели; выбрать (если установлен другой режим) стандартный режим – Standard; активизировать кнопку Draw Layer; установит курсор в место расположения (ориентировочно) верхнего левого угла слоя, и, прижав ЛКМ, раздвинуть слой вправо и вниз. Для ориентирования в размерах слоя используются линии сетки с делением в 50 пикселей (по умолчанию). Установка сетки показана на рисунке ниже. Для перемещения слоя используются его маркер или границы. Следует прижать их ЛКМ и переместить слой в нужное место. Точное позиционирование – клавиши управления курсором на клавиатуре. Для изменения размеров слоя используйте маркеры на его границе.
Полная настройка свойств слоя выполняется на панели свойств, где обозначено:
20
DreamWeaver. Основные правила работы
Layer ID – имя слоя. По умолчанию программа ставит очередной номер слоя (например, Layer1). Слои именуются по ассоциации с его содержанием латиницей без пробелов и спецсимволов, первой должна быть буква; L, T – отступы слева и сверху левой и верхней границ слоя в пикселях; W, H – ширина и высота слоя в пикселях; Z-Index – номер слоя «в очереди на просмотр». Чем больше этот номер, тем «ближе» слой к пользователю; Bg image – фоновое изображение; Class – класс стилевого оформления; Overflow – способ отражения информации в слое, если ее «больше», чем размеры слоя: visible – вся информация видна (слой расширяется); hidden – видна информация только в границах слоя; scroll – постоянное наличие линий прокрутки; auto – появление линий прокрутки только в случае, когда габариты информации превышают размеры слоя. Самый практичный способ. Vis – видимость слоя. default – по умолчанию, как отобразит браузер; visible – слой виден; hidden – слой скрыт; inherit – наследование свойств родительского слоя. Clip: L, T, R, B – дополнительные ограничения видимости информации в слое со всех сторон – слева, сверху, справа, снизу. Bg color – цвет фона. При формировании страницы контроль и настройка свойств слоя осуществляется на панели свойств и на панели слоев. Обе панели и представление слоя в поле документа взаимосвязаны.
21
DreamWeaver. Основные правила работы
Если в документе несколько слоев, то следует указать возможность их наложения. Для этого на панели слоев используют окно Prevent overlaps – предотвратить перекрытие. Все слои можно сделать одновременно видимыми или одновременно скрытыми.
Заданное состояние
Все (более 100) слои открыты
22
Все слои скрыты
DreamWeaver. Основные правила работы
Из слоев да в таблицы… Для преобразования слоев в таблицы следует: выделить все слои (поочередно с нажатой клавишей Shift); главного меню Modify > Convert > Layers to Table…;
настроить свойства преобразования на открывшейся панели (ниже слева).
Результат преобразования показан в правой части рисунка. Таким образом, можно собрать страницу из отдельных фрагментов, а потом - объединить в одну таблицу. Использование слоев позволяет размещать обширную информацию в ограниченном пространстве. Ниже приведен пример размещения одной и той же информации в таблице (слева) и в слое (справа) при верстке страницы и при ее просмотре в браузере.
23
DreamWeaver. Основные правила работы
Таблицы можно вставлять в слои, но не наоборот. Задание видимости слоев и интерактивное управление их видимостью обеспечивают формирование содержания страницы самим пользователем без смены страниц. Для этого используют поведения – сценарии управления, которые формирует непосредственно программа. Пользователю предоставляется возможность задания соответствующих поведений. 24
DreamWeaver. Основные правила работы
Поведения Пример. На странице размещено три слоя. Слои с текстом и рисунком (их имена – text и picter) скрыты, а управляющий слой menu – виден. В слой menu вставлена таблица 4х1, в каждой ячейке размещены парные сменяющиеся рисунки – ролловеры. При наведении курсора на рисунок он автоматически заменяется другим, такого же размера. В таблице 4 пары рисунков. Смена изображений обеспечивается сценарием, который формирует сама программа. Непосредственно в ячейке таблицы заносится следующий текст:
При наведении курсора onMouseOver идет обращение к функции смены изображения "MM_swapImage('Image7','','../image/stext.jpg',1)", если курсор отвести onMouseOut, то восстанавливается исходное изображение обращением к функции "MM_swapImgRestore()". Сам сценарий размещается в заголовке страницы … <script language="JavaScript" type="text/JavaScript"> 0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 25
DreamWeaver. Основные правила работы
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i Порядок размещения ролловера показан на рисунке ниже:
установите курсор в место вставки ролловера; на панели Common активизируйте позицию Rollover Image; на открывшейся панели Insert Rollover Image в окне Original image укажите адрес первого, сменяемого изображения (используйте кнопку поиска Browse); в окне Rollover image укажите адрес второго, заменяющего изображения (используйте кнопку поиска Browse); в окне Alternate text занесите текст всплывающей подсказки (альтернативную надпись); при необходимости укажите ниже адрес файла или/и якоря, на который производится ссылка (в нашем примере в этом нет необходимости).
26
DreamWeaver. Основные правила работы
К каждой полученной таким образом кнопке можно присоединить поведение, управляющее видимостью того или иного слоя.
Для этого следует: Выделить кнопку, к которой присоединяется поведение. В докере на панели Tag выбрать вкладку Behaviors (поведение). В нашем примере там уже обозначены два поведения для смены и восстановления изображений ролловера. Активизировать кнопку «+» добавить поведение и на открывшейся панели со списком доступных поведений выбрать Show-Hide Layers (показать-скрыть слои).
На открывшейся одноименной панели выделить нужный слой и указать его состояние (Show – показать, Hide - скрыть). Так как воздействие на кнопки меню произвольное, то каждый раз следует указывать состояние каждого слоя. В левой части окна Behaviors следует выбрать событие (для программы), по которому программы совершит указанное ранее действие (например, по щелчку ЛКМ onClick). Назначаемое машине действие и указание на обеспечивающее его событие и является ПОВЕДЕНИЕМ.
27
DreamWeaver. Основные правила работы
Аналогичным образом назначаются и другие поведения. В DreamWeaver их более 20. Имеется возможность формирования новых поведений самим пользователем. Реализация примера показана на рисунках ниже.
Фреймы Фреймовая (оконная) структура экрана позволяет разработчику показать пользователю несколько документов в разных окнах. Создать фрейм можно несколькими способами. 1. Создать новый документ как фрейм
2. Создать простой новый документ, а потом представить его как фрейм.
28
DreamWeaver. Основные правила работы
В обоих случаях будет одинаковый результат, показанный ниже.
В данном примере на экране расположено 4 окна: верхнее, левое, правое и общее, в котором размещены ранее указанные. Далее следует настроить свойства окон. Для этого следует использовать панель фреймов, расположенную в докере.
29
DreamWeaver. Основные правила работы
Если панель отсутствует, то ее следует установить из главного меню Window > Frames.
Сформированные таким образом окна отражены на панели фреймов с именами «по умолчанию». На этой панели следует выбрать окно и настроить его свойства в панели свойств.
Высоту верхнего окна и ширину нижнего можно изменять перемещением их границ. Разместите курсор над внутренней границей и прижмите ЛКМ в момент, когда он принимает вид обоюдоострой стрелки. Переместите границу. Можно указать эти размеры и в инспекторе свойств. Выделите границу, и на панели свойств укажите размер (с клавиатуры).
Эти же размеры можно установить непосредственно в коде общего окна: 30
DreamWeaver. Основные правила работы
Пример фреймовой структуры <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <noframes> Выделенные элементы первой команды означают: общее окно, строк (в пикселях) 87 – верхнее, сколько осталось от всего экрана (*) – нижнее, столбцов (в пикселях) – во весь оставшийся экран (*). Вторая выделенная команда: нижнее окно разделено на две части, строк в каждой одинаково – сколько осталось после размещения верхнего окна, столбцов – 177 (в пикселях) левое окно, сколько осталось (*) – правое.
31
DreamWeaver. Основные правила работы
После настройки окон следует сохранить всю структуру. При этом программа выделяет предлагаемое для сохранения окно рамкойтесьмой. Первым сохраняется общее окно. В открывшейся панели сохранения следует указать адрес и имя файла документа, который будет открыт в соответствующем окне. Например, имена файлов общего, центрального, верхнего и левого окон соответственно summa, centr, top, left. После сохранения (File > Save All) в исходном коде общей страницы вместо надписей типа file:///E|/v81/UntitledFrame-2" появятся реальные имена файлов с реальным адресом его размещения – в папке page: Долее можно работать с каждым из файлов как с отдельным документом. Особенность фреймов – необходимость указания конкретного окна, в котором следует открывать документ при организации гиперссылок: _blank – новое окно; _parent – поверх всех окон, но в несущем окне; _self – вместо документа, с которого сделана ссылка (эта позиция установлена по умолчанию); _top – вместо всех окон экрана; centr, left, top – в одном из окон фрейма, установленных разработчиком при формировании фреймовой структуры. Выбор окна раскрытия документа осуществляется на панели свойств в окне Target (цель). Вторая особенность – отражение в титуле браузера только заголовка несущего окна – фреймсета. Для обозначения этого заголовка в окне Title панели документа предварительно следует выделить одну из внутренних страниц фрейма.
32
DreamWeaver. Основные правила работы
Стилевое оформление Команды HTML Все элементы страницы следует оформить в стилевом отношении для отчетливого ее восприятия и потребления информации, обеспечения целенаправленного поиска и осознанного перехода от документа к документу. Стили относят к: командам HTML – для всех однотипных команд страницы; различным объектам – тем, которые отнесены к некоторым стилевым классам; ссылкам – ко всем ссылкам страницы; к персональным элементам страницы. Типовые элементы (команды) страницы – это:
- параграфы текста;
…
- заголовки шести уровней; - цитаты, выделенные части текста; - изображения;
- таблицы;
- ячейки;
- слои, блоки; - тело страницы т.п. Для стилевого оформления страниц используют каскадные таблицы стилей (CSS - Cascading Style Sheets). Откройте панель стилей (вкладка CSS Styles панели Design докера). Назначение кнопок на панели стилей отражено на рисунке.
Порядок назначения стилей: разместите курсор в поле документа, для которого создается стиль; активизируйте кнопку «создать новый стиль»;
33
DreamWeaver. Основные правила работы
укажите необходимое на панели назначения стилей. Если стиль используется только на этой странице, тогда следует выбрать опция «This document only – только для этого документа»; укажите адрес и имя файла, в котором будет храниться таблица стилей (панель открывается только при новой регистрации файла);
в окне «Category» выделяются соответствующие позиции, а справа устанавливаются значения свойств. Для параграфа назначение свойств показано ниже.
34
DreamWeaver. Основные правила работы
Аналогичным образом назначаются новые стили для остальных (по мере необходимости) команд. Классы Назначение стиля – класса осуществляется в той же последовательности, но на панели назначения стилей следует выделить верхнюю позицию. Имена классов начинаются с точки. Класс подсоединяется к любому объекту, команде персонально. Для этого выделите объект и на панели свойств укажите присоединяемый класс стилевого оформления.
35
DreamWeaver. Основные правила работы
Гиперссылки Гиперссылки обозначаются по умолчанию так, как это назначено в браузере пользователя. Для назначения собственного стиля в панели установки стилей следует выбрать позиции, как показано на рисунке ниже.
Непосредственное оформление производится как для обычного текста. Дополнительно следует указать наличие или отсутствие подчеркивания ссылки (по умолчанию они подчеркнуты) в позиции Decoration
Для присоединения таблицы стилей к новому документу следует активизировать кнопку «присоединит таблицу стилей». В заголовке документа появится команда связи документа с указанной таблицей стилей. Пример фреймовой структуры <meta http-equiv="Content-Type" content="text/html; charset=windows1251"> Использование таблиц стилей позволяет однообразно оформлять все страницы сайта, а при необходимости корректировки стиля – производить изменения только в файле таблицы стилей. Фоновый цвет и фоновое изображение Все объекты могут иметь фоновый цвет или/и фоновое изображение. Рассмотрим назначение этих свойств применительно к телу страницы.
} Указанную информацию можно копировать обычным образом и использовать по своему усмотрению. «Уточнение стиля» Рассмотренные способы стилевого оформления обеспечивают однообразное представление всех страниц сайта, и это хорошо. Для внесения корректив и дополнения выразительности отдельных элементов на страницах можно непосредственно указывать стили оформления этих элементов. Текст корректируется непосредственно с панели свойств (по существу это панель форматирования, используемая во всех редакторах обработки текста).
DreamWeaver формирует корректировки в виде отдельного блока (в примере это style1), который размещается в заголовке страницы. Это дает возможность копировать весь блок и внедрять стиль в другие страницы, или добавить стиль в таблицу стилей, размещенную в присоединяемом файле. Практически все элементы страницы могут обеспечиваться стилевым оформлением непосредственно в команде – теге в виде атрибутов. Для этого следует перейти в режим кодирования и внедрить в команду необходимое описание стиля. DreamWeaver оптимизирует этот процесс. Достаточно: разместить курсор в конце открывающей
сделать пробел (клавиша Space);
При этом откроется дополнительная панель, в которой можно выбрать необходимый атрибут или действие.
38
DreamWeaver. Основные правила работы
Двойной щелчок ЛКМ приводит к вставке выделенной позиции в код и открывает еще одну панель.
Двойной щелчок ЛКМ приводит к вставке выделенной позиции в код. Остается дописать наподобие того, что подсвечено ниже черным цветом. В примере это отступ таблица справа на 50 пикселей.
Приоритетность реализации стилей растет ближе к объекту.
Типовые ошибки формирования страниц: Копирование и вставка сторонней информации Текст следует копировать с конца фразы, абзацами. В противном случае копируется много лишней информации – таблицы (с их размерами и стилевым оформлением), стили текста. 39
DreamWeaver. Основные правила работы
Не используйте в качестве промежуточного элемента MS Word, особенно версию 2003. При сохранении страницы в web-формате этот редактор дает избыточный код, а версия 2003 еще и шифрованный код, который сложно редактировать. DreamWeaver умеет «чистить» код, полученный в MS Word (Commands > Clean Up Word HTML), но не может его окончательно выправить. «Сор в избе» В папках сайта должна быть только информация для сайта. Даже «временное» включение посторонней информации нарушает адресацию в документах, особенно изображений. Имена файлов Имена даются по ассоциации с содержанием, латиницей, в нижнем регистре, в одно слово, до 8 символов (последнее желательно). Примеры. Содержание Имя файла Достопримечательности деревни Скверно: Кураевка Dostoprimechatelynosti_derevni_kuraevka Допустимо: primechat, prim_kura, glavkur … Однотипные файла должны иметь «похожую» общую часть. Размещение файлов Файловая структура сайта должна быть понятной и удобной для разработчика. Предпочтительно все страницы сайта (за исключением запускающей – index.htm) размещать в одной папке, например, page. Изображения, таблицы стилей, файлы сценариев – в одной папке, например, image. Изменение адресации Смена имен файлов должна производиться на панели сайта. В этом случае программа отслеживает наличие связей и ссылок элементов страницы и предлагает обновить их. Следует с этим согласиться. Все остальные варианты приводят к нарушению адресации, и, как следствие, к дополнительной работе по корректировке связей. Сканирование изображений Сканированные изображения перед размещением на странице следует предварительно обработать в одном из графических редакторов (Photoshop, Fireworks и т.п.). Вставка изображений Изображения вставляются как объекты. В коде страницы прописывается адрес файла-изображения. Вставить изображение через буфер обмена из тексто40
DreamWeaver. Основные правила работы
вого редактора можно, но ненужно! Например, последнее изображение, скопированное и вставленное в web-страницу, будет размещено вместе со страницами сайта под именем «имя_страницы_clip_image001». Для страницы файла blokada.htm такая вставка выглядит следующим образом.
Дальше следует переместить это изображение в папку image, переименовать его и на странице blokada.htm заново прописать новый адрес этого изображения. Изменение размеров изображений При выделении изображение обрамляется рамкой с тремя маркерами. Это обеспечивает возможность изменения его размеров непосредственно в DrwamWeaver. Лучше этого не делать. Стратегия предварительной подготовки изображений не должна нарушаться. Используйте для обработки изображения графические редакторы Photoshop, Fireworks. Альтернативная информация для изображения На панели свойств изображения обязательно укажите альтернативную информацию для изображения. Если пользователем отключено в браузере воспроизведение графики, то на ее месте будет именно эта текстовая надпись. Кроме того, эта надпись появляется в качестве всплывающей подсказки при наведении курсора на изображение.
41
DreamWeaver. Основные правила работы
«Уточнение стиля» Продумайте варианты стилевого оформления важных, по Вашему мнению, блоков информации и разработайте эти варианты. «Доработка по ходу дела» не лучший вариант. Как правило, вместо нескольких необходимых стилей при этом появляется несколько десятков излишних, которые, к тому же, потом приходится удалять. Если Вы решили переназначить стиль для выбранного объекта, то сначала следует отменить предыдущий. В противном случае может появиться двойное оформление. Назначение «чего-нибудь чему-нибудь» (стиль, поведения) Стили и поведения назначаются конкретным объектам, которые перед присоединением должны быть выделены (они – цель Ваших действий!). Если такого выделения не сделать, то указанные категории будут присоединены к тому месту кода страницы, в котором был размещен курсор. «Наведение порядка» Не удаляйте ничего до окончания работы с сайтом. Помните закон Мерфи! Не удаляйте ничего вообще никогда. Собирайте копии Ваших наработок в свой архив.
