Предыдущий ролик Следующий ролик  

Видео урок: Для тех, кто использует Dreamweaver

Создание отзывчивого веб-дизайна

Тем, кто будет создавать этот проект в DreamWeaver, и у кого есть файлы CSS и JavaScript, привязанные к HTML, полезно знать, что есть несколько мест, где Dreamweaver вам покажет, что эти файлы связаны. Во-первых, в правой части есть CSS панель. Это часть верстки по умолчанию. Если вы не видите эту CSS панель, перейдите в меню Window, а затем включите CSS. В Dreamweaver CS4 есть область в верхней левой части документа, которая называется related files (связанные файлы). Вот здесь я могу видеть ссылку на исходный код, и то, что у меня есть CSS файл, файл JavaScript, а именно jQuery, а также файл myfile.js.

Эти кнопки показывают, что указанные файлы связаны с моим HTML. Если вы перейдете сюда и кликните на CSS, например, мне будет показана часть экрана Dreamweaver, где справа будет представлен HTML и слева - связанный с ним CSS документ. Если я перейду сюда и нажму на my_file.js, я смогу увидеть связанный JavaScript файл. А вот здесь я могу переключаться между design view (готовым представлением), split-screen view (комбинированным представлением) и просто code view (представлением кода). Представление кода показывает мне, какой документ я выбрал, является ли это CSS, JavaScript или исходным кодом HTML файла.

Когда мы используем Dreamweaver при кодировании приятно то, что используемый инструмент для кодирования предлагает некоторые варианты для завершения кода. Внутри Dreamweaver тоже есть такие возможности. Например, если я перейду сюда внутрь окна кода, нажму Return и начну набирать тег div, Dreamweaver выдаст мне выпадающее меню. Я могу нажать Return, выбрать тег div, нажать пробел, присвоить класс. Я начинаю печатать "cl", получаю выпадающее меню, а Dreamweaver поможет мне, пока я набираю в HTML. Также я могу сделать это для JavaScript и CSS.

Давайте я перейду к CSS. Мы создадим новое CSS правило. Я набираю "body". Захожу сюда, и допустим, мы добавляем цвет. Начинаю набирать слово "color". Оно мне будет показано. Я могу нажать Return, и в некоторых случаях я получаю графическое представление для дополнения кода, когда я могу посмотреть сюда и указать цвет. Итак, я могу назначить новые правила внутри кода CSS файла или внутри CSS панели я могу выбрать "Create New CSS Rule" (создать новое CSS правило). Независимо от ваших предпочтений при работе с Dreamweaver, все, что мы будем делать в этом курсе, может быть создано в окне для кода или в интерфейсе Dreamweaver, все зависит от того, что вам больше нравится.

А теперь мы можем приступить к работе над проектом.