Дримвивер: Adobe Dreamweaver CC — купить лицензию Adobe Dreamweaver CC по выгодной цене на официальном сайте Store.Softline.ru

Создание Web-страниц с помощью Dreamweaver 3 и Fireworks 3*

3 — 2000

Свежий программный пакет, ради которого стоит жить: Dreamweaver 3 и Fireworks 3 входят в число самых мощных в мире средств для Web-дизайна. И эта статья поможет вам научиться ими пользоваться.

Редактор Macromedia Dreamweaver в своем последнем воплощении включает больше профессиональных средств и функций, чем все его соперники вместе взятые, и при этом обладает широчайшими возможностями конфигурирования. Однако для того чтобы воспользоваться всеми его преимуществами, не нужно быть гением в области техники. Многие из этих новшеств рассчитаны на облегчение работы и повышение производительности труда и созданы на основе превосходных средств разработки, появившихся в предыдущих версиях. Стили HTML позволяют определять для страниц CSS-подобные форматы, работающие в любом браузере, а тесная интеграция с Fireworks 3 весьма упрощает создание графических элементов.

Эти девять страниц учебных материалов помогут вам вырваться в лидеры в этой игре, познакомив вас с методами работы с Dreamweaver 3 и Fireworks 3. Так что не медлите, переверните страницу…

Этап 1: Создание страницы

Этап 2: Палитра History

Этап 3: Карты ссылок

Этап 4: Настройка HTML-кода

Этап 5: Fireworks и объекты

Этап 6: Оптимизация и шаблоны

Этап 7: Анимация с помощью Timeline

Этап 1: Создание страницы

Начнем с самых азов: создание простой страницы с анимированными кнопками в качестве шаблона для всего узла

1. Создайте на жестком диске папку с именем newsite и разместите в ней вторую папку, назвав ее images. Можно добавить и другие папки для страниц узла, клипов Shockwave, аудиофрагментов и прочих файлов, которые могут вам потребоваться позже.

2. Запустите Fireworks и загрузите заготовленный файл header. png — простой заголовок Web-страницы с логотипом, надписью и небольшой навигационной панелью. Выберите команду View>Grid Options>Edit Grid и установите шаг сетки 10×10 пикселов. Затем включите параметр Snap to Grid.

3. Выберите инструмент Slice и аккуратно выделите в изображении область логотипа, для удобства воспользовавшись сеткой. Затем с помощью того же инструмента выделите заголовок, навигационную панель и находящуюся рядом с ней надпись current charts.

4. Выберите фрагмент логотипа и найдите палитру Objects. Отключите параметр Auto-Name и введите имя logo.gif. Присвойте оставшимся фрагментам имена masterhead.gif, chart.gif и chartnav.gif, воспользовавшись разбитым на фрагменты файлом в качестве образца. В диалоговом окне File>Export выберите Use Slice Objects и сохраните изображения в папке images создаваемого узла.

   Кроме того, обязательно сохраните исходный PNG-файл.

5. Теперь запустите Dreamweaver 3 и выберите команду New Sites из меню Sites. В появившемся диалоговом окне найдите ранее созданную папку newsites и нажмите кнопку OK. (Остальные параметры на данный момент можно оставить без изменений.) Сохраните текущий (пустой) документ в той же папке под именем index.htm.

6. Дважды щелкните значок New Table в разделе Common Objects окна Object Inspector. Вставьте новую таблицу, состоящую из одной строки и двух столбцов, и установите для параметров Padding, Spacing и Border значение 0. После этого проверьте, активно ли окно Properties Inspector, открыв меню Windows и посмотрев, стоит ли галочка возле пункта Properties.

7. Выделите таблицу. В окне Properties Inspector установите для нее ширину 580 пикселов. Щелкните внутри первой ячейки таблицы. Установите ширину ячейки 100 пикселов, высоту 160 пикселов, а выравнивание содержимого — Left, Top. Дважды щелкните значок Insert Image в окне Object Inspector и найдите ранее экспортированное изображение logo.gif. Нажав кнопку OK, добавьте его к странице.

8. Теперь щелкните на второй ячейке и выберите команду Modify>Table, затем установите параметр Rows и введите значение 2 в соответствующем поле. Щелкните внутри новой верхней строки и с помощью окна Properties Inspector установите для нее ширину 480 пикселов, а высоту — 110 пикселов. Установите для расположенной ниже ячейки ширину 480 пикселов и высоту 50 пикселов. Наконец, установите выравнивание для ячеек — Left, Top.

9. Щелкните на верхней пустой ячейке таблицы. Выберите из меню команду Insert>Image и найдите изображение masterhead. gif в папке images. Выделите расположенную ниже ячейку и поместите в нее одно за другим изображения chart.gif и chartnav.gif. Сохраните страницу.

Этап 2: Палитра History

Возврат к любому месту в процессе разработки, повтор действий и первые шаги в настройке Dreamweaver

1. Если палитра History еще не открыта, выберите команду History из меню Windows. Новая палитра History в Dreamweaver похожа на аналогичную палитру в Photoshop 5 — в ней записывается каждая операция, выполняемая над файлом, что позволяет получить больший контроль над реализацией проекта.

2. Щелкните маркер положения в палитре History и удержите кнопку мыши, затем переместите его вверх. По мере продвижения операции, проведенные над документом в основном окне, последовательно отменяются, что позволяет вернуться к любому этапу создания страницы.

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

3. Операции из списка History можно повторять. Для примера попробуйте поместить курсор под созданной таблицей и выбрать команду Insert Table в списке History. Нажатие клавиш Control+Y (PC) или Option+Y (Mac) приводит к повторному выполнению последней операции.

4. Последовательность операций можно сохранить в качестве новой команды. Выберите палитру History и щелкните на верхней операции, затем, удерживая клавишу Shift, щелкните на последней операции в списке, чтобы выбрать их все. Щелкните на значке Save в палитре History, чтобы сохранить эти действия в качестве команды.

5. В появившемся диалоговом окне присвойте команде имя Insert MPFree Header. Перейдите к меню File и выберите команду New, чтобы создать новый файл. Щелкните на странице, чтобы активизировать ее, и выберите созданную команду из меню Commands, чтобы воспроизвести этот процесс. Результатом этого станет размещение заголовка в новом документе.

6. Тесная интеграция Dreamweaver 3 с Fireworks позволяет создавать весьма сложные команды, вызывающие сценарии Fireworks. Кроме того, в комплект программы входят готовые команды, позволяющие быстро оптимизировать изображения и создавать страницы на основе шаблонов, требуя ввода небольшого количества данных.

7. Возможности настройки Dreamweaver 3 гораздо шире, чем в предыдущих версиях программы. Выберите команду File>Open и найдите папку configuration\menus в программной папке Dreamweaver. Здесь можно увидеть, что вся система меню написана на XML и поддается модификации, хотя для их редактирования необходимо знакомство с XML и JavaScript.

8. Другие фрагменты Dreamweaver 3 тоже могут редактироваться. Выберите File>Open и перейдите в папку configuration\objects\common в программной папке Dreamweaver. Выберите Web-документ table.htm. Dreamweaver отобразит предназначенное для вставки таблиц диалоговое окно, которое можно отредактировать.

9. Измените устанавливаемые по умолчанию параметры для количества строк и столбцов и сохраните файл. Удерживая клавишу Control/Alt, щелкните в поле Title в окне Object и выберите команду Reload Actions. При следующей вставке таблицы будут использоваться новые параметры. Большинство объектов и операций в Dreamweaver можно редактировать подобным образом, непосредственно изменяя исходный код.

Этап 3: Карты ссылок

Быстрое добавление встроенных карт ссылок к изображениям

1. Вернемся к нашей работе. Новая функция Inline Image Maps значительно улучшена по сравнению с предыдущими версиями. Все нужные средства теперь находятся в окне Properties Inspector для изображений, а не в отдельном диалоге. Вернитесь к файлу index1ext1l и начните работу, щелкнув на изображении chartnav.gif.

