Виды окон в dreamweaver
Обновлено: 08.07.2024
Сегодня мы с вами познакомимся с программой для создания дизайна сайта, так же его редактирования Adobe Dreamweaver.
В прошлой статье « Photoshop вставка молнии на картинку » мы с вами научились создавать молнию и вставлять её в любое изображение.
Кроме этого в конце статьи я обещал показать, как можно в Photoshop создать солнце и шар, но друзья в последнее время я увлекся программой Adobe Dreamweaver и поэтому сегодня я расскажу вам о своем первом знакомстве со столь полезной программой.
Мне она интересна именно как средства для создания дизайна сайта.
В своих тренировках я использую версию CS6.
Для начала давайте в двух словах опишу программу и ее назначение:
Dreamweaver, является визуальным HTML-редактором, позволяет переключаться в режим ручного редактирования кода, осуществляя взаимосвязь между визуальным представлением страницы и ее исходным кодом.
Конечно, как и в любой другой программе изучение необходимо начинать с настроек и внешнего вида.
Настройка программы для создания сайта
Запустите редактор Adobe Dreamweaver:
Нажмите Пуск - Программы - Adobe - Adobe Dreamweaver. После запуска Dreamweaver откроется окно стартовой страницы. С его помощью можно открывать используемые файлы, создавать новые файлы, а также получить доступ к различным ресурсам программы .
В открывшемся окне с возможностью выбора дальнейших действий пользователя в разделе Создать выберите HTML
В окне программы для переключения между режимами отображения и редактирования HTML -документа предназначены три первые кнопки на панели инструментов.
Дизайн, отобразится поле документа. Все основные действия при создании и редактировании HTML-страницы производятся в поле документа.
Вот примерно так выглядит основное рабочее окно программы.
Чтобы Dreamweaver понимал русскую кириллицу необходимо сделать следующие действия:
Чтобы вызвать настройку некоторых параметров, в главном меню откройте пункт Правка , а в нем выберите пункт Настройки .
После этого на экране отобразится окно редактирования параметров. В левой части окна отображаются категории возможных настроек, а в правой – параметры выбранной категории.
Для корректного отображения HTML -документов необходимо указывать кодировку.
Теперь все вновь создаваемые HTML -документы будут поддерживать русские буквы.
Теперь давайте подготовим нашу программу для создания нового сайта:
Выполните команду Веб-сайт èНовый сайт . На экране появится диалоговое окно Настройка сайтов (менеджер сайтов) в нем содержится список созданных сайтов. Пока этот список пуст.
На вкладке Веб-сайт в поле Имя Веб-сайта введите имя сайта.
В поле Локальная папка сайта укажите путь к папке, в которой будут храниться все файлы этого сайта.
Введите название новой папки на английском языке .
При назначении имен файлам необходимо ограничиться цифрами и буквами латинского алфавита и использовать символы только нижнего регистра.
Два раза щёлкните левой кнопкой мыши на созданной папке.
Откроется окно редактора.
В верхней правой части редактора Дизайнер выберите из выпадающего списка вариант настройки рабочего окна Классический.
А теперь давайте приступим к тестовому заданию:
В поле Название введите название страницы для браузера, например, Авторское право
Сделайте разметку главной страницы сайта с помощью таблицы :
Выполните команду Вставка - Таблица. В окне Таблица введите:
В поле Строки количество строк таблицы = 3
В поле Столбцы – количество столбцов таблицы = 2
В поле Ширина таблицы – ширина таблицы = 100 %
Остальные параметры оставьте без изменений.
Объедините ячейки первой строки таблицы, режим HTML выделите всю строку и нажмите на кнопку Объединить выбранные ячейки в диапазон на панели свойств; (или выбрать одноименную команду из контекстного меню).
Или выберите команду меню Изменить - Таблица - Объединить ячейки . То же выбрать из контекстного меню.
Или нажать сочетание клавиш Ctrl+Alt+M.
Оформите строку в Панели свойств: (режим CSS )
В поле Высота – введите высоту строки таблицы = 40.
Выравнивание По горизонтали – По центру
Отметьте галочкой пункт Без переноса .
Введите текст заголовка в ячейку и отформатируйте его: Здравствуйте !
Оформите текст стилем Заголовок 1 . Выделите его или просто установите курсор в любое место
Выберите команду меню Формат - Формат абзаца - Заголовок 1 .
Эти действия можно выполнить из контекстного меню Форматирование абзаца. Или в Панели свойств перейти в режим HTML и выбрать из выпадающего меню Формат è Заголовок 1.
Чтобы выбрать цвет текста, откройте Свойства страницы внизу рабочего окна редактора, выберите категорию Внешний вид (HTML) и в строке Текст выберите желтый цвет для текста.
Заполните ячейку таблицы черным или темно-серым цветом:
На Панели Свойств в окне Фон для определения цвета фона ячейки таблицы, выберите черный цвет из палитры.
Сохраните страницу под именем index.
Посмотрите страницу в браузере.
Для этого в панели Документ щелкните на кнопке Просмотр и отладка в браузере . Можно также выбрать клавишу на клавиатуре F12
Заполните нижние ячейки таблицы ( сведения об авторских правах ):
По аналогии с верхними ячейками, оформите нижние ячейки таблицы, также объединив их в одну ( черный цвет – для фона и желтый цвет – для текста).
Введите текст : Иванов И И.
Цитирование опубликованных материалов на сайте без разрешения автора не допускается.
В поле Высота (на Панели свойств) – введите высоту строки таблицы = 40 (пикс).
Выравнивание По горизонтали - По правому краю.
Выделите фрагмент Иванов И И. Подчеркните текст, для этого выберите команду меню ФорматèСтильèПодчеркивание. Или воспользуйтесь одноименной командой контекстного меню.
Перед фамилией вставьте Специальный символ для обозначения авторских прав. Для этого:
- выберите команду меню Вставка - HTML - Специальные символыèАвторское право.
- на вкладке Текст панели Инструментария объектов кнопка Знакиè Авторское право.
Заполните левую ячейку таблицы (ссылки)
В поле Ширина введите ширину ячейки = 100 (пикс) . или отметьте ширину ячейки с помощью линейки, переместив ее на границу равную 100 пикс.
Выравнивание По горизонтали - По центру
По вертикали – По верхнему краю.
Вставьте в левый столбец ссылки Увлечения, Проекты, Ссылки, Обо мне
Для того, чтобы гиперссылки открывали соответствующие Web-страницы в нужном вам фрейме, надо правильно установить параметры Цель (цели гиперссылок).
В выпадающем списке Цель есть разные значения параметра:
Blank – загружает страницу в новом окне Web-обозревателя;
Parent и top - загружает страницу в само окно обозревателя, т.е. страница заменит собой весь набор фреймов.
Self - загружает страницу в текущий фрейм (в котором находится гиперссылка)
Заполните основное содержимое – средняя ячейка таблицы.
Выравнивание По горизонтали - По левому краю
По вертикали – По верхнему краю.
Меня зовут Иванов Иван Иванович. Я вольный Web-дизайнер. А это мой личный Web-сайт, который я сделал сам в программе Dreamweaver.
Оформите стилем Заголовок 2 , в Панели свойств перейти в режим HTML и выбрать из выпадающего меню Формат è Заголовок 2.
Введите приведённые ниже строки маркированного списка и оформите стилем Заголовок 3.
Сделайте выравнивание по левому краю
Создайте маркированный список (перечисления), предварительно выделив текст и нажав на кнопку Неупорядоченный список на Панели свойств :
На этом сайте вы можете прочитать:
§ о моих увлечениях
§ о выполненных мной проектах
§ подробнее обо мне, любимом
Чтобы изменить вид маркеров, выделите маркированный список и выберите команду меню Формат - Список - Свойства.
В окне Свойства списка в строке Стиль из выпадающего списка выберите один из вариантов маркера.
То же можно выбрать из контекстного меню маркированного списка.
Перед текстом: На этом сайте вы можете прочитать: вставьте горизонтальную разделяющую линию.
- выберите команду меню Вставка - HTML - Горизонтальная линия.
Или вставьте линию с помощью тега HR , выделите ее и на Панели с войства можно отредактировать ширину горизонтальной линии. (Цвет для линии можно задать с помощью опции тега HR – color).
Выровняйте линию по Центру , щелкнув по кнопке Align Center на панели Properties .
По аналогии с предыдущими ячейками, оформите среднюю ячейку таблицы (черный цвет – для фона и желтый цвет – для текста).
В итоге должно получится вот такое чудо:
Для тех кому мало текстовой части, и он хотел бы видеть больше скриншотов процесса обучения пишите в комментариях и если желающих наберется много, то я подготовлю статью с картинками.
Если Вам, как и мне интересно постоянно изучать новое подписывайтесь на мой канал и давайте учится вместе!
Как видите, Dreamweaver может вывести на экран сразу множество разнообразнейших окон. Как разобраться во всем этом многообразии?
Прежде всего, нужно знать пункты меню, с помощью которых осуществляется управление этими окнами. Все эти пункты находятся в подменю Window. Рассмотрим их подробнее.
Если вы открыли несколько Web-страниц, разобраться в них может быть очень трудно. Окна перекрывают друг друга, и добраться до нужного окна удается далеко не сразу. Откройте подменю Window и посмотрите его нижнюю часть. Там будут находиться пункты, имеющие имена, схожие с именами файлов открытых страниц. Для того чтобы переключиться в окно, где открыт нужный файл, просто выберите соответствующий пункт. Dreamweaver тотчас выведет это окно на первый план, т. е. активизирует его.
Если же вы раскрыли одно из окон документов на весь экран (точнее, на все главное окно), то переключаться между окнами станет еще проще. В этом случае все открытые окна будут перечислены в нижней части окна документа в виде вкладок (рис. 2.10) – вам останется только выбрать необходимое.
Рис. 2.10. Вкладки, обозначающие все открытые окна документа в раскрытом состоянии
Если вам нужно держать на виду сразу два или больше окон, воспользуйтесь пунктами Cascade, Tile Horizontally или Tile Vertically меню Window. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в окне программы так, что вы можете видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в окне программы "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий – по вертикали.
Пункты Insert и Properties служат для вывода на экран или скрытия соответственно панели объектов и редактора свойств. Если слева от имени одного из этих пунктов стоит галочка, это значит, что соответствующая панель выведена на экран (или, как еще говорят, что соответствующий пункт меню "включен"). Чтобы убрать панель, снова выберите нужный пункт – и панель исчезнет вместе с галочкой. Такие пункты меню, меняющие свое состояние на противоположное при выборе, называют выключателями. Вместо выбора пунктов Insert и Properties вы можете нажать "горячие" комбинации клавиш CTRL + F2 и CTRL + F3 соответственно.
Большую часть меню Window занимает набор аналогичных пунктов-выключателей, служащих для вывода на экран или скрытия различных панелей. Далее в книге будут описаны эти пункты вместе с рассмотрением той или иной панели.
Если вам нужно скрыть на время все панели, чтобы без помех просмотреть открытую Web-страницу, выберите пункт Hide Panels в меню Window или одноименный пункт в меню View. Этот пункт работает как выключатель, т. е. при первом выборе он скрывает все панели, а при втором – снова выводит их на экран. Вы также можете нажать клавишу F4 – это проще и быстрее, чем лезть в меню.
Как вы уже знаете, каждая группа панелей имеет дополнительное меню. Кроме того, каждая отдельная панель имеет контекстное меню, появляющееся при щелчке правой кнопкой мыши по нужной вкладке и содержащей те же пункты. Пользуясь пунктами этого меню, вы можете выполнить над данной группой или панелью различные манипуляции:
- закрыть панель, выбрав пункт Close Panel Group;
- увеличить размеры панели так, чтобы она заняла весь экран компьютера по вертикали, выбрав пункт Maximize Panel Group;
- поместить выбранную группу или отдельную панель в другую группу, выбрав пункт Group <название группы или панели> with и далее в появившемся на экране подменю – пункт, соответствующий имени нужной группы панелей;
- переименовать группу, выбрав пункт Rename Panel Group. После этого вам остается ввести новое имя в поле ввода Panel Group Name диалогового окна Rename Panel Group (рис. 2.11) и нажать кнопку ОК для его сохранения или Cancel – для отмены;
- поместить выбранную панель в новую группу, выбрав пункт Group <название группы или панели> with и далее в появившемся на экране подменю – пункт New Panel Group;
- получить справку по этой панели, выбрав пункт Help.
Чтобы вывести на экран нужный инструментарий, выберите соответствующий пункт-выключатель подменю Toolbars меню View. Всего таких пунктов два – по числу инструментариев:
- пункт Standard выводит главный инструментарий;
- пункт Document выводит инструментарий документа.
Рис. 2.11. Диалоговое окно Rename Panel Group
Вы также можете воспользоваться контекстным меню инструментария. Щелкните правой кнопкой мыши по любому инструментарию – и увидите небольшое меню, содержащее те же самые пункты.
Знакомство с Dreamweaver
Рис. 1.3. Группа панелей, отделенная от края родительского окна
Изначально все группы панелей, имеющиеся на экране, "приклеены" к какому-либо краю главного окна. Однако мы можем отделить какую-либо группу панелей от края главного окна и превратить ее в отдельное окно (рис. 1.3) (так называемая плавающая группа панелей). Для этого каждая из них имеет ручку для ее переноски, находящуюся в левой части заголовка и выглядящую как набор мелких темных точек. Просто перетащим за эту "ручку" нужную группу подальше от края главного окна и оставим ее там. Разумеется, мы всегда можем присоединить панель обратно к краю главного окна, чтобы она не загораживала документ.
Мы также можем изменять размеры плавающих групп панелей (многих, но не всех). Для этого нужно просто перетащить мышью нижний край окна, в котором находится эта группа.
Чтобы временно уменьшить площадь, занимаемую плавающей группой панелей, мы можем ее сжать, чтобы на экране остался только ее заголовок (рис. 1.4). Для этого достаточно щелкнуть по названию группы панелей, находящемуся в ее заголовке. Чтобы развернуть группу до обычного состояния, нужно снова щелкнуть по ее заголовку.
Рис. 1.4. Сжатая группа панелей
Сами панели, объединенные в группы, содержат различные инструменты, которые нам обязательно понадобятся при работе над Web-страницами. Чтобы переключиться на нужную панель в группе, необходимо щелкнуть мышью вкладку, на которой написано название этой панели.
Большинство панелей имеют так называемое дополнительное меню. Оно открывается при щелчке мышью по небольшой кнопке, расположенной в правом верхнем углу группы, в которой находится данная панель, и имеющей изображение списка из трех позиций и небольшой стрелки, направленной вниз (рис. 1.5). (В сжатом состоянии эта кнопка не видна.) В дальнейшем мы часто будем пользоваться этим меню.
- инструментарий объектов;
- инструментарий документа;
- стандартный инструментарий.
Окно редактирования (Окно "Документ") расположено в центральной части окна программы (см. Интерфейс ).
Документ в окне документа можно просматривать в представлении «Код», «Код с разделением», «Дизайн», представлениях «Код» и «Дизайн» одновременно (представление «Разделение») и представлении «Интерактивный просмотр». При этом в представлениях «Код с разделением» и «Код и дизайн» окна могут быть разделены как по горизонтали, так и по вертикали (по умолчанию отображаются горизонтально).
Представление «Интерактивный код» Доступно только при просмотре документа в представлении «Интерактивный просмотр» и отображает реальный код. Представление «Интерактивный код» не поддерживает редактирование.
Переключение на представление кода
❖ Выполните одно из следующих действий.
• На панели инструментов «Документ» нажмите кнопку «Показать представление кода».
Переключение на представление «Код с разделением»
В представлении «Код с разделением» документ разбивается на два окна, позволяя одновременно работать с двумя областями кода.
❖ Выберите меню «Просмотр» > «Код с разделением».
Переключение на представление «Дизайн»
❖ Выполните одно из следующих действий.
• Выберите меню «Просмотр» > «Дизайн».
• На панели инструментов «Документ» нажмите кнопку «Показать представление конструктора».
Отображение представлений «Код» и «Дизайн»
❖ Выполните одно из следующих действий.
• Выберите «Просмотр» > «Код и дизайн».
• На панели инструментов «Документ» нажмите кнопку «Показать представление кода и конструктора».
По умолчанию представление кода отображается в верхней части окна документа, а представление «Дизайн» — в нижней. Чтобы представление «Дизайн» отображалось в верхней части окна, выберите пункт меню «Просмотр» > «Представление "Дизайн" наверху».
Переключение между представлениями «Код» и «Дизайн»
❖ Нажмите клавиши «Ctrl» + «`» (обратный апостроф).
Если в окне документа отображаются оба представления, это сочетание клавиш переключает фокус с одного представления на другое.
Разделить по вертикали
Этот параметр доступен только для представлений «Код с разделением» и «Код и дизайн» (представления с разделением). В представлениях «Код» и «Дизайн» он недоступен.
1 Убедитесь, что выбрано представление «Код с разделением» («Просмотр» > «Код с разделением») или «Код и дизайн» («Просмотр» > «Код и дизайн»).
2 Выберите пункт меню «Просмотр» > «Разделить по вертикали».
Если выбрано представление «Код и дизайн», то можно включить отображение представления «Дизайн» в левой части окна («Просмотр» > «Представление «Дизайн» слева»).
Отображение документов на вкладках (Dreamweaver Macintosh)
Несколько документов можно отображать в одном окне документа на разных вкладках. Их также можно отображать в составе плавающего рабочего пространства, где каждый документ находится в собственном окне.
Открытие документа с вкладками в отдельном окне
❖ Щелкните вкладку, удерживая клавишу Control, и выберите в контекстном меню команду «Переместить в новое окно».
Объединение отдельных документов в окна со вкладками
❖ Выберите меню «Окно» > «Объединить в окно с вкладками».
Изменение применяемых по умолчанию настроек документа с вкладками
1 Выберите меню «Dreamweaver» > «Настройки», а затем выберите категорию «Общие».
2 Выберите или отмените выбор параметра «Открыть документы» во вкладках и нажмите кнопку «ОК».
Dreamweaver не меняет отображение открытых в текущий момент документов при изменении установок.
Однако те документы, которые были открыты после задания параметра, будут отображены в соответствии со сделанным выбором.
Расположение окон документа каскадом или мозаикой
Если одновременно открыто много окон, их можно расположить каскадом или мозаикой.
Расположение окон документов каскадом
❖ Выберите «Окно» > «Каскад».
Расположение окон документов мозаикой
• Выберите меню «Окно» > «Замостить» (Macintosh).
Изменение размеров окна документа
Строка состояния отображает текущие размеры окна документа (в пикселах). Чтобы сконструировать страницу, которая наилучшим образом выглядит при определенных размерах, следует настроить окно документа в соответствии с заранее заданными размерами, изменить их или создать эти размеры.
При изменении размера просмотра страницы в представлении дизайна или интерактивного просмотра изменяются только размеры просмотра. Размер документа остается неизменным.
Помимо предварительно заданных и заказных размеров Dreamweaver также приводит список размеров из мультимедийного запроса. При выборе размера, соответствующего мультимедийному запросу, Dreamweaver отображает страницу с помощью мультимедийного запроса.
Также можно изменять ориентацию страницы для просмотра страницы для мобильных устройств, когда макет страницы изменяется в зависимости от того, как пользователь держит устройство.
Изменение размеров окна документа на заранее заданные размеры
Выберите один из размеров во всплывающем меню «Размер окна» в нижней части окна документа. Dreamweaver CS5.5 и более поздних версий предлагает расширенный список вариантов, включая варианты для стандартных мобильных устройств (как показано на следующем изображении).
Показанный размер окна отражает внутренние измерения окна браузера без учета границ; размер монитора или мобильное устройство приведено справа.
Для менее точного изменения размеров используйте стандартные методы изменения размеров окон операционной системы; например, потяните правый нижний угол окна.
Примечание. (только Windows) Документы в окне документа по умолчанию развернуты на весь экран.
Изменение документа, развернутого на весь экран, не поддерживается. Чтобы свернуть документ, нажмите соответствующую кнопку в верхнем правом углу документа.
Изменение размеров, перечисленных во всплывающем меню «Размер окна»
1 Выберите пункт «Изменить размеры» во всплывающем меню «Размер окна».
2 Щелкните любое значение ширины или высоты в списке «Размер окна» и введите новое значение.
Чтобы для окна документа настраивалась только ширина (оставляя высоту неизменной), выделите значение высоты и удалите его.
3 Щелкните текстовое поле «Описание» и введите пояснение к заданному размеру.
Добавление нового размера во всплывающее меню «Размер окна»
1 В меню Просмотр выберите «Размер окна». Выберите пункт «Изменить размеры» во всплывающем меню. (или: меню Правка - Настройки - Размеры окон).
2 Нажмите пустое пространство под последним значением в столбце «Ширина».
3 Введите значения «Ширина» и «Высота».
Чтобы задать только ширину или высоту, просто оставьте одно поле пустым.
4 Нажмите поле «Описание», чтобы ввести пояснительный текст к введенному размеру.
Например, можно ввести SVGA или обычный ПК рядом с записью для монитора с разрешением 800 x 600 пикселов и диагональю 17 дюймов, Mac рядом с записью для монитора с разрешением 832 x 624 пикселов.
Для большинства мониторов можно задавать разные разрешения в пикселах.
Задание размера окна и скорости соединения
1 Выберите «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
2 Выберите команду «Строка состояния» (CS5) или «Размеры окна» (CS5.5 и старше) из списка «Категория» слева.
3 Задайте любой из следующих параметров.
Размер окна Позволяет настроить размеры окон, отображаемые во всплывающем меню строки состояния.
Скорость соединения Определяет скорость соединения (кбит/с), применяемую для подсчета времени загрузки. Загружаемый размер страницы отображается в строке состояния.
При выделении изображения в окне документа его загружаемый размер отображается в инспекторе свойств.
Читайте также: