Разбиваем страницу

Разобьем страницу на три части, шапка, основной контент и футер (подвал). Для этого в файл theme.html между тегами body добавим:

 

<{includeq file="$theme_name/tpl/header.html"}>
<div id="wrapper"> 
  <div class="wrapper">
    <div id="container">       
      <{includeq file="$theme_name/tpl/content.html"}>        
    </div>      
  </div>
</div>     
 <{includeq file="$theme_name/tpl/footer.html"}>

 

И в папке tpl создадим три файла

header.html

content.html

footer.html

 

theme.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" 
xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<{assign var=theme_name value=$xoTheme->folderName}>
 <{includeq file="$theme_name/tpl/meta.html"}>
</head>
<body>
 <{includeq file="$theme_name/tpl/header.html"}>
<div id="wrapper">  
  <div id="container">       
    <{includeq file="$theme_name/tpl/content.html"}>        
  </div>       
</div>     
 <{includeq file="$theme_name/tpl/footer.html"}>
</body>
</html>

 

 

 

Подключаем стили

 

В файл css/style.css добавляем:

h1 {font-size:24px;}
h2 {font-size:14px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
a {
    color: #119CFF;	   /* цвет ссылок */
    text-decoration: none; /* убираем подчеркивание */
}
a:hover {
    color: #DB0C90;	   /* цвет ссылок под курсором */
}
#wrapper {
    background: none repeat scroll 0 0 #DDDDDD;
    padding: 10px 0;
}
#container {
    margin: auto;
    width: 1024px;	   /* ширина контента */
}

 

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

header.css

content.css

footer.css

 

В начало файла css/style.css добавим


@import url(header.css);
@import url(content.css);
@import url(footer.css);

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити