- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
В этой главе мы познакомимся с замечательной программой, с помощью которой создают сайты — Adobe Dreamweaver. Это интуитивно понятный визуально ориентированный HTML-редактор. Мы уже знаем начальные элементы, из которых состоит веб-ресурс. С помощью Dreamweaver мы сможем делать сайты сложнее, лучше и быстрее, чем, если бы мы писали руками в блокноте. Для начала давайте познакомимся с основными управляющими элементами редактора.
В открывшемся окне нам редактор предлагает несколько вариантов создания сайта. Начнем с самого простого:
- Нажмите на ссылку Site (обозначена цифрой 1). В открывшемся окне выберите New Site.
- Мы увидим такое окно:
Перейдите на вкладку Advanced, в категорию Local Info. В поле Site name введите название сайта, в поле Local root folder введите путь к папке, где будут хранится файлы вашего ресурса. Дальше, нажмите кнопку ОК.
- После этого вы снова попадете в окно как на рис. 1. Справа во вкладке Files будут отображаться файлы вашего сайта (обозначено цифрой 3).
- Сейчас нажмите на ссылку HTML (цифра 2) для создания первого файла веб-проекта.
- После этого вам откроется следующее окно:
Цифрой 1 обозначено место, где будет название нашего файла, цифрой 2 место, куда мы можем вписать название нашей страницы, которая будет отображаться в браузере, цифрой 3 обозначено место, где мы сможем выбрать, как будет отображаться наш сайт в редакторе.
Пощелкайте по области 3, вы увидите что редактор отображает нашу страницу по-разному. Если мы нажмем на кнопку Code, редактор отобразит только код нашей страницы, если мы нажмем на Design, то редактор покажет нам, как бы выглядел сайт в браузере. На рисунке 3 нажата кнопка Split, в этом режиме редактор показывает нам сверху страницу в режиме код, а снизу страницу в режиме дизайна.
В самом низу находится панель форматирования, в ней мы можем форматировать текст как в Word.
По умолчанию редактор добавляет вместо тега <html> следующие строки кода:
Оставим эти строки как есть.
В поле Title (цифра 2) введите название нашей страницы- First Site.
Щелкните правой кнопкой мышки по названию файла (цифра 1), выберите Save As, введите имя файла — index.html и нажмите Сохранить.
С правой стороны, во вкладке Files вы увидите свой файл index.html.
По умолчанию главной страницей веб-ресурса должен быть файл с названием index.html.
В этой главе мы познакомились с редактором Dreamweaver, познакомились с некоторыми элементами управления редактора, научились создавать файлы и страницы нашего проекта.
В следующей главе мы научимся вставлять и форматировать текст нашего сайта с помощью Dreamweaver.