Как написать код для сайта на html

Вам срочно нужно сделать сайт, используя только HTML, и выложить его в интернет? Тогда вам не составит труда скопировать готовый код и следовать моим инструкциям.

• Создание места для сайта на своём компьютере
• Создание шаблона сайта
• Код сайта
• Создание директории сайта
• Перенос сайта со своего компьютера в интернет

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

Если у кого-то именно он и является целью, и нет желания изучать другие языки, то эта статья для них.

Короче, в самописном исполнении, без использования CMS, проще уже ничего не существует.

А для тех кому требуется что-то по круче, в конце статьи есть ссылки на статьи с кодом блочного шаблона, с использованием CSS, и кодом динамического сайта с использованием PHP.

Сайт на чистом html сделаем прямо на этой странице, так сказать — сайт в сайте, вполне рабочий и готовый к заполнению контентом.

Разделим весь процесс на четыре части.

1. Создание места для сайта на своём компьютере.

2. Создание сайта.

3. Создание директории сайта

4. Перевод сайта с нашего компа на хостинг, то есть в интернет.

Создание места для сайта на своём компьютере

Первый пункт самый простой.

Нужно просто создать отдельную папку, например в разделе Документы и назвать её как вам будет угодно, например site.

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

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

Приступим ко второму пункту, самому творческому.

Создание шаблона сайта

Для создания шаблона потребуется редактор, в который нужно будет вставить приведённый ниже код.

Это может быть как простой виндовский Блокнот, так и любой другой текстовый редактор.

Я рекомендую Notepad++. Он бесплатный, простой в использовании, и в отличие от Блокнота, в нём легко просматривать картинку в браузере, после внесения изменений в код.

За основу шаблона возьмём многослойную таблицу HTML. Раньше, до появления CSS все сайты писались таблицами, теперь же более популярной стала блочная вёрстка.

Но и до сих пор, табличная структура не устарела и с успехом применяется.

Например инвестиционная CMS H-script со сложнейшим функционалом, целиком свёрстана на основе таблиц.

Итак, вот такой сайт, с минимальным оформлением.

Как в дальнейшем оформлять таблицы, очень подробно показано в статье Таблицы HTML.

Код сайта:

Вот такой очень простой код. Без учёта пробелов и комментариев, даже 100 строк не наберётся.

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

Между прочим, скорость загрузки будет головокружительной.

Как конструировать таблицу, менять расположение ячеек, добавить в таблицу скрипты Javascript и формы обратной связи, читайте в статье Таблицы HTML.

Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта

Создание директории сайта

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

Все действия показаны в редакторе Notepad++. Если кто ещё не установил, то вот ссылка на инструкцию по установке: Установка Notepad++

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

Так же не помешает ознакомиться с тем, как создать первый файл сайта, в статье Каркас страницы.

Итак, начинаем работать.

Открываем Notepad++, открываем «Новый документ», проверяем и если нужно исправляем кодировку на uft-8 (без БОМ), копируем код сайта с моей страницы,  вставляем его в поле редактора.

Затем выбираем «Файл — Сохранить как…» , в открывшемся поисковике находим созданную при создании места для сайта папку «site», в строке «Сохранить»(внизу окна поисковика) меняем название с «nev1» на «index.html», и сохраняем.

Затем заходим в папку «site», в ней уже есть первый файл index.html, и создаём там-же ещё две папки content и images.

В результате директория должна выглядеть следующим образом:

Теперь, чтоб в дальнейшем не писать длинные адреса для изображений, откроем папку content и создадим в ней ещё одну папку для картинок с названием images1.

В неё будем складывать изображения для всех страниц, кроме главной.

Возвращаемся в редактор, выбираем меню Запуск (верхняя строка панели редактора), и в нём Launch in Chrome.

Если конечно у вас другой браузер, то выбрать нужно его. В браузере должен открыться шаблон, который показан в начале статьи.

Если вы пишете сайт в блокноте, то запускать его нужно будет из поисковика, то есть из папки site открыть файл index.html.

Вот теперь можно начинать его править так, как Вам нужно. Все позиции, которые можно изменить, указаны в комментариях к коду.

После изменения какой либо позиции, нужно нажать Сохранить(третья иконка слева), и через Запуск посмотреть как получилось.

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

Теперь разберёмся с картинками. Изображения в моём шаблоне загружены через сервис trueimages.

Вы же будете делать свои, и сохранять их в папке images и images1 директории site, значит адреса картинок будут другими.

Как сделать картинку рассказано в статье Как сделать картинку для шапки в Paint(это для тех кто не знаком с фотошопом).

А адреса у Вас буду выглядеть так: Для Главной (index.html) — images/имя рисунка.

А на всех последующих страницах вместо images ставиться images1.

Картинки маркеров на Главной прописываются так

А на следующих страницах так опять вместо images — images1

Вот теперь можно из шаблона сделать свой сайт, со своими изображениями, и своим текстом.

Последующие страницы делаются по тому же шаблону, только сохраняются в папке «content», и называются не «index.html», а по заголовку статьи, только в названии файла он пишется английскими буквами, с окончанием «html».

Изображения для них размещаются соответственно в папке images1. Если и на главной, и на других страницах, есть одни и те-же картинки, то они должны быть в обеих папках.

Адреса этих страниц определяются так. Когда Вы создадите страницу, сохраните её в папке content, выберете в Notepad++ меню Запуск, и откроете в своём браузере, то в адресной строке браузера как раз и будет нужный адрес.

