Практические работы создание сайта в adobe dreamweaver cs5
Обновлено: 06.07.2024
Цель: Освоение базовых принципов создания Web -сайтов. Создание первой простой Web -страницы, содержащей отформатированный текст, рисунки и гиперссылки.
В результате выполнения лабораторной работы студенты должны изучить основные принципы создания Web -сайтов, познакомиться с часто используемыми тегами HTML (Hypertext Markup Language – "язык разметки гипертекста"), изучить вкладки программы Adobe Dreamweaver для быстрого обращения и применения к отдельным элементам Web -страниц, уяснить причину неправильного отображения отдельных компонент сайта и овладеть навыками их быстрого устранения.
В конце лабораторной работы студенты должны создать не менее двух страниц, содержащих отформатированные фрагменты текстов, несколько рисунков и ссылок на свои страницы и другие ресурсы Интернета.
Задание на лабораторную работу
1. Изучить базовую структуру статической страницы.
2. В текстовом редакторе (Блокноте) создать первую страницу с текстом "Моя первая страница".
3. Познакомиться с основными тегами и их параметрами (атрибутами), определяющими структуру и стиль страницы.
4. Изучить теги, задающие гиперссылки и их параметры.
5. Познакомиться с тегами и их атрибутами, с помощью которых добавляются изображение и другие мультимедийные компоненты.
7. В папке, содержащей файл my _ name _1. html , создать папку со своим именем, а в этой папке – страницу my _ name _2. html , содержащую отформатированный текст, вашу краткую автобиографию, несколько изображений, ссылку на первую страницу, а также закладку на начало страницы my _ name _1. html .
8. Создать ссылку со страницы my _ name _1. html на my _ name _2. html и наоборот.
HTML - Hyper Text Markup Language, язык разметки гипертекстовой информации Тег – это элемент HTML, заключенный в угловые скобки. Первым тегом всегда является тег , а последним - . Эта пара тегов Web-обозревателю сообщает, что между ними заключен документ в формате HTML .
Сразу после тега < HTML > идет тег < HEAD >. Как правило, между тегами < HEAD > и HEAD > рекомендуется указывать информацию о документе: название, ключевые слова для поиска, описание и т.д. Название HTML документа помещается между тегами < TITLE > и TITLE >. Тело документа начинается тегом < BODY >.
Итак, создадим самую простую страницу с выражением “ My first page ”. Для этого в блокноте создайте файл под своим именем (например, “ elina . htm ”). Напомним, что блокнот создает файл с расширением . txt . Вам придется поменять расширение файла.
Откройте этот файл с помощью блокнота. Наберите нижеприведенный фрагмент и сохраните его.
Тест - страница
body >
html >
Посмотрите свою первую страницу с помощью Internet Explorer .
2. Знакомство с основными тегами HTML
Атрибуты тела документа
Определяет видимую часть документа
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
< body text > Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.
Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
Устанавливает цвет гиперссылок при нажатии.
Теги для форматирования текста
Тег «знак меньше и восклицательный знак» (например, ) означает, что текст является комментарием и web-обозревателем не будет отражаться.
Обрамляет предварительно отформатированный текст.
Создает жирный текст.
Создает наклонный текст.
Создает текст - имитирующий стиль печатной машинки.
Используется для цитат, обычно наклонный текст.
Используется для выделения из текста слова (наклонный).
Используется для выделения наиболее важных частей текста (наклонный или жирный текст).
Устанавливает размер текста в пределах от 1 до 7.
Устанавливает цвет текста, используя значение цвета в виде RRGGBB. (см. файл color . htm ).
Форматирование
p > C оздает новый параграф.
- Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center.
Вставляет перевод строки.
Создает нумерованный список.
Определяет каждый элемент списка и присваивает номер.
Создает ненумерованный список.
Предваряет каждый элемент списка и добавляет кружок или квадратик.
AAAAAAAAA div > Важный тег, используемый для форматирования больших блоков текста. HTML документа, также используется в таблицах стилей. Гиперссылки
Наш Университет Создает гиперссылку на другие документы или часть текущего документа.
Письмо другу Создает гиперссылку вызова почтовой программы для написания письма, например, drugu @ rambler . ru .
Я здесь Отмечает часть текста как цель для гиперссылок в документе (куда).
Ты где? Создает гиперссылку на часть текущего документа (откуда).
Параметры “_ blank ”, “_ parent ”, “_ top ” и “ _ self ” тега ссылки задают вид загрузки открываемой страницы (в виде окна, на весь экран и т.п.).
Графические элементы
Добавляет изображение в HTML документ.
“ center ”> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center, bottom, top, middle.
“1”> Устанавливает толщину рамки вокруг изображения.
3. Создание страниц с помощью “Adobe Dreamweaver”
Загружаем программу “Adobe design premium - Dreamweaver”. В ней создаем новый файл следующим образом:
В меню “ Файл” выбираем опцию “ Создать ”. На открывающейся панели выбираем “ HTML ” .
Нажав на кнопку “Разделение”, разделите экран на два окна (если эта вкладка не активна).
В созданной странице находим строку < meta http - equiv 3"> Content - Type " content 3"> text / html ; charset = utf -8" />
В конце строки после знака “=” строку “ utf -8 ” меняем на “ windows -1251 ” (это желательно, но не обязательно).
Таким образом, Вы должны получить < meta http - equiv 3"> Content - Type " content 3"> text / html ; charset = windows -1251" />.
Это нужно для того, чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы. Для операционной системы Windows и кириллицы аргумент charset может принимать значение windows-1251. Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает "неизвестную" кодировку вместо кириллицы. Хотя почти всегда “ utf -8” справляется c этой задачей.
Если Вы будете копировать фрагмент HTML тегов из Word ’ a , то обратите внимание на кавычки. Они должны быть такими, как в Dreamweaver .
Если “ Dreamweaver ” автоматически не показывает панели “Свойства” и “Вставка” (панель “Свойства” находится внизу, а “Вставка” – как обычно, наверху), поставьте их, выбрав в меню “Окно” опции “Свойства” и “Вставка”.
Все, что покажет браузер, должно находиться между тегами < body > и body >. Основные параметры страницы определяются в теге < body > (Тег body > указывает на конец страницы и , его не трогаем!). Как Вы уже заметили, теги пишутся внутри угловых скобок “<” и “>”.
Находим строку < title >Документ без названия title >. Вместо текста “Документ без названия” наберите название страницы (не путайте с названием файла!), например, “Моя первая страница”. Вы получите: < title > Моя первая страница title >.
Теперь определим шрифт текста Вашей будущей страницы. Это можно сделать следующим способом: в теге < body > сразу после слова “ body ” и перед скобкой “>” нажимаем на пробел. Выскочит меню с атрибутами тега < body >. Выберите style . Далее нажмите на Enter . Выберите “ font” и “‘Times New Roman’, Times, serif”. У вас должна получиться строка .
Строка ' Times New Roman ' должна заключаться в апострофы.
Сохраняем страницу под Вашим именем (например, elina _1. html ) в папке, где находятся файлы данной лабораторной работы, т.е. в glava _6.
В названиях файлах не используйте: пробелы, точки, кириллицу, тире, символы “(“ и “)”. Вместо дефиса “-” лучше используйте знак подчеркивания “_”.
Вы, наверное, заметили, что в верхнем окне набираются коды с тегами, а внизу отображается результат.
После строки нажмите на “ Enter” . Наберите текст начало страницы и сразу же добавьте тег < br > наберите текст: Моя Первая страница Наш Университет Российский Государственный Гуманитарный Университет.
Находясь в верхнем окне (Код) нажмите на “ Enter ” после выражения Моя Первая страница. Перейдя в нижнее окно, вы не заметите никакого изменения. А теперь строку Наш Университет выделите как отдельный абзац. Для этого перед этой строкой добавьте тег < p >, а после нее - p >. Посмотрите результат в нижнем окне. Аналогичную операцию выполните для строки Российский Государственный Гуманитарный Университет, т.е. с обоих сторон добавьте теги < p > и p >, соответственно.
Для форматирования строки, например, Наш Университет, в соответствии с Рис.1 можно использовать следующий способ:
На панели “Свойства” если не отмечена вкладка “CSS” (находится под “<> HTML ”), то отметьте ее. Выделите текст Моя Первая страница. Используя меню “Целевое правило=>Создать встроенный стиль” отформатируйте текст так, как это приведено на Рис.1 (фрагмент прижат к левой границе документа). Для переопределения стиля данной строки достаточно курсором отметить эту строку (т.е. не нужно выделять всю строку) и задать другие параметры. Аналогично, с помощью меню “Целевое правило=>Создать встроенный стиль” отформатируйте строки Наш Университет и Российский Государственный Гуманитарный Университет в соответствии с Рис.1.
А теперь с помощью каскадных таблиц стилей ( CSS - Cascading Style Sheets) определим стиль для заголовка произвольного текста. В конце страницы перед body > наберите текст “< p >Стиль Заголовка p >”. Выделите строку “Стиль Заголовка” и на панели “Свойства” выберите “Целевое правило => Создать правило CSS”. При определении атрибутов данной строки (размер, цвет или же стиль фонта и т.п.) программа предложит вам создать стиль. Назовите этот стиль, например, как nash _ style . Для выделенного фрагмента определите следующий стиль: размер – 24 px; цвет – синий; стиль фонта – жирный и наклонный.
Убедитесь, что “Целевое правило” содержит введенный вами стиль.
4. Добавление изображения
В верхнем окне в конец страницы с помощью тега < img src > добавьте изображение “ rggu . jpg ” (находится в текущей папке)
После рисунка добавьте следующий текст: «Профессорско-преподавательский состав Университета насчитывает более 700 штатных преподавателей и около 400 совместителей, - специалистов из учреждений РАН, вузов Москвы и других научных учреждений. В РГГУ работают 70 академиков и членов-корреспондентов российских и иностранных академий, 214 докторов, 573 кандидата наук. Сегодня в структуре РГГУ работают: 12 институтов, в том числе 4 научно-исследовательских, 18 факультетов, 7 общеуниверситетских учебно-научных и научных центров, 11 международных учебно-научных Центров. В рамках специальностей осуществляется ряд уникальных специализаций - таких, как, например, памятники письменности Древней Руси; историческая антропология (совместно с Францией); еврейские языки, культура, тесты, архивы (совместно с США), история и культура Швеции (совместно со Шведским институтом), античная культура; история и филология Древнего Ближнего Востока, международное информационное право, социология маркетинга, политический и бизнес PR, реклама, и др.»
Теперь, находясь в окне дизайна (нижнем), сразу после изображения “ rggu . jpg ” добавьте изображение “ ipu . jpg ” (файл находится в текущей папке). Для этого в меню “Вставка” программы Dreamweaver выберите Изображение. Далее найдите файл в папке и добавьте его на страницу.
Сравните строку < img src width ="250" height ="180"> с предыдущей строкой . В верхнем окне в тег добавьте атрибут alt ="наша школа" ( alt ="наша школа" >). После последней кавычки и перед скобкой “>” нажмите на пробел. Вы увидите атрибуты тега < img >. Из списка выберите “ align ”, далее - “ left ”. Аналогичную операцию выполняем для второго рисунка и вместо “ left ” ставим “ right ”.
Сохраните текст. Посмотрите результат с помощью “ Internet Explorer ”, нажав на значок «глобус» на панели “ Dreamweaver ” (см. рисунок).
В конец страницы, т.е. перед тегом body > добавьте горизонтальную линию след. образом: < hr color size ="4" width ="92%">
В теге < body > (в начале страницы) поставьте пробел после слова “ body ” (сразу после буквы “у”) и в раскрывающемся меню выберите параметр “background” для фоновой картинки вашей страницы. Далее нажав на “Обзор”, выберите файл "log.jpg". Посмотрите результат действия в нижнем окне.
В текущей папке т.е. в glava _6, содержащей файлы данной лабораторной работы, создайте папку со своим именем (например “elina”).
Создайте еще одну страницу в редакторе “ Dreamweaver ”.
На этой странице красным цветом и крупным шрифтом наберите текст Это моя вторая страница< br >. Напомним, что здесь < br > указывает на перевод строки, т.е. начало новой строки.
Назовите ее также своим имением, но с добавлением к названию «2» (например, “elina_2. htm l”) и сохраните в папке, которую Вы только что создали в пункте 1.
Убедитесь, что Вы правильно выполнили предыдущий пункт, т.е. пункт 4.
Со второй страницы создайте ссылку на первую следующим образом: в верхнем окне после выражения Это моя вторая страница< br > наберите текст
Понятно, что вместо elina _1. html нужно указать название своего файла. Также обратите внимание на расширение файла: если файл был создан с расширением . html , значит, при ссылке на этот файл нужно указать именно такое расширение, а не . htm .
Сохраните данную страницу.
Перейдите в конец первой страницы. С помощью меню “Вставка - Гиперссылка” или же ярлыка “ Гиперссылка ” в “ Dreamweaver ” (см. Рис.2) создайте ссылку на вторую страницу следующим образом: перед тегом body > наберите строку < br >Моя вторая страница.
Выделив выражение Моя вторая страница, нажмите на значок “Гиперссылка” (он находится наверху слева, в группе ярлыков меню “Вставка”). Вы увидите меню с пунктами “Текст”, “Ссылка”, “Целевой объект” и т.п. (см., Рис.3). Заполните его следующим образом.
В качестве параметра “Целевой объект” выберите ключ “_ blank ”. После строки Моя вторая страница добавьте тег < br > - начало новой строки.
Создайте закладку на самой первой строке "начало страницы" Вашей первой страницы следующим образом:
Строку "начало страницы" замените строкой < a name >начало страницы a >.
В конце этой, т.е. первой страницы перед тегом body > с новой строки наберите:
< a href >< br >Где начало страницы a >.
Перейдите на вторую страницу! В конце этой страницы с новой строки наберите:
< p >< a href >< br >Где начало моей первой страницы a > p >.
На второй странице создайте ссылку на сайты Института проблем управления – www . ipu . ru и вашего Университета www . rsuh . ru следующим образом:
< a href >Институт проблем управления РАН a >< br >
Сохраните оба файла и проверьте ссылки и закладки.
Ознакомьтесь со следующим методом ссылки на фрагмент рисунка. Убедитесь, что файл “ ipu . jpg ” также находится в текущей папке.
Создайте ссылку на фрагмент рисунка “ rggu . jpg ” Вашего Университета (этот рисунок находится на Вашей первой странице). Например, сделайте так, чтобы при нажатии на дерево открылся сайт Вашего Университета.
Дополнительные вопросы
Что такое HTML ? В чем разница между статическими и динамическими страницами?
Какие программы используются для разработки Web -страниц? Какие недостатки у программы MS Office – FrontPage ?
Перечислите все параметры (атрибуты) тега < a href . >? С помощью какого параметра новая страница, открываемая по ссылке, загружается во весь экран?
Для чего используются ключи _ blank , _ parent , _ top , _ self параметра < target > тега
< a href >?
Приведите все параметры тега < img src ="". >. Что нужно сделать, чтобы браузер пропорционально отображал уменьшенное изображение, размеры которого заранее не известны?
Как создается ссылка на фрагмент рисунка? Покажите на примере.
Укажите основные преимущества программы Adobe Dreamweaver .
Какие стандартные шаблоны (страницы) создается с помощью программы Dreamweaver ?
Какие метатеги служат для правильного распознавания языка страницы браузером?
Какие метатеги помогают подняться к верхним строчкам рейтинга поисковых серверов?
Является ли достаточным условием правильное описание ключевых слов, чтобы быть в центре внимания поисковых машин? Почему?
Какие еще факты влияют на успешное индексирование ваших страниц поисковыми машинами?
Сегодня мы с вами познакомимся с программой для создания дизайна сайта, так же его редактирования 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 .
По аналогии с предыдущими ячейками, оформите среднюю ячейку таблицы (черный цвет – для фона и желтый цвет – для текста).
В итоге должно получится вот такое чудо:
Для тех кому мало текстовой части, и он хотел бы видеть больше скриншотов процесса обучения пишите в комментариях и если желающих наберется много, то я подготовлю статью с картинками.
Если Вам, как и мне интересно постоянно изучать новое подписывайтесь на мой канал и давайте учится вместе!
Просматривайте свои страницы при стандартных разрешениях экрана или задавайте разрешение с помощью мультимедийных запросов. При тестировании для устройств, которые меняют ориентацию страницы в зависимости от того, как пользователь держит устройство, используйте книжный и альбомный варианты ориентации.
Поддержка мультимедийных запросов
Используйте мультимедийные запросы, чтобы настроить внешний вид сайта для разных разрешений для вывода на экран. Дополнительные сведения см. в разделе Создание мультимедийных запросов (CS5.5 и выше).
Веб-приложения для мобильных устройств
Быстро проектируйте веб-приложения, работающие на большинстве мобильных устройств, с помощью мини-приложения jQuery. Для получения дополнительной информации см. раздел Создание веб-приложений для мобильных устройств (CS5.5).
Упаковка веб-приложений для устройств под управлением Android, iPhone и iPad
Упаковывайте веб-приложения в Dreamweaver и разворачивайте их на устройствах под управлением Android™ и iOS. Дополнительные сведения см. в разделе Развертывание веб-приложений в качестве приложений для мобильных устройств (CS5.5).
Поддержка HTML5, CSS3 и jQuery
Dreamweaver поддерживает предоставление подсказок по коду для HTML5, CSS3 и jQuery.
Также доступны макеты шаблонов для создания HTML5-страниц с нуля. Dreamweaver поддерживает функцию HTML5 для встраивания видеороликов в HTML-страницы. Для получения дополнительной информации см. Встраивание видеороликов в веб-страницы (HTML5).
Панель CSS была усовершенствована, теперь она поддерживает часто используемые свойства CSS3. Дополнительную информацию см. в разделах Подсказки по коду и Улучшенная поддержка CSS3 на панели стилей CSS (CS5.5).
Поддержка FTPS
Передача данных по протоколу FTPS. В отличие от протокола SFTP, который предлагает только поддержку шифрования, протокол FTPS (FTP по SSL) поддерживает и шифрование, и аутентификацию. Для получения дополнительной информации см. Подключения FTPS (CS5.5).
Поддержка средства проверки W3C
Создавайте страницы HTML и XHTML, соответствующие стандартам, с помощью средства проверки W3C в Dreamweaver. Дополнительную информацию см. в разделе Проверка документов с помощью средства проверки (CS5.5).
Adobe BrowserLab
Dreamweaver CS5 интегрируется с Adobe BrowserLab, одной из новых сетевых служб CS Live, что обеспечивает быстрое и точное решение для кросс-браузерного тестирования совместимости. С помощью BrowserLab можно просматривать веб-страницы и локальное содержимое, используя несколько инструментов просмотра и сравнения. См. раздел BrowserLab.
Интеграция с Business Catalyst
Улучшения CSS
Отключение/включение CSS
Отключение/включение CSS позволяет отключить и заново включить свойства CSS непосредственно с панели стилей CSS. При отключении свойства CSS оно заключается в комментарии, а не удаляется по-настоящему. См. раздел Включение/отключение CSS.
Проверка CSS
Режим проверки позволяет во всех подробностях отобразить свойства модели фрагмента CSS (включая заполнение, границу и поля) без чтения кода и без какой-либо отдельной сторонней программы (например, Firebug). См. раздел Проверка CSS-стилей в интерактивном просмотре.
Макеты шаблонов CSS
Dreamweaver CS5 содержит обновленные и упрощенные макеты шаблонов CSS. Сложные вложенные селекторы из макетов CS4 были удалены и заменены упрощенными, легкими для понимания классами. См. раздел Создание страницы с макетом CSS.
Динамически связанные файлы
Функция «Динамически связанные файлы» позволяет обнаруживать все внешние файлы и сценарии, необходимые для сборки PHP-страниц системы управления содержимым (CMS), и отображать их имена на панели «Связанные файлы». По умолчанию Dreamweaver поддерживает обнаружение файлов для CMS-платформ Wordpress, Drupal и Joomla! . См. раздел Открытие динамически связанных файлов.
Навигация в режиме интерактивного представления
Навигация в режиме интерактивного представления активирует ссылки в интерактивном представлении, позволяя взаимодействовать с серверными приложениями и динамическими данными. Эта функция позволяет ввести URL-адрес для проверки страниц, полученных от основного веб-сервера, и редактировать обнаруженные страницы, если они существуют на одном из локально определенных сайтов. См. раздел Просмотр страниц в Dreamweaver.
Подсказки по коду пользовательских классов PHP
Подсказки по коду пользовательских классов PHP выдают правильный синтаксис функций, объектов и констант PHP, помогая вводить более правильный код. Подсказки по коду также работают с пользовательскими функциями и классами, а также со сторонними платформами, например с платформой Zend.
Упрощенная настройка сайта
Переработанное диалоговое окно «Определение веб-сайта» (теперь диалоговое окно «Настройка сайта») упрощает настройку локального сайта Dreamweaver для скорейшего начала создания страниц. Категория удаленного сервера позволяет указать удаленный и тестовый серверы в одном представлении. См. разделы Настройка локальной версии сайта и Подключение к удаленному серверу.
Подсказки по коду для конкретного сайта
Функция «Подсказки по коду для конкретного сайта» позволяет настраивать среду создания кода при работе со сторонними PHP-библиотеками и платформами CMS, такими как WordPress, Drupal, Joomla! или другими. Файлы тем для блогов и другие пользовательские файлы и каталоги PHP могут быть включены или исключены из источников для подсказок по коду. См. раздел Подсказки по коду для конкретного сайта.
Улучшение поддержки Subversion
Шаг 2. В стартовом меню выберите пункт HMTL.
Шаг 3. Перед нами возник исходный код документа, над которым мы будем работать.
Справка: обратите внимание на строку тега meta. Эта строка определяет кодировку сайта. Нам нужно вписать windows-1251, т.к. сервис Народ.ру поддерживает сайты, написанные только в этой кодировке.
Шаг 4. В ячейке Title мы вписываем название данной страницы, например: Мой первый сайт.
Справка: тег title нужен для того, чтобы отображать название страницы в верхней полосе браузера.
Шаг 5. Выбираем вкладку Common на рабочей панели программы. Ставим курсор в коде между открывающим тегом <body> и закрывающим тегом <⁄body>.
Шаг 6. Затем создаем таблицу, нажав на иконку «Таблица».
Шаг 7. В открывшемся окне программа предлагает нам настроить будущую таблицу. В поле Rows (строки) мы указываем количество ячеек по вертикали, укажем 2. В поле Columns (столбцы) укажем количество ячеек по горизонтали, тоже 2. В поле Table width (ширина таблицы) указываем число. В соседней вкладке выбираем либо percent (измерение в процентах), либо pixels (ширина в пикселях). Мы выбрали 90 percent. В поле Border thickness (толщина рамки) выбираем либо 0 (рамка не будет отображаться), либо 1,2,3 и т.д. (число — это толщина рамки в пикселях). Мы указали 1. В поле Cell padding (отступ от границы ячейки) пишем 20 (измеряется также в пикселях), т.е. ячейки «приклеены» друг к другу. В поле Cell spacing (расстояние между ячейками) оставялем 0. Остальные настройки не трогаем. Нажимаем ОК.
Шаг 8. Нажимаем на вкладку Design в рабочей панели и смотрим, что у нас получилось. Получилась таблица шириной 90% относительно размера экрана компьютера, с двумя ячейками по горизонтали и двумя — по вертикали, с рамкой в 1 пиксель.
Читайте также: