Как быстро создать сайт с нуля

Для этого нужны 2 программы: Графический редактор Photoshop и Веб-редактор FrontPage

1. Подготовка цифрового фото

Научиться обрабатывать фото на Photoshop. Это самая трудоемкая часть.  

Процедура состоит из 4 операций:

1. ОБРЕЗКА. Надо убрать лишний фон, неинформационную часть фотографии. Делается это так: щелкаем на кнопке crop и выделяем нужную область. Любую сторону можно двигать.  Когда выберем окончательный вариант, нажимаем на Enter.
2. Улучшение КАЧЕСТВА ИЗОБРАЖЕНИЯ. Это делается с помощью опции Образ. Корректировка. Выбираем Уровни (Levels) и начинаем двигать ползунки по очереди, пока не получим максимально качественное изображение.
3. Уменьшение РАЗМЕРА ФОТО.  Выбираем опцию Сохранить для Веб. Справа внизу выбираем Image size. Поставим галочку на опции Сохранить пропорции (Constrain Proportions). Уменьшаем Ширину (Width) изображения постепенно, не более чем в 2 раза, а не в 3-4. Это потому, что берется какая-то область и стягивается в одну точку. Нажимаем на Применить (Apply). Если мы уменьшим резко в разы, то потеряем в качестве. Уменьшаем до тех пор, пока размер изображения не уменьшится до нужного размера (определяем на глаз).  Ориентируйтесь на то, что ширина экрана монитора 1024 пикселя. Такой может быть ширина фоновой картинки.
4. Уменьшим ВЕС ФОТО, т.е. размер в килобайтах.  Это нужно для того, чтобы страница не грузилась 5 минут, иначе ваш сайт в интернете не будет работать. Это самая трудная часть процедуры. Надо, не потеряв качества, максимально уменьшить вес фото. Фоновая картинка шириной 1024 должна весить около 50 кб, маленькие фото меньше 10 кб, средние 20 кб. В панели Settings для эмблем или маленьких картинок, фото с прозрачным фоном и малым количеством палитры цветов выбираем формат gif, а для качественных фото, где требуется хорошая цветовая палитра, выбираем формат jpg. Меняем качество Quality на high, medium, low или подбираем  на глаз цифры качества справа. Сохраняем Save в папке Мои документы/Мои веб-узлы находим свою папку с сайтом, в ней находим или создаем новую папку image, в которой будем сохранять уже обработанные фото. Имя файла обязательно одно слово строчными английскими, можно добавлять цифры. Никаких русских букв!

2. Создание сайта в Веб-редакторе FrontPage

Установка FrontPage. Веб-редактор FrontPage  - русскоязычный. Для начинающих он идеален. Работать с ним не сложнее, чем с Microsoft Word.

Программа сама создаст папку Мои веб-узлы в папке Мои документы.  В папке Мои веб-узлы создайте свою папку, где будет находиться ваш сайт, например Сайт учителя. Внутри  создайте папку image, в которую сохраните все подготовленные в Фотошопе фото.

Русская кодировка. Теперь можно создавать главную страничку. Запускаем Файл. Создать новую страницу, справа выбираем Пустая страница. Появится двухэтажное окно. Верхнее окно – код страницы. Находим там число 1252 и меняем его на 1251 – русская кодировка. Щелкаем на нижнем окне, увидим что абракадабра типа Новая ст р аница исчезла и появились вместо них русские буквы. Например, Н заменена на букву ‘Н’.

Таблица. Самое важное при создании страницы, надо четко понимать, что каркас страницы, на которой все держится, это таблица. Иначе все будет находиться не там, где надо.

Создаем таблицу. Выбираем Таблица Размер строк -2, столбцов -3. Выравнивание по центру, задать ширину в процентах (ставим точку) – 80.  Чтобы оставить слева и справа поля по 10%. Границы размер -1.  Остальное пока не трогать.

Потом выделяем верхнюю строку (все три ячейки) и нажимаем правую кнопку мыши, в появившемся меню выбираем Объединить ячейки.

В верхней строке пишем Добро пожаловать на сайт учителя предмет фамилия имя отчество.

Выделяем, выбираем Заголовок 1, меняем цвет, выравнивание по центру.

На левой колонке пишем столбиком свое меню, как указано ниже.

Сохранить в Мои документы/Мои веб-узлы в своей папке с сайтом. Программа сама предложит имя index c которым соглашаемся, нажимаем Сохранить. Главная страница должна называться index.

Будьте очень внимательны, сохраняем все в своей папке с сайтом! Иначе проблемы, потеряете много времени на исправление.

Границы таблицы потом надо убрать.  Открываем правой кнопкой Свойства страницы и размер границы пишем 0.  Тогда таблицы вообще не будет видно, будто бы ее нет. Но она скелет страницы, на ней все держится. Делаете столько ячеек, сколько надо, чтобы объекты страницы находились в нужных местах.

Как вставить рисунок.  Выбираем меню Вставка, Рисунок, из файла…

Как делать гиперссылки

Выделяем Тематический план. Правой кнопкой мыши вызываем меню, выбираем Гиперссылка. Пишем имя файла templan.htm

Здесь имя файла обязательно одно слово строчными английскими. Никаких русских букв! Потом обязательно точка и расширение файла  - .htm (все надо писать слитно без пробелов). Ссылка получится подчеркнутой.

Точно также поступаем для всех остальных меню. Придумываем имя файла – одно слово + .htm

Мы просто указали, какой файл будет загружаться, когда будем вызывать эту ссылку.

Как создать файл

Можно проделать то же, что и для главной страницы. А можно использовать уже готовую страницу как шаблон. Главную страницу мы сохранили под именем index.htm, а теперь ее еще раз сохраним, но уже под другим именем, т.е. делаем копию Сохранить как… и вводим уже другое имя templan. Здесь расширение .htm писать уже не обязательно, так как внизу уже указан тип веб-страница.

Теперь меняем в ней заголовок и сохраним изменения..

Точно также создаем все остальные файлы. Ничего, что они пока одинаковы. Изменить заголовки, поменять текст, фото можно и потом.

Откроем папку с нашим сайтом и увидим новые файлы.

Как создать обратную ссылку

Внизу странички (кроме главной) пишем Назад, выделяем, правой кнопкой вызываем Гиперссылка. Выбираем index.htm Все странички будут возвращаться на главную.

Как проверить  навигацию

Чтобы проверить как работают ссылки, надо через Проводник зайти в папку с сайтом. Выбрать главную страницу index.htm, проверяем, работают ли все гиперссылки. Если где-то не работает, возвращаемся в FrontPage, редактируем только в нем.

Возможные ошибки

1. Последние изменения в файле  не сохранены
2. Файл сохранен не этой папке, а в другом месте
3. Указана неправильно ссылка, ссылка вызывает свой же файл, а не тот, который нужен, или имя файла написано похожее, но не точно. Исправить.