Нажмите сюда, чтобы урок 6.

Создание первой страницы.
Итак, нам нужно скачать и установить Dreamweaver. Набираем в поисковике:
Я пользовался версиями CS3 и CS5. Итак, заходите на любой сайт и качайте программу.
Установите Dreamweaver на свой компьютер.
Запустите программу.
В открывшемся окне поставьте галочку «В ознакомительном режиме».
В открывшемся окне выбираем – создать HTML. Все страницы вашего сайта будут иметь расширение HTML, как вы
видите у меня в колонке «Недавно измененные».
Итак, начинаем создавать первую страницу вашего сайта.
Страница сайта представляет собой таблицу, в которой вы пишите информацию.
Для начала сделаем простую страницу мини-сайта.
Выбираем режим ДИЗАЙН. Далее ВСТАВКА — ТАБЛИЦА.
В открывшемся окне указываем параметры необходимой нам таблицы. Сейчас нам нужна простая таблица. Указываем
строки и столбцы по 1 и выбираем ширину таблицы 700. Эти параметры в дальнейшем можно легко изменить. ОК.
В нижней части страницы вы видите параметры созданной таблицы. Здесь можно изменить ее ширину, которую мы
только что указали. Можно указать и другие параметры, но пока изменим только расположение таблицы: ВЫРОВНЯТЬ
— ПО ЦЕНТРУ.
Ниже в поле ГРАНИЦА ставим 0, чтобы границы таблицы не были видны на самом сайте. Если в дальнейшем вы
захотите показать границы таблицы – просто измените этот параметр в большую сторону.
Итак, у нас получилась вот такая табличка, внутри которой мы можем написать любой текст, который в дальнейшем
появиться на сайте. Сейчас я для примера написал НОВЫЙ САЙТ.
Для редактирования внешнего вида текста нам необходимо создать правило CSS.
Правило CSS это заданная совокупность параметров текста — шрифт, размер, расположение на странице, цвет и т. п. То
есть для разных надписей на странице вам необходимо создать разные правила.
К примеру, для надписи ЧАСТЬ №3 я создал правило CSS со следующими параметрами:
- шрифт Verdana
- размер 24
- жирный
- выравнивание центр
- цвет красный
Они отражаются внизу страницы.
Для надписи ПЕРВАЯ СТУПЕНЬ я создал новое правило CSS. И так для каждого элемента текста.
Кажется сложным? На самом деле это очень удобно. В дальнейшем при работе с текстом я просто выделяю необходимый
мне фрагмент, нажимаю правой кнопкой мыши и выбираю CТИЛИ CSS. В выпадающем окне появляются все уже
созданные мной стили. Я выбираю необходимый мне для этого фрагмента текста простым щелчком мыши.
Как же создать это правило?
Итак, вернемся к нашей таблице. В данном случае нам нужно задать правило для словосочетания НОВЫЙ САЙТ.
Кликаем правой кнопкой мыши. Выбираем СТИЛИ CSS и далее СОЗДАТЬ. Выделять текст пока необязательно. Мы
просто создаем правило.
В открывшемся окне выбираем тип селектора — «применимо к любому элементу HTML». То есть, когда мы в
следующий раз захотим применить параметры, которые соответствуют словосочетанию НОВЫЙ САЙТ, к другому
элементу текста, нам потребуется просто применить к нему уже созданное нами правило CSS. Назовем его ЗАГОЛОВОК
в графе имя селектора.
Затем выбираем применимо только к этому документу и нажимаем ОК.
Открывается окно настроек. Здесь вы выбираете все по своему усмотрению, исходя из того, какой хотите видеть свою
страницу. К примеру, я выбрал шрифт Verdana, размер 24, цвет черный.
Далее переходим во вкладку БЛОК и выбираем выравнивание текста по центру. Кроме этого, конечно, вы можете указать
еще много настроек. Я показываю самое основное.
Итак, нажимаем ОК. правило создано.
Теперь выделяем нужный нам фрагмент, в данном случае НОВЫЙ САЙТ, кликаем правой кнопкой мыши, выбираем
СТИЛИ CSS и далее ЗАГОЛОВОК.
Вот, что у нас получилось.
Теперь это правило CSS вы можете применять к другим элементам текста, просто выделяя их и выбирая нужный стиль.
Еще важно учесть то, что если вы измените какой-либо параметр у одного элемента текста с этим правилом, то
автоматически этот параметр изменится и у всех остальных элементов текста с тем же стилем CSS.
К примеру, в этом отрывке текста два словосочетания подчиняются одному и тому же правилу - ЖТ.
Я изменю один параметр словосочетания БЕСПЛАТНЫЙ КОНТЕНТ – сделаю цвет синим.
В результате цвет словосочетания КОММЕРЧЕСКАЯ СПОСОБНОСТЬ также изменился.
Правило осталось тем же самым - ЖТ, только с новым параметром. И все фрагменты текста, подчиняющиеся правилу
ЖТ, также изменили этот параметр.
Итак, давайте посмотрим как будет выглядеть только что созданная вами страница в вашем браузере.
Нажимаем значок с изображением планеты и выбираем браузер, в котором хотим просмотреть эту страницу. Я пользуюсь
браузером Opera, поэтому нажимаю ПРОСМОТР В OPERA. Вы соответственно выбираете тот браузер, которым
пользуетесь на своем компьютере.
В следующем окне СОХРАНИТЬ ИЗМЕНЕНИЯ нажимаем ДА.
Далее сохраните ее на рабочий стол. Нажимаем СОХРАНИТЬ.
Вот, что у нас получилось.
Теперь займемся фоном. Фон области текста сделаем белым. В нижней части панели свойств нажимаем ФОН и
выбираем интересующий нас цвет, в данном случае белый.
Далее нам нужно изменить цвет фона вокруг таблицы. Для этого нажимаем СВОЙСТВА СТРАНИЦЫ выбираем цвет
фона, я остановился на светло-сером, и нажимаем ОК.
Посмотрим, что мы получили в результате в браузере. Выбираем ПРОСМОТР В OPERA (или другой браузер).
Выходит окно «Сохранить изменения?», нажимаем ДА.
И видим страницу в браузере.
Вот она ваша первая мини-страничка. Теперь вы сами можете менять ее по своему вкусу, как-угодно, когда-угодно. Вы
уже знаете, как это делать.
Сейчас обратите внимание, что написано в адресной строке браузера — местонахождение вашей страницы. В данный
момент она находится на вашем компьютере, на диске С, на рабочем столе и называется Untitled-1.html.
Нам же нужно, чтобы посетитель видел эту страницу, набрав в адресной строке название вашего сайта. То есть теперь
нам нужно загрузить вашу первую страницу на ваш сайт. Нажимаем ФАЙЛ — СОХРАНИТЬ КАК...
Далее выбираем папку, где будет находиться этот файл. Можете сохранить его на рабочий стол или в любую папку, кудаугодно, важно, чтобы имя файла было — index. Главная страница вашего сайта всегда будет называться index.
Итак, выбрали папку, ввели имя и нажимаем СОХРАНИТЬ.
На этом мы заканчиваем работу с программой Dreamveawer и переходим на сайт Yutex.ru.
Мы создали страницу, теперь наша задача загрузить ее на сайт. Чтобы сделать это, зайдите в ваш аккаунт на сайте
Yutex.ru. Как это сделать мы рассматривали в самом начале, при регистрации. Данные для входа пришли вам на
почтовый ящик.
Итак, заходим в Диспетчер файлов.
Нам надо попасть в Корневой каталог веб-содержимого. Убедитесь, что напротив него стоит точка и нажимайте кнопку
GO.
Здесь мы видим, что находимся в каталоге public_html или www. В эти каталоги вы будете помещать файлы, которые
сразу же автоматически будут отображаться на вашем сайте.
Сейчас мы хотим, чтобы в браузере отобразилась ваша первая страница. Мы уже выяснили, что главная страница вашего
сайта должна называться index.html. Как видите, у меня она уже загружена. Давайте загрузим вашу страницу на ваш
сайт.
Итак, нажмите кнопку «Загрузить».
В открывшемся окне нажмите «Обзор».
Появляется окно со всем содержимым вашего компьютера, откуда вы выбираете файл index. В данном случае у меня он
сохранен на рабочем столе в папке «Индекс». Я открываю папку, выбираю файл index и нажимаю «Открыть».
После того как файл загружен, возвращайтесь на страницу с содержимым public_html. Ваша первая страница уже здесь и
вы можете смело просмотреть ее на вашем сайте!
Итак. Я просто набираю в адресной строке название своего сайта mindpeoplegroop.ru и открывается главная страница
(index).
Теперь вы зайдите на свой сайт и посмотрите на свою первую только что созданную страницу.
Поздравляю! Первый шаг сделан. Теперь вы можете изменять, редактировать, наполнять содержанием свой сайт легко и
просто за несколько щелчков мыши.