Создание первой веб-страницы с программой Adobe Dreamweaver

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

Давайте приступим к наполнению нашей первой веб страницы. Dreamweaver позволяет наполнять сайт текстом двумя путями. Стоит отметить, что вы таким же образом можете создать сайт в блокноте, но данная программа дает больше преимуществ, т.к. является визуальным редактором.

Раздел для ввода кода

Щелкните мышкой в конце тега <body>( цифра 1) и нажмите Enter. Потом напишите: «Привет мир». Вы увидите, как в области дизайна появилось то, что вы написали. Щелкните в области дизайна (цифра 2) в конце слова мир, нажмите Enter и напишите: «Это размер заголовка раздела». Надпись одновременно появится в области кода. Мы можем выбирать сами, как нам удобно наполнять сайт.

Теперь сами напишите ниже этих надписей: «Это размер заголовка статьи». И ниже: «Это параграф. Таким шрифтом пишут статьи».

В итоге у вас должно получиться как на рис. 2

Отображение результата

В самом низу у вас должна быть панель форматирования. Если ее нет, то зайдите во вкладку  Window и щелкните Properties или нажмите Ctrl+F3.

Выделите слова «Привет мир». Нажмите на кнопку «выровнять по центру» на панели форматирования (цифра 1). Потом выберите из списка Format подпункт Heading1 (цифра 2). Посмотрите в области кода на теги, которые окружают слово «Привет мир»:

<h1 align="center">Привет мир</h1>

Сейчас мы познакомились с первым текстовым тегом <h1>. По умолчанию это самый большой формат заголовка на сайте. Этим тегом обозначают название сайта в тексте, либо самый главный заголовок. Этот тег имеет атрибут align=»center». Атрибут- это добавление к тегу, которое наделяет тег дополнительными свойствами. Браузер же интерпретирует нашу строку так: слова Привет мир разместить по центру и увеличить до формата самого большого заголовка.  Пощелкайте теперь на кнопках справа и слева от кнопки «выровнять по центру» и увидите, как меняется текст (почти как в Word). Обратите внимание, как меняется код.

Выделите слова «Это размер заголовка раздела». Снова нажмите на кнопку «выровнять по центру», а потом выберите из списка Format подпункт Heading2, которому соответствует тег  <h2>. Этим тегом обозначают формат заголовка раздела.

Выделите слова «Это размер заголовка статьи». Выровняйте по центру и присвойте тег <h3>. Этим тегом обозначают формат заголовка статьи.

Выделите слова «Это параграф. Таким шрифтом пишут статьи». Выровняйте по центру и присвойте из списка Format подпункт Paragraph. Этому подпункту соответствует тег  <p>. Обычно таким тегом оформляются все остальные текстовые части сайта.

На панели управления также есть и другие способы форматирования текста. Так в списке Font (цифра 3) мы можем выбрать шрифт текста сайта, а в списке Size размер шрифта (цифра 4), рядом список, где мы можем выбрать, в каких единицах мы задаем размер шрифта ( в пикселях, точках или еще в чем то на выбор). Для начала этих базовых инструментов форматирования текста вполне достаточно, чтобы наш текст на сайте выглядел красиво.

Сохраните то, что мы сейчас напечатали: правой кнопкой по index.html (цифра 5) выбрать пункт Save. После этого вы можете просмотреть свою страницу в браузере. Для этого щелкните в любом месте страницы и нажмите F12.

В следующей главе мы научимся создавать списки и меню.

 

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

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