2. Введите название карты chartmap в текстовом поле Map. Затем щелкните на инструменте Rectangular Hotspot и с помощью мыши нарисуйте прямоугольник вокруг кнопки 1. В поле Link введите none.html — это имя файла, который вы ранее перетащили в корневой каталог узла.

3. Повторите эту процедуру для каждой кнопки по очереди, связав их с файлом none.html. В «настоящем» узле ссылки указывали бы на другие страницы. Кроме того, можно воспользоваться кнопкой с изображением папки для поиска файлов или значком ссылки для выбора ссылки из окна Site.

Этап 4: Настройка HTML-кода

Использование стилей HTML и функции Quick Tags для управления внешним видом и форматированием документов

1. Пусть файл example1ext1l содержит почти законченную версию создаваемой нами страницы. Выберите Windows>HTML Styles, затем щелкните на стрелке в верхнем левом углу окна, чтобы открыть его выпадающее меню. Выберите команду New.

2. Присвойте новому стилю HTML имя Main Heading, выберите Arial, Helvetica, sans-serif из выпадающего списка Font и установите размер 6. Щелкните на значках полужирного шрифта и курсива, а затем нажмите кнопку OK.

3. Выделите фрагмент текста и выберите только что созданный стиль HTML из списка, чтобы применить его. Создайте дополнительные стили для основного текста и подзаголовков. Стили HTML будут работать в любом браузере, поскольку в них используется тэг <FONT>, а не каскадные таблицы стилей.

4. Иногда возникает необходимость работать с HTML-кодом страницы напрямую, не полагаясь на визуальные средства Dreamweaver. Функция Quick Tags в Dreamweaver 3 обеспечивает доступ и контекстное редактирование кода страницы.

5. Перетащите значок Insert Horizontal Rule в нижнюю часть страницы. С помощью окна Properties Inspector установите для нее ширину 580 пикселов, высоту 10 пикселов и выравнивание влево. Если флажок Shading установлен, снимите его. Выбрав линию, нажмите клавиши Control/Option+T, чтобы вызвать редактор Quick Tags.

6. Щелкните после последнего параметра, чтобы установить курсор, затем выберите COLOR из появившегося выпадающего списка. Допишите тэг линии так, чтобы он включал параметр COLOR=”#33666″. Этот атрибут распознается только браузером Internet Explorer и не поддерживается Dreamweaver напрямую.

Этап 5: Fireworks и объекты

Интеграция Dreamweaver 3 с Fireworks 3 и использование новых объектов для автоматизации задач

1. Снова запустите Fireworks и создайте документ размером 60×60 пикселов. Нарисуйте заполненный круг и примените к нему эффект вдавленности из палитры Effects. Нанесите на полученную кнопку надпись.

2. Выберите команду Duplicate Frame из выпадающего списка в палитре Frames. Перейдите к новому кадру с помощью стрелок в нижней части окна документа и измените цвет надписи. Вернитесь к кадру 1 и нажмите клавиши Control/Option+A, чтобы выделить все.

3. Выберите команду Insert>New Button. Введите none.html в поле Links в палитре HTML или выберите этот файл с помощью функции обзора. Сохраните графический файл под именем button.png в новой папке rollovers в своем узле.

4. Выберите команду File>Export. В диалоговом окне Save присвойте кнопке имя button1.gif и выберите Use Slice Objects. В разделе HTML Settings выберите Dreamweaver 3 и оставьте в поле Location значение Same Directory. Сохраните файлы в папке rollovers.

5. Вернитесь в Dreamweaver, поместите курсор на боковую панель в файле example.html и дважды щелкните на значке Insert Fireworks HTML в окне Object. Перейдите в каталог rollovers и выберите там HTML-файл, который должен называться button1.html.

6. Воспользуйтесь файлом button. png в качестве шаблона для создания остальных кнопок и тем же способом добавьте их к странице. Кнопки можно создать и с «нуля», выбрав документ с единственным кадром, вызвав команду Insert>New Button и добавив дополнительные изображения в появившемся диалоговом окне.

7. Dreamweaver 3 включает и другие новые объекты. Чтобы испытать один из наиболее привлекательных, перетащите значок Email из окна Object Inspector на боковую панель. В появившемся диалоговом окне введите нужный текст для ссылки и соответствующий адрес электронной почты. Включение данного нового объекта означает, что все средства для работы с гиперссылками в Dreamweaver теперь автоматизированы.

8. Обратите внимание и на новые объекты для Flash 4 и Generator 2, которые поддерживают все необходимые параметры и позволяют непосредственно редактировать их. До этого лучшим средством для размещения таких файлов на страницах был AfterShock.

9. Объект Character — еще одно превосходное нововведение. Как и все остальные объекты палитр, его можно редактировать. Для того чтобы добавить новый символ, необходимо создать в Dreamweaver файл HTML и вставить в него нужный символ с помощью обычного сочетания клавиш, а затем создать значок в GIF-файле с тем же именем и поместить оба файла в папку configuration\objects\characters.

Этап 6: Оптимизация и шаблоны

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

1. После создания основного формата, добавления кода и вставки объектов необходимо оптимизировать и привести страницу в законченный вид, прежде чем считать ее готовой. На бумаге дизайн мог выглядеть отлично, однако вид и работоспособность созданной страницы необходимо проверить, прежде чем отправлять ее в Интернет.

2. Одно из преимуществ создания основных изображений в качестве фрагментов Fireworks — это то, что страницу можно отредактировать в любой момент. Чтобы исправить отдельное изображение, его нужно выделить в Dreamweaver, выбрать в окне Properties Inspector команду Edit для запуска Fireworks и внести необходимые исправления. Документы в Dreamweaver будут обновлены автоматически.

3. Если исходный графический файл Fireworks был сохранен в формате PNG, изменения можно вносить и в него. Загрузите этот файл в Fireworks, отредактируйте его, а затем заново экспортируйте изображения в папку images. Никаких действий над самой страницей при этом производить не требуется.

4. Другие присутствующие на странице изображения, в частности те, которые были созданы без использования Fireworks, на этом этапе можно оптимизировать. По очереди выделяйте изображения и выбирайте в Fireworks команду Modify>Optimise Image. При этом в память будет загружен механизм экспорта Fireworks.

5. Завершив работу над страницей, выберите команду Commands>Clean-up HTML. Из-за того что в документ включались стили шрифтов и фрагменты кода из Fireworks, системе очистки кода Dreamweaver найдется, над чем поработать.

6. На этом этапе полезно будет взглянуть на код! Поскольку мы трудились над одной-единственной страницей, это не займет много времени. Убедитесь, что все внутренние ссылки являются относительными. Иногда в файл попадают абсолютные ссылки (содержащие полный путь к файлу на локальном жестком диске). Они не будут работать, поэтому их следует исправить вручную.

7. Теперь, когда у нас есть вполне симпатичная и работоспособная страница, пора сделать ее образцом для всего узла, превратив в шаблон. Выберите команду File>Save As Template и введите имя default в появившемся диалоговом окне.

8. Выделите первую ячейку с текстом в файле example.html и выберите команду Modify>Templates>New Editable Region из основного меню. Присвойте региону имя cell1. Повторите эти действия для второй ячейки, присвоив ей имя cell2. Сохраните файл.

9. Перейдите к меню File и выберите команду New From Template. Выберите из списка default. На экране появится страница, полностью включающая все элементы дизайна, но содержащая две области для новой информации. С помощью таких заранее подготовленных страниц можно быстро создать узел, а при редактировании шаблона изменения будут отражены на всех страницах узла.

Этап 7: Анимация с помощью Timeline

Хороший способ создания рекламных баннеров для узла

1. Некоторые компании выпускают специальные программы для создания анимационных рекламных баннеров, сменяющих друг друга. Мы же воспользуемся средствами Dreamweaver 3, чтобы создать DHTML-совместимый баннер, который будет работать в современном браузере без дополнительных модулей и серверных сценариев.

