HTML заготовки

24 Aug, 2005

На горизонте, как тучи, собирается работа... Решил не ждать - а начать готовиться. Подготовил серию XHTML заготовок.

Зачем?

Каждый раз когда я начинаю верстать, я заново ворую где то доктайп, создаю CSS файлы - переписываю метатэги с какого-нить доверенного сайта. Но, наконец, чаша полна. Лень ослабла, и я решился сделать стартовые HTML+CSS заготовки. Кому сгодятся - используйте на здоровье...

HTML

Не буду тут приводить полностью файл. Однако я в него насовал все метатэги которые я использовал. Вот небольшой такой список:
  1. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  2. <meta http-equiv="Content-Language" content="ru" />
  3. <meta name="copyright" content="" />
  4. <meta name="description" content="" />
  5. <meta name="keywords" content="" />
  6. <meta name="author" content="" />
  7. <meta name="robots" content="all" />
  8. <link rel="Shortcut Icon" type="image/x-icon" href="/favicon.ico" />
Я выбирал самое нужное для себя - если у кого есть чем дополнить - пожалуйста в комменты...

Плюс ссылки на (смотри ниже) CSS файлы

CSS

Главная страница ссылается на 3 CSS файла: master.css print.css handheld.css. Которые все лежат в папке css.

Содержание master.css примерно такое:

  1. @import url("base.css");
  2. @import url("layout.css");
И еще сколько влезет разделений на стили для цвета, шрифтов. Просто я использую пока именно такое разделение.

Все CSS файлы снабжены заботливо спертыми заголовками у Дага Баумана (нравятся они мне :)) Вот такого вида:

  1. /*
  2. -----------------------------------------------
  3. Site Screen Master
  4. Author: akella
  5. Version: 28 Apr 1983
  6. ----------------------------------------------- */

Результат

В результате вышло такое: file tree of template Скачать все сразу можно отсюда. Посмотреть вживую - тут. (нажимайте вью сорс) Для маленьких сайтов(воробьев) - это конечно скорее пушка, но для средних проектов самое то. Да и пушкой в принципе убить воробья - не так и трудно :).

Инфо

Замечания-указания-поправки с радостью принимаются )

18 комментариев к “HTML заготовки”

1.agat | 24 Aug, 2005
А, у меня xtml заготовка вот такая:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  5. <title>seo</title>
  6. <link rel="stylesheet" href="styles.css" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="site">
  10. <div id="header">
  11. </div>
  12. <div id="menu">
  13. </div>
  14. <div id="content">
  15. </div>
  16. <div id="footer">
  17. </div>
  18. </div>
  19. </body>
  20. </html>
