- Создание сайта на Adobe Dreamweaver
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
Давайте приступим к наполнению нашей первой веб страницы. 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.
В следующей главе мы научимся создавать списки и меню.