2. Создайте новый документ, затем выберите инструмент Layers из палитры Objects и нарисуйте на пустой странице новый слой. Выберите команду Window>Layers. В окне появится новый слой с именем Layer1. С помощью окна Properties Inspector установите размер слоя 480×60 пикселов.

3. Под первым слоем создайте второй, тоже установив для него размер 480×60 пикселов. Таким же образом создайте и третий слой, идентичный первым двум. Теперь в окне Layers Inspector должны отображаться три слоя с именами Layer1, Layer2 и Layer3, имеющие одинаковые размеры.

4. Нарисуйте в Fireworks три рекламных баннера и экспортируйте их в файлы формата GIF или просто загрузите какие-нибудь баннеры из Интернета. Вернитесь в Dreamweaver, выберите в окне Layers слой Layer1, затем щелкните внутри него, чтобы сделать курсор активным. Вызовите команду Insert>Image и укажите первый баннер. Тем же способом вставьте остальные два баннера в слои Layer2 и Layer3.

5. Выберите в окне Layers слой Layer1. В окне Properties Inspector установите для полей L (Left) и T (Top) значение 10 пикселов. Таким же образом установите положение для оставшихся двух слоев, чтобы все они находились непосредственно друг над другом. При просмотре в браузере изображения должны выводиться поочередно. Этого можно добиться, скрывая и отображая слои с помощью функции Timeline.

6. Выберите команду Window>Timeline и щелкните на первом кадре в первой строке. Выделите слой Layer1 в окне Layers и выберите команду Modify>Timelines>Add Object to Timeline. Щелкните на последнем кадре только что добавленного объекта в окне Timeline и перетащите его так, чтобы полоса занимала диапазон от 1-го до 30-го кадра.

7. Повторите описанные в предыдущем пункте действия для слоев Layer2 и Layer3, чтобы создать для каждого слоя в окне Timeline отдельную полосу. Щелкните на кадре 10 в строке Layer1 окна Timeline и создайте ключевой кадр, выбрав команду Modify>Timeline>Add Keyframe. Тем же способом добавьте дополнительные ключевые кадры на 10-м и 20-м кадрах в строке Layer2 и на 20-м кадре в строке Layer3.

8. Выберите первый кадр, щелкнув на соответствующей позиции линейки окна Timeline. Выберите в окне Layers слой Layer1 и включите отображение этого слоя с помощью пункта Vis. Щелкните на кадре 10 на линейке окна Timeline и с помощью окна свойств выключите отображение слоя Layer1 и включите отображение слоя Layer2. Щелкните на кадре 20. Выключите отображение слоя Layer2 и включите отображение слоя Layer3.

9. Оставаясь в позиции 30-го кадра, выберите команду Modify>Timeline>Add Behaviour to Timeline. Щелкните значок «+» и выберите команду Timeline>Go To Timeline Frame, а затем пункт Go To Frame 1 в появившемся диалоговом окне. Щелкните вкладку, чтобы вернуться к окну Timeline, установите для параметра fps значение 3 и включите флажок Autoplay. Сохраните страницу, выберите команду Preview in Browser и любуйтесь результатами тяжелого труда.

КомпьюАрт 3’2000

Быстрый Web-дизайн с Dreamweaver

Эффективные технологии превращения макетов в страницы Web

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

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

Если вы вовлечены в «дикий» мир Web-дизайна, то, вероятно, знаете, что зачастую приходится работать всю ночь, чтобы успеть к назначенному клиентом сроку или опередить конкурентов. В этом могут помочь ценнейшие возможности Dreamweaver, такие как шаблоны, трассировка изображений, Cascading Style Sheets (каскадные таблицы стилей — CSS), улучшенные средства поиска и замены, библиотека элементов, поддержка динамического HTML (DHTML), упрощенное создание таблиц и фреймов, управление структурой узла.

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

По шаблонам

На мой взгляд одна из интереснейших особенностей в Dreamweaver 2.0 — примененный в ней новый подход к использованию шаблонов. Во многих программах для создания HTML есть шаблоны для домашних страничек, но лишь немногие из них имеют качество, достаточное даже для личного узла, не говоря уж о коммерческом дизайне по заказу клиента. В Dreamweaver шаблоны подняты на новый уровень: при изменении существующего шаблона возможно обновление всех созданных с его помощью страниц текущего узла.

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

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

К счастью, вместо того, чтобы потратить день или два на переделывание всех страниц, вы можете сделать это за несколько часов. Поскольку исходный вариант дизайна был создан в шаблоне Dreamweaver, вы просто изменяете панель навигации, фон и другие элементы шаблона, а затем выполняете команды Modify (Изменить), Templates (Шаблоны), Update Pages (Обновить страницы). После этого Dreamweaver применит изменения ко всем страницам узла.

Шаг за шагом: можно и назад

Тереза Ривьера из Новато (шт. Калифорния), разработавшая много коммерческих узлов, включая сервер компании Beth’s Fine Desserts (см. врезку «Использование трассировки изображений»), подобно многим другим дизайнерам предпочитает создавать свои страницы в графических программах, и только потом переходит к работе с HTML-редактором. Одной из самых интересных с ее точки зрения возможностей Dreamweaver является функция трассировки изображений. Используя эту опцию, можно создавать изображение в программе типа Adobe Photoshop или Macromedia FreeHand, размещать его на заднем плане страницы Web, а затем трассировать изображение, воссоздавая исходный дизайн.

Функция трассировки изображений — идеальный способ размещения слоев или создания ячеек таблицы в HTML, поскольку он гарантирует, что изображения и другие элементы окажутся именно там, где они были в исходном варианте дизайна. Dreamweaver воспринимает изображения для трассировки из любого графического приложения, поддерживающего форматы JPEG, GIF или PNG.

Следует помнить, что оттрасированное изображение не является фоновой картинкой и поэтому оно не отображается при просмотре страницы через браузеры Netscape Navigator или Internet Explorer. Когда вы вставляете оттрассированное изображение в документ Dreamweaver, фоновое изображение или цвет оказываются скрыты; однако, если вы хотите видеть задний план окна документа, то можете отключить отображение оттрассированного изображения.

Стили с помощью CSS

Иоланда Баррелл, корпоративный web-мастер компании Etec Systems (Хайворд, шт. Калифорния), особенно ценит в Dreamweaver гибкую поддержку технологии Cascading Style Sheets (CSS) и улучшенную функцию поиска и замены, которая позволяет выполнять поиск в тегах HTML, игнорируя незначащие символы. Можно также ограничить поиск рамками определенного узла или каталога и сохранить критерии поиска в папке. Это значит, что вам не придется заново писать стандартные выражения (чтобы задать некоторые сочетания букв, используются специальные символы) и вы сможете сохранить определенный шаблон поиска (например, поиск определенного тега или атрибута), а затем повторно использовать его.

Технология CSS поможет поддерживать однообразный вид и стиль в рамках всего узла Web. Работая с большим узлом intranet, Баррелл использует стилевые листы для упрощения форматирования содержания новых страниц и добавления информации к существующим. Если вы знакомы со стилевыми листами в таких программах, как Adobe PageMaker, Microsoft Word или QuarkXPress, то быстро оцените полезность этой функции для Web-дизайна.

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

Можно описать стиль для раздела документа, всего документа или всего узла Web. Позже, если вам понадобится изменить стиль — например, заменить шрифт заголовка с Times на Helvetica — можно глобально обновить все элементы, описанные данным стилем. Достаточно просто изменить описание стиля, созданного для заголовков, и весь текст с этим стилем преобразуется автоматически.