Вставляется он в виде ссылки перед текстом «Другая страница» (как пишутся ссылки читайте в статье Ссылки примерно вот так

На моём сайте можно подобрать ещё несколько красивостей для оформления страницы, как то: красивая прямая линия, рамки, бегущая строка или бегущая картинка, кнопка и ещё кое что.

Когда все доработки будут сделаны, то есть сайт будет готов, можно переходить к третьему пункту — выводу сайта в интернет.

Перенос сайта со своего компьютера на виртуальный хостинг, то есть в интернет

Для этого нужно будет приобрести хостинг и домен. Что такое хостинг, можно посмотреть здесь, а доменное имя сайта — это адрес, по которому Ваш сайт будет определятся в интернете.

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

Во-первых, 1200 руб. в год — смешная цена, а во вторых гарантия того, что Ваш сайт будет доступен в любое время по всему миру, и оперативное решение возникающих проблем (а это возможно только на платных хостингах), того стоит.

Я рекомендую Вам хостинг Бегет. Это один из, если не самый лучший хостинг провайдер России.

Евгений Попов даже запустил проект «Хостинг-Нинзя», по выявлению лучшего хостера, и заключающийся в опросе пользователей.

В конце концов этот проект стал крупнейшим сервисом по подбору хостинга, и Бегет сразу занял, и твёрдо удерживает в нём первое место.

Цена хостинг + домен = 1620 руб. в год. Первый месяц(целый месяц!) — тестовый, то есть вначале покупается только домен за 120 руб в год, и только через месяц, если Вам понравилось, оплачиваются услуги хостинга.

Можно за год, можно ежемесячно. Но самое главное, я считаю — это постоянная доступность сайта, и круглосуточная моментальная и доброжелательная техподдержка.

А это уже встречается не часто, даже за более солидные деньги.

Расскажу пару запоминающихся случаев. Как то раз я набрав адрес своей админки, в ответ получил, не помню уж какую, ошибку. Представляете моё состояние?

Был сайт, и нет его. Позвонил в техподдержку хостинга, и через час выяснилось, что плагин BulletProf Security, после обновления, возможно и при моём неумелом участии, наштамповал новых файлов .htaccess, и закрыл тем самым всякий доступ на сайт.

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

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

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

В каком ещё хостинге Вам окажут такую помощь. Да ни в каком. Нет таких больше.

Вот на его то примере, я и покажу процесс появления Вашего сайта в интернете. Подробнее про Бегет и про то, как на нём зарегистрироваться и приобрести хостинг и домен читайте в статье Перевод сайта с Денвера на хостинг.

Читайте там до абзаца «А вот теперь тот способ переноса сайта…». Дальше расписан перевод сайта с Денвера, и Вам это не нужно.

Когда сайт зарегистрирован, проходим в панель управления хостинга.

Здесь нас интересует раздел Файловый менеджер, так как именно при его помощи мы сейчас перенесём всё, что сделано у нас на компьютере, в интернет.

Итак, открываем менеджер, и дважды щёлкаем по строке с доменным именем вашего сайта.

Откроется директория, в которой должна быть папка public.html. Вот в неё и будем переносить файлы с нашего компа.

Открываем папку public.html и щёлкнув по разделу Новая папка, создаём там две папки images и content. В папке content — папку images1. Короче, всё так-же, как на компьютере.

Затем находим Загрузить файлы, и щёлкнув по нему, откроем окно загрузки

Здесь заходим в Выбрать, и, в открывшемся поисковике, находим файлы и папки созданные на нашем компе, в директории site.

Первым делом выбираем файл index.html, и загружаем его на хост, нажав Загрузить в меню окна загрузки.

Затем точно таким-же образом загружаем файлы из папок images, images1, и content в одноимённые, созданные на хостинге.

Адреса страниц при этом изменятся так как в них добавиться доменное имя сайта, примерно так:

Для главной — Доменное имя/index.html
Для страниц — Доменное имя/content/straniza.html

Значит, все адреса в меню нужно будет менять. Для этого щёлкаем правой клавишей мыши по index.html, и в открывшемся меню выбираем Правка.

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

У меня, к сожалению, нет картинки с нашими файлами, но редактор менеджера отличается от Notepad++ только подсветкой синтаксиса, думаю разберётесь без картинки.

Если редактор менеджера кому-то не понравиться, можно скачать файл на компьютер, открыть в Notepad++, отредактировать (изменить адреса), удалить старый фал из менеджера, а отредактированный загрузить обратно.

После того, как адреса переписаны, нужно ещё задать права доступа к папкам. Для этого снова щёлкнув правой клавишей по строке с папкой, выбираем Изменить атрибуты.

В открывшемся окне, в поле Кодовое значение, проставляем 644 и жмём Изменить(что такое 644 и другие права доступа можно узнать в интернете)

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

Код блочного шаблона сайта можно изучить прочитав статью Код сайта HTML+CSS. Ссылка на статью чуть ниже в меню.

Да, ещё о том, как сделать этот сайт побольше.

Для этого в директории сайта в папке content создаются несколько папок для рубрик, каждая со своей папкой images.

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

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

Всё остальное делается так, как описано выше, но я настоятельно рекомендую, для больших сайтов использовать php, о чём я подробно рассказал в статье Код сайта на php. Ссылка на статью чуть ниже в меню.

Ну а если вас устраивает вариант показанный на этой странице, то надеюсь, уже завтра ваш сайт на чистом HTML, можно будет найти в интернете.

Каркас страницы, теги. Создаём файл. < < < В раздел > > > Валидация документа

Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

1. Add workspace folder — открывает меню выбора папки.
2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Сайт начинающего верстальщика</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav>
        На главную
      </nav>
    </header>
    <main>
      <article>
        День первый. Как я забыл покормить кота

        Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.

        Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
      </article>
      <aside>
        Здесь могла быть ваша реклама.
      </aside>
    </main>
    <footer>
      Подвал сайта
    </footer>
  </body>
</html>

style.css

Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

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

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

1. Установили и настроили редактор кода.
2. Создали рабочую папку и добавили туда файлы нашего проекта.
3. Научились редактировать и сохранять файлы с кодом.
4. Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее.

Внеклассное чтение

• Веб-разработка: с чего начать
• Какие бывают редакторы кода
• Что такое валидный код

Время на прочтение
13 мин

Количество просмотров 1.2M

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

Первым шагом давайте создадим простую структуру файлов для наших файлов.

• Создаем папку с названием нашего проекта, например Whitesquare.
• В ней создаем пустой файл index.html.
• В папке проекта создаем папку css с пустым файлом styles.css.
• В папке проекта создаем пустую папку images.

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

• Как будут нарезаться изображения?
• Какими будут основные стили?
• Какой макет у нас получится?

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

Общие изображения

На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

body {
	color: #8f8f8f;
	font: 12px Tahoma, sans-serif;
	background-color: #f8f8f8;
	border-top: 5px solid #7e7e7e;
	margin: 0;
}
input[type="text"] {
	background-color: #f3f3f3;
	border: 1px solid #e7e7e7;
	height: 30px;
	color: #b2b2b2;
	padding: 0 10px;
	vertical-align: top;
}
button {
	color: #fff;
	background-color: #29c5e6;
	border: none;
	height: 32px;
	font-family: 'Oswald', sans-serif;
}
p {
	margin: 20px 0;
}

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>Whitesquare</title>
	<link rel="stylesheet" href="css/styles.css" type="text/css">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,300" type="text/css">

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
</body>
</html>

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.

Макет

В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

Опишем это в теге body:

<body>
	<div id="wrapper">
		<header></header>
		<nav></nav>
		<div id="heading"></div>
		<aside></aside>
		<section></section>
	</div>
	<footer></footer>
</body>

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

#wrapper {
	max-width: 960px;
	margin: auto;
}
header {
	padding: 20px 0;
}

Логотип

Вставляем логотип в тег header:

<header>
	<a href="/"><img src="" alt="Whitesquare logo"></a>
</header>

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

<header>
…
<form name="search" action="#" method="get">
	<input type="text" name="q" placeholder="Search"><button type="submit">GO</button>
</form>
</header>

И стили выравнивания по правому краю для нее:

form[name="search"] {
	float: right;
}

Меню

Для отображения меню необходимо создать список со ссылками внутри тега nav:

<nav>
	<ul class="top-menu">
		<li><a href="/home/">HOME</a></li>
		<li class="active">ABOUT US</li>
		<li><a href="/services/">SERVICES</a></li>
		<li><a href="/partners/">PARTNERS</a></li>
		<li><a href="/customers/">CUSTOMERS</a></li>
		<li><a href="/projects/">PROJECTS</a></li>
		<li><a href="/careers/">CAREERS</a></li>
		<li><a href="/contact/">CONTACT</a></li>
	</ul>
</nav>

CSS стили для него будут следующие:

nav a {
	text-decoration: none;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	list-style-position: inside;
	font: 14px 'Oswald', sans-serif;
	padding: 10px;
}

.top-menu li {
	display: inline-block;
	padding: 10px 30px;
	margin: 0;
}

.top-menu li.active {
	background: #29c5e6;
	color: #fff;
}

.top-menu a {
	color: #b2b2b2;
}

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

<div id="heading">
	<h1>ABOUT US</h1>
</div>

Заголовок имеет следующие стили:

#heading {
	background: transparent url(../images/h1-bg.png);
	margin: 30px 0;
	padding-left: 20px;
}

h1 {
	display: inline-block;
	color: #7e7e7e;
	font: 40px/40px 'Oswald', sans-serif;
	background: url(../images/bg.png);
	margin: 0;
	padding: 0 10px;
}

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

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

aside {
	float: left;
	width: 250px;
}
section {
	margin-left: 280px;
	padding-bottom: 50px;
}

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

<aside>
<nav>
	<ul class="aside-menu">
		<li class="active">LOREM IPSUM</li>
		<li><a href="/donec/">DONEC TINCIDUNT LAOREET</a></li>
		<li><a href="/vestibulum/">VESTIBULUM ELIT</a></li>
		<li><a href="/etiam/">ETIAM PHARETRA</a></li>
		<li><a href="/phasellus/">PHASELLUS PLACERAT</a></li>
		<li><a href="/cras/">CRAS ET NISI VITAE ODIO</a></li>
	</ul>
</nav>
</aside>

И применяем к подменю следующие стили:

.aside-menu li {
	font-weight: 300;
	list-style-type: square;
	border-top: 1px solid #e7e7e7;
}

.aside-menu li:first-child {
	border: none;
}

.aside-menu li.active {
	color: #29c5e6;
}

.aside-menu a {
	color: #8f8f8f;
}

Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.

Контент сайдбара

В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

<h2>OUR OFFICES</h2>
<p><img src="images/sample.png" width="230" height="180" alt="Our offices"></p>

В стилях укажем шрифты, цвета и отступы:

aside > h2 {
	background: #29c5e6;
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	padding: 10px;
	margin: 30px 0 0 0;
}

aside > p {
	background: #f3f3f3;
	border: 1px solid #e7e7e7;
	padding: 10px;
	margin: 0;
}

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

Цитата

Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

<section>
<blockquote>
	<p>
		“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
	</p>
	<cite>John Doe, Lorem Ipsum</cite>
	</blockquote>
</section>

И применим для него стили:

