Сегодня:
23 ноября 2024
4:24
Вход на сайт
Логин:  
Пароль:
создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
     
     
  Добро пожаловать в систему управления сайтом megainformatic cms !  
     
  [назад]  
     
 

2) Верстка созданного макета;

  
     
  Итак, html макет создан, его можно уже использовать, вставив код необходимых модулей и ссылки, но более правильно будет создать специальный css файл - файл стилей и описать в нём ряд элементов.  
     
 

Что подразумевается под версткой ?

Под версткой подразумевается вставка hmtl и css кода, влияющего на внешний вид страницы.

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

<html>
<head>
<title>Мой персональный сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table align="center" id="container" width="600" height="480" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/header.jpg" width="600" height="76"><div id="header">Мой персональный сайт</div></td>
</tr>
<tr>
<td background="images/index_02.jpg" width="600" height="39"><div id="menu"><a href="#">Главная</a> <a href="#">Статьи</a> <a href="#">Проекты</a> <a href="#">Контакты</a></div></td>
</tr>
<tr>
<!--background="images/index_03.jpg"-->
<td bgcolor="#ececec" width="600" height="320"><div id="content">
<p>Добро пожаловать на мой персональный сайт !!! Здесь Вы найдете много полезной информации, новостей, событий. Вы сможете реализовать свои планы и укрепить свой бизнес.</p>
<p>Что нужно для создания своего сайта ? Главное - желание. Всё остальное - можно постепенно и планомерно освоить.</p>
<p>Сколько времени потребуется на создание сайта ? Простейший сайт можно создать за пару дней. Хороший, полнофункциональный сайт создается дни, месяцы и даже годы.</p>
<p>Но вы наверное в курсе, что интернет устроен таким образом, что стоит вам только подумать и окажется, что нужное Вам уже давно есть и лежит, ожидая пока Вы возьметесь за его изучение и освоение.</p>
<p>Так вперед ! И смелей за дело.</p>
<p>Вы сами творец своих идей и их воплощения.</p>
</div></td>
</tr>
<tr>
<td background="images/index_04.jpg" width="600" height="45"><div id="footer">(c) Мой персональный сайт 2010-2011</div></td>
</tr>
</table>

</body>
</html>

  
     
  файл css/style.css  
     
 

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

body {
font-family: Verdana, Geneva, sans-serif;
}

#header {
margin: 12px 12px 12px 12px;
padding-left: 16px;
color: #fff;
}

#menu a {
margin: 4px 8px 4px 4px;
padding-left: 24px;
color: #fff;
text-decoration: none;
}

#content {
padding-left: 16px;
margin: 8px 8px 8px 8px;
}

#footer {
font-size: smaller;
padding-left: 16px;
color: #fff;
}

  
     
  Вот таким образом создается главная действующая страница вашего сайта  
     
  далее мы разберем как добавить нашему сайту минимально необходимый функционал  
     
     
     
Время загрузки: 0,0151