Единственный недостаток стилевых листов в том, что технология CSS является относительно новой для Web и, следовательно, стилевые листы поддерживаются только новейшими версиями браузеров, в частности, Netscape Navigator 4, Microsoft Internet Explorer 4 и более поздними. (Некоторые элементы поддержки стилей предусмотрены в Internet Explorer 3, но там реализованы не все возможности, имеющиеся в Dreamweaver.) Если вы, как и Баррелл, занимаетесь разработкой узла intranet, то ваши «читатели» скорее всего используют новейшие версии браузеров, поддерживающие CSS. Однако, если вы взялись за дизайн для более широкой аудитории, в процессе проектирования вам придется учитывать возможность просмотра узла далеко не самыми современными браузерами.

К счастью, компания Macromedia при разработке Dreamweaver учитывала различия между браузерами, и программа обладает возможностями, которые помогают подстроиться под различные браузеры. Например, вы можете создать узел со стилевыми листами, а затем с помощью опции Convert To 3.0 Browsers (Конвертировать для браузеров версий 3.0) создать альтернативные страницы, которые будут работать с устаревшими браузерами. Хотя этот процесс относительно прост, вам придется поддерживать две различные версии узла Web.

Кроме возможности управления большинством традиционных атрибутов форматирования текста, стили в документах HTML могут также описывать уникальные атрибуты HTML, такие как позиционирование, специальные эффекты и ролловеры — элементы, изменяющие свое состояние при прохождении над ними указателя мыши. Однако Dreamweaver не отображает все доступные опции стилей в окне документа. Неотображаемый атрибут появляется в окне Style Definition (Описание стиля) со звездочкой (*) вслед за названием. Чтобы увидеть стиль таким, каким он показывается в браузере, вы должны просмотреть его через установленный браузер, поддерживающий CSS. Чтобы выполнить предварительный просмотр любой созданной в Dreamweaver страницы, выберите команды File, Preview In Browser (Предварительный просмотр через браузер), а затем выберите браузер.

В библиотеку

Функция Library (Библиотека) пакета Dreamweaver автоматизирует процесс вставки и изменения элементов, которые расположены на нескольких страницах узла. Программа хранит библиотечные элементы в папке Library и связывает их со всеми страницами, на которых элементы были размещены. Это значит, что если браузер один раз загрузил библиотечный элемент, ему уже не придется делать это снова, когда этот элемент повстречается на следующих страницах. (Чтобы функция Library работала правильно, оригинальный файл должен остаться в том же месте.)

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

Для каждого разрабатываемого узла нужно задавать отдельную библиотеку. Если вы хотите использовать элемент библиотеки с другого узла, достаточно скопировать элемент в буфер обмена и вставить его оттуда; можно также открыть страницу, из которой вы хотите использовать библиотечные элементы, выполнить команду Save As и сохранить страницу в новом узле. Затем можно переопределить каждый элемент библиотеки (см. врезку «Создание и использование библиотеки элементов»).

В библиотеки можно включать любые элементы — такие как таблицы, формы, изображения, апплеты Java, дополнительные модули и текст — из области BODY файла HTML. Но библиотеки не могут содержать такие элементы, как временные шкалы, стилевые листы или функции JavaScript, так как исходный текст этих объектов входит в область HEAD файла HTML. Хотя вы можете добавлять «поведения» (behavior) (сочетания событий, таких как ролловеры и действий JavaScript) к библиотекам элементов, в Dreamweaver имеются особые требования к редактированию «поведений» в библиотечных элементах, поскольку часть исходного текста «поведений» находится в области HEAD.

Динамический дизайн

Еще один аспект, где Dreamweaver проявляет себя во всей красе — это поддержка DHTML. В версии 1.2 стало возможным добавлять интерактивные функции, типа ролловеров — графических событий, совершающихся в момент прохождения указателя мыши над определенным текстом или изображением. (Подробнее о создании ролловеров см. в статье «Ролловеры без программирования», Publish, ? 4, 1999 г., с. 51).

Те, кто разрабатывает сложные узлы с DHTML, обязательно оценят возможности анимации с временной шкалой, а также большой набор предопределенных вариантов «поведения», которые можно использовать при дизайне страниц — все это реализовано в Dreamweaver. Дизайнеры, обладающие навыками программирования, могут также создавать «поведения» и делать их доступными своим менее опытным коллегам. На часто обновляемом узле Web компании Macromedia, http://www.dreamweaver.com, можно найти постоянно растущий список «поведений», а также выгружаемые расширения.  

Джанин Уорнер — редактор Web-узла издательства Miami Herald Publishing. Она также является профессиональным диктором и автором шести книг по Web-дизайну, включая Dreamweaver for Dummies (IDG Books) Flash 3.0 Web Animation F/X and Design (Coriolis).

Использование трассировки изображений

Первоначально Тереза Ривьера дизайн Web-узла компании Beth’s Fine Desserts выполнила в Photoshop, а затем повторила его в Dreamweaver, поместив на страницы поверх оттрассированных исходные изображения GIF и JPEG, что должно было гарантировать точное воссоздание первоначального замысла.

Чтобы добавить к странице Web трассированное изображение, откройте файл страницы в Dreamweaver и выполните команды Modify, Page Properties (Свойства страницы). В окне диалога Page Properties щелкните по кнопке Choose (Выбрать), расположенной рядом с текстовым боксом Tracing Image, и в окне открытия файлов выберите изображение для вставки. Чтобы сделать изображение частично сливающимся с фоном и облегчить процесс трассировки, переместите движок Transparency (Прозрачность) в положение между 50 и 70 процентами (в зависимости от характера изображения). Для просмотра результатов щелкните по кнопке Apply (применить)(на рисунках она не показана), а по завершении — по кнопке OK (рис. А).

Опираясь на трассированное изображение, можно создать слои или таблицу (рис. В).

Для точного воссоздания первоначального дизайна поверх трассированного изображения можно

расположить несколько других изображений (рис. С).

Описание и применение стилевых листов

Вы можете описать любое сочетание опций форматирования как новый стиль, а затем применить его к выделенному тексту или любому другому элементу документа. Чтобы создать стиль, выполните команды Window (Окно), Styles (Стили) — или щелкните по кнопке Styles в панели Launcher — откроется палитра Styles (рис. D).

Теперь, чтобы открыть окно диалога Edit Style Sheet (Редактирование стилевого листа), щелкните по кнопке Style Sheet (Стилевой лист)(рис. E).

Для создания стилевого листа нужно выполнить команду New (Новый) — откроется окно диалога New Style (Новый стиль).

Чтобы создать совершенно новый стиль, выберите радиокнопку Make Custom Style (Сделать заказной стиль)(рис. F). А для изменения или добавления опций форматирования к любому существующему тегу HTML (например, чтобы выровнять тег заголовка по центру) щелкните по радиокнопке Redefine HTML Tag (Переопределить тег HTML).

Для создания стиля, который будет применяться к ссылке, щелкните по радиокнопке Use CSS Selector (Использовать селектор CSS). Сделав свой выбор, щелкните по кнопке OK и в окне диалога Style Definition For (Описание стиля для) задайте атрибуты, которые хотите связать со стилем. Для получения стиля подзаголовка, показанного на рис. G, задано три опции — Arial, Helvetica и шрифт без засечек.

Поскольку Dreamweaver задействует возможности HTML по заданию нескольких шрифтов, пользователи, у которых нет установленных у вас шрифтов, все же увидят текст, отображаемый шрифтом без засечек, который подберет их браузер. Чтобы создать новый стиль и добавить его к палитре Styles, щелкните по кнопке OK, а затем — Done.

Любой стиль можно применить, выбрав текст или другой элемент страницы (например, подзаголовок на рис. H),

а затем щелкнув по названию стиля в окне диалога Styles.

Создание и использование библиотеки элементов

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

Чтобы создать библиотечный элемент, выберите нужный элемент или их сочетание. Выполните команды Window, Library (Библиотека) — откроется палитра Library; затем перетащите элемент (например, палитру навигации на рис. I)

в нижнюю секцию палитры Library. Чтобы сделать его библиотечным, щелкните по кнопке Create (Создать) и присвойте элементу название (автор назвал его navbar).

