Создаем сайт с нуля. Вступление.

Азбука блоггераЗдравствуйте, друзья!

Новую рубрику «Азбука блоггера» я решила начать с курса по созданию сайта с нуля или, вернее, верстке сайта по макету, созданному в фотошопе.

Почему именно с этого?

Во-первых, в этом случае мы будем работать с html-файлом, что позволит не задействовать дополнительные инструменты (например, локальный сервер) ;
во-вторых, достаточно простая структура файлов даст возможность разобраться на примерах с назначением тегов и  использованием для изменения внешнего вида элементов таблицы стилей (для тех, кто только начинает осваивать HTML);
в-третьих, практика использования Total Commander и Notepad++ пригодится при работе с реальным сервером.

Хочу заметить, что курс будет касаться именно программной части, вопросы работы с макетом в фотошопе рассматриваться не будут. Рекомендую также посетить сайт Андрея Морковина, и посмотреть его курс div верстка бесплатные видеоуроки.

Первая статья будет вводной частью, в ней я расскажу о минимальном наборе инструментов, которыми я буду пользоваться для верстки сайта.

Total Commander – файловый менеджер, на мой взгляд, один из самых простых при работе по FTP.

Notepad++ – текстовый редактор, позволяющий корректно работать с кодировкой  UTF-8.

Для удобства редактирования файлов, советую интегрировать Notepad++ в Total Commander (чтобы по нажатию клавиши F4 файл открывался именно в этом редакторе). Для этого после установки обоих приложений следует зайти в Total Commander в меню «Сервис» —> «Параметры» —> «Операции правка/просмотр» и в окне «Правка по F4» в качестве программы-редактора указать Notepad++ (выбрав по «>>» место его размещения на вашем компьютере).

Затем, необходимо подготовить HTML+CSS шаблон будущего сайта. Для этого отправляемся на Генератор HTML+CSS шаблонов, задаем параметры сайта (я выбираю фиксированную ширину макета – 800px, высоту шапки – 200px, один правый сайдбар шириной 200px и подвал, прижатый к низу окна браузера, высотой  56px). Размеры можно будет изменить в процессе верстки. Нажимаем кнопку «Получить ссылку» и скачиваем  .zip архив по ссылке, появившейся в левом верхнем углу. Распаковываем архив в рабочей папке. В нем содержатся два файла index.html и style.css, с которыми мы и будем работать.

Кроме того, понадобятся графические элементы для сайта – логотип, шапка, подвал, фоновое изображение страницы и шестнадцатеричные значения цветов, используемых на сайте (как их извлечь из фотошоп-макета подробно описано в курсе Андрея Морковина).

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

Опубликовал 24th Январь 2011.
Размещено в Сайт с нуля.
Метки: , ,

Комментирование закрыто.

Нужна помощь?