Параметры графического изображения

Разные элементы на страницу можно добавлять, выбирая их при помощи пункта меню "Вставка".

Более удобным вариантом может быть использование панели инструментов для вставки элементов на страницу. Если этой панели вы не видите, включить её можно, поставив галочку, как показано на рисунке.

Вот так выглядит эта панель инструментов.

Для начала нам нужно вставить таблицу. Укажем для таблицы такие параметры, как вы видите на рисунке.

Чтобы таблица не прижималась к левому краю, выровняем её по центру.

Внизу выберем белый цвет для фона.

Для шапки и подвала нам нужно всего по одной ячейке. Объединим две верхних и две нижних ячейки. Для начала выделим две верхних ячейки при помощи мыши.

Нажмём внизу на кнопку, объединяющую ячейки, как указано на рисунке.

Аналогично объединим две нижних ячейки. Вот что получилось.

Для меню нужно меньше места, чем для основного текста. Поместим курсор в левую среднюю ячейку и зададим ширину для неё 20%. Теперь она будет занимать 20% ширины таблицы, а правой колонке останется 80%.

Вот что получилось.

Начнём заполнять ячейки. Вставим картинку, приготовленную для шапки. Жмём кнопку для вставки изображений.

Выбираем нужную картинку.

Полезно задать для картинки поясняющий текст. Если вдруг у кого-то будут отключены картинки в браузере, он увидит этот текст вместо картинки, а поисковые системы будут показывать по этому тексту картинки с вашего сайта в поиске по картинкам.

Теперь сделаем меню. Пусть на сайте будет три страницы - главная, про климат Антарктиды и про животный мир Антарктиды. Напишем заголовки для этих страниц и выделим мышкой.

Нажмём на кнопочку внизу, чтобы сделать меню в виде маркированного списка (1). Также выберем выравнивание по верхнему краю, чтобы меню всегда было в верхней части ячейки (2).

Теперь заголовки пунктов меню нужно сделать ссылками. Выделим текст "Главная".

Придумаем названия для файлов двух других страниц, например, klimat.html и zhivotnyj-mir.html и аналогичным образом сделаем соответствующие пункты меню ссылками.

Перед тем, как вставлять какое-то изображение на сайт, предварительно его нужно оптимизировать и сохранить в подходящем формате. Затем следует подобрать на странице подходящее место для вставки этого изображения и установить там текстовой курсор.

Теперь выполняем команду меню Insert (Вставить) | Image (Изображение) (++). Также можно использовать кнопку Image (Изображение) на вкладке Common (Общее) панели инструментов Insert (Вставка):

Откроется диалоговое окно Select Image Source (Выбор источника изображения):

Обратите внимание, в правой части диалогового окна располагается панель Image Preview (Предварительный просмотр изображения), на которой не только осуществляется предварительный просмотр выбранного изображения, но и отображаются его характеристики: размер, формат, объем и предполагаемое время загрузки.

Раскрывающийся список Папка и список доступных гpaфических файлов, расположенный ниже, позволяют выбрать нужное изображение. Щелкаем на кнопке ОК. Изображение будет вставлено на место установки текстового курсора:

Изменить размеры изображения (если вы захотите это сделать), можно несколькими способами. Первый – ручной. Сначала выделите изображение щелчком левой кнопки мыши. На панели Properties (Свойства) отобразятся свойства выделенного изображения, а само изображение получит тонкую окантовку, на правой и нижней границах появятся три небольших черных квадрата. Это так называемые маркеры изменения размера изображения:

Чтобы изменить размер изображения ручным способом, нужно перетащить эти маркеры в нужном направлении. Для синхронизации горизонтального и вертикального размеров следует удерживать нажатой клавишу .

Второй способ заключается во вводе в соответствующие поля панели Properties (Свойства) значений вертикального (Н ) и горизонтального (W ) размеров. По умолчанию размеры изображения задаются в пикселах, но можно задавать их и в процентах от размера страницы. Для этого после введенного в поле размера нужно поставить знак процента %.

Если значения в полях размеров изображения выделены жирным шрифтом, значит, они уже были изменены. Первоначальные размеры изображения отображаются более тонким начертанием.

Чтобы восстановить истинные значения изображения нужно щелкнуть по закругленной стрелке, изображенной правее полей ввода размеров изображения.

В Dreamweaver также можно изменить относительное расположение изображения и обтекающего его текста. Для этого предназначен список Align (Выравнивание), расположенный, как Вы уже догадались, на панели Properties (Свойства):

По умолчанию установлено значение Default . Остальные девять параметров:

Baseline — нижняя граница изображения совпадает с базовой линией текста;

Тор — верхняя граница изображения совпадает с верхней линией текста;

Middle — середина изображения совпадает с базовой линией текста;

Bottom — нижняя граница изображения совпадает с низом текста;

TextTop — верхняя граница изображения совпадает с верхней границей самого высокого символа текста;

Absolute Middle — середина изображения совпадает с центральной линией текста;

Absolute Bottom — нижняя граница изображения совпадает с нижней границей самого нижнего символа текста;

Left – изображение выровнено по левому краю;

Right – изображение выровнено по правому краю.

По умолчанию изображение помещается на страницу без всякой окантовки. Но бывает, что рисунок надо как-либо выделить. Для этого используется рамка (или, как ее еще часто называют, – граница). Ширина рамки в пикселах задается в поле ввода Border (Граница), расположенном на панели Properties (Свойства) графического изображения:

Нулевое значение или отсутствие значений не задают рамки вообще. Рамка имеет только черный цвет. На рисунке представлены примеры использования границ толщиной 0, 1, 5, 10, 25 пикселов:

Вставка звуковых и видео файлов

Путешествуя по Интернету, вы наверняка встречали сайты с музыкальным сопровождением. Чаще всего музыка встречается на домашних страничках, но и тематические сайты не исключение.

Мне, если честно, не очень нравятся сайты, которые используют музыкальное сопровождение в качестве фона. При длительном просмотре сайта одна и та же мелодия изрядно надоедает. Так что не увлекайтесь 🙂

Самое главное, что нужно учитывать при выборе фоновой музыки – это ее соответствие теме вашего сайта. И вообще подумайте, логично ли будет на вашем сайте использовать фоновую музыку?

Музыка, так же, как и фоновый рисунок, не должна отвлекать от содержимого страницы. Если это именно фоновая музыка, то лучше всего будет использовать просто мелодию без слов.

Впрочем, помимо фоновой мелодии можно записать приветствие голосом, и сделать так, чтобы оно запускалось при каждом заходе на сайт. Или добавить звуковые эффекты к различным действиям пользователя – к примеру, звук «клац» при нажатии на ссылки.

Прежде чем помещать на страницу звук, нужно создать или подобрать подходящий звуковой файл. Сейчас существует несколько форматов для хранения таких документов: MP3, WMA и WAV. Они являются универсальными и проигрываются практически всеми проигрывателями.

Внедрить звуковой файл на страницу можно посредством обычной ссылки (о создании ссылок будет рассказано немного позже). Но этот способ не лучший, так как требует много усилий со стороны пользователя. Лучше использовать его для представления, например, своей коллекции музыки.

Более эффективный способ – внедрить на страницу звук, который начнет воспроизводиться при загрузке данной страницы. Для этого необходимо подключить так называемый модуль расширения (Plugin). Это небольшие специальные программы представляют собой динамические библиотеки Windows (DLL) и загружаются браузером автоматически для воспроизведения аудио или видеофайла.

Для подключения такого модуля расширения, как всегда, сначала выбираем подходящее место на странице и устанавливаем там текстовой курсор. Затем выполняем команду меню Insert (Вставка) | Media (Мультимедиа) | Plugin (модуль расширения):

Для ускорения процесса можно воспользоваться кнопкой Media (Мультимедиа) на вкладке Common панели инструментов Insert. В раскрывшемся списке выбираем последний пункт – Plugin .

В любом из двух вариантов откроется диалоговое окно Select File (Выбрать файл). Если выбранный звуковой файл располагается не в папке сайта, Dreamweaver сообщит об этом и предложит сохранить его в нужной папке. В примере файл уже находится там, где ему и следует находиться.

Теперь нажимаем кнопку ОК и смотрим, что у нас получилось. В том месте на странице, где вы установили текстовой курсор, появился небольшой серый прямоугольник, на котором изображен такой же знак, как перед пунктом Plugin кнопки Media вкладки Common . Как вы уже догадались, это и есть знак модуля расширения.

Теперь переведем взгляд ниже, а именно, на панель Properties , где сейчас отображаются свойства модуля расширения:

Как видите, здесь можно настроить высоту, ширину модуля, отступы и выравнивание. А также ширину границы, путь к файлу и так далее. Заметное место на панели занимает кнопочка Play. Как Вы думаете, для чего она нужна?

Теперь давайте посмотрим, как этот значок модуля расширения будет выглядеть в браузере:

Все просто. Нажимаем на стрелку (1) файл проигрывается, нажимаем на «паузу» в виде двух вертикальных линий (2) – воспроизведение останавливается.

Просто – да, но настроек как-то маловато, даже на мини-прогрыватель не тянет. Поэтому давайте вернемся в Dreamweaver, увеличим ширину модуля до 100 пикселей и посмотрим, что же отобразится в браузере.

Уже лучше, не так ли? Стало видно больше кнопок управления. Теперь увеличим ширину еще на 100 пикселей. Может, еще что-нибудь появится? 🙂

Да, наши ожидания оправдались! Однако, больше новых кнопок не появится (во всяком случае, в моем примере), так что дальше можно не экспериментировать.

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

Тогда у него будет только два пути – либо отключить громкость в колонках, либо закрыть окно с Вашим сайтом. Первый путь более затратный, со вторым же просто – один-два щелчка мыши.

Вставлять видео на страницу можно также, как и звук – посредством Plugin . Не забудьте увеличить размеры модуля расширения, чтобы поля просмотра был больше. Пример окна проигрывателя для демонстрации видеофайла:

Фоновые изображения

Выше мы рассмотрели, как размещаются на Web-странице всевозможные изображения в разных форматах. Все эти изображения представляли собой полезное содержание страницы и находились в "потоке" текста либо жестко к нему привязанные, либо "плавающие" в нем. Однако стандарт HTML определяет еще и так называемые фоновые изображения, помещаемые под текстом и "просвечивающие" сквозь "прозрачный" цвет графических элементов страницы. В этом смысле фоновые изображения похожи на водяные знаки на гербовой бумаге.

Задать фоновое изображение для Web-страницы очень просто. Для этого вызовите на экран диалоговое окно Page Properties (см. рис. 3.50), для чего выберите пункт Page Properties меню Modify или контекстного меню или нажмите клавиши +. В поле ввода Background Image введите имя файла фонового изображения или нажмите кнопку Browse и выберите нужный файл в диалоговом окне. После этого нажмите кнопку ОК. Получившийся результат может выглядеть, например, так - см. рис. 4.26. (Автор создал пустую Web-страницу, поместил на нее фрагмент текста этой книги, задал для него в качестве фонового изображения файл J0143756.gif, поставляемый в составе Microsoft Office 2000, и сохранил результат в файле 4.5.htm.)