Добавить элемент библиотеки можно к любой странице узла. Достаточно открыть новый или существующий документ, выполнить команду Window, Library, чтобы открыть палитру Library, выбрать нужный элемент библиотеки и щелкнуть по кнопке Add to Page (Добавить к странице) в верхней правой части палитры Library. Элемент библиотеки можно также вставить, выбрав его в палитре Library и перетащив в окно документа (рис. J).

Чтобы отредактировать элемент библиотеки, дважды щелкните по нему в палитре

Library и внесите необходимые изменения, например, коррекцию ссылки, замену изображения или добавление нового текста. Когда вы сохраните элемент, Dreamweaver отобразит окно диалога, где спросит, хотите ли вы выполнить глобальное обновление (рис. K). Если щелкнуть по кнопке Yes, Dreamweaver внесет изменения во все страницы текущего узла, содержащие данный элемент. Если щелкнуть по кнопке No, изменения коснутся только тех страниц, куда элемент будет вставляться в дальнейшем.

Те, кто разрабатывает сложные узлы с динамическим HTML, обязательно оценят возможности анимации с временной шкалой в Dreamweaver.

Основы работы в Dreamweaver — тест 1

Главная / Интернет-технологии / Основы работы в Dreamweaver / Тест 1

Упражнение 1:

Номер 1

С какими проблемами все чаще сталкиваются современные веб-дизайнеры и разработчики? 

Ответ:

&nbsp(1) необходимость поддержки и обновления существующих сайтов с учетом меняющихся стандартов, появлением новых технологий и увеличением их информационного объема&nbsp

&nbsp(2) необходимость создавать такие системы управления контентом, которые упрощают работу по обновлению данных на сайте для не слишком продвинутых в техническом плане сотрудников компаний&nbsp

&nbsp(3) необходимость проверки страницы в веб-браузерах Netscape и Internet Explorer&nbsp

&nbsp(4) современные веб-узлы должны в реальном времени реагировать на действия пользователей&nbsp

Номер 2

Какой символ использует Dreamweaver в качестве заполнителя пустого абзаца?

Ответ:

&nbsp(1) пробел&nbsp

&nbsp(2) амперсанд&nbsp

&nbsp(3) собачка&nbsp

&nbsp(4) неразрывный пробел&nbsp

Номер 3

Используя ряд технологических разработок в области веб-дизайна, Dreamweaver MX 2004  позволяет создавать  

Ответ:

&nbsp(1) интерактивные веб-сайты для взаимодействия с пользователем&nbsp

&nbsp(2) динамические веб-сайты&nbsp

&nbsp(3) статические веб-сайты&nbsp

&nbsp(4) веб-сайты, соответствующие специальным стандартам&nbsp

Упражнение 2:

Номер 1

Программа Dreamweaver MX 2004 компании Macromedia разрабатывалась таким образом, чтобы позволить создавать веб-сайты с использованием следующих технологий:

Ответ:

&nbsp(1) каскадные таблицы стилей, &nbsp

&nbsp(2) таблицы паролей&nbsp

&nbsp(3) веб-сервисы&nbsp

&nbsp(4) серверы баз данных&nbsp

Номер 2

Выберите верные  предложения, относящиеся к современным веб-узлам:

Ответ:

&nbsp(1) Для поддержания работы веб-узлов сотрудники фирм используют готовые веб-формы. &nbsp

&nbsp(2) Для поддержания работы веб-узлов сотрудники фирм обязаны знать язык разметки HTML.&nbsp

&nbsp(3) Современные веб-узлы должны содержать постоянную, неизменяемую информацию.&nbsp

&nbsp(4) Современные веб-узлы должны соответствовать нуждам и интересам пользователей.&nbsp

Номер 3

Программа Dreamweaver MX 2004 компании Macromedia позволяет создавать веб-сайты с использованием следующих технологий:

Ответ:

&nbsp(1) ColdFusion, &nbsp

&nbsp(2) ASP&nbsp

&nbsp(3) Flash&nbsp

&nbsp(4) JavaScript&nbsp

Упражнение 3:

Номер 1

Почему необходимо зарегистрировать сайт в программе Dreamweaver MX 2004?

Ответ:

&nbsp(1) в этом случае Dreamweaver обеспечит корректное объединение файлов сайта&nbsp

&nbsp(2) без регистрации программа Dreamweaver MX 2004 не будет работать&nbsp

&nbsp(3) для того, чтобы получить доступ к эффективным инструментам Dreamweaver&nbsp

Номер 2

Какие преимущества дает регистрация сайта в программе Dreamweaver MX 2004?

Ответ:

&nbsp(1) предотвращает автоматическую загрузку файлов на сервер&nbsp

&nbsp(2) предотвращает появление нерабочих ссылок&nbsp

&nbsp(3) автоматически обновляет на сайте все файлы&nbsp

Номер 3

Данные, заданные при регистрации сайта в программе Dreamweaver MX 2004, в последствии

Ответ:

&nbsp(1) можно изменить&nbsp

&nbsp(2) нельзя изменить&nbsp

Упражнение 4:

Номер 1

В каком диалоговом окне производится регистрация сайта?

Ответ:

&nbsp(1) Site Definition&nbsp

&nbsp(2) Manage Site&nbsp

&nbsp(3) Split&nbsp

Номер 2

Для того, чтобы начать регистрацию сайта, после запуска программы Dreamweaver можно:

Ответ:

&nbsp(1) на появившейся при загрузке странице в разделе Manage Site выбрать ссылку Create New&nbsp

&nbsp(2) выполнить в меню Site команду Create New&nbsp

&nbsp(3) на появившейся при загрузке странице в разделе Create New выбрать ссылку Dreamweaver Site&nbsp

&nbsp(4) выполнить в меню Site команду Manage Site и нажать кнопку New&nbsp

Номер 3

Выберите верные  предложения:

Ответ:

&nbsp(1) Регистрация статичного сайта отличается от регистрации динамического сайта. &nbsp

&nbsp(2) Регистрация статичного сайта ни чем не отличается от регистрации динамического сайта.&nbsp

&nbsp(3) При регистрации можно выбрать базовый или расширенный режим.&nbsp

&nbsp(4) При регистрации веб-сайта в программе Dreamweaver нельзя выбирать расширенный режим.&nbsp

Упражнение 5:

Номер 1

Программа Dreamweaver позволяет отображать страницы сайта в режиме

Ответ:

&nbsp(1) HTML кода&nbsp

&nbsp(2) визуального дизайна&nbsp

&nbsp(3) совместного отображения кода и дизайна&nbsp

&nbsp(4) показа комментария к коду&nbsp

Номер 2

Выберите верные  предложения: 

Ответ:

&nbsp(1) Браузеры игнорируют переходы на новую строку, лишние пробелы, и символы табуляции. &nbsp

&nbsp(2) Для форматирования текста, отображаемого в браузере, применяются HTML-теги.&nbsp

&nbsp(3) Браузеры игнорируют только лишние пробелы. &nbsp

&nbsp(4) HTML-теги мешают нормальному восприятию текста.&nbsp

Номер 3

Выберите верные  предложения:

Ответ:

&nbsp(1) Если в документе отсутствует HTML-разметка, Dreamweaver не может открыть его в режиме дизайна.&nbsp

&nbsp(2) Значок в виде замка с защелкой рядом с именем файла указывает, что файл доступен только для чтения, его нельзя изменить.&nbsp

&nbsp(3) Если в документе отсутствует HTML-разметка, его невозможно открыть в программе Dreamweaver.&nbsp

&nbsp(4) Значок в виде замка с защелкой рядом с именем файла указывает, что файл защищен паролем. &nbsp

Упражнение 6:

Номер 1

Кнопка Image на панели Insert (Вставка) представляет собой

Ответ:

&nbsp(1) список &nbsp

&nbsp(2) раскрывающийся список&nbsp

&nbsp(3) переключатель&nbsp

&nbsp(4) командную кнопку&nbsp

Номер 2

Добавление каких атрибутов позволяет людям с ослабленным зрением  получить справку о содержимом объекта с помощью синтезатора речи?