blockquote {
	margin: 0;
	background: #29c5e6;
	padding: 10px 20px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

blockquote p {
	color: #fff;
	font-style: italic;
	font-size: 33px;
	margin: 0;
}

blockquote cite {
	display: block;
	font-size: 20px;
	font-style: normal;
	color: #1d8ea6;
	margin: 0;
	text-align: right;
}

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после

.



<p>Lorem ipsum dolor sit amet…</p>
<p>Donec vel nisl nibh…</p>
<p>Donec vel nisl nibh…</p>

<figure>
	<img src="images/sample.png" width="320" height="175" alt="">
</figure>
<figure>
	<img src="images/sample.png" width="320" height="175" alt="">
</figure>

figure {
	display: inline-block;
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

figure img {
	display: block;
	border: 1px solid #fff;
	outline: 1px solid #c9c9c9;
}

figure figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
}

figure figcaption span {
	display: block;
	font-size: 14px;
	color: #29c5e6;
}
section > figure + figure {
	margin-left: 28px;
}

<h2>OUR TEAM</h2>

section > h2 {
	background: #29c5e6;
	font: 30px 'Oswald', sans-serif;
	font-weight: 300;
	color: #fff;
	padding: 0 10px;
	margin: 30px 0 0 0;
}

<div class="team-row">
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>John Doe<span>ceo</span></figcaption>
	</figure>
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Saundra Pittsley<span>team leader</span></figcaption>
	</figure>
…
</div>
<div class="team-row">
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Ericka Nobriga<span>art director</span></figcaption>
	</figure>
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Cody Rousselle<span>senior ui designer</span></figcaption>
	</figure>
…
</div>

figure figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
}

figure div {
	font-size: 14px;
	color: #29c5e6;
}

.team-row figure {
	margin-top: 20px;
}

.team-row figure + figure {
	margin-left: 43px;
}

<footer>
	<div id="footer">
		<div id="twitter"></div> 
		<div id="sitemap"></div>
		<div id="social"></div>
		<div id="footer-logo"></div>
	</div>
</footer>

footer {
	background: #7e7e7e;
	color: #dbdbdb;
	font-size: 11px;
}

#footer {
	max-width: 960px;
	margin: auto;
	padding: 10px 0;
	height: 90px;
}

<div id="twitter">
	<h3>TWITTER FEED</h3>
	<time datetime="2012-10-23"><a href="#">23 oct</a></time>
<p>
	In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
</p>
</div>

footer h3 {
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	border-bottom: 1px solid #919191;
	margin: 0 0 10px 0;
}

#twitter time a {
	color: #b4aeae;
}

footer p {
	margin: 5px 0;
}

#twitter {
	float: left;
	width: 300px;
}

#twitter p {
	padding-right: 15px;
}

<div id="sitemap">
	<h3>SITEMAP</h3>
	<div>
		<a href="/home/">Home</a>
		<a href="/about/">About</a>
		<a href="/services/">Services</a>
	</div>
	<div>
		<a href="/partners/">Partners</a>
		<a href="/customers/">Support</a>
		<a href="/contact/">Contact</a>
	</div>
</div>

footer a {
	color: #dbdbdb;
}

#sitemap {
	width: 150px;
	float: left;
	margin-left: 20px;
	padding-right: 15px;
}

#sitemap div {
	display: inline-block;
}

#sitemap div + div {
	margin-left: 40px;
}

#sitemap a {
	display: block;
	text-decoration: none;
	font-size: 12px;
	margin-bottom: 5px;
}

#sitemap a:hover {
	text-decoration: underline;
}

<div id="social">
	<h3>SOCIAL NETWORKS</h3>
	<a href="http://twitter.com/" class="social-icon twitter"></a>
	<a href="http://facebook.com/" class="social-icon facebook"></a>
	<a href="http://plus.google.com/" class="social-icon google-plus"></a>
	<a href="http://vimeo.com/" class="social-icon-small vimeo"></a>
	<a href="http://youtube.com/" class="social-icon-small youtube"></a>
	<a href="http://flickr.com/" class="social-icon-small flickr"></a>
	<a href="http://instagram.com/" class="social-icon-small instagram"></a>
	<a href="/rss/" class="social-icon-small rss"></a>
</div>

#social {
	float: left;
	margin-left: 20px;
	width: 130px;
}

.social-icon {
	width: 30px;
	height: 30px;
	background: url(../images/social.png) no-repeat;
	display: inline-block;
	margin-right: 10px;
}

.social-icon-small  {
	width: 16px;
	height: 16px;
	background: url(../images/social-small.png) no-repeat;
	display: inline-block;
	margin: 5px 6px 0 0;
}

.twitter {
	background-position: 0 0;
}

.facebook {
	background-position: -30px 0;
}

.google-plus {
	background-position: -60px 0;
}

.vimeo {
	background-position: 0 0;
}

.youtube {
	background-position: -16px 0;
}

.flickr {
	background-position: -32px 0;
}

.instagram {
	background-position: -48px 0;
}

.rss {
	background-position: -64px 0;
}

<div id="footer-logo">
	<a href="/"><img src="" alt="Whitesquare logo"></a>
	<p>Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation</p>
</div>

#footer-logo {
	float: right;
	margin-top: 20px;
	font-size: 10px;
	text-align: right;
}

Оглавление

• 1. Написание HTML кода
• 2. Изменяем цвета
• 3. Изменяем шрифты
• 4. Добавляем навигацию
• 5. Украшаем ссылки
• 6. Добавляем горизонтальные линии
• 7. Подключаем внешний CSS
• Дальнейшее изучение

Полученная HTML страница с цветами и разметкой сделанной при
помощи CSS.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто
скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Давайте предположим, что данная страница будет одной из страниц
Веб сайта, состоящего из нескольких похожих страниц. Как мы и
договорились, эта страница будет содержать ссылки на другие
страницы нашего гипотетического сайта, уникальное содержимое и
подпись.

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

Возможно, вы видите некоторый черный текст на белом фоне, но это
зависит от конфигурации браузера. Для того чтобы страница выглядела
более стильно, мы можем сделать очень легко одну простую вещь —
добавить цвета. (Оставьте окно браузера открытым — мы к нему еще
вернемся)

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

