Делаем свой шаблон
Шаг первый
Будем делать свой шаблон, как говорится, с "нуля".
Шаг первый - создадим "балванку" в HTMLе и на ней произведем отладку шаблона. Потом новые шаблоны будет легче делать. Создаем папку на рабочем столе - допустим
"Shablon" Все файлы будем сохранять в ней. Не забывайте про это.Теперь открываем "Блокнот", затем выделяем на этой странице нижний абзац образца между линиями,
копируем и
-------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>My First CSS WebSite</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="header">CSS Website</div>
<div class="quote">Осваиваем CSS стиль</div>
<div class="leftcolumn">
Осваиваем CSS стиль
<p>Это мой первый сайт Это мой первый сайт Это мой первый сайт.</p>
<p>Это мой первый сайт Это мой первый сайт Это мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
</div>
<div class="rightcolumn">
Осваиваем CSS стиль
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
</div>
</body>
</html>
-------------------------------------------------------
вставляем в Блокнот. Сохраняем "файл-сохранить как -" с названием
template.htm в нашу папку "Shablon"
В этом файле класс "header" будет задавать параметры верхней части страницы
класс "quote" добавляет дополнительный элемент, который затем нам понадобится
как вспомогательный. Страницу разбиваем на две колонки. Для этого служат
классы "leftcolumn" и "rightcolumn"
Сейчас открыв этот файл в браузере будет отображаться только текст на белом фоне.
Чтобы она выглядела как надо создадим
файл стилей. Делаем все также.
Выделяем и сохраняем, но название файлу присвоим
stylesheet.css--------------------------------------------------------
body {
color: WindowText;
background: #00ff00;
}
.header {
background-color: #9A060B;
color: #FFF;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
top: 15px;
left:10px; width:760px;
}
.quote {
width: 100%;
background-color: #EEE;
color: #000;
font-size: 8pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
text-align: right;
left:10px; width:760px;
}
.leftcolumn {
position: absolute;
top: 85px;
left:10px;
width:260px;
text-align: right;
background-color: #000fff;
}
.rightcolumn {
position: absolute;
top: 85px;
left:290px; width:480px;
text-align: left;
background-color: #fff000;
}
----------------------------------------------------------------
Этот файл описывает стиль отображения наших классов в браузере.
И если сейчас открать файлик template.htm снова, то вид страницы
будет такой как описан в stylesheet.css.
(Помните что оба файла должны лежать в одной папке)Теперь слово за вашей фантазией. Пробуйте менять размеры Top, left
width.....Цвета #fff000,#000fff.....Вот и
Цветогенератор пригодится.
Короче
поэксперементируйте и будете точно знать какой элемент за что
отвечает. Все что с "font" - это текст на странице "8pt" его высота
можно менять color- цвет текста....вообщем разбирайтесь.
Вопросы обсуждаемна
форуме.
В следующей части разбираем теги и вставку рисунка.
Готовлю, ждите.
Шаг второй
Шаг второй - прописываем
дополнительные стили в наш файл стилей
Откройте его в блокноте и скопируйте нижние строки
-----------------------------------------------------------------------------------
h1 {
font-family: arial, verdana, sans-serif;
font-size: 120%;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 30px;
}
h3 {
font-variant: small-caps;
font-size: 12pt;
}
h4 {
font-variant: normal;
}
p {
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-style: italic;
font-weight: bold;
}
td {
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size: 1em;
}
-------------------------------------------------------------------------------------
в дополнение к тем что есть и сохраните файл
styleheet.css Теперь открыв файл
template.htm в браузере смотрим что получилось.
Поэксперементируйте со всеми параметрами и двигаемся дальше.
Шаг третий
Шаг третий - добавляем стили для меню и контекста в наш файл
styleheet.css -------------------------------------------------------------------------------------
a {
color: #971218;
text-decoration: none;
}
a:hover {
color: #555E4F;
text-decoration: none;
}
/* Menu */
#menu1 {
float: left;
width: 160px;
margin: 0px auto;
padding-bottom: 20px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
color: #323B2E;
}
#menu1 ul {
margin: 0px;
list-style: none;
padding: 0px;
}
#menu1 li {
}
#menu1 a {
display: block;
width: 190px;
padding: 15px 0px;
background-color: #D4167F;
border-top: 1px solid #323B2E;
border-bottom: 1px solid #788770;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #FFFFFF;
}
#menu1 a:hover {
background-color: #AFB3A5;
border-top: 1px solid #555E4F;
border-bottom: 1px solid #555E4F;
}
/* Content */
#content {
width: 480px;
margin: 0 auto;
border: 10px solid #FFFFFF;
border-top: none;
background: #E9EAE2;
}
--------------------------------------------------------------------------------------------
И соответствующие теги в файл
template.htm В
левую часть для меню а
в правую часть для текстов
контекста. В итоге весь файл примет вид
--------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>My First CSS WebSite</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="header">CSS Website</div>
<div class="quote">Осваиваем CSS стиль</div>
<div class="leftcolumn">
<div id="menu1">
<h3>Навигация</h3>
<ul>
<li><a href="#">первая</a></li>
<li><a href="#">вторая</a></li>
<li><a href="#">третья</a></li>
</ul>
</div>
<div class="news">
<h3>Обновление</h3>
<p><strong><a></a></strong></p>
<ul>
<li><a href="#">дополнение</a></li>
<li><a href="#">линк</a></li>
<li><a href="#">линк2</a></li>
</ul>
<p> </p>
</div>
</div>
<div class="rightcolumn">
<div id="content">
<h2>Добро пожаловать на сайт Sitename.com!</h2>
Осваиваем CSS стиль
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
</div>
</div>
</body>
---------------------------------------------------------------------------------
Пробуем все с размерами и стилями и двигаемся дальше.
Шаг четвертый
Шаг четвертый добавляем в наш файл
template.htm строки с тегами нижней части страницы в которых содержатся
данные о разработчиках ---------------------------------------------------------------------------------
<div class="rightcolumn">
<div id="content">
<h2>Добро пожаловать на сайт Sitename.com!</h2>
Осваиваем CSS стиль
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
<p>Это мой первый сайтЭто мой первый сайтЭто мой первый сайт.</p>
</div>
<div id="footer">
<p>Copyright © 2008 AVV <a href="http://avvdesign.info"><strong>Дизайн для CMSimple Templates </a></strong></p>
<p id="links"><a href="http://www.cmsimple.dk/"> Powered by CMSimple</a></p>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
И соответственно в файл
styleheet.css стиль отображения этой части страницы
Копируем, вставляем и сохраняем так, как описано выше
-----------------------------------------------------------------------------------
/* Footer */
#footer {
clear: both;
width: 450px;
margin: 0 auto;
padding: 10px 0;
}
#footer p {
margin: 0;
text-align: right;
font-size: x-small;
}
-----------------------------------------------------------------------------------
Вот теперь заготовка шаблона есть. В новом разделе будем вставлять в него коды CMSimple Все необходимые и обязательные коды размещены на форуме в соответствующей ветке. Переходим в раздел шаблон "CMSimple"