Ответ:

&nbsp(1) атрибут summary к тегу <table>&nbsp

&nbsp(2) атрибут alt к тегу <img>&nbsp

&nbsp(3) атрибут i тега <br>&nbsp

Номер 3

Какой тип выравнивания следует задать для изображения на панели инспектора свойств, чтобы происходило обтекание  изображения тестом?

Ответ:

&nbsp(1) по левому краю&nbsp

&nbsp(2) по центру&nbsp

&nbsp(3) по правому краю&nbsp

Упражнение 7:

Номер 1

Какое свойство таблицы позволяет установить толщину границы ячейки?

Ответ:

&nbsp(1) cell spacing&nbsp

&nbsp(2) cell padding&nbsp

&nbsp(3) table width&nbsp

&nbsp(4) border thickness&nbsp

Номер 2

Какое свойство таблицы позволяет установить расстояние между ячейками?

Ответ:

&nbsp(1) cell spacing&nbsp

&nbsp(2) cell padding&nbsp

&nbsp(3) table width&nbsp

&nbsp(4) border thickness&nbsp

Номер 3

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

Ответ:

&nbsp(1) cell spacing&nbsp

&nbsp(2) cell padding&nbsp

&nbsp(3) table width&nbsp

&nbsp(4) border thickness&nbsp

Упражнение 8:

Номер 1

Для удаления атрибута файла "только для чтения" следует навести курсор мыши на имя файла  и выполнить команду контекстного меню 

Ответ:

&nbsp(1) locate in remote site&nbsp

&nbsp(2) create new&nbsp

&nbsp(3) turn off read only&nbsp

&nbsp(4) undo check out&nbsp

Номер 2

Требуется удалить атрибут файла "только для чтения" у всех файлов, относящихся к сайту.   Куда следует навести курсор мыши на панели Files?

Ответ:

&nbsp(1) на значок папки верхнего уровня&nbsp

&nbsp(2) на значок любой папки&nbsp

&nbsp(3) на любой файл&nbsp

&nbsp(4) на верхний файл&nbsp

Номер 3

 На рисунке показан фрагмент панели Вставка. Какая кнопка  соотвествует комбинированному режиму?

Ответ:

&nbsp(1) 1&nbsp

&nbsp(2) 2&nbsp

&nbsp(3) 3&nbsp

Упражнение 9:

Номер 1

Какая команда меню File позволяет сохранить файл с новым именем? 

Ответ:

&nbsp(1) save&nbsp

&nbsp(2) save as&nbsp

&nbsp(3) open&nbsp

&nbsp(4) close&nbsp

Номер 2

К выполнению какого действия  приведет  нажатие клавиши F12? 

Ответ:

&nbsp(1) закроются все файлы проекта&nbsp

&nbsp(2) текущий файл откроется в браузере&nbsp

&nbsp(3) появится окно вставки изображения&nbsp

Номер 3

Какая команда меню File сохраняет файл с текущим именем и новым содержимым? 

Ответ:

&nbsp(1) save&nbsp

&nbsp(2) save as&nbsp

&nbsp(3) open&nbsp

&nbsp(4) close&nbsp

Упражнение 10:

Номер 1

В данном примере <p align="center"><font color="#FF0000" size="4"><strong>Добро пожаловать </strong></font><font color="#FF0000"><i>на наш сервер </i></font></p>
 устаревшим  тегом является . ..

Ответ:

&nbsp(1) <p>&nbsp

&nbsp(2) <font>&nbsp

&nbsp(3) <i>&nbsp

&nbsp(4) <strong>&nbsp

Номер 2

В чем преимущество комбинированного режима Split? 

Ответ:

&nbsp(1) позволяет применить средства обоих режимов Design и Code&nbsp

&nbsp(2) выделение объекта в области Design приводит к выделению соответствующего HTML-кода в области Code&nbsp

&nbsp(3) применняя инструменты визуальной разработки, можно контролировать генерацию кода&nbsp

&nbsp(4) страница получается интереснее: помимо кода на ней есть еще и дизайн&nbsp

Номер 3

Панель инспектора свойств позволяет менять

Ответ:

&nbsp(1) свойства текущего объекта&nbsp

&nbsp(2) соответствующий свойствам текущего объекта HTML-код &nbsp

&nbsp(3) внешний вид среды разработки&nbsp

&nbsp(4) внешний вид текущего объекта&nbsp

Упражнение 11:

Номер 1

Нажатие какой клавиши приводит к появлению тега <br> ?

Ответ:

&nbsp(1) shift + enter&nbsp

&nbsp(2) enter&nbsp

&nbsp(3) shift&nbsp

Номер 2

Какую последовательнось действий нужно выполнить для форматирования надписи курсивом?

Ответ:

&nbsp(1) В инспекторе свойств выбрать дизайн , в режиме курсив выделить надпись. &nbsp

&nbsp(2) В инспекторе свойств выбрать курсив, в режиме Дизайн выделить надпись.&nbsp

&nbsp(3) В режиме Дизайн выделить надпись, в инспекторе свойств выбрать курсив. &nbsp

Номер 3

Нажатие какой клавиши или их комбинации приводит к появлению тега <p> 

Ответ:

&nbsp(1) shift + enter&nbsp

&nbsp(2) enter&nbsp

&nbsp(3) shift&nbsp

Главная / Интернет-технологии / Основы работы в Dreamweaver / Тест 1

учебных онлайн-курсов Dreamweaver | LinkedIn Learning, ранее Lynda.com

LinkedIn и третьи стороны используют необходимые и необязательные файлы cookie для предоставления, защиты, анализа и улучшения наших Сервисов, а также для показа вам релевантной рекламы (включая профессиональные объявления и объявления о вакансиях ) в LinkedIn и вне его . Узнайте больше в нашей Политике в отношении файлов cookie.

Выберите «Принять», чтобы дать согласие, или «Отклонить», чтобы отказаться от необязательных файлов cookie для этого использования. Вы можете обновить свой выбор в любое время в настройках.

Перейти к основному содержанию

• Лучший матч

  Количество просмотров

  Новейшие

• Новичок (216)

  Промежуточный (346)

  Продвинутый (41)

• Курс (9)

  Видео (378)

• < 10 минут (369)

  10 — 30 мин (9)

  1 — 2 часа (2)

  2 — 3 часа (5)

  3+ часа (2)

• Ткач снов (387)

  Фотошоп (39)

1. Все темы

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

• 8м

• 2ч 14м

• 2м

• 8ч 11м

• 12 м

• 2 м

• 4 м

• 4 м

• 5м

• 4 м

• 6м

• 3 м

• 5м

• 3 м

• 2м

• 2ч 34м

• 1м

• 3 м

• 4 м

• 6м

Присоединяйся сейчас

DreamWeaver Wheat — Tröegs Independent Brewing

Hefeweizen в немецком стиле

Вкус: банан/яблоко, гвоздика, лимон, тонкий черный перец

Найти рядом с вами

Трёгс То-Гоу

Наша мечта начинается с ферментации под открытым небом

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

• Зерно

  Пшеничный солод (55%), Пльзень, Вена

• Хмель

  Немецкий северный пивовар

• Дрожжи

  Немецкая пшеница

Награды

• 2020 — Чемпионат США по дегустации пива — Лучшее среднеатлантическое пшеничное пиво
• 2019- Чемпионат США по дегустации пива — Лучшее среднеатлантическое пшеничное пиво
• 2012 — Золотая медаль — Большой американский фестиваль пива — Hefeweizen в южно-немецком стиле

Пищевые заметки

Пиво и еда. Им лучше вместе. Здесь, в Tröegs, мы долго и упорно думали не только о том, какие продукты сочетаются с нашим пивом, но и о том, почему. Мы не собираемся указывать вам, что есть, а вдохновлять вас на создание сочетаний, которые идеально соответствуют вашему собственному вкусу.

• Контрастный

  Бэзил Свинина гриль Жареная курочка Выдержанный сыр Тропический фрукт