body { color: purple }
body { background-color: #d8da3d }

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

В CSS
можно задавать цвета несколькими способами. Наш пример показывает
два из них: по имени (“purple”) и по шестнадцатиричному коду
(“#d8da3d”). Существует порядка 140 имен цветов и 16
шестнадцатиричных значений. Добавляя прикосновение стиля
объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие
разных элементов на странице. Давайте напишем шрифтом “Georgia”
весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том,
какие шрифты установлены на компьютерах посетителей, мы добавим
альтернативные способы отображения: если Georgia не найдена, то мы
будем использовать Times New Roman или Times, а если и он не
найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы
можем попробовать использовать Geneva, Arial или SunSans-Regular
поскольку они очень похожи по начертанию, ну а если у пользователя
нет таких шрифтов, то браузер может выбрать любой другой шрифт без
засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то
у вас должны быть разные шрифты в заголовках и в тексте.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки
в нем не работают, потому что наш “сайт” пока что состоит только из
одной страницы, но это неважно в данный момент. Конечно же, на
настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или
“верстка” на странице изучая CSS, вы найдете несколько готовых к
использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список,
вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и
переместим элементы налево, где были маркеры. Так же мы нарисуем
каждый элемент списка на белом фоне в своем черном квадрате (зачем?
просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что
давайте добавим и это свойство: синими будут ссылки которые
пользователь еще не смотрел, пурпурными — те которые он уже
посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

Теперь наше оформление закончено. Давайте вынесем таблицу стилей
в отдельный файл, чтобы остальные файлы могли использовать ту же
самую таблицу стилей, что и первый файл.

ШАГ 7: внешний CSS

Сейчас у нас есть HTML файл со встроенной таблицей стилей. Но
если наш сайт будет разрастаться, возможно, нам потребуется
множество страниц, использующих один и тот же стиль оформления.
Есть метод получше, чем вставка таблицы в каждую страницу — мы
можем вынести стили в отдельный файл, на который будут указывать
все страницы.

Для создания отдельного файла таблицы стилей нам нужен другой
пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню
«Файл» в редакторе , для создания пустого файла. (Если вы
используете TextEdit, не забудьте сделать его текстовым снова,
используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из
HTML в это новое окно. Не копируйте элементы разметки <style>
и </style>. Они принадлежат HTML коду, а не CSS. В новом окне
у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той
же директории/папке что и файл mypage.html, и сохраните таблицу
стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.

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

Следующий шаг — положить оба файла mypage.html и mystyle.css на
ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…)
Как положить файлы на сайт зависит от вашего интернет провайдера.

В этом уроке мы сделаем дизайн и код нашего первого веб-сайта простым и лёгким способом. Урок рассчитан на новичков с надеждой дать вам инструменты для написания собственных сайтов согласно принятым стандартам! Начало новой недели; возможно, время получить новый навык!

Шаг 1. Что мы делаем

Делаем дизайн и кодируем этот очень простой веб-сайт. Не совсем эффектный дизайн, но очень эффективный для обучения основным методам кодирования.

Шаг 2 — Подготовка

Что потребуется

Предполагается, что вы никогда не кодировали сайт раньше или делали это только пару раз. Тем не менее, для выполнения урока вам понадобится следующее:

• Photoshop или аналогичный редактор изображений
• Редактор кода (подробнее об этом позже)
• Базовое понимание того, как работает html, базовый синтаксис и теги. Для ускорения ознакомьтесь с официальным ресурсом w3 Schools, где вы найдёте все основы, необходимые для урока.
• Ditto для css, вы должны понимать, как работают селекторы и быть знакомы с основными свойствами. Опять же, смотрите лучший ресурс w3 Schools
• Очевидно, браузер. Я использую Firefox и вы, если хотите, чтобы ваш сайт повторял мои скриншоты на каждом шаге 

Макет

Мы создадим очень простой веб-сайт с четырьмя основными элементами: header, content, sidebar и footer, макет будет выглядеть примерно так:

Хорошо бы зафиксировать макет вашего дизайна, прежде чем начнете, на бумаге или в Photoshop, чтобы оптимизировать процесс и организовать свои идеи.

Шаг 3 — Начало работы

Откройте чистый новый документ Photoshop, скажем, 1000px на 1200px. Мы всегда сможем его подрезать. Я делаю его довольно узким, потому что работаю на ноутбуке, но вы не стесняйтесь, если место позволяет.  

Здесь я не буду спорить о разрешениях экрана и оптимальной ширине сайта. Вам нужно знать, что content нашей страницы будет шириной 800 пикселей, и всё. Итак, в нашем документе шириной 1000px мы будем перетаскивать направляющие по меткам 100 и 900px, чтобы установить ширину. У нашего дизайна есть sidebar и я решила сделать её на треть ширины страницы. Две трети от 800 составляет около 530, поэтому давайте добавим еще одну направляющую на 630px. Установим приятный цвет фона # ebe8e8.

Шаг 4 — Header

Возьмите инструмент rectangle и нарисуйте большой голубой прямоугольник в верхней части документа, мой — высоты около 170px , а цвет — 23b6eb. Затем нарисуем худенький тёмно-серый bar  в самой верхней части страницы, я использовал # 5d5a5a

Шаг 5 — Highlight

Теперь мы добавим немного светового эффекта в синюю область header . Создайте обтравочную маску над синим слоем, затем возьмите большую мягкую кисть (шириной 400 пикселей) и выберите цвет немного светлее, чем синий фон.

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

Шаг 6 — Navigation Bar

Теперь мы добавим еще один bar к нижней части синего, он будет серым с наложением градиента, так что точность не имеет большого значения.

На панели стилей слоев добавьте градиент от # e2e3e4 до #bebdbd на 90 градусов.

Шаг 7 — Footer

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

Step 8 — Logo

Задний план

Для логотипа мы нарисуем прямоугольник, добавим ещё одну опорную точку и перетащим её в сторону. Чтобы избавиться от округления, нажмите на точку правой кнопкой мыши.

Затем добавьте стили слоя: наложение градиента и 1px штрих: градиент от # aec457 до # cdf399

Текст

Теперь текст: большой и полужирный.

• Шрифт: Myriad Pro
• Стиль: Bold
• Размер: 60px
• Цвет: #36809a

Для придания глубины добавьте внутреннюю тень:

Step 9 — Слоган

Затем я просто добавила короткую строку:

• Font: Arial
• Style: Bold
• Size: 30pt
• Color: #e4dfdf

Шаг 10 — Навигация

Пишите ссылки хорошо и крупно, расставьте и разместите их равномерно.

• Font: Arial
• Style: Bold
• Size: 30pt
• Color: #676666

Шаг 11 — Основное содержимое

Время вставлять макет контента. Я использовала размер заголовка h2, а меньший будет h3 ссылкой на html ipsum.

Сделайте текстовые поля шириной около 2/3 страницы. Стили текста:

h2 Header:

• Font: Arial
• Style: Bold
• Size: 36pt
• Color: #0e5d7a

h3 Header:

• Font: Arial
• Style: Bold
• Size: 24pt
• Color: #444444

Paragraph:

• Font: Arial
• Style: Normal
• Size: 14pt
• Color: #595858

Данные в разделе «latest updates» будут помещены в маленький тег, шрифт такой же, как в абзаце, но 12pt. Я дважды копирую новость из лени.

Step 12 — Sidebar

Ссылки

Затем нарисуем тощий прямоугольник над областью sidebar, цвет # d4d6d3, с 1px строкой #bebdbd

Заполните sidebar фиктивным контентом с иконками, которые я тут использовала. Шрифты такие:

h3 Headers:

• Font: Arial
• Style: Normal
• Size: 24pt
• Color: #044055

Элементы списка:

• Font: Arial
• Style: Normal
• Size: 18/14pt
• Color: #373737

Кнопка

Затем мы добавим кнопку «join our team» под ссылками участников. Кнопка — просто прямоугольник с градиентом, что и у логотипа и строкой 1px цвет c7c7c7. Для текста:

• Font: Arial
• Style: Normal
• Size: 24pt
• Color: #434343

Шаг 13 — Footer

Заканчивая макет, добавьте немного фиктивного текста или что хотите, к нижнему колонтитулу. Шрифт:

• Font: Arial
• Style: Normal
• Size: 14pt
• Color: #e0e2e2

С дизайном страницы всё, ничего особенного, но его простота поможет вам следовать за остальной частью процесса.

Нарезка PSD

Теперь, когда у нас есть прекрасный PSD, пришло время разбить его на части, которые будем использовать. Идея здесь в том, чтобы использовать как можно меньше изображений как можно меньшего размера. Okay, начнём с header. Мы хотим растянуть его на весь экран, независимо от его ширины. Для этого мы собираемся вырезать маленький кусочек header и повторять его по экрану, сколько понадобится.

Шаг 14 — The Slice Tool

Может, вам не приходилось использовать slice tool раньше, но это действительно очень просто. Это позволяет вам нарезать файл в крошечные кусочки, которые можно экспортировать в Интернете.

Header

Итак, давайте вырежем небольшой кусочек нашего header. Нажмите и перетащите, чтобы создать срез так же, как инструмент прямоугольной области выделения. Будьте осторожны, чтобы не срезать со стороны изображения, а то не получите ни одного highlight.

Теперь, когда у нас есть эта полоска, мы можем повторить её по оси X. Однако highlighted область не повторяется, поэтому мы должны всё это вырезать  . Нарежьте часть header между двумя направляющими, на ширину заявленных 800px .

Footer

Для нарезки footer повторите тот же процесс с узким фрагментом footer.

Всё остальное

Нам понадобятся несколько изображений: иконки «subscribe» и кнопка «join our team».

Поскольку значки и логотип имеют неправильную форму, мы сохраним их как прозрачные .png-файлы, поэтому мы вернемся и возьмём их отдельно.

Итак, чтобы нарезать кнопку, мы можем использовать ту же технику, что с header и footer, но на этот раз нам нужен только один тонкий срез. Когда делаете срез, не забудьте включить 1px строку (добавим позже), вам может понадобиться увеличить масштаб.

Шаг 15 — Экспорт в интернет  

Теперь, когда у нас есть снимки, давайте сохраним их как оптимизированные jpeg и поместим их в нужное место.

Перейдите в меню File/Save for web и устройств … В появившемся окне, удерживая клавишу shift, щёлкните, чтобы выбрать каждый фрагмент (опять же, можете увеличить масштаб). Убедитесь, что в раскрывающемся меню «preset» установлено значение JPEG-High, снимите флажок «convert to srgb» и нажмите «save»

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

Убедитесь, что установлено значение «images only», «default settings» и «selected slices only.»

Затем проверьте место, где были сохранены ваши файлы. Вместо поиска отдельных images, найдите папку, помеченную «images», где будут все ваши изображения. Компьютер даст каждому изображению номер, который не очень нужен. Убедитесь, что у вас правильные изображения, затем назовите их соответствующим образом.

Теперь вернёмся к этим надоедливым иконкам и логотипу. Обязательно скройте слои фона, затем снова вытащите slice tool и вырежьте красивые квадратики вокруг каждого значка и логотипа.

Теперь мы проходим ту же процедуру экспорта в web, что и в случае с jpeg, только на этот раз обязательно выберите PNG-24 из выпадающего меню «preset» и отметьте флажком «transparency». Переименуйте и эти файлы и папка с изображениями будет выглядеть примерно так:

Вот и всё, мы закончили работу над нашим PSD и у нас есть все нужные изображения. Пока не закрывайте Photoshop, нам всё равно нужно выбирать цвета, шрифты, размеры и прочее.

Часть 3 — HTML

Шаг 16 — Начало работы

Хорошо, займёмся html. Первое, что вам понадобится, это какой-нибудь редактор кода. Это из области личных предпочтений,
Но я рекомендую начать с бесплатного. Для Mac и ПК я настоятельно рекомендую Komodo в качестве первого редактора кода. Он имеет множество функций, которые идеально подходят для любых пользователей.
Одна из лучших особенностей — синтаксическая проверка, похожая на проверку правописания в текстовых процессорах, она выявит и объяснит небольшие ошибки.
Для ПК есть гораздо больше опций, ни одна из которых мне не знакома, но есть статья Andrew Burgess 22 Neat Code Editors for Windows

В этом уроке мы будем использовать редактор Komodo, но принципы одинаковы в каждом.

Шаг 17 — Настройка папок

Во-первых, нам нужно создать место хранения всех файлов, связанных с нашим сайтом. Создайте папку сайта, моя называется «MySite», внутри этой папки создайте другую папку, содержащую только что вырезанные изображения.
Назовите её «images». Теперь мы открываем редактор кода, эта часть будет зависеть от того, какой software  вы используете:
Если это Komodo, выберите «create new project»  и сохраните/переместите файл .kpf в папку «MySite» . Когда вы открываете файл, браузер файлов от Komodo должен отображать содержимое папки.
Затем щёлкните правой кнопкой мыши на файле проекта и выберите «add» и «new file». В появившемся окне выберите «html (xhtml)» и назовите файл «index.html».

Если у вас другой редактор, процесс будет схожим, но основные моменты остаются теми же: вам нужно создать файл index.html, и он должен находиться в папке «MySite» вместе с папкой с изображениями.

Шаг 18 — Настройка файла index.html

Первое, что нам нужно сделать, это объявить тип документа, кодировку символов и создать <html> теги. Во многих редакторах это должно выглядеть примерно так:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</html>

Между тегами html нам нужен раздел «head», который содержит всю важную информацию о сайте, которая не отображается внутри body сайта.
На этом этапе всё его содержимое, это заголовок страницы, например:

<head>
  <title>MySite</title>
</head>

Ниже head, логически, мы добавляем body, также заключённое в <html> тегах . Хорошо, теперь мы имеем:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title>MySite</title>
  </head>
  <body>
     <!-- content goes here -->
  </body>
</html>

Это базовая настройка страницы, вы можете сохранить этот штамп для будущего использования.
Помните, мы говорили, что у нас есть разделы header, content, sidebar и footer?
Хорошо, теперь каждый из них будет заключён в свой <div> и ему будет присвоен соответствующий id.

<body>
    <div id="header">
    </div><!--end header -->
    
    <div id="content">
    </div><!--end content-->
    
    <div id="sidebar">
    </div><!--end sidebar-->
   
    <div id="footer">
    </div><!--end footer-->
    
</body>

ПРИМЕЧАНИЕ. Хорошо бы, особенно при первом запуске, добавлять комментарии в каждом </div>, чтобы отслеживать иерархию.

Теперь давайте еще раз взглянем на наш psd — мы хотим, чтобы срезы footer и header бесконечно повторялись по сторонам?
Нам понадобится способ растянуть эти элементы, но в то же время чтобы основной контент («content» «sidebar»)
оставался в пределах заданной ширины в центре экрана.

Чтобы справиться с этим, нам нужен большой div, содержащий расширяющиеся элементы, и div под основное содержимое.
Мы должны заметить, что текст footer также центрирован, поэтому нам нужно повторить тот же процесс для footer. 
Чтобы сделать это, нам нужно обернуть несколько divs теми, которые у нас уже есть.   У нас есть два основных раздела, main section и footer .
Каждый из них будет содержаться внутри одного большого неуправляемого div неопределённой ширины,
и содержимое каждого из них будет заключено в отдельные div, которые определяют ширину и центрирование.

Мы хотим использовать те же правила для main и footer содержимого, поэтому вместо (или в дополнение к) id’s они будут иметь определённые классы,
что означает, что вы можете создать набор правил для определения всех div с тем же классом.

Таким образом, основное содержимое будет заключено в div с id «main»  а нижний колонтитул будет заключен в div с id «footer.» Вот схема для наглядности:

И разметка будет выглядеть так:

<body>
    <div id="main">
        <div id="header">
        </div><!--end header -->
    
        <div id="content">
        </div><!--end content-->
    
        <div id="sidebar">
        </div><!--end sidebar-->
        
    </div><!--end main--> 
   
    <div id="footer">
    </div><!--end footer-->
    
</body>

Теперь мы обернём каждый раздел в контейнере div классом «container.»

 
<div id="main">
    <div class="container">
         <div id="header">
         </div><!--end header -->
    
         <div id="content">
         </div><!--end content-->
    
         <div id="sidebar">
         </div><!--end sidebar-->
            
    </div><!--end main container--> 
</div><!--end main-->
        
<div id="footer">
    <div class="container">
    </div><!--end footer container--> 
</div><!--end footer-->

Я знаю, что все эти упаковочные divs кажутся лишними, но они пригодятся, когда мы перейдём к стилям страницы.

Шаг 19 — Добавление содержимого

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

Header

На самом верху находится header, и внутри него у нас есть 3 основных элемента: логотип, слоган и меню навигации.
Итак, давайте создадим div для нашего header и чтобы всё было чисто, поместим логотип и tagline в свои собственные div.

 
<div id="header">
	<div id="logo">
    	</div>
	<div id="tagline">
    	</div>
</div><!--end header -->

Поскольку это самый важный заголовок страницы, логотип войдёт в <h1> тег. У нас есть больше опций для слогана, в зависимости от того, насколько они важны для вашего сайта. В этом случае я назначу <h3> тег.

Для навигации стандартом является размещение элементов меню в unordered list, причём каждый элемент списка содержит тег привязки.
Итак, мы имеем:

<div id="header">
    <div id="logo">
   	 <h1>Logo</h1>
    </div>
    <div id="tagline">
    	<h3>And a little tagline, too.</h3>
    </div>
    <ul id="menu">
    	<li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div><!--end header -->

ПРИМЕЧАНИЕ: значение «href» в тегах привязки обычно указывает на ссылку, но в этом случае символ фунта означает «link to top of page.»

Основное содержимое

Глядя на main content область, у нас есть 4 разных стиля: большой заголовок сверху, меньший,
и ещё меньший заголовок для новостей, плюс несколько абзацев и небольшие сообщения новостей.
Мы будем называть их <h2>, <h3>, <h4>, <p> и <small> соответственно. Теперь это просто вопрос вставки в ваш контент, что не очень весело, но довольно легко.

<div id="content">
        <h2>Lorem ipsum, Dolor sit</h2>
    	<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
    	<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
    		Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. 
   	    	Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.  </p>
    	<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
   	    	Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit, 
		gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
    <div id="news">
    	<h3>Latest Updates</h3>
    	<h4>Vestibulum id nulla eu sapien pellentesque</h4>
    	<small>June 1, 2009</small>
    	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
        	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
   	    	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
   	<h4>Vestibulum id nulla eu sapien pellentesque</h4>
   	<small>June 1, 2009</small>
   	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
   	   	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
      	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
    </div><!--end news-->
</div><!--end content-->

Я добавлю теги привязки со значением «Read More» в конце каждого сообщения.

Sidebar

Возьмёмся за sidebar. Боковая панель имеет три элемента, каждый из которых будет обёрнут в свой собственный div.
Каждый div будет содержать <h3> header и unordered list и каждый элемент списка будет содержать тег привязки.
Итак, начните копировать и вставлять текст, он должен выглядеть примерно так:

<div id="sidebar">
                <div id="subscribe">
                    <h3>Subscribe!</h3>
                    <ul>
                        <li><a href="#">Subscribe via RSS</a></li>
                        <li><a href="#">Get Email Updates</a></li>
                        <li><a href="#">Follow us on Twitter</a></li>
                    </ul>
                </div>
                <div id="popular">
                    <h3>Popular Items</h3>
                    <ul>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Proin tempor erat sit tene</a></li>
                    </ul>
                </div>
                <div id="contributors">
                    <h3>Contributors</h3>
                    <ul>
                        <li><a href="#">John Smith, freelance writer</a></li>
                        <li><a href="#">Jack McCoy, designer</a></li>
                        <li><a href="#">Lenny Briscoe, editor</a></li>
                        <li><a href="#">John Smith, martketing</a></li>
                    </ul>
                    <a href="#">Join Our Team</a> 
                </div>
            </div><!--end sidebar-->

Footer

Мы можем поставить footer перед проверкой его в браузере, это займет всего секунду.
Стоит отметить, что любые символы, которые будут в вашем тексте, имеют специальные коды в html, например, символ авторского права кодируется как ©

<div id="footer">
        <div class="container">
            <p>Copyright © 2009  MySite <br />
            All Rights Reserved</p>
        </div><!--end footer container--> 
    </div><!--end footer-->

Давайте посмотрим по разметке:

приятно смотрится, нет? Да, не совсем. Но содержит всю необходимую нам информацию и готов к назначению стилей.

Часть четыре — CSS

Шаг 20 — Добавление CSS

Вот здесь и происходит волшебство.
Создайте в папке сайта новый файл «style.css».
Теперь нам нужно указать браузеру, что этот файл css принадлежит нашему index.html-файлу, поэтому мы связываем его тегом «link href». Поместите эту строку кода в раздел <head> под заголовком.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Теперь html-файл может получить доступ к вашему css-файлу, поэтому любые изменения, внесенные в css, повлияют на html-файл.

Шаг 21 — Основная очистка

На нашем сайте есть пара уродливых вещей, которые мы можем исправить сразу: мы хотим изменить шрифт по умолчанию, мы хотим, чтобы контент был 800px ширины и центрированным и мы хотим избавиться от всех этих пробелов между элементами.

Сначала мы выберем шрифт для всего текста в body страницы по умолчанию:

body { font-family: Arial, Helvetica, sans-serif; }

Далее определим ширину и поля нашего класса «container» .

.container {
    width: 800px;
    margin: 0 auto; 
}

свойство margin: 0 auto является сокращением, означающим, что в верхней части нет поля и что он будет автоматически центрирован по горизонтали.
Теперь посмотрите.

Намного лучше. Следующий шаг попортит внешний вид, но держитесь за мной.

CSS reset

Во всех браузерах padding и margin стоят по умолчанию для каждого элемента, что делает страницы красивыми без стилей, но нам они мешают назначить свои стили.

Чтобы избавиться от всех этих грязных полей, мы сделаем очень простой сброс css, всего лишь правило, которое очистит от заполнения по умолчанию padding и margins. Поместите это в начало вашего файла css:

'
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

теперь давайте посмотрим:

Шаг 22 — Header

Ладно,  всё собрано и готово к нашим манипуляциям! Начинаем добавлять собственные стили, опять же, сверху вниз.
Давайте сначала разберем сложную часть: настройку фоновых изображений для header.

Мы будем играть с повторяющимся обрезком из header. Повторяющееся изображение будет находиться внутри «main» div неопределённой ширины. Нам нужно сообщить браузеру, где находится изображение, и что с ним делать (повторить, не повторить), поэтому мы используем свойство «background» и указываем путь к изображению или ‘url’: в нашем случае оно находится в папке images, поэтому пишем:

 
url (images/header_slice.jpg)

и уточняем, чтобы он повторялся по оси x:

#main {
    background: url(images/header_slice.jpg) repeat-x; 
}

Проверьте:

удивительно, правда? Попробуйте растянуть ваш браузер, он просто тянется и тянется … Но мы всё ещё не видим выделения на синей полосе и поскольку мы вырезаем часть заголовка размером 800px, мы можем поместить её в наш «container» div. Проблема в том, что у нас их две (одна для main div, одна для footer), поэтому нам нужно указать, чтобы div с классом «container» находился внутри div с id  «main»
установить изображение так же, как и раньше, но на этот раз нам нужно указать «no-repeat»:

#main .container {
    background: url(images/header.jpg) no-repeat; 
}

Посмотрите:

отлично! Выделение сидит именно там, где мы этого хотим, и вписываемся в повторяющиеся стороны.

Шаг 23 — Замена изображения логотипа

Наш логотип довольно сложный, правда? У нас фоновое изображение и не-html-шрифт с внутренней тенью. Мы не можем сделать это в css, поэтому мы должны заменить текст на изображение.
«Почему бы просто не поместить изображение вместо строки <h1>»?
можете вы спросить. Ну, в Интернете <h1> header  — это в основном «имя» вашей страницы, и важные, мощные роботы (google) сканируют это свойство при поиске ключевых слов. Если у вас нет <h1> header, ваш сайт можно назвать kalamazoo, но он не появится в поиске точно этого слова.
Существуют и другие методы, которые имеют свои преимущества (см. here, особенно технику № 8), но этот наиболее подходящий в этой ситуации.

Поэтому, решая проблему, мы используем хитрость под названием «замена образа», чтобы использовать изображение, сохраняя <h1> header в разметке. Добавим изображение в качестве фона в #logo div.

#logo {
    background: url(images/logo.png) no-repeat;
}

