Для создания html-страницы можно использовать табличную или блочную верстку. Подробнее об этот можно прочитать в статье Плюсы и минусы табличной и блочной верстки.
Также в верстке вам поможет статья Шаблон html страницы, в которой описаны все тонкости верстки html-страницы фиксированной ширины, с тремя колонками и футером прижатым к низу страницы.
Веб-страница обычно делится на такие части:
- Header - шапка сайта
- Основная часть сайта - контент. Основная часть может также делить на колонки. На сайте может быть одна, две или три колонки.
- Блок меню - может быть внутри одной из частей или выделенный отдельным блоком
- Footer - подвал сайта
В шапке сайта обычно находятся логотип сайта, может быть верхнее меню, форма авторизации, поиск сайта, иконки соц сетей.
В основной части сайта в одной из колонок могут находиться меню, меню категорий (статей или товаров), также форма авторизации и поиск. Там же могут находиться блоки типа "Последние новости", "Популярные товары" и многое другое.
В футере сайта могут находиться нижнее меню, основные разделы сайта, копирайты, иконки соц сетей, контакты и т.д.
Перейдем непосредственно с верстке макета. Я остановлюсь на блочной верстке, так как сама ее предпочитаю.
Например, есть у нас такой макет. Скачен он с http://leeto.ru/uroki_photoshop/web/100261-maket-sayta-nedvizhimosti-v-fotoshope.html
Здесь у нас видны такие позиции:
- Шапка. В ней логотип, меню, картинка (брелок)
- Баннер
- Две колонки - контент и два блока
- Подвал
Создаем папку с названием проекта. В ней создаем html-страницу. Пусть она называется index.html. Делаем несколько папок - styles, images и, если нужно, js. Создаем css-файл style.css и ложим его в папку styles.
В index.html подключаем файл со стилями. Для этого в <head> документа пишем:
<link rel="stylesheet" type="text/css" href="/styles/style.css">
где styles/style.css - путь к файлу.
Так как мы уже определили основную структуру документа, то так и пишем в <body>:
<div class="wrapper"><div class="header"><div class="header_img"></div><div class="logo"></div><div class="mainmenu"></div></div><div class="banner"></div><div class="container"><div class="left"><div class="content"></div></div><div class="right"><div class="block brown"></div><div class="block blue"></div></div></div></div><div class="footer"></div>
body, html {width: 100%; height: 100%; padding: 0px; margin: 0px;}.wrapper {margin: 0 auto; width: 1000px; min-height: 100%; height: auto !important; height: 100%;}.container {padding-bottom: 50px; width: 1000px; position:relative;}.footer {width: 1000px; margin: -50px auto 0; position: relative; height: 50px;}
body {background: #e9e8e4 url(../images/bg.png) top left repeat-x;}
Вычесляем высоту шапки, банера и футера. А также ширину колонок с контентом и блоками. Прописываем эти значения в css-файл. Для вычисления нам нужны линейка в Adobe Photoshop.
.header {width: 1000px; height: 152px;}.banner {height: 265px;}.container {padding: 10px 10px 55px 10px;}.left {width: 620px; margin-right: 10px;}.right {width: 350px;}.footer {width: 1000px; margin: -55px auto 0; position: relative; height: 55px;}
<div class="mainmenu"><ul><li class="active"><a href="#">Home</a></li><li><a href="#">Property Search</a></li><li><a href="#">Our Company</a></li><li><a href="#">Contact Us</a></li></ul></div>