• Дополнительный

  Сырые устрицы Моллюски Белая колбаса Запеченное печенье ваниль

• Неблагоприятное

  Сладкий шашлык Красное мясо Шоколад Чеснок и лук

Скачать заметки о еде

Другие сорта пива, которые вам могут понравиться

Товары

• Женская футболка с V-образным вырезом Script — Оливковая $25

• С Длинным Рукавом С Логотипом Troegs — Мятный $29

• Скрипт Troegs — Градиент T $22

Посмотреть все продукты

Dreamweaver I

Веб-дизайн — сложный бизнес. Создание даже скромного веб-сайта потребует от вас отслеживания множества элементов, в том числе:

	HTML-страницы Каскадные таблицы стилей Изображения JPEG, GIF и PNG Кнопки навигации или графика PDF-файлы для скачивания Файлы анимации Ссылки

Dreamweaver поддерживает связи между различными файлами на вашем веб-сайте и выдает предупреждения вам, если какие-либо важные файлы были перемещены, добавлены или удалены.

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

Создать папку локального сайта

Локальная папка сайта — это папка на жестком диске, содержащая файлы HTML, файлы CSS и изображения для вашего веб-сайта.

Перейдите в раздел «Загрузки курсов», чтобы загрузить файл GraceHeaven. Разархивируйте файл на рабочий стол вашего компьютера и откройте папку для просмотра ее содержимого.

Папка GraceHeaven содержит пример веб-сайта маленькой Ист-Виллидж. парикмахерская. Каждая веб-страница представлена ​​HTML-документом (biography.html, index.html, и так далее). Файл CSS с именем custom.css управляет стилем страницы. Изображения сохраняются в папке изображений.

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

Создать новый сайт

Выполните следующие шаги, пока мы вместе определяем сайт.

1. Откройте Dreamweaver. Выберите «Сайт» > «Новый сайт» в верхней строке меню.

2. Введите «graceheaven» в поле «Имя сайта».

3. Щелкните значок папки рядом с полем Папка локального сайта. Найдите и выберите папку GraceHeaven на рабочем столе. Щелкните Сохранить.

Выберите панель «Файлы», где вы найдете папку «GraceHeaven». Разверните эту папку, нажав знак + (Windows) или треугольник (Mac). Дважды щелкните index.html, чтобы открыть домашнюю страницу Grace Heaven.

На панели «Файлы» перечислены все файлы в локальной папке определенного сайта.

Dreamweaver предлагает несколько способов просмотра нашего документа. В верхней центральной части окна «Документ» (на панели инструментов «Документ») вы найдете три очень важные кнопки: «Код», «Разделить» и «Жить».

Просмотр в реальном времени

Live View отображает окончательный макет страницы. В этом режиме вы можете форматировать текст, создавать таблицы, вставлять изображения, создавать ссылки и т. д., не вводя ни одного тега HTML.

Используйте кнопки на панели инструментов документа для переключения между различными представлениями.

Элементы страницы выделяются синими пунктирными рамками в режиме интерактивного просмотра. Для бесшовного отображения вы можете скрыть границы, щелкнув значок «Параметры просмотра в реальном времени» на общей панели инструментов в левой части интерфейса. Но пока держите их включенными!

Скрываясь за Live View в раскрывающемся меню, вы найдете Design View. Макет выглядит немного неуклюжим в представлении «Дизайн», но не беспокойтесь. Live View дает более точное представление о том, как страница будет отображаться в браузере. В более ранних версиях Dreamweaver страницы создавались в представлении «Дизайн» и предварительно просматривались в интерактивном представлении. Сегодня почти всю работу можно выполнять прямо в режиме Live View.

Просмотр кода

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

Представление кода позволяет напрямую редактировать исходный код HTML.

Разделенный вид

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

Представление кода

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

Объекты, выделенные в режиме реального времени (вверху), также выделяются в режиме просмотра кода (внизу).

Связанные файлы

Вы увидите несколько элементов под вкладкой index.html: Исходный код, bootstrap.css, custom.css и jquery-1.11.2.min.js

Внешние файлы CSS и JS перечислены на панели инструментов «Связанные файлы».

Исходный код — это родительский HTML-документ, bootstrap.css и custom.css — внешние файлы таблиц стилей, а jquery-1.11.2.min.js и bootstrap.js — внешние файлы JavaScript.

Все эти файлы связаны — изменения, внесенные в файлы CSS или JS, повлияют на файл HTML. Панель инструментов «Связанные файлы» обеспечивает быстрый доступ ко всем файлам.

Переключитесь в представление кода, затем щелкните custom.css, чтобы открыть внешнюю таблицу стилей.

Щелкните Исходный код, чтобы просмотреть исходный код HTML.

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

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

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

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

Тег также выделяется на панели DOM. Эта удобная панель показывает положение элемента в структуре документа. Нажимайте стрелки вверх и вниз на клавиатуре для перемещения по иерархии. Клавиша со стрелкой вправо расширяет узел, а стрелка влево сжимает его.

Навигация по странице в режиме быстрого просмотра элементов.

Вы можете перетаскивать элементы прямо на панель DOM. Попробуйте! Выберите изображение «Биографии», затем перетащите его куда-нибудь вверх по дереву документов. Зеленая линия укажет точное положение изображения, когда вы отпустите кнопку. Выберите (Ctrl/Cmd + Z), чтобы отменить изменения.

Грейс Хевен хочет добавить еще один элемент на главную страницу. Мы быстро справимся с этой задачей, продублировав элемент «расписание» и изменив текст и ссылку.

1. Нажмите, чтобы выбрать «расписание», затем дважды нажмите стрелку вверх на клавиатуре. Это переместит вверх иерархию документов, чтобы выбрать элемент списка, окружающий ссылку «расписание».

Щелкните правой кнопкой мыши (Windows) или щелкните, удерживая нажатой клавишу Ctrl (Mac), синюю вкладку li и выберите «Дублировать» в контекстном меню.

2. Дважды щелкните «расписание», чтобы вставить курсор внутрь повторяющегося элемента списка. Вы увидите оранжевую рамку вокруг выделения, как только оно станет редактируемым.

3. Нажмите и перетащите, чтобы выбрать «расписание».

Введите «поговорить».

4. Щелкните и перетащите, чтобы выбрать «talk», затем щелкните значок «Обзор файла» и выберите файл talk.html.

Щелкните в любом месте страницы, чтобы закрыть поле ссылки, когда закончите.

5. Выберите цветочный рисунок рядом с словом «говорить» и щелкните значок гамбургера, чтобы изменить атрибуты HTML.

Найдите файл talk.gif в папке с изображениями. Введите «talk» в поле alt (альтернативный текст очень важен для SEO и доступности).

Установите изображение для ссылки на файл talk.html. Оставьте цель ссылки «нет» (вы не хотите, чтобы эта ссылка открывалась в отдельном окне браузера). Оставьте параметры ширины и высоты изображения пустыми (размер изображения в браузере указывать необязательно). Щелкните в любом месте страницы, чтобы закрыть атрибуты HTML, когда закончите.

6. Трижды щелкните «Просмотреть наше летнее расписание», чтобы выделить всю строку текста.

Тип «Новости салона».

Как все прошло? Вам понравился визуальный подход к редактированию контента в режиме Live View? Или вы нашли все щелчки и выборы утомительными? Мы попробуем ту же задачу в представлении кода, чтобы сравнить. Но сначала удалите элемент списка обсуждения, чтобы начать с чистого листа. Нажмите, чтобы выбрать «говорить», затем дважды нажмите клавишу со стрелкой вверх, чтобы выбрать ли.

Нажмите клавишу удаления. Прошло!

В Dreamweaver есть два способа выполнить любую задачу. Вы можете использовать Live View или вы можете использовать Code View. Мы просто продублировали элемент списка и создали новую ссылку с помощью Live View. Давайте сделаем это снова в представлении кода, чтобы сравнить процесс.