Если вы посмотрите в браузер, увидите, что наш логотип был расколот пополам. Это связано с тем, что мы не дали ему места, мы можем решить это, указав размеры изображения:

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px; 
}

Лучше, но у нас по-прежнему есть оригинальный <h1> текст, но мы можем это исправить!  Всё, что нужно, это установить значение text-indent на что-то смешное, например -9999px вне страницы, так что никто не увидит её, кроме роботов поисковой системы.

#logo h1 {
    text-indent: -9999px; 
}

Теперь посмотрим, наш логотип с радостью сидит там, где был <h1> текст. Но это всё выглядит довольно плохо, всё теснится наверху. Когда мы хотим переместить элемент из его исходного положения на страницу, мы можем использовать свойства padding и margin. Мы собираемся попробовать оба,чтобы увидеть разницу

Во-первых, попробуем добавить margin в начало тега h1. Мы узнаем, как много можно сделать с помощью линейки в Photoshop.

#logo h1 {
    text-indent: -9999px;
    margin-top: 40px; 
}

Oops! Мы переместили логотип, но вместе со страницей! Попробуем вместо этого отредактировать padding :

#logo h1 {
    text-indent: -9999px;
    padding-top: 40px; 
}

Теперь взгляните, эта чёртова штука вернулась туда, откуда взялась! Это связано с тем, что свойство margin перемещает весь элемент, но padding перемещают только содержимое элемента, оставляя фон на своём месте. Таким образом, если бы экран был, скажем, шириной 19999px, мы бы увидели, что наш <h1> header  опустился на 40px, но это не то, к чему мы стремились.

