Создай сайт своими руками
через 9 уроков
ты создашь такой сайт →
Главная 9 уроков по созданию сайта Учебник html Выбор темы для сайта Бесплатное продвижение сайта Новости сайта Контакты

Урок 1. Создание шапки сайта.

И так, чтобы создать простой html сайт не требуется хостинг и домен, даже подключение к интернету. html сайт это тот который не использует базу данных для работы, еще отличается тем что его можно посмотреть в браузере без подключения к интернету, прямо с вашего компьютера. Но для этого у вас должны быть все файлы и картинки сайта. Тоесть чужой сайт вы посмотреть не сможете без интернета. Если сайт ваш, или все файлы сайта есть на вашем компьютере, то вы сможете посмотреть сайт без подключения к интернету.
Соответственно вы можете делать свой сайт и сразу видеть результат того как он отображается, просто обновляя страницу в браузере, после сделанных изменений.
Что нужно для создания сайта - программа adobe dreamweaver, или хотя бы блокнот, ваше желание создать свой сайт, и фотошоп желательно.
Открываем программу adobe dreamweaver, в появившемся окне в графе "создать" выбираем - html.

В новый файл автоматом вставляется следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
</body>
</html>


"Документ без названия" заменяете на ваш заголовок страницы. Кодировку utf-8 тоже можете заменить, я лично не менял, при создании данного сайта. Сохраняем данный файл под названием index.html. Теперь закрываем, теперь нам нужно создать файл стилей для сайта. Для этого в появившемся меню в разделе "создать" выбираем css, либо нажимаем файл-создать-css. В общем создали, там тоже стандартный текст, у меня

@charset "utf-8"; /* CSS Document */


Его тоже сохраняем, называем style, формат .css. Теперь нужно присвоить файл стилей файлу index.html. Для этого открываем файл index.html и вставляем в шапку сайта(между тегами <head> и </head>, но не куда попало, а так чтобы не разрывать другие теги в шапке, можно вставить например после закрывающего тега </title>) тег:

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


Мы задали путь к файлу style.css, отсюда будут читаться стили всего сайта, его дизайн, проверьте файл style.css должен быть в одной папке с файлом index.html. Теперь закроем программу adobe dreamweaver и опять откроем, теперь открываем файл index.html и обратите внимание вверху рядом с вкладкой есть надпись "Исходный код" и "style.css". Тоесть вы можете переходить то туда, то туда. Если у вас такого нет просто откройте еще файл стилей style.css, он откроется в новой вкладке, также можно переходить между вкладками. А это нам часто понадобится.

Теперь приступим к созданию дизайна сайта. Задайте фон сайта(если не хотите чтобы он был белый), это сделать очень просто, напишите в файле style.css следующий код:

body
{
background-color:#feffeb
}


Скобки { и } - обязательны ! Они открывают и закрывают ваши параметры. #CFF Меняете на свой цвет,в dreamweaver это очень удобно делается - удаляете :#CFF, ставите : и вам автоматически предлагается выбрать функцию из списка, выбираете color или цвет, и там из палитры выбираете нужный цвет. Пробуйте, но лучше оставьте фон белым пока. Потом его всегда можно будет задать.

Теперь создадим шапку сайта, для этого вставьте код в style.css :

#header
{
position:absolute;
top:0px;
left:0px;
background-color:#09F;
width:1003px;
height:200px;
}

И в файле index.html, после тега <body> вставьте вот такой код:

<div id="header"></div>


Сохраняем оба файла, обновляем страницу index.html в браузере. Появится вот такая шапка:



Теперь разберем что это за код:

#header - это мы задали имя для шапки, можно использовать любое имя вида "#имя" на английском без пробелов
{
position:absolute; - это позиция шапки, absolute означает что измерение идет от краев страницы, и не зависит от других объектов
top:0px; - от верхнего края 0 пикселей, если зададим к примеру 10px, то будет отступ от верхнего края 10 пикселей.
left:0px; - аналогично от левого края 0px
background-color:#09F; - цвет фона шапки, а точнее прямоугольника
width:1003px; - ширина прямоугольника
height:200px; - высота прямоугольника
}


Вы можете изменять эти параметры, например высоту шапки, цвет и т.д. Цвета пишутся либо начиная с # "#номер цвета", либо "green" или "red" без #, подробнее можете посмотреть в википедии. Не забываем ставить знак ; после каждой строки.

Следующий урок
Как создать простой сайт на html
Izernet.ru © | При копировании материалов сайта ссылка вида <a href="http://izernet.ru"> обязательна !