1. Переключитесь на просмотр кода. Используйте панель DOM, чтобы выбрать последний элемент списка. Это выделит элемент списка Schedule в окне Code View.

2. Щелкните правой кнопкой мыши и выберите «Дублировать».

3. Теперь у вас есть два повторяющихся элемента списка.

4. Отредактируйте ссылку, источник изображения, замещающий текст, текст заголовка и текст абзаца.

Вернитесь в режим Live View, чтобы посмотреть, как это выглядит. Был ли метод просмотра кода быстрее, чем метод просмотра в реальном времени?

Интерактивный просмотр Dreamweaver показывает, как ваша страница будет выглядеть в веб-браузере. Фактически, он использует тот же движок рендеринга, что и Google Chrome. Тем не менее, рекомендуется протестировать свои макеты в реальном веб-браузере (или в нескольких веб-браузерах).

Выберите «Файл» > «Предварительный просмотр в реальном времени», и выберите Изменить Список браузеров.

Нажмите знак + и перейдите в папку «Приложения», чтобы выбрать веб-браузер, который вы обычно используете на своем компьютере.

В следующий раз, когда вы перейдете в меню «Файл» > «Предварительный просмотр в реальном времени», вы сможете напрямую выбрать свой браузер.

Dreamweaver предложит вам сохранить все несохраненные изменения. Нажмите Да.

Во время работы в Dreamweaver окно «Предварительный просмотр в реальном времени» можно не открывать. Любые изменения в файле HTML или файле CSS будут обновляться автоматически.

Запросы мультимедиа CSS

Уменьшите размер окна браузера. Макет сжимается до одной колонки.

медиа-запросы CSS делают это возможным. В Dreamweaver переключитесь в представление «Код» и используйте панель инструментов связанных файлов, чтобы переключиться на файл bootstrap.css. Выберите «Найти» > «Найти и заменить» (команда F). Введите «@media» в верхнее поле поиска, выбрав «Найти в: Текущий документ» в раскрывающемся меню. Первый @media — это запрос печатного носителя, который переформатирует содержимое страницы для печати. Щелкните стрелку вправо, чтобы перейти к следующему вхождению. Вы увидите медиа-запрос, который форматирует «начальный» текст на больших экранах шириной не менее 768 пикселей. Продолжайте нажимать стрелку вправо, и появится еще много медиа-запросов. Каждый медиа-запрос отвечает за форматирование контента под определенный размер экрана.

Нажмите X в правом верхнем углу, чтобы закрыть диалоговое окно «Найти и заменить», когда закончите.

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

Каждый медиа-запрос имеет цветовую кодировку. Зеленые медиазапросы имеют максимальную ширину, фиолетовые медиазапросы имеют минимальную ширину, а синие медиазапросы имеют как минимальную, так и максимальную ширину.

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

Панель запроса визуального мультимедиа удобна, но занимает много места на экране. Вы можете скрыть его, щелкнув значок «Скрыть визуальные мультимедийные запросы» на общей панели инструментов.

Щелкните четвертый значок в верхней части общей панели инструментов, чтобы включить или выключить панель визуальных мультимедийных запросов.

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

Если вам нужно переименовать файл, используйте панель «Файлы», чтобы Dreamweaver мог обновить ваши ссылки.

1. Щелкните biography.html один раз на панели «Файлы», подождите секунду, а затем щелкните еще раз. Вы увидите ограничивающую рамку. Вставьте курсор в поле и измените имя файла на bios.html.

Редактируйте имена файлов непосредственно на панели «Файлы».

2. Когда закончите, щелкните за пределами ограничительной рамки. Dreamweaver спросит, хотите ли вы обновить связанные файлы. Щелкните Обновить.

Готово — вы изменили имя файла и обновили все ссылки.

Создание новой папки

Щелкните правой кнопкой мыши (Windows) или щелкните, удерживая клавишу Control (Mac), папку «graceheaven» верхнего уровня на панели «Файлы». Выберите «Новая папка» в контекстном меню. Когда появится ограничительная рамка, назовите папку «forms».

Перемещение файлов

На панели «Файлы» выберите файл joinlist.html и перетащите его в папку форм. Dreamweaver спросит, хотите ли вы обновить свои ссылки. Да, пожалуйста.

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

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

	Делайте имена файлов короткими. лаконичный имена файлов облегчают написание ссылок. Убедитесь, что имена файлов являются описательными. Используйте логические имена файлов, которые описывают содержимое каждого файла. Не используйте пробелы. Браузеры не может читать пробелы. Поэтому вместо «grace Heaven.html» назовите файл «graceheaven.html» или «grace-heaven.html». Не используйте заглавные буквы. Ошибочный ввод букв в URL-адресе может привести к неработающей ссылке. Всегда включать расширение файла. Расширение файла сообщает браузеру, что делать с файлом (см. таблицу ниже для распространенных типов файлов).

Общие расширения файлов:

Расширения файлов
.htm или .html	HTML-страница
.jpg	Изображение в формате JPEG (лучше всего подходит для фотографических изображений)
. gif	GIF-изображение (лучше всего подходит для штриховой графики и логотипов)
.png	PNG изображение
.мов	Фильм QuickTime

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

Существует три способа структурирования пути к файлу. Рассмотрим достоинства каждого из них.

Абсолютные ссылки

Абсолютная ссылка — это полный URL-адрес (универсальный локатор ресурсов). Он содержит не только имя файла, запрошенный, но и доменное имя веб-сервера, на котором находится файл расположен. Более того, он начинается с http:// (гипертекст Протокол передачи) префикс.

Вот несколько примеров абсолютных путей:

	http://www.nytimes.com/ http://www.slate.com/articles/sports.html http://www.npr.org/music/

Используйте абсолютный путь для ссылки на отдельный веб-сайт (например, ссылку на CNET. com с домашней страницы вашего отца).

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

Относительные ссылки на документы

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

Правила построения этих ссылок просты. Каждый / внутри пути сообщает браузеру о перемещении на один уровень папки вниз, а каждый ../ сообщает браузеру о перемещении на уровень папки вверх.

Как бы вы использовали относительные ссылки на документы на этом сайте рецептов?

Начиная со страницы guacamole.html….

Звено	Как добраться:
чипотле. html	Найдите файл chipotle.html в той же папке, что и страница guacamole.html.
images/bowlofguac.jpg	Найдите папку с именем «images» в текущей папке. Затем найдите bowlofguac.jpg.
../index.html	Поднимитесь на один уровень папки вверх (обозначается ../ ) и найдите index.html.
../soups/cornsoup.html	Поднимитесь на один уровень папки, найдите супы папку, затем найдите cornsoup.html.

Если вы создадите ссылку на файл вне локальной папки сайта, Dreamweaver не могу написать относительную ссылку. У него нет системы отсчета для внешнего файла, поэтому он записывает точный путь, начиная с вашего жесткий диск, например src=»file://D/vacationphotos/beach. jpg».

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

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

	Файл HTML фактически не содержит никаких графических или мультимедийных файлов. Теги источника изображения в коде HTML просто сообщают браузеру, где найти файл изображения. Если на странице 20 изображений, браузер (заблокированное устройство) извлечет и отобразит каждое из них по отдельности. Если вы когда-нибудь задумывались, почему веб-графика загружается по одной за раз, теперь вы знаете!

Корневые ссылки сайта

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

Относительные ссылки на корень сайта ставят косую черту перед путем к файлу, как показано ниже:

	/salsas/images/guacamole. jpg

Путь переводится как:

1. Перейдите в корневой каталог (/) — в в данном случае это локальная корневая папка для сайта Mexican Food.

2. Перейдите в папку сальсы (salsas/).

3. Перейдите в папку с изображениями (images/).

4. Найдите файл гуакамоле.jpg (guacamole.jpg).

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

Какой путь для меня?

Относительные корневые ссылки сайта используются на больших динамических сайтах с несколькими серверами (например, Amazon.

No related posts.