Рис. 4.26. Web-страница с фоновым изображением

Удачно подобранное фоновое изображение может заметно оживить Web-страницу. Но не следует выбирать в качестве фона слишком яркое или пестрое изображение. Лучше всего сразу после задания фона попробуйте сами почитать текст, выведенный на странице, и оцените, легко ли он читается. Если нет, замените фоновое изображение другим или совсем откажитесь от него. Можно также попытаться подобрать соответствующий цвет текста, чтобы он нормально читался, но не резал глаза. Снова посмотрите на рис. 4.26 - там текст выглядит на фоне достаточно контрастно, чтобы нормально читаться.

Фоновое изображение ведет себя точно так же, как обычные изображения, помещенные на странице: Web-обозреватель сначала загружает HTML-файл страницы, а потом - все сопутствующие файлы, в том числе изображения. Это значит, что какое-то время фон на вашей странице будет отсутствовать. И вам нужно позаботиться о том, чтобы пользователь хотя бы смог прочитать текст вашей страницы. Для этого подберите цвет ее фона, аналогичный общему тону фонового изображения. Так, если фоновое изображение имеет темный тон, задайте для страницы темно-серый, темно-синий или черный цвет фона. И не следует в этом случае оставлять фон страницы белым, т. к. ваш текст тоже, скорее всего, будет белого цвета.

Web-страницы и Web-сайты

Что такое Web-страница? Ответить на этот вопрос могут многие. Это интернет-документ, предназначенный для распространения через Интернет посредством сервиса WWW. А если уж говорить по-простонародному, это то, что показывает в своем окне программа-клиент для просмотра Web-страниц - Web-обозреватель (браузер).

С технической точки зрения Web-страница - это обычный текстовый файл, который можно создать в любом текстовом редакторе, том же Блокноте, стандартно поставляемом в составе Windows. Этот файл содержит собственно текст Web-страницы и различные команды форматирования этого самого текста. Команды форматирования называются тегами , а описывает их особый язык HTML (HyperText Markup Language), язык гипертекстовой разметки.

Следующий шаг - выяснить, с помощью каких программ на языке HTML пишутся эти самые Web-страницы. Да, поскольку они представляют собой обычные текстовые файлы, содержащие код HTML, их можно писать в обычном Блокноте или аналогичной программе.

Зачем нужны Web-редакторы?

Язык HTML, несмотря на столь мудреное название, весьма прост. И написать с его помощью простенькую Web-страничку с парой абзацев текста можно буквально за пять минут, причем большая часть этого времени будет потрачена на набор самого текста этой страницы, а не тегов HTML. Так в чем же проблема?

Многие не знают HTML, более того - не хотят его изучать или не имеют на это времени. Но создавать Web-страницы хотят. Поэтому специально для них программисты написали множество программ, предназначенных для создания Web-страниц.

Одна из таких программ написана разработчиками из фирмы Macromedia и называется Macromedia Dreamweaver . Первая ее версия вышла еще в далеком 1998 году; в настоящее же время доступна версия 8.

Именно с Dreamweaver мы и будем работать.
Dreamweaver - типичнейший представитель визуальных Web-редакторов, работающих по принципу WYSIWYG (What You See Is What You Get, "что ты видишь, то ты и получишь"). При этом пользователь форматирует текст и в окне редактора сразу же видит результаты своих трудов.

Существуют также и невизуалъные Web-редакторы (они же - HTML-редакторы), основанные на другом принципе. Они работают непосредственно с самим HTML-кодом, предоставляя при этом пользователю различные дополнительные возможности: быстрая вставка тегов, удобное задание их параметров, набор предопределенных шаблонов для создания стандартных элементов Web-страницы и пр. В этом смысле они похожи на Блокнот, но значительно расширенный.

Здесь нужно сказать, что практически все серьезные Web-редакторы имеют режим правки непосредственно самого кода HTML (т. е. фактически являются гибридными Web-редакторами). Поэтому сейчас практически всегда, когда говорят "визуальный Web-редактор", подразумевают как раз гибридные программы. Разумеется, к их числу относится и Dreamweaver , с которым нам пора познакомиться поближе.

Введение

При самом первом запуске программы, вам будет предложено выбрать рабочую среду. Давайте создадим новый документ "File ->New " (Файл-Новый)

На этой вкладке создайте новый документ, выбрав Basic Page (Базовая страница) -> HTML.
Перед вами откроется рабочее окно программы.

И на вновь созданной странице напишите какой-нибудь текст, состоящий из русско-английских слов. Для примера: "полезная информация по работе с программой DreamWeaver ".
После чего сохраните страницу командой "File - Save as ", но саму страницу не закрывайте в редакторе, а теперь откройте вновь созданную страницу в браузере, - что у вас получилось? В моем случае отобразилась такая вот надпись

Поэтому первое с чего стоит начать - это обучить DreamWeaver кириллице. Главное меню Edit (Редактировать) – Preferences (Настройки), в открывшемся диалоге выберите категорию New Document (Новый документ) и на этой вкладке в списке "Default Encoding", выберите "Cyrillic (Windows-1251)". Далее в левой части этого диалога выберите пункт "Fonts (Шрифты)" и в списке "Font Setting (Настройки Шрифта)" выберите пункт "Cyrillic (Кириллица)".

Здесь вы так же можете настроить отображение текста (выбрать шрифты и установить размер букв), который будет использоваться по умолчанию. Для завершения нажмите "ОК ". После чего создайте еще одну страницу и впишите какой-либо текст, сохраните ее "File - Save " и откройте сохраненную страницу. Теперь все в порядке, НО! Любая веб - страница, где в теге Meta, явным образом не будет указана кодировка "charset = windows-1251" будет "перегоняться" в кодировку "Cyrillic (ISO-8859-5)"

Чтобы это не происходило, откройте файл: (Ваш диск \Program Files\ Macromedia\ Dreamweaver 8\ Configuration\ Encodings\ EncodingMenu.xml) и в списке кодировок найдите четыре кодировки Кириллицы, идущие друг за другом

Таблица 1

Отредактируйте этот файл в "Блокноте", поменяв местами кодировки "ISO-8859-5" и "Windows-1251", чтобы порядок следования кодировок Кириллицы принял следующий вид

Таблица 2

Сохраните изменения в файле, на этом процесс обучения программы русскому языку можно считать законченным.

Интерфейс

Теперь давайте снова вернемся к рабочей среде программы.