Итак, чтобы переместить фоновое изображение логотипа, нам нужно переместить div над ним, потому что весь div-логотип является «content» заголовка div. попробуем:

#logo h1 {
    text-indent: -9999px;
}

#header {
    padding-top: 40px; 
}

Намного лучше! Теперь логотип выглядит так же, как в PSD, в нужном месте. Если бы мы могли исправить этот слоган …

Шаг 24 — Плавающий слоган

Итак, теперь нам нужно найти способ вытащить этот слоган к логотипу. Проблема в том, что элементы html располагаются вертикально, подталкивая друг друга вверх и вниз по странице.
У нас есть несколько вариантов поправок, но я собираюсь использовать float, которые немного сложны, но очень полезны, когда они есть.

Okay, что за float? Ну, это сложно. В основном, когда вы указываете элементу ‘float’, он прикрепляется к стороне страницы или элемента, а также вынимает его из обычного «потока» страницы. Задумались? Давайте покажу.

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px;
    float: left; 
}

Ну, как вы видите, нам удалось вывести слоган в сторону, но вместе с меню навигации.
Я думаю об этом так: нормальный элемент (например, div или h1 header или изображение), даже если он совсем маленький, незаметно занимает всё пространство сбоку от него, как одна большая длинная горизонтальная планка.

