Отправляет email-рассылки с помощью сервиса Sendsay

Дневник провинциального программиста

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 300 RSS
←   Ноябрь 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://itprovince.blogspot.com/
Открыта: 31-08-2009

Автор
Провинциальный программист

Статистика

300 подписчиков
0 за неделю
←   Все выпуски   →

__ISSUE__


Как сделать шаблон для Blogger с «нуля»

«Теория без практики мертва» (Александр Суворов)

Итак, теорию создания шаблонов для Blogger мы рассмотрели в предыдущих статьях:

Сегодня нам предстоит закрепить полученные знания на практике.

Сразу оговорюсь, что обучение HTML и CSS не входит в мои планы. Я предполагаю, что основы этих технологий Вам уже знакомы. Поэтому в качестве «нуля» у нас будет выступать несложная веб-страничка, сверстанная при помощи HTML и CSS. Условие задачи: на основе исходной веб-странички создать полноценный шаблон для Blogger с поддержкой виджетов (гаджетов) и возможностью визуального редактирования цветов и шрифтов.

Исходный код страницы (для наглядности она заполнена текстом-«рыбой»):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blog Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  body {background:#e8eaec;}

  #outer-wrapper {
    width:780px;
    margin:20px auto;
    background:#ffffff;
  }

  #header-wrapper {
    background:#0099cc;
    color:#ffffff;
    padding: 20px;
  }

  #header-wrapper h1 {margin-bottom : 10px;}

  #main-wrapper {
    float:left;
    width:500px;
    padding:20px 20px 10px 20px;
  }

  #sidebar-wrapper {
    float:right;
    width:200px;
    padding:20px 20px 10px 20px;
    background:#c8f0fc;
  }

  #footer-wrapper {
    clear:both;
    padding:5px 0;
    background:#0099cc;
    color:#ffffff;
  }
 
  #footer-wrapper p {text-align:center;}
</style>
</head>

<body>
<div id="outer-wrapper">

  <div id="header-wrapper">
    <h1>Blog Title</h1>
    <p>Blog Description</p>
  </div>

  <div id="main-wrapper">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.</p>
  </div>

  <div id="sidebar-wrapper">
    <h2>Sidebar Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.</p>
  </div>

  <div id="footer-wrapper">
    <p>&copy; 2009 <a href="#">Your Name</a></p>
  </div>

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

Читать далее >>

Дневник провинциального программиста
Copyright (C) 2009. Все права защищены.
В избранное