HTML заготовки

24 Августа, 2005

XHTML/CSS, Полезности

На горизонте, как тучи, собирается работа… Решил не ждать – а начать готовиться. Подготовил серию 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
Скачать все сразу можно отсюда. Посмотреть вживую – тут. (нажимайте вью сорс)
Для маленьких сайтов(воробьев) – это конечно скорее пушка, но для средних проектов самое то. Да и пушкой в принципе убить воробья – не так и трудно :).

Инфо

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

XHTML/CSS, Полезности

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

1. Августа 24th, 2005 | agat

А, у меня 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. Августа 24th, 2005 | ganges

Привет, Акелла!

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. Августа 25th, 2005 | akella

Уххх, накатали ) Спасибо.
2Ganges: ты затронул тему которой смело можно посвятить еще один пост. ) Собссно формат твоего комментария подходит)).
Сказывается отсутствие блога…

2 Агат: у тебя совсем минимал подход – я больший лентяй! :) Однозначно!

4. Августа 29th, 2005 | Van

А вот это что должно обозначать?
…
[meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /]
[meta http-equiv="Content-Type" content="text/html;charset=utf-8" /]
…

5. Августа 29th, 2005 | akella

Я оставил в шаблоне 2 самые используемые кодировки – ненужную надо просто удалить – это проще чем дописать…

6. Августа 31st, 2005 | StraNNicK

Привет. Не совсем в тему (вернее – совсем не в тему), но не могу не поделиться.
Откопал совершенно шикарный (хотя и популистский) сайт.

http://www.sitepoint.com/

Правда чует моё сердце, что все про него давно знают, но вдруг… :)

7. Августа 31st, 2005 | akella

http://cssing.iatp.org.ua/resources/ ….
;)

8. Сентября 1st, 2005 | polch

дробить css-файл на мелкие части – гуд, но лучше сделать файл миниатюрным.
А на sitepoint.com куча классных примеров. рекомендую настырно.

9. Сентября 1st, 2005 | akella

Не всегда можно сделать миниатюрным… :(
А что плохого в разделении? Так ведь удобней редактировать – год назад делал а схемы в голове…

Минимизировать эт всегда надо…

10. Сентября 7th, 2005 | memyself

Насчёт дробления – главный недостаток в том, что увеличивается количество запросов к веб-серверу, а соответственно и нагрузка на сервер.

11. Сентября 7th, 2005 | akella

Тут я рискну не согласиться: оно кешируется и этот фактор почти не играет роли – по крайней мере добавление 12 запросов(IMG) к главной странице укр.нет вообще никак не сказалось на производительности. А тут речь идет о 2х 3х…

Так же как НЕдробление, мне чуждо удаление пробелов и переводов строк в ЦСС… Себе в убыток – надо знать меру.

12. Сентября 15th, 2005 | polch

решил и я сделать вклад в “братскую могилку” заготовок:

  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. Сентября 26th, 2005 | Riff

я конечно не спорю, что заготовки это хорошо… я и сам пытался их сделать… в итоге осталась тока одна с хэдером и доктайпом… почему? а потому что заготовки хороши только при наличии энного к-вы заказов с одинаковой блочной структурой, а в моём случае блоки н расположены как в голову шибанёт :)

14. Сентября 26th, 2005 | akella

Речь не о структуре хтмл а скорее структуре ЦСС файлов – создавать каждый раз 5 или 6 штук – напряг – а так сразу и в папочке – так сказать выращиваю в себе культуру кодера…
Вроде и мало что сделано в них – а психологически намного легче начать новый сайт делать.

15. Января 17th, 2006 | cssing :: Архив :: CSS для непослушных броузеров

[...] файл. О том как я это делаю я и написал. Структура CSS файлов Если кто помнит(пост на эту тему), то я линкую из страниц на один CSS файл master.css. Примерно так [...]

16. Апреля 15th, 2007 | Maxim

битая ссылка http://cssing.iatp.org.ua/examples/template/template.rar :o(

17. Января 3rd, 2012 | Андрей

html5 заготовка
http://divhack.com/node/32

Оставить комментарий