Вот почему все остальные элементы остаются под ним, вместо того, чтобы уживаться рядом. Когда вы float элемент, вы убираете всё дополнительное пространство в сторону и ограничиваете его только тем местом, которое оно занимает непосредственно, позволяя другим элементам обтекать его.
Теперь, когда вы знаете, как работают floats, как мы можем исправить нынешнюю ситуацию? Во-первых, мы должны изолировать слоган в свой собственный float, так чтобы он лежал вне обычного «потока» страницы:

#tagline {
    float: left; 
}

Посмотрите в браузере и посмотрите на это, мы сделали хуже. Теперь пункты меню обернулись вокруг нашего слогана! Нам нужно восстановить нормальный поток документа после floated элементов. Есть несколько способов, но мы используем самый прямой метод. Вернитесь в свой файл index.html и добавьте новый div под нашими floated div. Вместо класса или id к этому div, мы собираемся назначить ему стиль (да, это встроенный стиль, но только очень маленький) clear: both.

<div id="header">
    <div id="logo">
    	<h1>Logo</h1>
    </div>
    <div id="tagline">
    	<h3>And a little tagline, too.</h3>
    </div>

<div style="clear:both"></div>

Сохраните свой html-файл и проверьте в браузере: вы должны увидеть слоган рядом с логотипом, а меню ниже. Теперь нам осталось превратить этот слоган в форму и поместить туда, где ему надлежит быть. Начнем с копирования стилей шрифтов из Photoshop:

#tagline h3 {font-size: 30px; color: #e4dfdf; }

и добавьте немного padding сверху и слева:

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px; 
}

посмотрите: мы куда-то продвинулись!

Шаг 25 — Панель навигации

Теперь нам нужно расположить меню навигации по прямой. Во-первых, определим стиль шрифта, чтобы соответственно всё расположить. Когда вы набираете шрифт в списке тегов, вам нужно указать не только элементы списка, но и anchors внутри них. Мы указываем наш конкретный unordered list, чтобы справиться с другими отдельно. Нам также нужно избавиться от подчеркиваний и bullet points.

ul#menu {
    list-style: none; 
}

ul#menu li a {
    font-size: 30px;
    color: #676666;
    text-decoration: none; 
}

Отлично, теперь нам нужно найти способ поставить все наши ссылки подряд. Как? Больше Floats! Мы собираемся сместить элементы списка влево, чтобы каждый элемент прилипал к тому, который находится рядом с ним.

ul#menu li {
    float: left; 
}

Если вы посмотрите в браузере, заметите ту же самую проблему, с которой мы сталкивались ранее с floated элементами: другие элементы обтекают их. Как и раньше, мы можем вставить наш clearing div сразу после unordered list.

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>
</div><!--end header -->

Все элементы списка теперь должны быть в строке, мы просто должны выделить их и немного сдвинуть меню. Измерив расстояние от нижней части логотипа до верхней части текста меню, мы получаем около 55px.
Первый элемент около 30px слева от направляющей, поэтому установим заполнение элемента списка в 30px слева.

ul#menu {
    list-style: none;
    padding-top: 55px; 
}

ul#menu li {
    float: left;
    padding-left: 30px; 
}

Нам нужно больше пространства между элементами, если мы измерить в psd, это около 105px, но поскольку у нас уже есть 30px padding между ними, нам нужно только добавить 75px padding справа от каждого элемента.

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px; 
}

Полюбуйтесь нашей работой:

Отлично! Наше меню такое же, как в psd. Переходим к content!

Шаг 26 — Content

Верхняя область

Первое — установим все шрифты, чтобы видеть интервал, с которым надо работать. Подключите информацию о шрифтах из Photoshop:

#content h2 {
    font-size: 36px;
    color: #015878; 
}

#content h3 {
    font-size: 24px;
    color: #444444;
}

#content h4 {
    font-size: 18px;
    color: #373737;
    font-weight: normal; 
}

#content p {
    font-size: 14px;
    color: #595858; 
}

#content small {
    font-size: 12px;
    color: #373737; 
}

#content a {
    color: #0f6c8d;
    font-weight: bold;
    text-decoration: none; 
}

Получим нечто подобное:

Вы можете заметить, что мы ещё не установили фоновый цвет для области содержимого. Это потому… Я забыла. Тогда сделаем сейчас, так?

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ebe8e8; 
}

Хорошо, теперь мы готовы добавить padding к пространству снаружи.
Во-первых, расстояние от нижней части nav menu до верхней части заголовка h2 составляет около 25px:

#content h2 {
    font-size: 36px;
    color: #015878;
    padding-top: 25px; 
}

Затем расстояние от нижней части заголовка h2 до верхнего края заголовка h3 также составляет около 25px, поэтому повторите в основном тот же код:

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px; 
}

Теперь расстояние от нижней части заголовка h3 до вершины первого абзаца составляет около 45px, но если мы установим padding-top до 40px, мы получим 40px padding между этими абзацами. Так как параграфы расположены друг от друга только на расстоянии 20px, нам нужно разбить padding сверху и снизу: добавьте 20px padding к нижней части заголовка h3 и 20px padding в начало абзаца.

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px;
    padding-bottom: 20px; 
}

#content p {
    font-size: 14px;
    color: #595858;
    padding-top: 20px; 
}

Проверьте результат:

Новая секция

Расстояние между разделами немного отличается в разделе новостей, в первую очередь, нам нужно немного сжать его. Также слишком много padding под заголовком h3, так что немного сократим.
Нам также нужно уменьшить padding над параграфами и добавить padding между двумя новостями.

#news {
    padding-top: 10px; 
}

#news h3 {
    padding-bottom: 10px; 
}

#news p {
    padding-top: 10px;
    padding-bottom: 14px; 
}

Будет выглядеть так:

Теперь нам нужно получить sidebar в стороне и мы закончим основной контент.

Шаг 27 — Располагаем Sidebar

Во-первых, нужно установить ширину секции контента:

#content {
    width: 510px; 
}

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

#content {
    width: 510px;
    float: left; 
}

#sidebar {
    float: left; 
}

В своём браузере вы заметите, что текст footer обернулся вокруг sidebar. Мы знаем, как справиться с этой проблемой: просто нужно добавить наш небольшой clearing div в разметку:

<div id="contributors">
	<h3>Contributors</h3>
	<ul>
		<li><a href="#">John Smith, freelance writer</a></li>
		<li><a href="#">Jack McCoy, designer</a></li>
		<li><a href="#">Lenny Briscoe, editor</a></li>
		<li><a href="#">John Smith, martketing</a></li>
	</ul>
	<a href="#">Join Our Team</a> 
</div>
</div><!--end sidebar-->
<div style="clear:both"></div>

</div><!--end main container--> 

</div><!--end main-->

Хорошо, следующий шаг — просто скопировать стили шрифта из нашего psd для sidebar:

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

Помните, что для стиля шрифта ссылок в unordered list, нам нужно обратиться к anchor тегу, а не к самому элементу списка.
Теперь, если мы посмотрим на наш psd, заметим, что текст для элементов списка в виджете «subscribe» немного больше, чем в остальной части sidebar. Для исправления нам нужно настроить таргетинг на конкретный unordered list, поэтому добавим значение id в subscribe ul в нашей разметке:

<ul id="subscribe">
	<li><a href="#">Subscribe via RSS</a></li>
	<li><a href="#">Get Email Updates</a></li>
	<li><a href="#">Follow us on Twitter</a></li>
</ul>

Тогда мы можем обратиться к ней в css:

ul#subscribe li a {
    font-size: 18px; 
}

Теперь делаем стиль sidebar: добавьте отступы, поля, фон и границы. Сначала давайте избавимся от bullets:

#sidebar ul {
    list-style: none; 
}

ОК, пока ещё всё не в том месте, поэтому давайте исправим это, добавив margins вверх и влево. Измеряя в вашем psd, измерьте, где начинается граница sidebar .

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
}

Теперь для фона: под свойством margin-top добавьте свойства background и border:

background: #d4d6d3;
border: 1px solid #BEBDBD;

Затем мы добавим 15 px padding со всех сторон:

padding: 15px;

А затем добавим padding в стили текста, чтобы выделить наше меню:

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 15px;
}

#sidebar ul {
    list-style: none;
    padding-bottom: 25px;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

ul#subscribe li {
    padding-bottom: 5px; 
}

