Создание одностраничного сайта. Практика

Друзья, привет! Вот мы и вооружились всеми необходимыми знаниями для создания сайта. Сейчас перечислю знания,  полученные из предыдущих статей. Повторим алгоритм создания и в БОЙ! Сегодня будет весело и интересно. Сплошная практика и немного теории.

На данный момент у Вас должна быть установлена программа Dream Viewer, куплено доменное имя ( желательно на хостинге Джино, а также Вы должны знать, как соединяться с хостингом и то, какие у программы Dream Viewer функциональные клавиши.  Если пока есть пробелы в знаниях, то не беда! Найдите или прочитайте ещё раз предыдущие статьи, а мы идем дальше!

Повторим алгоритм, скажу сразу, мы стартовать сегодня будем не с самого начала, а с момента когда Вы уже соединились с хостингом.
1)    Создаём папку на хостинге, в которой будет храниться мини – сайт.
2)    Соединяемся с хостингом через программу Dream Viewer
3)    Создаём сайт
4)    Отправляем созданный одностраничный сайт на хостинг
5)    Наслаждаемся результатом!
И так, мы соединились. Приступаем к созданию сайта!

Первым делом мы придумываем основную структуру сайта. Как правило, на одностраничниках используется «двух – этажная». Её мы и будем сегодня применять. Жмём на кнопку таблица и выбираем: число строк – 2, число столбцов – 1, ширина 900 пикселей. Смотрим на снимке:
 
Мы выбрали ширину 900 пикселей, т.к. – это оптимальная ширина для большинства мониторов. После задания параметров жмём «ОК».
Теперь нажмите на границу таблицы и выровняйте по центру её. Смотрим на снимок:
 
ТЕперь наша таблица по центру, это в дальнейшем сделает весь сайт по центру. Мы создали таблицу из двух строк, в верхней, как правило, вставляется хедер (картинка,  несущая какую – либо информацию, она размещается сверху). А в нижней области мы вставим текстовую информацию. Для создания хедера нужны минимальные знания программы фотошоп, ну и это не обязательно. Следующим нашим шагом будет визуальное украшение и работа над сайтом. В первую очередь подберём интересный хедер. Если Вы его нашли, то начинаем устанавливать. Вы разделили Вашу табличку на два этажа, кликните внутрь первого так, что – бы у Вас появился мигающий курсор внутри неё. Смотрим на снимок (на нём Вы увидите правильное положение таблицы и кнопку для вставки картинок):
 

Отлично! Если Вы всё сделали правильно,  то можем вставлять хедер. Для этого жмём на кнопку, выделенную на снимке, и выбираем и выбираем нужное изображение. Вот, что получилось у меня:
 
Как говорится, не судите строго! С этим разобрались. Далее пойдёт основная часть. Тут уже, как Вам фантазия позволит разгуляться. Вы сможете в нижний уровень вставить анкету, видео – ролик, картинку, текст, информацию о себе, ещё одну таблицу, например из двух столбцов. Сейчас – же, я расскажу,  как внутри написать обыкновенный текс и сделать это красиво.
Делаем активным нижний этаж, кликнув левой клавишей мышки на него. Затем, регулируем положение курсора с помощью нижнего функционального меню. Смотрим снимок:
 
В этой – же области находится и регулировка шрифтов, стилей, цветов и размеров букв. Сейчас набросаю экспериментальный текст и сделаю снимок. Вот, что у меня получилось:

Вот так, но это ещё не всё. Сейчас мы украсим наш сайт с помощью красивого фона. Для этого, подбираем картинку (на фон), затем жмём на «body» и выбираем «свойства страницы» Там, ищем надпись «фоновое изображение» и выбираем подходящую картинку. Смотрим:
 
После того, как Вы установили фон, то он покроет весь Ваш проект. Для того что – бы сделать поле с информацией чистой от фона, сделайте это поле активным (кликните левой кнопкой на второй этаж), а в нижнем функциональном меню выберете «фон», там же Вы сможете выбрать цвет границы. В общем, вот что у меня получилось:
 
Вот такой вот сайтик. Теперь можно посмотреть на то, как он будет выглядеть в интернете. Жмём на шарик и просматриваем. Вас попросят дать имя файлу, назовите его: index.html (это так – же, как и на хостинге с которым Вы соединились). Теперь даём название сайту и отправляем его на хостинг. Смотрим на снимке:
 
Если всё нормально, то сразу после отправки Вы сможете просмотреть Ваш одностраничный сайт уже в интернете, введя в адресную строку браузера его адрес. У меня всё!
Знаю, что у Вас будет много мороки с освоением этой программы (как когда то у меня), но у Вас всё получится, если будете достаточно настойчивы.

Всего Вам самого лучшего, с уважением, Яковенко Алексей!