15 апр 2013
Создаём свой первый HTML макет + CSS урок 1
SibWeb Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Создаём свой первый HTML макет + CSS урок 1

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Создаём свой первый HTML макет + CSS урок 1

И так добрый день ребята! и снова сегодня с вами я Вадим Кондаков, и этот урок будет посвящён созданию HTML макета с использование CSS3. урок создан для новичков так-что читаем!
1. И так первым делом мы создадим логотип. 133X36
по типу такого:
Создаём свой первый HTML макет + CSS урок 1
исходник логотипа (PSD):
Скачивание файлов доступно только зарегистрированным пользователям
для того чтобы логотип был как у меня на скрине у вас должен быть установлен в фотошопе шрифт "Lobster"

и так теперь переходим к основному а это CSS.
2. Создаём директорию например: Мой сайт и в этой папке создадим файл style.css
и пропишем:

html { height:100%; }

body {
    background: #f6f6f6;
    height: 100%;
    margin:0px;
    padding:0px;    
    word-wrap: break-word;
    font: 11px/18px tahoma, verdana, sans-serif, Lucida Sans;
    color: #616f7d;
    overflow-x:hidden
}

Сохраним и теперь создадим файл index.html и напишем там:

<DOCTYPE HTML>
<html>
<head>
<!-- Название сайта -->
<title>Мой HTML макет. учусь по урокам Вадима Кондакова</title>
<!-- Кодировка сайта -->
<meta content="text/html; charset=windows-1251" />
<!-- Файл стилей -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

</body>
</html>

Сохраним, и посмотрим пустую страницу с красивым фоном)
3. И так возьмемся теперь за HEADER страницы (шапка сайта).
Открываем style.css и пропишем ниже:

.header {
  background-color: #6D84A2;
  background-image: -moz-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: -ms-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6D84A2), to(#6D84A2));
  background-image: -webkit-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: -o-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: linear-gradient(top, #6D84A2, #6D84A2);
  background-repeat: repeat-x;
  border-top: 1px solid #6D84A2;
  border-bottom: 1px solid #6D84A2;
  width: 90%;
  z-index: 900;
  border-radius:0px 0px 5px 5px;
  margin: 0px auto;
  height: 40px;
}

сохраним и в index.html пропишем между тегами body:

<!-- Шапка сайта -->
<div class="header">

</div>

сохраним и посмотрим на результат.
Создаём свой первый HTML макет + CSS урок 1

результат кода в index.html:

<DOCTYPE HTML>
<html>
<head>
<!-- Название сайта -->
<title>Мой HTML макет. учусь по урокам Вадима Кондакова</title>
<!-- Кодировка сайта -->
<meta content="text/html; charset=windows-1251" />
<!-- Файл стилей -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Шапка сайта -->
<div class="header">

</div>
</body>
</html>

4. Сделаем логотип и меню.
Создаём директорию в папке Мой сайт: images и помещаем наш логотип logo.png в эту папочку.
И теперь пропишем сразу и логотип и меню между div нашей шапки header:

<!-- Логотип сайта -->
<a href="/"><img src="images/logo.png" border="0px" /></a>
<!-- Меню с правой стороны и отступом на 25px -->
<div style="margin-right: 25px;float:right;">
<a href="/">Главная</a>
<a href="/">Мой сайт</a>
<a href="/">Мой сайт</a>
</div>

сохраним и посмотрим.!
чтобы преобразить меню добавим в style.css ниже:

.header a:first-child {margin-left:15px;}
.header a, .header a:visited {
display:block;
float:left;
height:40px;
line-height:40px;
color:#BFDCED;
padding:0px 15px;
font-weight:bold;
}
.header a:hover, .header a:active {
color:white;
text-decoration:none;
height:40px;
background:rgba(0, 0, 0, 0.1);
}

и так у нас получилось:
Создаём свой первый HTML макет + CSS урок 1


И так, как убрать у ссылок нижнею обводку? добавим в style.css:

a{ text-decoration:none; color: #333 }
a:hover{ text-decoration: none }
b{color:#000}

где хотите но у меня файл style.css получился вот такой:

html { height:100%; }

body {
    background: #f6f6f6;
    height: 100%;
    margin:0px;
    padding:0px;    
    word-wrap: break-word;
    font: 11px/18px tahoma, verdana, sans-serif, Lucida Sans;
    color: #616f7d;
    overflow-x:hidden
}
a{ text-decoration:none; color: #333 }
a:hover{ text-decoration: none }
b{color:#000}
.header {
  background-color: #6D84A2;
  background-image: -moz-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: -ms-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6D84A2), to(#6D84A2));
  background-image: -webkit-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: -o-linear-gradient(top, #6D84A2, #6D84A2);
  background-image: linear-gradient(top, #6D84A2, #6D84A2);
  background-repeat: repeat-x;
  border-top: 1px solid #6D84A2;
  border-bottom: 1px solid #6D84A2;
  width: 90%;
  z-index: 900;
  border-radius:0px 0px 5px 5px;
  margin: 0px auto;
  height: 40px;
}
.header a:first-child {margin-left:15px;}
.header a, .header a:visited {
display:block;
float:left;
height:40px;
line-height:40px;
color:#BFDCED;
padding:0px 15px;
font-weight:bold;
}
.header a:hover, .header a:active {
color:white;
text-decoration:none;
height:40px;
background:rgba(0, 0, 0, 0.1);
}

а файл index.html вот таким:

<DOCTYPE HTML>
<html>
<head>
<!-- Название сайта -->
<title>Мой HTML макет. учусь по урокам Вадима Кондакова</title>
<!-- Кодировка сайта -->
<meta content="text/html; charset=windows-1251" />
<!-- Файл стилей -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Шапка сайта -->
<div class="header">
<!-- Логотип сайта -->
<a href="/"><img src="images/logo.png" border="0px" /></a>
<!-- Меню с правой стороны и отступом на 25px -->
<div style="margin-right: 25px;float:right;">
<a href="/">Главная</a>
<a href="/">Мой сайт</a>
<a href="/">Мой сайт</a>
</div>
</div>
</body>
</html>

5. Создаём контент сайта.
и так теперь в style.css добавим ниже:

.sitecont {
  width:80%;
  margin: 0px auto;
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  height:100%;
  border-radius: 0px 0px 3px 3px;
  padding:5px 10px 5px 10px;
  clear: both;
  z-index: 3;
}

Сохраним и в index.html добавим перед закрытие тега body:
<!-- Контент сайта -->
<div class="sitecont">My site</div>


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

Исходник работы:
Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-expanse | 22 мая 2013 17:25
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

Простите, нахyя такие уроки?
Если вы пишите код и ничего не поясняете, новичок просто скопирует без понятия и будет радоваться, а если захочет что-нибудь поменять, то не будет знать куда копать

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.