ul#subscribe li a {
    font-size: 18px; 
}

Наш sidebar уже выглядит почти идеально, нам просто нужно добавить значки в разделе подписки и создать тег «join us» .

Хорошо, поработаем с иконками. Добавление изображений в unordered list может показаться запутанным, но если вы делаете шаг за шагом, толк будет. Но это немного утомительно.
Для начала нам нужно оставить места для значков. Мы установим их как фоновые изображения, поэтому, если мы используем свойство padding для перемещения элементов списка по битам, они не будут затронуты. Значки около 26px в ширину, поэтому мы добавим padding  слева от элементов списка:

ul#subscribe li {
    padding-bottom: 5px;
    padding-left: 30px; 
}

Теперь нужно настроить target на каждый отдельный элемент списка, поэтому мы добавим некоторые id в разметку:

<ul id="subscribe">
	<li id="rss"><a href="#">Subscribe via RSS</a></li>
	<li id="email"><a href="#">Get Email Updates</a></li>
	<li id="twitter"><a href="#">Follow us on Twitter</a></li>
</ul>

Теперь мы добавляем фоновые изображения для каждого элемента списка:

li#rss {
    background: url(images/rss_icon.png) no-repeat; 
}

li#email {
    background: url(images/email_icon.png) no-repeat; 
}

li#twitter {
    background: url(images/twitter_icon.png) no-repeat; 
}

В этот момент мне пришло в голову, что, возможно, 18px многовато для ссылок, поэтому я уменьшила его до менее драматичных 16px, что позволило мне добавить немного padding левого края, не растягивая sidebar.

ul#subscribe li {
    padding-bottom: 5px;
    padding-left: 35px; 
}

Наш маленький sidebar почти завершён! Теперь к стилю кнопки:

Нужно настроить target на кнопку, поэтому давайте добавим класс к разметке: (на этот раз вместо id будет класс, что является обычной практикой, поскольку мы могли гипотетически добавить ещё несколько кнопок)

<a href="#" class="button">Join Our Team</a>

Поэтому давайте исправим текстовый стиль и добавим наш повторяющийся срез:

a.button {
    color: #393838;
    text-decoration: none;
    background: url(images/button_slice.jpg) repeat-x; 
}

как видите, фоновое изображение есть, но оно появляется только за текстом, мы должны дать ему пространство. Во-первых, дадим margin, чтобы он оказался в центре sidebar:

  margin-left: 30px;

и некоторый padding с каждой стороны, так чтобы наша кнопка разместилась:

 padding: 13px 23px;

Это короткий способ записи свойств padding и он полностью приемлем, поскольку экономит место. В этом случае он определяет 13px padding в верхней и нижней части и 23px padding слева и справа.

кнопка отлично выглядит, но, к сожалению! Переместилась вправо на 23px, так что давайте немного уменьшим margin для компенсации:

margin-left: 14px;

Теперь давайте дадим ей немного места, добавив padding ко всему sidebar div:

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px 15px 30px 15px;  
}

Вот опять свойство краткости: в таком порядке: сверху, слева, снизу, справа. Так что здесь написано 15px со всех сторон, кроме нижней, которая должна быть 30px.

Наконец, нужно добавить границу 1px к классу кнопок:

 border: 1px solid #c7c7c7;

И вот он, наш sidebar!

Шаг 28 — Footer

И последнее, не менее важное: наш простой маленький footer. Мы установим footer так же, как мы установили header:
Использование повторяющегося фрагмента в пределах div неуказанной ширины, а затем добавления содержимого внутри фиксированного по ширине, центрированного div.
Здесь нам пригодится .container div, потому что нам не нужно указывать 800px или margin: auto на этот раз, потому что это уже сделано.
Начнем с повторяющегося фрагмента:

#footer {
    background: url(images/footer_slice.jpg) repeat-x; 
}

Это начало, но оно действительно крошечное. Давайте добавим padding и сделаем текст белым:

#footer {
    background: url(images/footer_slice.jpg) repeat-x;
    padding-top: 20px;
    padding-bottom:60px;
    margin-top: 40px;
    color: #fff; 
}

и в целом:

Шаг 29 — Маленькие изменения

В браузере вещи выглядят немного иначе, чем в Photoshop, поэтому мы могли бы внести небольшие изменения. Например, я хотела бы немного больше padding над основным контентом и sidebar. Мы добавим его в низ меню.

ul#menu {padding-bottom: 50px}

Я также решила сдвинуть меню влево, поэтому я собираюсь удалить padding-left. Теперь элементы расположены плотнее, потому что у нас есть padding из 75px справа и 30px слева, в общей сложности 105. Теперь, когда мы убрали левый padding,нам нужно добавить его справа, чтобы убрать разницу:

ul#menu li {
    float: left;
    padding-right: 105px;
    width: 95px; 
}

И общий финал:

Итак, дальше … подожди? Что? Мы закончили?
Мы закончили!

Теперь небольшая уборка: Validation.

Шаг 30 — Проверка

Теперь validation является решающим шагом в дизайне веб-сайта, я не буду вдаваться в бесконечные причины этого, потому что this article сделает это лучше. Я собираюсь пройти этот процесс:

HTML Validation

Перейдите в w3.org Validation Service, выберите подтверждение по загрузке файла, выберите файл index.html и нажмите «check.»
Дальше… Момент истины:

RED (Red плохо!)

Не волнуйся, всё не так плохо; посмотрим, что пошло не так:
похоже, что есть одна ошибка:

Они поймали меня на одном и том же id tag дважды, что может вызвать серьёзную путаницу. Поскольку у нас есть много стилей, определенных для ul с идентификатором «subscribe», мы просто изменим имя div: назовем его «feeds»,
Теперь надо проверить, что не определили какие-либо стили для #subscribe, а у нас их нет!
Для подстраховки давайте перезагрузим нашу страницу, чтобы избежать непреднамеренных изменений.
Выглядит хорошо! Проведём validation снова:

Успешно! Наша страница с правильным XHTML. Вы даже можете загрузить значок, если хотите похвастаться.

Примечание: я приятно удивилась, обнаружив только одну ошибку, если вам не повезло, прочитайте предлагаемую информацию в w3 shcools или прочтите this article by Glen Stansberry.

Кажется, мы закончили! Ах, если бы всё было так просто. Нам ещё нужно проверить CSS!

CSS Validation

Перейдите к The w3 CSS Validator и выполните тот же процесс, что и с html, только на этот раз выберите файл style.css. Проверяем…

Всё правильно!

Однако мы получили пару предупреждений. Чтобы оставаться в пределах благосклонности церкви, мы должны обратить на них внимание:

Это всего лишь несколько небольших проблем: мы должны были объявить ширину для всех наших floated items. Опять же, эти предложения не являются обязательными, но лучше всего прислушиваться к конструктивной критике.
Очистка: элементы слогана, меню unordered list и sidebar должны иметь ширину. Мы хотим это сделать, не изменяя внешний вид страницы.
Сначала слоган. Мы можем только грубо догадаться, что это около 400px в ширину.

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    width: 400px; 
}

И перезагрузка: без изменений, отлично. Дальше, элементы menu list. Это немного сложнее: наша страница шириной 800px, так что это максимальная общая ширина элементов списка. Если разделить на четыре и задать ширину 200px, элементы будут перемешаны и отобразятся по вертикали. Это потому, что у нас есть padding по обеим сторонам каждого элемента списка: 30px слева и 75px справа. Вычтите 105 из 200, оставшаяся ширина равна 95px.

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px;
    width: 95px; 
}

То же самое с sidebar:  давайте сначала посмотрим на ширину области содержимого: 510px. Остаток на странице от 800px составляет 290px, но сначала нам нужно вычесть все отступы слева и справа: 290-30 = 260. Затем вычитаем левое поле, и мы остаемся с 205px. Ещё одно: наша граница 1px, поэтому давайте вычтем ещё 2px и установим ширину sidebar 203px. Проверьте снова, без изменений.

Отлично, проверяем ещё раз, ошибок нет, даже предупреждений!
Наша веб-страница, насколько это касается стандартов w3c, совершенна.

Заключение

Итак, у вас есть один простой сайт с хорошим кодом. Надеюсь, в этом уроке вы приобрели некоторые ценные навыки, чтобы применить их к своим проектам и готовы приступить к написанию собственных сайтов.

• Следуйте за нами на Twitter, подписывайтесь на Nettuts + RSS Feed за статьями и уроками по веб-разработке.