Создание сайта на Adobe Dreamweaver

  1. Первая веб страница
  2. Форматирование текста в HTML
  3. Создание списков
  4. Гиперссылки
  5. Создание таблиц в блокноте
  6. Цвета в HTML
  7. Как создать форму в HTML?
  8. Табличная верстка сайта
  9. Теги в HEAD
  10. Изображения в html
  11. CSS
  12. Работа с текстом и изображениями в CSS
  13. Блочная структура сайта
  14. Блочная верстка

В этой главе мы познакомимся с замечательной программой, с помощью которой создают сайты — Adobe Dreamweaver. Это интуитивно понятный визуально ориентированный HTML-редактор. Мы уже знаем начальные элементы, из которых состоит веб-ресурс. С помощью Dreamweaver мы сможем делать сайты сложнее, лучше и быстрее, чем, если бы мы писали руками в блокноте. Для начала давайте познакомимся с основными управляющими элементами редактора.

Macromedia Dreamweaver

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

  1. Нажмите на ссылку Site (обозначена цифрой 1). В открывшемся окне выберите New Site.

Создаем новый сайт

  1. Мы увидим такое окно:

Общая структура программы

Перейдите на вкладку Advanced, в категорию Local Info. В поле Site name  введите название сайта, в поле Local root folder введите путь к папке, где будут хранится файлы вашего ресурса. Дальше, нажмите кнопку ОК.

  1. После этого вы снова попадете в окно как на рис. 1. Справа во вкладке Files будут отображаться файлы вашего сайта (обозначено цифрой 3).
  2. Сейчас нажмите на ссылку HTML (цифра 2) для создания первого файла веб-проекта.
  3. После этого вам откроется следующее окно:

Общая структура программы

Цифрой 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.

 

Оставить ответ

Ваш email не будет показан.