Шаблон макет для создания сайта

Как шаблон макет для создания сайта сайты — первые шаги Серия этих уроков расчитана на «новичков», не знакомых с HTML. Из нее вы узнаете как делать сайты. Как делать сайты — блочная верстка Эта серия уроков рассчитана на тех, кто знаком с HTML и CSS.

Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт. Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова. За нарушение авторских прав предусмотрена уголовная ответственность! Совсем недавно я на блоге рассказывал как в Photoshop  сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS.

Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Друзья, для того, чтобы было понятнее обязательно скачайте файлы уже готового шаблона. Так же в архив входит и PSD макет сайта. И конечно же Вы сможете посмотреть демо шаблона в действии. Демо ι Скачать Подготовка Для начала нам необходимо создать простую папку, желательно на рабочем столе, чтобы не потерять её. Там будут лежать все наши файлы, которые входят в шаблон сайта.

Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index. В принципе мы первый шаг уже сделали. Добавляем разметку HTML Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке. Будущий шаблон у нас будет делиться на три части.

Это шапка сайта, середина, и низ сайта. В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы. Inner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Inner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета. Ну а сейчас начнём наполнять наш код, и начнём мы из шапки. Вёрстка HTML и CSS Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12. Он очень простой, и сразу же можно посмотреть изменения, безумно удобно. После того как Вы вставили код в наш текстовый документ index, его нужно сохранить.

Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем. Когда файл сохранился, переименуйте его разрешение с . Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

Потом их просто можно перенести в отдельный файл и прикрепить к код html. Для списков мы отключили точки, а для ссылок отменили подчеркивание. Это так сказать стандартные стили, их можно изменять по собственному желанию. Теперь вставляем вот этот код стилей CSS, которые отвечают за расположение главных трёх блоков на странице браузера. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. Inner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета.

В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Переходим во вкладку «Файл»  и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

Вам может понравится