Для переключения режима отображения рабочей среды (режимов всего три: Code (Код), Design (Дизайн) и Code and Design на панели инструментов или главное меню "View "(Вид).

Выберите из этих режимов тот, с которым вы можете/умеете работать, хотя предпочтительно оставить "Code and Desig", тогда рабочее окно как бы разделится на две части и вы сможете видеть и сам HTML-код и страницу в режиме WYSIWYG.

Выше, ниже и правее окна документа находятся группы панелей - небольшие окна, которые могут быть либо "приклеены" к одному краю главного окна, либо свободно "плавать" рядом с ним. В верхней части каждой группы панелей имеется ее заголовок - "выпуклая" синяя полоса, на которой написано название панели.

Большинство панелей имеют так называемое дополнительное меню. Оно открывается при щелчке мышью по небольшой кнопке , расположенной в правом верхнем углу группы, в которой находится данная панель, и имеющей изображение списка из трех позиций и небольшой стрелки, направленной вниз. (В сжатом состоянии эта кнопка не видна.)

Группы панелей всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы мы могли всегда получить к ним доступ, вне зависимости от того, какое окно сейчас активно.
Если же мы захотим убрать какую-либо из этих групп, мы можем "вынести" ее за пределы окна документа или вообще закрыть, раскрыв ее дополнительное меню и выбрав пункт Close panel group. Теперь обратим внимание на правый край главного окна, где находится множество всяческих групп панелей. Это так называемый док - область, специально для них предназначенная. Док отделен от остального пространства главного окна толстой серой полосой, которую мы можем перетаскивать мышью, изменяя размеры дока. Мы также можем щелкнуть мышью довольно приметную кнопку на доке, чтобы быстро скрыть его со всеми.

Еще три панели Dreamweaver достойны отдельного упоминания. От обычных панелей они отличаются тем, что имеют постоянные размеры и образуют каждая свою особую группу

инструментарий объектов

инструментарий документа

стандартный инструментарий, предоставляющий доступ к операциям с файлами (создание, открытие и сохранение Web-страницы), буфером обмена и пр., изначально скрыт.

Чтобы вывести эти панели на экран главное меню “Вид (View) – Панели инструментов (Toolbars)” (соответствующие панели (Insert, Document, Standard).

Если мы откроем несколько Web-страниц, разобраться в них будет очень трудно - окна документов перекрывают друг друга, и добраться до нужного удается далеко не сразу.

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

Если нам необходимо держать на виду сразу два окна или больше, стоит воспользоваться пунктами меню “Window - Cascade, Tile Horizontally или Tile Vertically”. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в главном окне так, что мы сможем видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в главном окне "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий - по вертикали.

Определение сайта в Dreamweaver

Прежде чем начать управлять сайтом, его необходимо зарегистрировать в Dreamweaver.

Для того чтобы создать новый сайт, воспользуйтесь пунктом New site (Новый сайт) меню Site (Сайт). После выбора на экране появится диалоговое окно Site Definition (Определение сайта), состоящее из двух вкладок.

Если оно открыто на вкладке Basic (Основные), переключитесь на вкладку Advanced (Дополнительно) - она предоставляет больше возможностей по настройке вашего сайта.
Как видите, в левой части этого окна находится список вкладок второго уровня. Переключитесь на вкладку Local Info (Локальная информация), где задается информация о файлах вашего сайта, находящихся на жестком диске вашего компьютера (локальной копии сайта).

В поле ввода Site Name (Имя сайта)вводится имя сайта. Оно служит только для того, чтобы вам самим было удобно с этим сайтом работать. Назовите сайт "proba".

В поле ввода Local Root Folder (Локальный корневой каталог)указывается путь к корневой папке локальной копии сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода, и выбрать нужную папку в появившемся на экране диалоговом окне.

Флажок Refresh Local File List Automatically (Обновить локальный список файлов автоматически)включает или отключает автоматическое обновление списка файлов локальной копии сайта. Если вы оставите его включенным, список файлов сайта всегда будет обновляться автомагически, как только Dreamweaver становится активным. Если же вы выключите вышеназванный флажок, вам самим придется обновлять список файлов сайта, но Dreamweaver будет активизироваться быстрее.

В поле ввода Default Images Folder (Папка с картинками по умолчанию)вводится имя папки, в которой по умолчанию будут располагаться все графические изображения, помещаемые вами на Web-страницы сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода и выбрать нужную папку в появившемся на экране диалоговом окне. Введите в это поле “pic”.

В поле ввода HTTP Address вводится интернет-адрес вашего сайта. Не вводите в это поле ничего.

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

После нажатия кнопки “Готово ” в панели Файлы отобразится список файлов сайта, изначально там нет файлов, но они появятся по мере Вашей работы.

Основа практически любой страницы - это текст. Создайте новую страницу (File - New) и наберите в ней любой текст.

Текст набирается с помощью клавиатуры (а вы как думали?), при этом Dreamweaver самостоятельно разобьет текст на строки.

Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый нами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок.

И тогда в любом браузере, в его заголовке можно будет прочесть

Сохраните эту страницу, дав ей какое-либо имя. Главным страницам сайтов или директорий дают название: index.htm , index.html , index.php и так далее.

Для форматирования абзацев целиком удобнее пользоваться раскрывающемся списком "Format (Формат)" на панели "Properties (Параметры)".

Если эта панель у вас не открыта - кликните на треугольник рядом со словом "Properties (Параметры)".

В примере приведены примеры форматирования абзацев, сам процесс достаточно прост: кликаете мышкой по любому абзацу и в списке "Format (Формат)" выбираете один из шести пунктов.
Если вы хотите форматировать не абзацы, а только выбранные слова, выражения или символы – то вам пригодятся остальные пиктограммы.
Для задания размера символов воспользуйтесь пунктом "Size (Размер)".
Вы можете выбрать шрифт текста - список "Default Font " . Причем для разных символов или слов вы можете установить разные шрифты.

Для выравнивания текста можно воспользоваться этими 4 кнопками. Интересная деталь: если щелкнуть еще раз по нажатой кнопке-переключателю, она "отожмется". В этом случае для абзаца будет установлено выравнивание по умолчанию, обычно - по левому краю.

по левому краю;

по центру;

по правому краю;

по ширине.

Для задания (увеличения/уменьшения) отступа абзацев можно воспользоваться пунктами
При каждом нажатии пункта "Indent" отступ будет увеличиваться, а при нажатии на "Outdent" наоборот уменьшаться.

Cделаем некоторые слова на нашей Web-странице полужирными и курсивными. И помогут нам в этом две кнопки изменения начертания . А вот чтобы включить или отключить подчеркивание текста линией , нам все равно придется воспользоваться пунктом-выключателем Underline подменю Style (Стиль) меню Text (Текст) или контекстного меню. Ни кнопки, ни комбинации клавиш для этого действия не предусмотрено.

Пункт
Описание

Teletype

Текст, выведенный устройством вывода компьютера ("телетайп")

Emphasis

Обычный курсивный текст

Обычный полужирный текст

Фрагмент исходного кода программы на каком-либо языке програм-мирования (команд, имен переменных, ключевых слов и т. п.)

Variable

Используется для обозначения в тексте имен переменных програм-мы на каком-либо языке программирования

Информация, выведенная какой-либо программой пользователю

Keyboard

Текст, который пользователь должен ввести с клавиатуры

Citation

Definition

Определение какого-либо термина

Текстовые редакторы поддерживают создание нумерованных и маркированных списков. Пункты нумерованных (упорядоченных) списков, как вы знаете, обозначаются порядковыми номерами, а пункты маркированных (неупорядоченных) списков - какими-либо значками. Давайте и мы создадим такой список.
Для того чтобы преобразовать выделенные строки в список, воспользуемся кнопками-переключателями редактора свойств .
Поставьте текстовый курсор на любом пункте списка, В контекстном меню выберите пункт “Список – Свойства ” и появится диалоговое окно List Properties , с помощью которого мы можем задать некоторые параметры списка. Изменить стили маркеров или нумерацию (например: использовать буквы вместо цифр - a b c d;), а так же, для нумерованных списков, задать число, с которого следует начинать нумерацию. Поля ввода "List Type " (три верхних) - - позволяют задать тип всего списка, в то время как поля ввода "List Item" (два нижних поля) - относятся только к той строке списка, на которой в настоящее время установлен курсор мыши.

Текст можно покрасить во все цвета радуги-:) Для этого выделите какую-либо часть текста и нажмите на кнопку .
В открывшемся диалоге представлена палитра цветов

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

Часто бывает нужно вставить дату создания или последнего редактирования документа, в этом вам поможет кнопка "Date (Дата)" или (Insert (Вставить)- Date (Дата)). В открывшемся диалоге

Вы можете установить вариант отображения даты, а так же при желании и день недели и время. Если вы установите галочку в "Update Automatically on Save " - тогда после каждого обновления/редактирования страницы дата будет обновляться.
Так же у вас есть возможность вставлять специальные символы воспользовавшись вкладкой "Text".

Еще одна полезная функция - это чистильщик HTML-кода. Вызвать его можно командой "Command - Clean Up XHTML " и пред вами откроется окошко этого диалога.

Иногда необходимо разделить информацию и для этого ставят горизонтальную линию. На панели “Вставить ” вкладка “HTML ” кнопка . У горизонтальной линии есть свойства Ширина, Высота и Цвет. Для установки Ширины и Высоты в панели “Properties ” необходимо указать требуемые значения в полях W и H .
Для задания цвета линии выделите линию и в контекстном меню Редактировать тег (Edit Tag) …
В диалоговом окне выберите требуемый цвет линии.

Связи и навигация

Существует несколько способов создания гипертекстовых ссылок на различные типы файлов. Начать следует с создания навигации по сайту. Для создания связи между файлами нужно точно указать путь, по которому можно добраться до нужного документа.
Путь может быть как полный - начинаться с указания интернет адреса (например: http:// Dreamweaver/index.htm), так и корнезависимый (../index.htm). Давайте рассмотрим, как процесс задания связей между документами реализован в DreamWeaver.
Для того чтобы сделать из любого слова или нескольких слов гиперссылку - достаточно "прицепить" к нему интернет адрес. Для наглядности сделаем так, - в тексте "Macromedia DreamWeaver. Практикум" выделите словосочетание " Macromedia DreamWeaver." и в поле "Link" вкладки "Properties" введите начальный адрес этого руководства (http://Dreamweaver/) и нажмите "Enter".

Как вы смогли заметить - слова " Macromedia DreamWeaver. Практикум" изменили цвет и стали гиперссылкой. Для удаления гиперссылки - просто удалите интернет адрес в поле "Link" вкладки "Properties" и так же нажмите клавишу "Enter". Теперь перейдем к корнезависимому пути.

Выделив " Macromedia DreamWeaver" нажмите кнопку с изображением папки

и в открывшемся диалоге вы можете указать страницу, на которую следует перейти при нажатии по этой ссылке. Причем, по умолчанию откроется та папка, где расположена страница, с которой вы хотите дать ссылку. Так как и эта (текущая страница, на которой я хочу дать гиперссылку) и та страница, куда эта гиперссылка направит, расположены в одной папке, - то достаточно просто выделить мышкой нужную страницу и нажать кнопку "ОК".

Теперь поставьте курсор мыши на эту ссылку и раскройте список "Target " вкладки "Properties ".
В этом списке имеется четыре пункта, причем в нашем случае работать будут только два. Первый пункт "_self" - выведет страницу на которую указывает гиперссылка в том же окне обозревателя (этот режим устанавливается по умолчанию), и второй - "_blank" - раскроет страницу в новом окне.
Остальные пункты меню "Target" понадобятся для работы с фреймами.

Когда вы создаете сайт, то начальная папка этого сайта является корневой, а в ней уже находятся разные файлы и другие вложенные папки.
Если вы посмотрите на HTML - код этой гиперссылки, то увидите, что он принял следующий вид../index.htm. Причем эти две точки перед черточкой говорят браузеру "подняться" на один уровень вверх по дереву каталога. На два уровня вверх - ../../index.htm и так далее.

Если вы хотите вставить почтовый адрес, то для этого необходиом ввести в поле "Link" вкладки "Properties" адрес электронной почты (например: mailto: vsh@ dvpion.ru ), любая ссылка на почтовый адрес начинается с mailto: , хотя если вы в силу каких-то обстоятельств не хотите руками вписывать слово "mailto: ", тогда можете на вкладке "Common" нажать кнопку , где в поле "Text" впишите текст ссылки, а в поле "E-Mail" - адрес электронной почты. И в том и другом случае эффект будет тот же.

Якоря

Еще один тип ссылок - "якоря". Использовать этот тип ссылок особенно полезно при большом количестве информации расположенной на одной странице.
Давайте установим переход вверх текущей страницы. Первое что нужно будет сделать - это установить сам якорь на странице.
И нажать кнопку на вкладке "Common". В открывшемся диалоге укажите имя якоря имя "new_page_11_top".
Теперь осталось только установить здесь ссылку на этот якорь. Для этого нужно выделить текст, и в поле "Link" вкладки "Properties " ввести адрес гиперссылки ссылающейся на этот якорь: #new_page_11_top

Решетка (#) перед именем якоря - это и есть команда браузеру "направиться" к отметке под именем new_page_11_top.
Если вы хотите сослаться на якорь, расположенный на другой странице, тогда укажите путь до самой страницы с якорем. Для примера, я хочу направить посетителей на страницу с "примерами якорей". Так как имя страницы с примерами - examples.htm , а якорь, на который я хочу перенаправить, имеет имя 02 , то и ссылка будет иметь следующий вид: (examples.htm#02).

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

С чем мы имели дело ранее? С текстовыми элементами Web-страниц. Все текстовые элементы создаются с помощью соответствующих тегов языка HTML.
Помимо всего прочего, вы сможете задать фон вашей страницы. Если в качестве фона вы просто хотите задать какой-либо цвет, - то воспользуйтесь для этого пунктом "Background (Фон)" (кликнув левой кнопкой мышки по относящемуся к этому пункту квадратику). И в раскрывшейся палитре выберите нужный вам цвет. Фоновую картинку можно задать выбрав файл в соответствующем поле этого же диалогового окна.

Вставка графического изображения

Поместим текстовый курсор в нужное нам место и посмотрим на вкладку “Common ” инструментария объектов - там находится кнопка “Image (Изображение)”. Нажмем на нее и в появившемся на экране меню выберем пункт Image . Также можно воспользоваться пунктом Image меню Insert или нажать ++. После этого на экране появится диалоговое окно Select Image Source .

Раскрывающийся список папок и список файлов позволят нам выбрать нужную папку и файл.
В поле ввода Имя файла появится имя выбранного файла (или мы можем сами ввести его туда). А раскрывающийся список Тип файлов позволит нам выбрать, какой тип файлов нам нужно найти. Все это знакомо нам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие - справа находится панель предваритель ного просмотра. А если мы желаем ее убрать отключим флажок Preview images. Итак, мы выбрали файл. Осталось нажать кнопку ОК. Но Dreamweaver потребует от нас еще кое-какую информацию, выведя диалоговое окно “Image Tag Accessibility Attributes (Атрибуты доступности тега изображения)”.

Комбинированный список “Alternate text (Альтернативный текст)” этого окна служит для задания, так называемого текста замены. Это придумано для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображения, помещенного на ней, отобразит пустую рамку соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель выведет небольшую подсказку, содержащую этот самый текст замены. Поэтому рекомендуется всегда пользоваться этой возможностью.

Собственно в список Alternate text вводится краткий текст замены. Его ограничение - не более 50 символов. Если нам нужно выводить на экран более подробный текст замены, его можно сохранить в отдельный файл Web-страницы, а потом ввести его интернет-адрес в поле ввода Long description. Также можно щелкнуть кнопку в виде папки, расположенную правее этого поля, и выбрать нужный файл в диалоговом окне Select File. Закончив ввод данных, нажмем кнопку ОК. Dreamweaver поместит графическое изображение в то место, где на данный момент находится текстовый курсор.

Параметры графического изображения

Теперь сохраним получившуюся страницу, выделим изображение, если оно не выделено, и посмотрим на редактор свойств. То, что мы там увидим Поля ввода W и Н позволяют нам задать размеры изображения, введя его, соответственно, ширину и высоту вручную. Это может быть полезно, если выделенное изображение - часть оформления сайта; в остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры изменения размера.

Вообще-то, Dreamweaver при помещении на Web-страницу графического изображения сам помещает в эти поля ввода его изначальные ширину и высоту. Как мы уже знаем, Web-обозреватель сразу после загрузки страницы
отображает еще не загруженные изображения в виде пустых рамок. Если размеры изображений были явно заданы, они будут сразу же применены к рамкам, и оформление страницы не нарушится. В противном случае Web-обозреватель отобразит рамки некоего размера по умолчанию, и при последующей загрузке изображений их размеры будут меняться, что вызовет перерисовку самой страницы. А это очень неприятно.

Поля ввода V Space и Н Space задают, соответственно, вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

Поле ввода Src задает интернет-адрес файла, где хранится графическое изображение. Справа от него видны две кнопки. Нажав на правую из них (с изображением папки), мы откроем диалоговое окно Select Image Source .

Мы также можем изменить имя файла изображения, щелкнув по изображению правой кнопкой мыши и выбрав пункт Source File в контекстном меню, или просто дважды щелкнув мышью по изображению. После этого на экране появится диалоговое окно Select Image Source.

Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое "черновое" изображение. "Черновое" изображение имеет меньший размер, как правило, за счет более низкого качества, и придумано, опять же, для владельцев низкоскоростных каналов связи. Web-обозреватель первым делом загрузит "черновик", т. к. он имеет значительно меньший размер, и выведет его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается основное изображение и подменяет собой "черновик".

Рекомендуется изготавливать "черновик" только тогда, когда оригинальное изображение слишком велико, чтобы быстро загрузиться. В частности, это подойдет, если мы соберемся делать сайт с художественной графикой.

Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения, в пикселах. По умолчанию она равна нулю, т. е. рамки нет.

Комбинированный список Alt задает уже знакомый нам краткий текст замены.

А теперь обратимся к раскрывающемуся списку Align. Он позволяет нам задать выравнивание изображения, фактически - относительное местоположение его и текста, в котором оно находится.
Список Align содержит следующие пункты:

Default - расположение по умолчанию, обычно аналогично пункту Baseline;

Baseline - низ изображения совпадает с базовой линией текста (воображаемой линией, на которой находится строка текста) строки, в которой оно находится;

Тор - верх изображения совпадает с верхом текста строки, в которой оно находится;

Middle - середина изображения совпадает с базовой линией текста;

Bottom - низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);

TextTop - верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);

Absolute Middle - середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);

Absolute Bottom - низ изображения совпадает с низом самого нижнего символа текста;

Left - изображение "прижимается" к левому краю страницы, а текст "обтекает" его справа;

Right - изображение "прижимается" к правому краю страницы, а текст "обтекает" его слева.

В последних двух случаях изображение становится плавающим. Web-обозревателем влево или вправо, при этом текст, в который оно было вставлено, будет обтекать его. А в точке, где было вставлено плавающее изображение, Dreamweaver отображает специальный маркер плавающего изображения . Этот маркер выводится только для удобства Web-дизайнера и только в Dreamweaver; Web-обозреватель его никак не отображает.

Итак, с редактором свойств мы разобрались. Теперь давайте зададим свойства нашего изображения. Расстояние от текста сделаем по 5 пикселов по горизонтали и вертикали, выравнивание - по левому краю, "альтернативный" текст - "всплывающая надпись". И сохраним страницу.

Чтобы вернуть изначальные размеры изображения, мы можем воспользоваться кнопкой отмены), расположенной между полями ввода W и Н редактора свойств и правее их, а также пунктом контекстного меню Reset Size. Это полезно, если мы сильно их исказили и хотим начать все сначала.

Специальные изображения

Язык HTML и Dreamweaver позволяют создавать не только обычные изображения, но и имеющие особые свойства. Это изображения-гиперссылки , активные изображения и карты-изображения . Они часто используются на Web-страницах, поэтому нам нужно будет их рассмотреть.

Любое изображение может использоваться в качестве гиперссылки, для этого лишь достаточно ввести интернет адрес в поле "Link " панели "Properties ".
Причем ссылку вы можете дать как на адрес электронной почты, так и на другую веб страницу. Во втором случае у вас станет доступным список "Target "

Изображение можно сделать активным, реагирующим на наведение на него курсором мышки - Rollover . Для этого вам нужно будет запастись двумя изображениями, которые будут сменять друг друга, и на вкладке "Common " нажмите соответствующую кнопку.
В открывшемся окне вам нужно будет заполнить требуемые поля

В поле Image Name - укажите оригинальное имя активного изображения, причем в имени могут быть только латинские буквы (с буквы должно начинаться любое активное изображение) и цифры (пренепременно арабские!-:)
В поле Original Image - введите путь до основного изображения, того, которое будет первым загружаться на странице.

В поле Rollover Image - введите путь до "изображения - эффекта", - это изображение будет появляться только при наводе курсора мыши на ваше активное изображение.
Поставьте флажок в поле Preload Rollover - в этом случае оба рисунка сразу будут загружены броузером и выполнение эффекта начнется сразу же при наведении мышки. В противном случае (при отключенной галочке), при наведении на такое изображение мышки - браузер начнет загрузку второго изображения... и медленный какой-то эффект получится.
В поле Altemate Text - введите текстовый комментарий, всплывающий при наведении курсором мышки на изображение.
Ну а в поле Go To URL - интернет адрес.

Изображения-карты

Карта - это цельное изображение с размеченными "горячими областями", причем каждая такая область является гиперссылкой и ее соответствует свой интернет адрес.

Для начала разместите рисунок на странице, выделите его, кликнув по нему левой кнопкой мышки и на вкладке "Properties " при помощи бирюзовых фигур (в левом нижнем углу - группа элементов Map) выберите один из методов выделения "горячей области". Так как для примера я хочу сделать "горячей областью" синие пиктограммы, то ближе всего к этому фигура прямоугольник. Но вы можете выбрать как круг, так и фигуру неправильной формы. Нажмите на четырехугольник и выделите интересующую вас область.

Выделенная вами фигура примет вид:

вам осталось только ввести интернет адрес в поле “Link ” (ссылки могут быть на другие страницы вашего сайта или на другие сайты, либо на почтовые адреса), выбрать один из пунктов поля Target и ввести альтернативный текст в поле Alt.

После выделения вы можете перемещать выделенную область, нажав для этого кнопку со стрелочкой - в левом нижнем углу.
А для выделения фигур неправильных форм достаточно кликать левой кнопкой мышки по периметру области для выделения. Напоследок дайте оригинальное имя вашей карте в поле ввода Map и все.

Таблицы

Для того чтобы создать новую таблицу, перейдите на вкладку "Commons " панели "Insert " и нажмите кнопку .

В появившемся диалоге заполните необходимые поля.
Rows - количество строк в таблице
Columns - количество столбцов в таблице
Table width - ширина таблицы, причем в выпадающем меню вам нужно указать единицы измерения - проценты или пиксели.
Border thickness - толщина рамки таблицы в пикселях, причем если вы поставите значение равным нулю, то сама таблица будет не видна на странице.
Cell Padding - расстояние отступа внутри ячеек таблицы
Cell Spacing - расстояние между границами ячеек таблицы
Набор переключателей Header (Верхний колонтитул) позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключатели None (нет ни "шапки", ни выделенного первого столбца), Left (выделенный первый столбец), Тор ("шапка") и Both (и "шапка", и выделенный первый столбец).
Ячейки, составляющие "шапку" и выделенный столбец, будут оформлены как ячейки заголовка, а текст, который мы введем в них, будет автоматически выровнен по центру и выделен полужирным шрифтом.
В поле ввода Caption (Заголовок) вводится название таблицы. Это название будет находиться над создаваемой таблицей.
Раскрывающийся список Align caption (Выравнивание) позволит нам задать местоположение и выравнивание названия (если, конечно, мы его ввели). Здесь доступны следующие пункты:
default (по умолчанию)- выравнивание выполняет сам Web-обозреватель, обычно в этом случае название находится над таблицей и выравнивается по центру;
top - название находится над таблицей и выравнивается по центру;
bottom - название находится под таблицей и выравнивается по центру;
left - название находится над таблицей и выравнивается по левому краю;
right- название находится над таблицей и выравнивается по правому краю.

В области редактирования Summary (Итого) вводится примечание таблицы. Это примечание не выводится Web-обозревателями на экран, но может быть использовано для каких-то других целей (например, его могут обрабатывать программы, читающие экранный текст). Задавать его не обязательно.

После того как таблица создана, вы можете изменять ее размеры перетаскиванием границ при помощи мышки. Наведите курсор на один из трех квадратиков в выделении таблицы.
Теперь поставим текстовый курсор в любую ячейку таблицы и наберем какой-нибудь текст. Повторим то же самое с остальными ячейками таблицы.
Ячейка таблицы обязательно должна иметь хоть какое-то содержимое, иначе Web-обозреватель может отобразить ее некорректно. Если же ячейка все-таки должна быть пустой, вставьте в нее неразрывный пробел (его код HTML -), как это делает в подобных случаях сам Dreamweaver.
Чтобы определить свойства таблицы - Выделите ее, кликнув для этого левой кнопкой мышки по границе таблицы. После этого, на вкладке "Properties".

Вы сможете изменить свойства таблицы и настроить ее вид.
Поле Table id - задайте имя таблицы (атрибут не обязательный)
Поля Rows и Cols - количество строк и столбцов в таблице.
Поля V и H - ширина и высота таблицы в пикселях или процентах.
Поле Align - выравнивание таблицы по левому краю, центру или правому краю
Поле CellPad - расстояние внутри ячейки (между содержимым и границей ячейки)
Поле CellSpase - расстояние между ячейками таблицы
Поле Bolder - ширина границы таблицы
Bg Color - цвет фона таблицы
Brdr Color - цвет границ для всей таблицы.
Bg Image - задание фонового рисунка для таблицы.
Там же находятся еще шесть дополнительных кнопок

Кнопка Clear Column Widths - очистить значения ширины столбца

Кнопка Clear Row Heights - очистить значения высоты строки

Кнопки Convert Widths to Pixels и Convert Widths to Percent - преобразовать ширину ячеек в пиксели и преобразовать ширину ячеек в проценты

Кнопки Convert Heights to Pixels и Convert Heights to Percent - преобразовать высоту ячеек в пиксели и преобразовать высоту ячеек в проценты

Кроме задания свойств таблицы существует и задание свойств ячейки или группы ячеек. Для задания свойств ячейки - кликните в ней левой кнопкой мышки. Если же вы хотите задать свойства группе ячеек, то после того как кликните по полю первой ячейки, не отпуская левую кнопку мышки выделите требуемые ячейки (вы можете выделить таким способом хоть всю таблицу). При выделении - границы всех добавленных ячеек будут окрашиваться в другой цвет.
После того как ячейки выделены - снова обратите внимание на панель "Properties "

Horz - горизонтальное выравнивание содержимого ячеек (по левому краю, по центру или по правому краю)
Vert - вертикальное выравнивание содержимого ячеек (по верху, посередине, по низу или по базовой линии)
В полях W и H - укажите ширину и высоту выбранных ячеек, если вам необходимо указать значения в процентах - добавте после числового значения символ %.
Bg иBrdr - установление фона ячеек и установление цвета границ ячеек. А с помощью верхнего поля Bg - вы сможете задать фоновое изображение для ячеек.
Флажок No Wrap - запрет переноса строки
Флажок Header - для форматирования выбранных ячеек как заголовок таблицы.
Теперь кликните левой кнопкой мышки внутри любой ячейки и нажмите кнопку .
При помощи этого диалога вы сможете разделить выбранную ячейку на несколько частей. Переключатели Rows и Columns - разделить на строки и столбцы соответственно. Number of... - на какое количество строк или столбцов следует делить выбранную ячейку.

Теперь выделите две ячейки и нажмите кнопку .
Две выбранные вами ячейки объединились в одну и эту новую объединенную ячейку вы можете снова делить или наоборот объединять с другими как и стандартные.
К любой таблице можно быстро применить форматирование. Для этого следует выделить таблицу и в меню “Commands ” выбрать пункт “Format Table (Форматировать таблицу)”.
И в открывшемся диалоге вы сможете настроить дизайн вашей таблицы

После выбора одного из предустановленных шаблонов вы можете изменять все его атрибуты на свой вкус.
Вы можете вырезать, вставлять или копировать ячейки таблицы.
Для того чтобы вырезать ячейку (или несколько ячеек), вам нужно выделить ее и дать команду Edit - Cut. Ячейка (или несколько) будут удалены из таблицы.
Для того чтобы скопировать ячейку (или несколько ячеек), вам нужно выделить ее и дать команду Edit - Copy. Ячейка (или несколько) будут скопированы.
Для вставки скопированных или вырезанных ячеек воспользуйтесь командой Edit – Paste.
Прежде чем двигаться дальше попробуйте свои силы в создании простейших таблиц.

Табличный дизайн

Предположим, мы делаем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара. С таблицами это проще простого.

С помощью специально отформатированной таблицы мы можем разместить несколько фрагментов текста и графическое изображение так, как нам нужно. А если нам что-то не понравится, мы можем слегка переделать эту таблицу и получить совершенно другой результат.

Web-дизайнеры давно освоили таблицы. И так же давно носилась в воздухе простая, как все гениальное, идея. А что если поместить ВЕСЬ текст Web-страницы в большую, сложно отформатированную таблицу, "растянув" ее на все окно Web-обозревателя? Ведь тогда мы получим практически неограниченные возможности, почти такие же, как у наших коллег-полиграфистов. Мы сможем создавать и примечания, и сноски, и врезки, и множественные "потоки" текста, которые будут начинаться и прерываться там, где нам нужно.

Вот мы и подошли вплотную к табличному дизайну, т. е. способу построения Web-страниц с использованием таблиц.
Основной принцип табличного дизайна уже был приведен. Весь текст и вся графика помещаются в ячейки таблицы, что позволяет делать с ними все, что угодно. Как правило, такие таблицы (назовем их таблицами разметки) имеют невидимые границы, а линейки создаются с помощью очень тонких ячеек с фоновым заполнением. Таблицы разметки очень сложны, используют различное форматирование и многократное объединение ячеек и практически всегда - вложенные таблицы.
Создание сложных таблиц разметки вручную - высший пилотаж Web-дизайна. Не всякий даже опытный Web-дизайнер возьмется делать сложные страницы на основе таблиц. И все это из-за невероятной сложности получающегося HTML-кода. Поэтому очень часто в коде Web-страниц, построенных на основе таблиц, встречаются ошибки, из-за чего их не всегда может отобразить Web-обозреватель. В самом деле, во всех этих многочисленных объединенных ячейках и в сложнейшем форматировании можно элементарно запутаться.

Шаблон - это своеобразный образец, "скелет" Web-страницы, содержащий общие для всех страниц элементы: заголовок сайта, набор гиперссылок, сведения об авторских правах, возможно, таблицу разметки и пр. Эти элементы остаются неизменными на всех страницах, созданных на основе данного шаблона, поэтому так и называются - неизменяемыми элементами. Да, но каким же образом на странице помещается ее основное содержимое?
Очень просто. Специально для этого в шаблоне создаются изменяемые области . Они предназначены для уникального содержимого страницы, которая будет создана на основе этого шаблона.

Все просто: создаем на основе шаблона страницу и вводим в изменяемые области ее основное содержимое. Неизменяемые же элементы Dreamweaver в этом случае нам править не дает, и правильно - они же неизменяемые, в конце концов. Но это не беда - мы всегда можем изменить сам шаблон.

Пусть, например, нам нужно исправить заголовок сайта. Поскольку он входит в состав шаблона, мы открываем шаблон, исправляем его и сохраняем. Dreamweaver тут же предлагает нам перенести сделанные в шаблоне изменения во все страницы, созданные на его основе. И переносит, да так аккуратно, что не затрагивает содержимое изменяемых областей! Фактически он за нас исправляет все повторяющиеся элементы на всех Web-страницах сайта. Шаблоны сохраняются в особых файлах, имеющих расширение dwt , в папке Templates , которую Dreamweaver создает сам в корневой папке локальной копии сайта. Количество шаблонов, используемых в сайте, не ограничено, так что мы можем создавать одни страницы сайта на основе одного шаблона, а другие - на основе другого. А можем вообще ограничиться одним единственным шаблоном, как, собственно, чаще всего и бывает.

Прежде чем создать шаблон создайте сайт. Зарегистрируйте его в Dreamweaver.
Теперь создадим документ и сделаем разметку.

Создайте таблицу с шириной 100%, 2 строки и 1 столбец, граница 0.

В первой строке сделаем фон (fon.gif) и высоту 100 пикселей.

Далее напишите заголовок Мой сайт в заголовке страницы и в первой строке. Установите размер текста +7 и цвет жёлтый.

Во второй строке поставьте выравнивание по вертикали Сверху.

Вставьте еще одну таблицу с шириной 100%, 1 строкой и 3 столбцами, граница 0.

В каждой ячейке установите выравнивание по вертикали Сверху.

Ширина первого столбца 20%, второго 60%, третьего 20%.

В каждый столбец вставим еще по таблице 2 строки х 1 столбец, шириной 95%, выравнивание таблицы по центру. И также выравнивание в каждой ячейке по вертикали Сверху.

Далее заполните строки текстом как в моем примере.

В столбце навигации установите цвет ячеек через одну зеленым цветом.

Макет нашей страницы готов. Ничего сложного делать мы не будем. В рамках данной лекции этого достаточно.
Самое время создавать шаблон и редактируемые области.

Есть два способа создать шаблон Dreamweaver. Во-первых, его можно создать "с нуля", а потом заполнить содержимым, как обычную Web-страницу.
Во-вторых, существующую страницу можно сохранить как шаблон, а потом отредактировать, удалив полезное содержимое и оставив только общие элементы. И то, и другое сделать одинаково легко.
Чтобы создать новый шаблон "с нуля" меню “File – New “

Создать новый шаблон на основе существующей Web-страницы еще проще. Для этого откройте нужную Web-страницу, выберите в меню “File “ пункт ”Save as Template “ (Сохранить как шаблон). Также вы можете нажать кнопку Make Template (Создать шаблон) панели объектов. На экране появится диалоговое окно ”Save As Template ”.

В раскрывающемся списке Site выбирается сайт, в котором сохраняется шаблон. (Шаблоны являются неотъемлемой собственностью сайта, помните) По умолчанию там выбран текущий сайт.

Само имя шаблона вводится в поле ввода Save As . Давайте назовем наш новый шаблон main ("главный"), поскольку это наш главный шаблон, на основе которого мы построим наш сайт.
Введя все нужные данные, нажмите кнопку Save (Сохранить) для сохранения шаблона.
После того как мы создадим новый шаблон, последний появится в списке шаблонов. А поскольку мы создали этот новый шаблон на основе существующей Web-страницы, т. е. он имеет содержимое, мы можем просмотреть его на панели предварительного просмотра. Правда, эта панель очень мала, и, чтобы получить представление о содержимом шаблона, нам придется открыть его в окне документа.

Правка шаблона

Пустой шаблон нужно наполнить содержимым. Шаблон, созданный на основе Web-страницы, необходимо отредактировать: убрать уникальное для этой страницы содержимое, оставив только общие для всех страниц сайта элементы. Для этого нам нужно будет открыть шаблон в окне документа, как обычную Web-страницу.
На экране появится окно документа, в котором будет открыт выбранный нами шаблон. Внешне он ничем не будет отличаться от обычной Web-страницы.
Что мы можем сделать с шаблоном? Все, что угодно. Можно считать его обычной Web-страницей с некоторыми особенностями. (Эти особенности мы опишем далее.) Мы можем набирать текст, форматировать его, размещать изображения, таблицы, гиперссылки, переключаться в режим разметки страниц и создавать таблицы и ячейки разметки, создавать наборы фреймов, "чистить" HTML-код и т. д.
Но все-таки шаблон - не Web-страница и имеет некоторые особенности. Так, нам нужно будет поместить на нем изменяемые области, в которых впоследствии будет находиться основное содержимое страниц. (Более того, нам обязательно нужно будет это сделать, иначе зачем нам тогда этот шаблон.) Как это сделать, мы узнаем чуть позже.
Откроем шаблон main, который мы создали на основе страницы default.htm (если он еще не открыт).

Теперь нам нужно поместить в шаблон изменяемые области. Пока что изменяемая область будет всего одна- основное содержимое страницы. И располагаться она будет в самой большой ячейке нашей таблицы разметки. Колонку новостей и панель навигации мы пока оставим в покое.

Создание изменяемых областей

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

Первый способ лучше всего подходит, если мы создали шаблон "с нуля", а второй - если мы преобразовали в шаблон существующую страницу.

Создать в шаблоне пустую изменяемую область очень просто. Для этого сначала ставим текстовый курсор в то место, где мы хотим создать пустую изменяемую область и решаем, чем воспользоваться:

инструментарием объектов, нажав кнопку Templates на вкладке Common и выбрав в появившемся меню пункт Editable Region;

контекстным меню, выбрав в его подменю Template пункт New Editable Region;

системным меню, выбрав в подменю Template Objects меню Insert пункт Editable Region;

клавиатурой, что быстрее всего, - достаточно нажать ++.

На экране после этого появится диалоговое окно New Editable Region.
В единственном поле ввода Name, находящемся в этом окне, вводится уникальное имя вновь создаваемой изменяемой области. Каждая созданная нами в шаблоне изменяемая область должна иметь уникальное имя. Это имя может содержать любые символы, кроме букв русского алфавита, кавычек, апострофа и знаков "<", ">" и "&". Введя имя, нажмем кнопку ОК, чтобы создать изменяемую область, или Cancel для отказа от этого.

Если мы случайно поместили изменяемую область не в то место, куда хотели, это исправимо. Выделяем изменяемую область, щелкнув мышью по ее заголовку, "захватываем" ее мышью за содержимое и тащим на нужное место.

Dreamweaver при создании любого шаблона автоматически создает небольшую изменяемую область doctitle. (Поэтому мы и не сможем дать изменяемой области имя doctitie - изменяемая область с таким именем уже существует). Данная изменяемая область включает в себя содержимое тега , иначе говоря, название Web-страницы.<br><b><i>Внимание! </i> </b><br> После того, как на основе шаблона были созданы какие-либо Web-страницы, вы не сможете переименовать ни одну из имеющихся в нем изменяемых областей.<br> И, наконец, может случиться так, что вы захотите удалить изменяемую область. Сделать это можно двумя способами: простым и очень простым. Очень простой способ заключается в том, чтобы выбрать изменяемую область щелчком по заголовку и нажать клавишу <Del>. Простой способ - поставить текстовый курсор куда-либо внутрь содержимого изменяемой области и выбрать пункт <b>Remove Editable Markup </b> подменю <b>Templates </b> меню <b>Modify </b> или контекстного меню. Учтите, что после удаления изменяемой области ее содержимое остается в шаблоне. Так что, если вы хотите удалить всю изменяемую область, вам также придется удалить ее содержимое.</p> <h3><b><span>Создание Web-страниц на основе шаблонов </span> </b></h3> <p>Создать Web-страницу на основе шаблона можно двумя способами. Первый способ заключается в том, чтобы использовать уже знакомый нам пункт <b>New </b>меню <b>File. </b>При этом на экране появится диалоговое окно <b>New Document, </b>переключаемся на вкладку <b>Templates. </b> <br> В списке <b>Templates for </b>выбирается сайт, из которого будет взят шаблон. Сам же шаблон выбирается в списке <b>Site <i><имя cauma>. </i> </b>Если флажок <b>Update page when template changes </b>включен (а он включен по умолчанию), при изменении шаблона, на основе которого создается Web-страница, последняя будет соответственно изменена. И лучше этот флажок не отключать. <br> На экране появится окно документа, содержащее в себе новую Web-страницу. <br> Созданная нами изменяемая область выделена синей рамкой. Кроме ее содержимого, ни один другой элемент страницы не может быть изменен; при наведении на него курсора мыши последний меняет форму на перечеркнутый круг. Мы даже не сможем выделить ничего из содержимого шаблона - только содержимое изменяемых областей.</p> <p>Более того, если мы переключимся в режим отображения HTML-кода, то и тогда не сможем исправить содержимое самого шаблона. HTML-код, принадлежащий шаблону, будет набран тускло-серым цветом - это предостережение для нас. Как видим, шаблон надежно защищен от редактирования. <br> Ну что ж, приступим к работе! Ставим текстовый курсор в изменяемую область, удаляем старое ее содержимое, оставшееся в "наследство" от шаблона, и вводим новое. Если же мы не хотим набирать это содержимое заново (у нас, в конце концов, есть готовая Web-страница, на основе которой мы создали этот шаблон), то можно воспользоваться методом, которые бывалые компьютерщики называют "копируй-и-вклеивай". Открываем старую Web-страницу,<br> копируем ее основное содержимое в буфер обмена и вставляем ее в изменяемую область. Что может быть проще и быстрее!</p> <h3><b><span>Обновление страниц, созданных на основе шаблонов </span> </b></h3> <p>Теперь предположим, что мы создали на основе шаблона несколько страниц и уже после этого вдруг заметили, что в содержимое шаблона вкралась ошибка. Мы вызываем шаблон на экран, правим его и сохраняем. Что произойдет в этом случае? А произойдет вот что. Сначала Dreamweaver выведет на экран диалоговое окно <b>Update </b><b>Template </b><b>Files </b><b>, </b>После этого Dreamweaver выведет на экран еще одно диалоговое окно <b>Update Files, </b>содержащее сведения об обновленных страницах; закроем его щелчком по кнопке <b>Close. </b></p> <p>К сожалению, у нас мало времени на изучение и мы очень быстро и кратко рассмотрели возможности работы в программе DreamWeaver. Если вы хотите более глубоко изучить данный материал, интересно создавать Web--страницы и сайты, то вам следует записаться на курс Web-проектирование или Web-дизайн.</p> </td> <h1>Урок 1. Начало работы с Adobe Dreamweaver CS4</h1> <p><b><i>Цель </i> </b><span>: ознакомиться с Dreamweaver при создании веб-страницы, а так же с рабочей областью программы. </p> <p><b><i>Задачи: </i> </b></p> <ul><li>Исследовать рабочую область.</li> <li>Научиться создавать новую страницу, используя содержимое CSS.</li> <li>Научиться сохранять документ.</li> <li>Научиться изменять название страницы и текстовые заголовки.</li> <li>Научиться вставлять текст из внешнего документа.</li> <li>Научиться добавлять изображения на передний план и в качестве фоновых изображений.</li> <li>Научиться создавать, изменять и выбирать стили CSS.</li> <li>Научиться работать с режимами отображения Code (Код) и Code and Design (Код и дизайн).</li> </ul><p><b>Прежде, чем приступить к изучению, </b>.</p> <p>В процессе выполнения всех лабораторных работу, вами будет создан полноценный веб-сайт туристической компании.</p> <p>Структура веб-страниц представлена на рисунке 1.</p> <p>Рисунок 1 - Структура итогового веб-сайта</p> <p>В результате выполнения данной лабораторной работы у вас должна получиться такая веб-страница (рисунок 1.1):</p> <p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.1.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.1 - Предварительный просмотр веб-страницы</p> <h3><b><i>Использование Welcome screen </i> </b></h3> <p>Окно Welcome screen (Экран приветствия) обеспечивает быстрый доступ к страницам, с которыми вы недавно работали, помогает легко создавать разные типы страниц и предоставляет прямой доступ к некоторым ключевым темам, в которых можно найти ответы на интересующие вас вопросы. Welcome screen появляется при первом запуске программы или если не открыты какие либо иные документы.</p> <p>Давайте используем окно Welcome screen, чтобы изучить способы открытия документа.</p> <p>1. Чтобы открыть новую пустую страницу, щелкните по варианту <b>HTML </b> в столбце <b>Create New </b>(Создать) (рисунок 1.2).</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.2.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.2 - Окно Welcome screen</p> <p>2. Перед вами откроется новый <b>HTML </b> документ (рисунок 1.3).</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.3.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.3 - Новое окно HTML</p> <h3><b><i>Выбор макета CSS </i> </b></h3> <p>В Adobe Dreamweaver CS4 есть 32 файла макетов CSS, дизайн каждого из которых отличается. В этом задании мы выберем один файл и изменим его.</p> <ol><li>Выполните <b>File => New </b> (Файл => Создать)<b>. </b></li> <li>Выберите столбец <b>Blank </b> <b>Page </b> (Пустая страница) в диалоговом окне <b>New </b> <b>Document </b> (Создать документ)<b>. </b></li> <li>Выберите <b>HTML </b> в столбце <b>Page </b> <b>Type </b> (Тип страницы)<b>. </b></li> <li>Выберите <b>2 column </b> <b>fixed, left </b> <b>sidebar, header </b> <b>and </b> <b>footer </b> (2 колонки фиксированной ширины, боковое поле слева, верхний и нижний колонтитул) в столбце <b>Layout </b>(Макет)<b>. </b></li> <li>Не изменяйте настройки других опций, установленные по умолчанию, и щелкните по кнопке <b>Create </b>(Создать).</li> <li>Выберите <b>File => Save </b> (Файл => Сохранить).</li> <li> <b>Save As </b>(Сохранить как) перейдите в папку <b>lab1 </b>. Введите «Umbria.html» и кликните по кнопке <b>Save. </b></li> </ol><h3><b><i>Выбор режима отображения документа </i> </b></h3> <p>Большинство операций по веб-дизайну мы будем выполнять в окне <b>Design </b>, но помните что у окна <b>Document </b> есть четыре режима отображения (рисунок 1.4):</p> <ul><li><b>Design </b> (Дизайн) - представляет страницу в контексте подобном браузеру;</li> <li><b>Code </b> (Код) - отображает исходный код страницы;</li> <li><b>Code </b> <b>and </b> <b>Design </b> (Код и дизайн) - объединяет и режим отображения <b>Design </b> и режим отображения <b>Code </b>. Щелкните по кнопке <b>Split </b> (разбить), чтобы отобразился этот режим отображения.</li> <li><b>Live </b> (Интерактивный просмотр) - представляет страницу в браузере, функционирующем в режиме реального времени.</li> </ul><p>Рисунок 1.4 - Режимы отображения</p> <p>Режимы отображения связаны друг с другом. Любые изменения, сделаные в одном из них, сразу можно увидеть и в других.</p> <h3><b><i>Изменение заголовка страницы </i> </b></h3> <p>Заголовок страницы отображается в строке заголовка браузера. Заголовки страницы являются одним из ключевых элементов, используемых поисковыми системами для индексации веб-сайтов.</p> <ol><li>Выберите заполнитель текста «Untitled Document» («Документ без названия») в поле <b>Title </b><b> (название) </b> панели инструментов <b>Document </b> (рисунок 1.5).</li> <li>Напечатайте туда «Umbria Hill Town Tours» и нажмите <b>Enter. </b></li> </ol><p>Рисунок 1.5 - Панель инструментов Document</p> <h3><b><i>Изменение заголовков </i> </b></h3> <p>Заполнители заголовков в Dreamweaver легко изменить.</p> <p>1. Два раза щелкните по тексту заполнителя <b>Title </b>, чтобы его выбрать. Затем введите «Путешествуйте по Умбрии с нами» (рисунок 1.6).</p> <p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.6.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.6 - Изменение заполнителя заголовка</p> <p>2. Наведите курсор в начало текста заполнителя <b>Main </b><b>Content </b> (Основное содержание) и выделите всю фразу.<br>3. Выделив текст, введите «Ты получаешь удовольствие. Мы работаем.» (рисунок 1.7)</p> <p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.7.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.7 - Изменение заполнителя содержания</p> <p>4. Выберите <b>File => Save </b>(Файл => Сохранить).</p> <h3><b><i>Вставка текста </i> </b></h3> <p>Простой текс можно изменять так же легко, как и заголовки.</p> <p>1. Поместите курсор перед простым текстом заполнителя и выделите текст до конца, чтобы выбрать второй заполнитель заголовка и все абзацы.<br>2. Нажмите клавишу <b>Delete </b>, чтобы удалить то, что вы выбрали.<br>3. Перейдите к файлу <b>Text </b><b>. </b><b>txt </b> расположенный в папке <b>Lessons/lab1/Text.txt </b>.</p> <p>4. Скопируйте текст в буфер обмена.<br>5. Вставьте скопированный текст под заголовком «Ты получаешь удовольствие. Мы работаем.» (рисунок 1.8).</p> <p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.8.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.8 - Вставка текста</p> <p>Текст автоматически будет отформатирован как абзацы.</p> <p>6. Таким же образом введите «Umbria Hill Town Tours» в поле <b>Footer </b><b>.<br></b>7. Создайте конец строки нажав <b>Shift </b><b>+ </b><b>Enter </b><b>, </b>затем введите «Наши контакты».</p> <h3><b><i>Вставка изображений </i> </b></h3> <p>1. Выберите в боковой панели все содержимое, включая заголовок заполнителя <b>Sidebar1 Content </b> и два последующих абзаца.<br>2. Нажмите <b>Delete </b>.<br>3. Щелкните по <b><h3> </b> и нажмите <b>Delete </b> в селекторе тегов, расположенном внизу окна Document, чтобы удалить тег <b><h3> </b> (рисунок 1.9).</p> <p>Рисунок 1.9 - Селектор тегов</p> <p>4. Если панель <b>Insert </b> (Вставка) является невидимой, сделайте её видимой, выбрав <b>Window => Insert </b> (Окно => Вставка). Выполните <b>Insert => Common </b> => <b>Images </b> (Вставка => Общий => Изображение) (рисунок 1.10).</p> <p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.10.jpg' height="365" width="221" loading=lazy></p> <p>Рисунок 1.10 - Панель Insert</p> <p>5. Перейдите к файлам находящимся в папке <b>Lessons/lab1/ </b>и выберите <b>sculpted-garden. </b><b>jpg </b>и нажмите OK (рисунок 1.11).</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.11.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.11 - Вставка изображения sculpted-garden.jpg</p> <p>6. Поместите курсор в начале основного абзаца, который начинается словами «Приходите и насладитесь», и выберите <b>Images </b> на панели <b>Insert </b>.<br>7. Выберите изображение <b>italian-hill-town.jpg </b> и нажмите <b>ОК </b>.<br>8. Введите «italian-hill-town» в качестве дополнительного текста. Нажмите <b>ОК </b> (рисунок 1.12).<br>9. Если панель Properties невидима, выберите <b>Window => Properties </b>.<br>10. Выбрав только что вставленное изображение, активируйте <b>fltrt </b>во всплывающем меню <b>Class (Класс) </b>панели <b>Properties </b>.</p> <p>Класс fltrt аббревиатура от float right, соответственно fltlft - float left.</p> <p>11. Выберите <b>File => Savе </b>.</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.12.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.12 - Вставка изображения italian-hill-town.jpg</p> <h3><b><i>Выбор и изменение стилей </i> </b><b><i>CSS </i> </b></h3> <p>В современных веб-страницах используются каскадные таблицы стилей (CSS) для стилизованного оформления и макета. Веб-страницу часто срав-нивают со стулом с тремя ножками, в роли которых выступают HTML, CSS и JavaScript, являющиеся компонентами ее структуры. HTML — это со-держимое, материал, который вы вводите в режиме отображения Design. CSS — это внешний вид и макет с определенными элементами, цветами и фонами. JavaScript добавляет интерактивную функцию. В этом упражне-нии вы измените цвет фона существующей страницы, добавите графики на задний план и настроите несколько текстовых атрибутов. Все эти действия выполняются посредством использования панели <b>CSS </b><b>Styles </b> (Стили CSS).</p> <p>CSS можно использовать для изменения свойств стиля любого тега HTML, например тега <body>.</p> <p>1. Выберите <b>Window => CSS Styles (Окно => Стили CSS). </b> Откроется панель <b>CSS Styles </b>.<br>2. При необходимости щелкните по кнопке <b>All (Все) </b> на панели <b>CSS Styles </b>, чтобы изменить текущий режим <b>Current (Текущий). </b></p> <p>Режим All отображает все стили CSS, ассоциируемые с текущей страни-цей. У вас должен быть открыт документ в окне просмотра документа, чтобы увидеть какие-либо стили на панели <b>CSS Styles </b>.</p> <p>3. Откройте запись <style> на панели All Rules (Все правила), щелкнув по кнопке (+).</p> <p>В первой лабораторной работе (lab1) правила стилей на-ходятся вверху документа. При помощи скобок Dreamweaver указывает, что сти-ли являются внутренними для документа: <style>. В последующих уроках вы будете работать со стилями, хранимыми во внеш-ней таблице стилей. Dreamweaver отобра-зит эти таблицы стилей на панели <b>CSS Styles </b> по имени (например, mystyles.css).</p> <p>4. Выберите body и щелкните по опции <b>Edit Rule </b> (Редактировать правило) - символ карандашика внизу панели<b> CSS Styles </b> (рисунок 1.13).</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.13.jpg' height="462" width="192" loading=lazy></p> <p>Рисунок 1.13 - Панель CSS Styles</p> <p> <b>CSS Rule </b> (Определение правила CSS) для «body» выберите категорию <b>Background </b> (Фон). Щелкните по палитре цветов <b>Background </b> чтобы открыть <b>color picker </b> (выбор цвета).<br>6. Используйте «пипетку» в выборе цвета и щелкните по ячейке белого цвета.</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.14.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.14 - Диалоговое окно CSS Rule</p> <p>Dreamweaver автоматически вставит в поле цвета заднего фона шестнад-цатеричное значение для белого цвета #FFF.</p> <p>7. Щелкните по кнопке <b>ОК </b>, чтобы подтвердить изменение. Dreamweaver обнаружит новый цвет на панели <b>Properties </b>. Вам, возможно, потре-буется расширить нижнюю границу панели <b>CSS Styles </b>, чтобы увели-чить панель Properties и увидеть необходимый цвет.</p> <p>Подобно элементу <body>, для других элементов страницы, например <div#sidebarl>, можно также устанавливать отдельный цвет фона. Что-бы изменить цвет фона для какого-либо элемента, выберите этот элемент в селекторе тегов и щелкните по иконке <b>Edit Rule </b></p> <p>8. Выберите <b>File => Save </b>.</p> <h3><i>Вставка графического фона заголовка </i></h3> <p>В то время как изображения переднего плана вставляются непосредствен-но на страницу, фоновые изображения размещаются при помощи CSS.</p> <p><br>2. Выберите <div#header> в селекторе тегов.</p> <p>Это обозначает тег <div> с ID заголовка #header. Обратите внимание, что выбранный заголовок div подчеркнут линией синего цвета в окне <b>Document </b>.</p> <p>3. Щелкните по опции <b>Current </b> (Текущий) на панели <b>CSS Styles </b>, чтобы переключиться из текущего режима.<br>4. При необходимости измените панель <b>About </b> (Об) на <b>Rules </b> (Пра-вила), щелкнув по иконке <b>Show cascade of rules for selected tag </b> (Показать каскад правил для выбранного тега). Выберите.twoColFixLtHdr #header hi на панели <b>Rules </b>. Вам может потребо-ваться увеличить панель <b>CSS Styles </b>, чтобы все правильно отобра-жалось.<br>5. После появления диалогового окна<b> CSS Rule definition for .twoCol-FixLtHdr #header </b> (Определение правила CSS для <b>.twoColFixLtHdr #header </b>) выберите категорию <b>Background </b>. Щелкните по кнопке <b>Browse </b> (Обзор), расположенной сразу после поля с изображением <b>Background </b>. Откроется окно <b>Select Image Source </b> (Выбрать исход-ный файл изображения).<br>6. Перейдите к lab1/cloud_header.jpg в диалоговом окне <b>Select Image Source </b>. Щелкните по кнопке <b>Choose </b>.<br>7. Выберите<b>no-repeat </b> (не повторять) во всплывающем меню <b>Back-ground-repeat </b> (Повтор фона). Щелкните по кнопке <b>ОК </b>.</p> <p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.15.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.15 - Диалоговое окно CSS Rule (Background)</p> <h3><b><i>Настройка текста, шрифтов и цветов </i> </b></h3> <p>1. Поместите курсор в любое место текста заголовка «Путешествуйте по Умбрии с нами».<br>2. Выберите <b><h1> </b> в селекторе тегов (рисунок 1.16)</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.16.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.16 - Выделенный заголовок h1</p> <ul><li>Выберите режим <b>Current </b> (Текущий) на панели <b>CSS Styles </b> (если вы-бран режим<b> All </b>, щелкните по кнопке<b> Current </b>).</li> <li>На панели <b>Rules </b> (Правила) щелкните по кнопке <b>Show cascade of rules for selected tag (p) </b>. Выберите<b> .twoColFixLtHdr #header h1 в Cascade </b>(Каскад).</li> <li>Щелкните по опции <b>Edit Rule </b> (Изменить стиль).</li> <li>После появления диалогового окна <b>CSS Rule definition for .twoCol-FixLtHdr #header h1 </b>(Определение правила CSS для.twoColFix-LtHdr #header h1) выберите <b>Type </b> (Тип) из столбца <b>Category </b> (Кате-гория).</li> <li>Выберите разные шрифты в списке <b>Font-family </b> (Семейство шрифтов), на-пример Georgia, Times New Roman, Times, serif и т. п.</li> <li>Откройте палитру цветов и используйте «пипетку»", чтобы выбрать белый цвет. Щелкните по кнопке <b>ОК </b>, чтобы подтвердить изменения.</li> </ul><p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.17.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.17 - <span>Диалоговое окно CSS Rule (Type) </p> <h3><i>Использование панели </i><i>Properties </i></h3> <p>1. Выберите предложение « В течении двух недель вы сможете наслаждаться уходом за телом.» в окне <b>Document </b>.<br>2. Щелкните по кнопке <b>I </b>, чтобы изменить текст на курсивный текст.<br>3. Щелкните по кнопке <b>CSS </b> на панели <b>Properties </b>.<br>4. Выберите <еm> в селекторе тегов.<br>5. Выберите <New CSS Rule> (Создать пра-вило CSS) в меню <b>Targeted Rule </b> (Целевое правило).<br>6. Выберите <b>Edit Rule </b> (Изменить правило) на панели <b>Properties </b>. Откроется диалоговое окно<b> New CSS Rule </b>(Создать правило CSS).<br>7. Щелкайте по <b>Less Specific </b> (Менее точно) до тех пор, пока в поле <b>Selector Name </b> (Имя селектора) не появится<b> #mainContent р em </b>.<br>8. Щелкните по кнопке <b>ОК </b> (рисунок 1.18)<b>. </b></p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.18.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.18 - Диалоговое окно New Css Rule</p> <p>9. Используйте «пипетку», чтобы выбрать новый цвет любой, отличный от белого. Щелкните по кнопке <b>ОК </b> (рисунок 1.19).</p> <p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.19.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.19 - Результат изменений</p> <p>В правила стиля теперь включено новое правило, которое вы можете применять к любым дополнительным словам, фра-зам или предложениям в абзаце в рамках mainContent div. Просто выберите текст, который хотите изменить, и выделите его, щелкнув по кнопке <b>I </b> на панели <b>Properties </b>. Вы воспользовались панелью <b>Properties </b>, чтобы создать выделенный текст и доба-вить новые правила CSS к стилям.</p> <h3><b><i>Предварительный просмотр страниц в браузере </i> </b></h3> <p>Выбрав <b>Preview/Debug </b> (Просмотр и отладка в браузере) в окне Document (рисунок 1.20), вы сможете выполнить предварительный просмотр в браузере.</p> <p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.20.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.20 - Команда Preview</p> <p>Поздравляем! Вы создали свою первую веб-страницу в Dreamweaver (рисунок 1.21): изменили текст и цвета, добавили изображения и новые правила CSS, а также быстро создали профессиональную веб-страницу. Вы выполни-ли предварительный просмотр страницы в браузере.</p> <p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_dream/lr1/1.21.jpg' width="100%" loading=lazy></p> <p>Рисунок 1.21 - Итоговая веб-страница</p> <p>Ответьте на <i><b>контрольные вопросы </b> </i>.</p> <ol><li>Как изменить цвет фона в боковой панели?</li> <li>Какие два действия следует выполнить в первую очередь при создании новой страницы используя макет CSS?</li> <li>Назовите и кратко опишите четыре режима отображения Dreamweaver, которые имеются в окне Document.</li> <li>Чем отличаются режимы All и Current панели Styles CSS?</li> <li>Что произойдет, если вы будете переключаться между HTML и CSS на панели Properties? Зачем переключать режимы?</li> </ol><h3><i>Контрольное задание </i></h3> <ol><li>Согласно своему варианту, разработайте структуру для веб-сайта.</li> <li>Подберите материал для своего веб-сайта.</li> <li>Реализуйте первую страницу своего веб-сайта.</li> </ol><p><b><i>Требования к веб-странице: </i> </b></p> <ol><li>Использовать один заголовок (h1, h2, h3...).</li> <li>Использовать графический фон для заголовка.</li> <li>Использовать как минимум 2 изображения.</li> <li>Применить форматирование к тексту (курсив, полужирный...).</li> </ol> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="/category/internet/">Интернет</a> </li> <li class="submenu"><a href="/category/programs/">Программы</a> </li> <li class="submenu"><a href="/category/instructions/">Инструкции</a> </li> <li class="submenu"><a href="/category/browsers/">Браузеры</a> </li> <li class="submenu"><a href="/category/windows-10/">Windows 10</a> </li> <li class="submenu"><a href="/category/android/">Android</a> </li> <li class="submenu"><a href="/category/ios/">Ios</a> </li> <li class="submenu"><a href="/category/communication/">Связь</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">Последние записи</div> <div class="popular_posts"> <div class="news_box"> <a href="/skachat-hromium-skachat-hromium-ustanovit-brauzer-hromium.html" class="thumb"><img width="95" height="95" src="/uploads/cbe5abfed43fc21803385205ca90e702.jpg" class="attachment-mini size-mini wp-post-image" alt="Скачать хромиум Установить браузер хромиум" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/skachat-hromium-skachat-hromium-ustanovit-brauzer-hromium.html">Скачать хромиум Установить браузер хромиум</a> </div> </div> </div> <div class="news_box"> <a href="/na-iphone-ne-rabotaet-vai-fai-pochemu-tak-proishodit-i-kak-s-etim.html" class="thumb"><img width="95" height="95" src="/uploads/29376b41d023a7640d9c0c7a3b2a5c90.jpg" class="attachment-mini size-mini wp-post-image" alt="На IPhone не работает Wi-Fi Включается вай фай iphone 4s" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/na-iphone-ne-rabotaet-vai-fai-pochemu-tak-proishodit-i-kak-s-etim.html">На IPhone не работает Wi-Fi Включается вай фай iphone 4s</a> </div> </div> </div> <div class="news_box"> <a href="/chto-delat-esli-fleshka-v-kompyutere-postoyanno-to-propadaet.html" class="thumb"><img width="95" height="95" src="/uploads/c1b2e022ef0b940b6a4e0fb0c70e0fae.jpg" class="attachment-mini size-mini wp-post-image" alt="Флешка постоянно отключается и включается" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/chto-delat-esli-fleshka-v-kompyutere-postoyanno-to-propadaet.html">Флешка постоянно отключается и включается</a> </div> </div> </div> <div class="news_box"> <a href="/standartnyi-nagruzochnyi-test-1s-standartnyi-nagruzochnyi-test.html" class="thumb"><img width="95" height="95" src="/uploads/2bc88c7460c0c6dc56bf8fa04d4ff3fc.jpg" class="attachment-mini size-mini wp-post-image" alt="Стандартный нагрузочный тест" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/standartnyi-nagruzochnyi-test-1s-standartnyi-nagruzochnyi-test.html">Стандартный нагрузочный тест</a> </div> </div> </div> <div class="news_box"> <a href="/aliekspress-ne-ishchet-telefony-chto-delat-esli-propali-zakazy-v-lichnom-kabinete.html" class="thumb"><img width="95" height="95" src="/uploads/3ea3b7507423c9b8858724e854f269b5.jpg" class="attachment-mini size-mini wp-post-image" alt="Что делать если пропали заказы в личном кабинете на Алиэкспресс?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/aliekspress-ne-ishchet-telefony-chto-delat-esli-propali-zakazy-v-lichnom-kabinete.html">Что делать если пропали заказы в личном кабинете на Алиэкспресс?</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">Популярное</div> <div class="popular_posts"> <div class="news_box"> <a href="/ne-pokazyvaet-ekran-v-skaipe-igrah-reshenie-problem-s-demonstraciei.html" class="thumb"><img width="95" height="95" src="/uploads/e6460c00b45a4d9c9713e956bf073116.jpg" class="attachment-mini size-mini wp-post-image" alt="Решение проблем с демонстрацией экрана в скайпе" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/ne-pokazyvaet-ekran-v-skaipe-igrah-reshenie-problem-s-demonstraciei.html">Решение проблем с демонстрацией экрана в скайпе</a> </div> </div> </div> <div class="news_box"> <a href="/smart-tv-vybor-operacionnoi-sistemy-umnogo-televizora-operacionnaya.html" class="thumb"><img width="95" height="95" src="/uploads/f83bf6d87257f5eba353491c49bcb723.jpg" class="attachment-mini size-mini wp-post-image" alt="Операционная система Tizen в Samsung Smart TV Операционная система webos в телевизорах lg" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/smart-tv-vybor-operacionnoi-sistemy-umnogo-televizora-operacionnaya.html">Операционная система Tizen в Samsung Smart TV Операционная система webos в телевизорах lg</a> </div> </div> </div> <div class="news_box"> <a href="/kolichestvo-argumentov-funkcii-esli-prilozheniya-microsoft-excel-chto-zhe-takoe-funkciya-v.html" class="thumb"><img width="95" height="95" src="/uploads/ddafc343643dcab4f4fe6f19dbbf6d90.jpg" class="attachment-mini size-mini wp-post-image" alt="Что же такое функция в Excel?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a> <div class="element"> <div class="title"> <a href="/kolichestvo-argumentov-funkcii-esli-prilozheniya-microsoft-excel-chto-zhe-takoe-funkciya-v.html">Что же такое функция в Excel?</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">Новости</div> <div class="business_news"> <div class="news"> <div class="date">2024-05-23 01:40:21</div> <a href="/gde-skachat-virtual-tuner-dlya-nastroiki-gitary-programmy-dlya-nastroiki-gitary-na.html" class="title">Программы для настройки гитары на компьютер</a> </div> <div class="news"> <div class="date">2024-05-22 01:37:38</div> <a href="/skachat-prilozhenie-gugl-plei-na-noutbuk-besplatnaya-ustanovka-na.html" class="title">Бесплатная установка на ноутбук магазина плей маркет</a> </div> <div class="news"> <div class="date">2024-05-22 01:37:38</div> <a href="/fail-lab-kak-preobrazovat-lab-fail-v-pdf-fail-alternativnyi.html" class="title">Как преобразовать LAB файл в PDF файл</a> </div> <div class="news"> <div class="date">2024-05-22 01:37:38</div> <a href="/chto-takoe-kesh-brauzer-kak-ego-pochistit-sposoby-ochistki-kesha-na-kompyutere-ili.html" class="title">Способы очистки кэша на компьютере или ноутбуке</a> </div> <div class="news"> <div class="date">2024-05-21 01:37:12</div> <a href="/zaryadnoe-ustroistvo-port-usb-c-usb-type-c-universalnyi-razem-dlya-vsego-chto-takoe.html" class="title">USB Type-C: универсальный разъем для всего</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="/" class="logo" style="background:none;">viws.ru</a> <div class="copyright"> <p>viws.ru - Все о современной технике. Поломки, соцсети, интернет, вирусы</p> <p><span>© 2024 - Все права защищены</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">О сайте</a></li> <li><a href="">Реклама на сайте</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="/category/internet/">Интернет</a></li> <li id="menu-item-"><a href="/category/programs/">Программы</a></li> <li id="menu-item-"><a href="/category/instructions/">Инструкции</a></li> <li id="menu-item-"><a href="/category/browsers/">Браузеры</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="/category/internet/">Интернет</a></li> <li id="menu-item-"><a href="/category/programs/">Программы</a></li> <li id="menu-item-"><a href="/category/instructions/">Инструкции</a></li> <li id="menu-item-"><a href="/category/browsers/">Браузеры</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://viws.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://viws.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> </body> </html>

Пункт	Описание
Teletype	Текст, выведенный устройством вывода компьютера ("телетайп")
Emphasis	Обычный курсивный текст
	Обычный полужирный текст
	Фрагмент исходного кода программы на каком-либо языке програм-мирования (команд, имен переменных, ключевых слов и т. п.)
Variable	Используется для обозначения в тексте имен переменных програм-мы на каком-либо языке программирования
	Информация, выведенная какой-либо программой пользователю
Keyboard	Текст, который пользователь должен ввести с клавиатуры
Citation
Definition	Определение какого-либо термина