2.ganges | 24 Aug, 2005
Привет, Акелла! meta name=”robots” content=”all, index, follow” Вот я долго думал когда-то над своими CSS файлами, что же входит в "понятие" base.css? Для меня master.css это screen.css по аналогии c print.css и handheld.css screen.css импортирует: layout.css (видимо для меня лэйаут это и есть тот бэйс) textformatting.css (размеры, семьи, отступы) hacks.css (всю байду для ослов очень удобно вписать сюда, в отдельный файл, как советуют отцы и матери, на тот случай, если семерка приподнесет какие-то реальные новшества, в чем лично я сильно сомневаюсь) и... visuals.css ( в котором все цвета и картики, толщина и цвет бордеров) Если предполагается использование альтернативной таблицы стилей, имхо этот visuals.css очень удобен, потому что, прилинковывая alterscreen.css, который импортирует все тоже самое, кроме altervisuals.css можно сменить полностью визуальную презентацию, а если учесть, что я стараюсь не фиксировать в пикселях шрифты вообще (ну, когда это действительно нужно), то, еще раз, - очень удобно. [ просьба - если ты считаешь, на основе своего опыта, что я ошибаюсь - drop me a note, please :)] Эта штука работает и я думаю, что когда переключается скриптом на alterscreen.css в котором все файлы, кроме altervisuals.css теже самые - то они в кэше сидят уже :)) Минусы приходится писать по нескольку раз один и тот же селектор в разных файлах, к примеру заголовок h2 {font-size:1.3em; font-family:Verdana, Arial, sans-serif;} в textformatting.css и h2 { color:#c60; background:#000 url(/);} в visuals.css что еще ничего, но по нескольку раз писать body.clientprofile #content-primary #clientpassport #photoimg ( :) ) приводит у сайта размером с голубя :) к суммарному увеличению CSS файлов на 2 килобайта почти. Есть еще "минусы" связанные с тем, что кодеру придется как-то определяться (и лучше хорошо подумать, прикинув потребности сайта и пользователей, сразу) куда, например, относить тот же отступ заголовка к visuals или layout... It depends Но все равно, учитывая то, что файлы кэшируются, а так же грамотно применяя каскад и наследование наряду с селекторами типа *, размер CSS для "голубя" не вылазит за пределы 10-12 килобайт. Что, в свою очередь, оставляет за пределами профессионализма любой сайт, сверстанный методами "старой школы".
3.akella | 25 Aug, 2005
Уххх, накатали ) Спасибо. 2Ganges: ты затронул тему которой смело можно посвятить еще один пост. ) Собссно формат твоего комментария подходит)). Сказывается отсутствие блога... 2 Агат: у тебя совсем минимал подход - я больший лентяй! :) Однозначно!
4.Van | 29 Aug, 2005
А вот это что должно обозначать? ... [meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /] [meta http-equiv="Content-Type" content="text/html;charset=utf-8" /] ...
5.akella | 29 Aug, 2005
Я оставил в шаблоне 2 самые используемые кодировки - ненужную надо просто удалить - это проще чем дописать...
6.StraNNicK | 31 Aug, 2005
Привет. Не совсем в тему (вернее - совсем не в тему), но не могу не поделиться. Откопал совершенно шикарный (хотя и популистский) сайт. http://www.sitepoint.com/ Правда чует моё сердце, что все про него давно знают, но вдруг... :)
7.akella | 31 Aug, 2005
http://cssing.iatp.org.ua/resources/ .... ;)
8.polch | 01 Sep, 2005
дробить css-файл на мелкие части - гуд, но лучше сделать файл миниатюрным. А на sitepoint.com куча классных примеров. рекомендую настырно.
9.akella | 01 Sep, 2005
Не всегда можно сделать миниатюрным... :( А что плохого в разделении? Так ведь удобней редактировать - год назад делал а схемы в голове... Минимизировать эт всегда надо...
10.memyself | 07 Sep, 2005
Насчёт дробления - главный недостаток в том, что увеличивается количество запросов к веб-серверу, а соответственно и нагрузка на сервер.
11.akella | 07 Sep, 2005
Тут я рискну не согласиться: оно кешируется и этот фактор почти не играет роли - по крайней мере добавление 12 запросов(IMG) к главной странице укр.нет вообще никак не сказалось на производительности. А тут речь идет о 2х 3х... Так же как НЕдробление, мне чуждо удаление пробелов и переводов строк в ЦСС... Себе в убыток - надо знать меру.
12.polch | 15 Sep, 2005
решил и я сделать вклад в "братскую могилку" заготовок:
  1. <? echo="<?xml version="1.0" encoding="iso-8859-1"?>"; ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <title>xxx</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <style type="text/css">
  9. <!--
  10. body {
  11. font-family: Verdana, Arial, Helvetica, sans-serif;
  12. font-size: 80%;
  13. color: #333;
  14. }
  15. a {
  16. color: #999;
  17. text-decoration: none;
  18. }
  19. -->
  20. </style>
  21. </head>
  23. <body>
  24. </body>
  25. </html>
Должен сказать, что у меня их четыре - на случай разных кодировок и строгостей стандартов. Относительно дробления, недавно вычитал у какого-то америкоза. Он дает минимальный стиль около 10 строчек, все, ессно, фиксд, но компилант со Всеми броузерами, включая раненый NN4! Красота. Минимум-миниморум. Но по идее надобы определять броузер и давать ему что он хочет. Добавлю, что после дооолгих мучительных исследований cms, заприметил DataLife Engine российского производства. Впечатляет. Красиво, быстро, легко. Сейчас пытаюсь повыдергивать из него все таблицы и перевести дизайн на родной css. Addio.
13.akella | 26 Sep, 2005
Речь не о структуре хтмл а скорее структуре ЦСС файлов - создавать каждый раз 5 или 6 штук - напряг - а так сразу и в папочке - так сказать выращиваю в себе культуру кодера... Вроде и мало что сделано в них - а психологически намного легче начать новый сайт делать.
14.Riff | 26 Sep, 2005
я конечно не спорю, что заготовки это хорошо... я и сам пытался их сделать... в итоге осталась тока одна с хэдером и доктайпом... почему? а потому что заготовки хороши только при наличии энного к-вы заказов с одинаковой блочной структурой, а в моём случае блоки н расположены как в голову шибанёт :)
15.cssing :: Архив :: CSS для непослушных броузеров | 17 Jan, 2006
[...] файл. О том как я это делаю я и написал. Структура CSS файлов Если кто помнит(пост на эту тему), то я линкую из страниц на один CSS файл master.css. Примерно так [...]
16.Maxim | 15 Apr, 2007
битая ссылка http://cssing.iatp.org.ua/examples/template/template.rar :o(
17.Роман | 06 Jul, 2012
Для меня сейчас Заготовкой является запись html:5>#wrap>(#header+#middle+#footer)+"Tab" Zen-coding очень помогает верстать. Так же когда уж очень лень лезу сюда http://csstemplater.com/
18.Андрей | 03 Jan, 2012
html5 заготовка http://divhack.com/node/32