Как сэкономить время! Заготовка для сайта “Стартовый набор”

« Предыдущая запись
 
  Следующая запись »
 

Как-то давно мне подумалось: каждый раз, когда я начинаю верстать новый сайт, я трачу время на схожие процедуры создания базы макета. А зачем каждый раз это делать, если можно сэкономить лишние, скажем, пять минут, используя уже имеющуюся заготовку сайта!

С момента моей первой заготовки прошло достаточно времени, и я уже успел понапихать в неё всегда необходимых правил. Я поделюсь своей заготовкой, но для начала расскажу основу того, что в ней есть и должно быть. Итак.

 

Что необходимо для заготовки для сайта?

Для начала необходим набор следующих элементов:

  1. файл html и привязанный к нему файл css
  2. папка для изображений (пока пустая) и…
  3. однопиксельное прозрачное gif изображение с именем blank.gif.

С первыми тремя понятно, создали их заранее, чтобы потом не создавать. А зачем же нам гифка? В моём случае она может выполнять следующие три функции. Первая, которая объясняет название файла – blank.gif является частью фикса для правильной работы Internet Explorer с PNG. Вторая функция – если вдруг понадобится использовать таблицу html, то для того, чтобы она не “схлопывалась” в эксплорере, необходимо изображение-распорка, которым и будет являться наша гифка (подробнее будет ниже). Третья функция – когда в каком-то контейнере (div) с бэкграундом нужно кликабельное поле, то я использую позиционирование прозрачного гифа, сделанного ссылкой (хотя проще наверное прописать css-условия для той ссылки, но тут дело привычки).

 

Для дальнейшего продолжения разработки заготовки нужно понять, что нужно нам в наборе, от какой основы нам отталкиваться. Прежде всего необходимо прикинуть какие типы сайтов есть и что в них нужно, да и вообще что нужно для работы с ними. То есть решить уже изначально издалека, как будет выглядеть сайт. Для себя я остановился на следующем:

  1. В заготовке должна быть предусмотрена трёхколоночная резиновая вёрстка, которая легко может быть заменена на нерезиновую с равнением по центру браузера.
  2. В заготовке должен быть подвал, который обязательно должен прижиматься к нижнему краю браузера.

Определившись с этими пунктами можно приступать к работе, не забыв также о том, что будут также нужны какие-то базовые оформительские элементы, как, например, оформление текста на странице, оформление гиперссылок и так далее. Также не забываем про мелочи типа убирания пунктирных рамок вокруг ссылок и других элементов.

Для примера предлагаю свой стартовый набор, который можно скачать по ссылке. Рассмотрим, что же туда было покидано.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Название сайта</title>
<link href="master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="total">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="285px" valign="top">
                <img src="blank.gif" width="285px" height="1"><br>
            </td>
            <td valign="top">
                <img src="blank.gif" width="320px" height="1"><br>
            </td>
            <td width="195px" valign="top">
                <img src="blank.gif" width="195px" height="1"><br>
            </td>
        </tr>
    </table>
    <div id="footer_guarantor">&nbsp;</div>
</div>
<div id="footer">
Подвал
</div>
</body>
</html>

Краткое пояснение к коду html. Не обращая внимания на кодировку, название и прописывание пути к файлу css, посмотрим в содержимое тега body. Видим два контейнера с идентификаторами total и footer, они следуют друг за другом. Во втором нет ничего кроме текста, а первый содержит таблицу и ещё один контейнер с идентификатором footer_guarantor. Собственнотри контейнера этих используются для прижатия подвала к нижнему краю браузера, а таблица - представляет собой прототип трёхколоночной резиновой вёрстки.

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

@charset "windows-1251";
* {margin: 0px;    padding: 0px;}
html {
    height: 100%;
}
body {
    min-height:100%;
    height: 100%;
}
body,td,th {
    font-family: Tahoma, Verdana, Arial;
    font-size: 12px;
}
IMG {
    border: 0;
    outline: none;
}
a:link, a:visited, a:active {
    text-decoration: none;
    color: #000;
    outline: none;
}
a:hover {
    text-decoration: underline;
    color: #000;
    outline: none;
}
ol, ul{
    list-style-position: inside;
}
.spacer {
    clear:both;
}
h1, h2, h3, h4, h5, h6 { color:#000; padding-bottom: 15px; }
h1 { font-size:29px; }
h2 { font-size:25px; }
h3 { font-size:20px; }
h4 { font-size:18px; }
h5 { font-size:15px; }
h6 { font-size:12px; }

#total {
    min-width: 1000px;
    height: auto !important;
    min-height:100%;
    height: 100%;
}
#footer_guarantor {
    height: 36px;
    clear: both;
}
#footer {
    height: 36px;
    clear: both;
    margin: auto;
    margin-top: -36px;
    min-width: 1000px;
}

А теперь разберём css-код, ведь он всё таки несёт большую актуальность.

  1. Строка 1. Кодировка по умолчанию.
  2. Строка 2. Все отступы по нулям. Сбрасывается по причине того, что в различных браузерах для различных элементов прописаны разные значения отступов. Лучше самому их прописать, чтобы всё везде одинаково было, это раз. А во-вторых, если этого не прописать, то весь сайт не будет прижат к краю браузера и будут отступы со всех сторон. Ну, наверняка вы понимаете о чём речь=).
  3. Строки 3-9, 42-58. Прижатие подвала к нижнему краю браузера.
  4. Строки 10-13. Оформление текста на странице. Прописывать всегда приходится. Сюда же можно дефолтный белый бэкграунд прописать. Тут есть секрет. Если сайт белый, то кажется бэкграунд белым не надо указывать, ведьв сё итак белым отображено. Как бы ни так. Если в виндых будет определённое оформление, то цвет будет не белый, а например с бежевым или сиреневым оттенком, или вообще кислотных цветов, в общем кто на что горазд был.
  5. Строки 14-17. Настройки для изображений. Во-первых, убираем стандартный бордюр к картинкам, это страшная штука, никому не нужна. Во вторых убираем обводку при клике.
  6. Строки 18-27. Настройка для ссылок. Цвет, оформление, обводка. Почему не приписано тупо для тега a без всяких ховеров, активов и пр, ведь смысл один и тот же? Один и тот же, но не для эксплорера 6. Позаботимся о владельцах старых компов.
  7. Строки 28-30. Равнение списка. Параметр в принципе не нужный, порой даже паразитный. Нужен он для тех случаев, когда средний блок контента флоатом прижат к левой панели - если не прописать эти строки, то пункты списков будут за пределы нужного блока вылезать. А паразитным он может быть при использовании скриптов различных меню, построенных на как раз таки списках. Но не всегда.
  8. Строки 31-33. Класс spacer. Что за странный класс? Я использую вёрстку div-ами, контейнерами, и часто применяю свойство float. И вот между летающими этими блоками, иногда нужно сделать своеобразный разрыв, чтобы вёрстка не ползла или не лезла куда не надо. Тогда я в тех местах создаю пустой див с этим классом. Если быть проще, то например есть блок текста на ширину страницы. я под ним хочу прилегающие друг к другу 3 блока текста. Если я между первым и этими тремя блоками не поставлю разрыв, то все три блока будут где-то в тексте, а не под ним. Это если образно говорить.
  9. Строки 34-40. Заголовки. Для каждого сайта их приходится подстраивать, как ни крути. Исходя из размера шрифта на сайте и размера самого большого заголовка, высчитывается размер заголовков, на глазок. Также указывается для них цвет и отступ (чтобы не приходилось при написании контента два раза энтер жать - делать отступ).

 

В завершении

Вот собственно мой набор. Хотелось бы послушать ваши идеи по этому поводу, какие вещи вы используете, чтобы добавили, чтобы предпочли? Буду ждать ваших сообщений. А пока, до скорых встреч!=)

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 4, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 21 на запись

"Как сэкономить время! Заготовка для сайта “Стартовый набор”"

  1. Что на подготовку к работе уходит много времени – это точно.
    И это нудно и скучно.
    Однажды меня это так достало, что я сел и написал простенькую програмулю, которая городит необходимые директории (‘css’, ‘img’), кладет туда индексный файл, css-файл с базовыми директивами и прочую мутьку.
    Указываешь проге путь до папки для будущего проекта и всё!
    Если уважаемому автору будет интересно взглянуть, обязательно пришлю.

  2. хм, хорошая идея, и, главное, удобно! хотя он очень схож с вариантом с архивом и готовыми директориями и файлами в нём.
    А на скрипт, конечно, с удовольствием бы глянул! Можно сюда написать его, можно по почте. Если сюда, то надо будет тег code использовать или сразу заменённые спец-символы. Всё руки не доходят на автомат скрипт поставить =)

  3. Классный блог!))) Респект автору!

  4. Большое спасибо за приятный отзыв =)

  5. Да, блог классный. Много раз уже заглядывал сюда и находил нужную инфу. Да и дизайн у блога приятный, ничего лишнего, всего в меру.
    Александр, а ты как верстаешь сайты? Сначала рисуешь макет в фотошопе, потом режешь и переносишь в HTML? Я пробовал так, но в процессе работы над сайтом всегда какие-то детали с макета не вписываются в сайт. Поэтому делаю хедер, футер, кнопки для навигации, а остальное уже в процессе работы над сайтом.
    И вообще считаю – особо сильно над супер внешним видом сайта прибиваться не надо, ведь главное содержимое, и что оно в себе несёт. Сколько я не рыл в сети по веб дизайну, особо ничего не нашёл стоящего. Только забил себе голову и потерял время.
    Может посоветуешь какую-нибудь книгу по этому делу? И спасибо за полезный и позновательный блог!

  6. большое спасибо за приятный отзыв!

    ну, вообще-то создание макетов и вёрстка – разные вещи. я не дизайнер, поэтому за рисование и пр. не берусь, для этого есть отдельные люди. очень редко, когда совсем клиент экономит, предлагаю готовые макеты, как временный вариант. И то, их надо зачастую дорабатывать.

    Не соглашусь на тему внешнего вида. Во-первых, встречают по обложке – всегда приятнее на красивых сайтах, а на страшные – не хочется даже возвращаться. Во-вторых, за исключением ориентированных на компьютерщиков сайтов, на этих чамых сайтах сидят чайники, которых начинка сайта не интересует, какой бы там гениальный скрипт не был написан – им главное, чтобы красиво и удобно.

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

    ещё раз спасибо за комментарий =)

  7. Видимо придётся двигаться в обе стороны.(на двух зайцев придётся положить) Ибо всё надо уметь делать самому.
    Ведь это мне по душе. Я сделал на HTML и CSS четыре сайта знакомым, на подходе ещё два. Сейчас ощущаю какое-то неудовлетворение, чувствую надо двигаться дальше и в глубь.
    А что скажешь про движки сайтов? Джумла, Друпал и т.д. Я когда изучал веб строительство, сознательно обошёл их стороной. Теперь вот думаю, можно сделать сайт на движке, научить заказчика работать с панелью управления, чтоб сам добавлял на сайт что хочет.
    Свой движок мне не написать, php пока только изучаю, да и чую, сложновато это будет для меня.

  8. не вижу смысла “заниматься программированием”, не изучая язык программирования. плюс ты хочешь всего и сразу. приведу пример из жизни. у меня друг в программинге не шарит, с вёрсткой у него беда и дизайнер из него никакой. но он делает один сайт целиком за несколько часов. да, он получит деньги, но на выходе будет кусок гагна, который в портфолио не положишь. он это понимает. ему больше и не надо. для этих его сайтов у нас даже есть ржачное название, одно из слов в названии которого такое – “говносайт”.
    если ты хочешь заниматься и тем и другим, то тебе придётся тратить кучу денег на курсы, так как самообучение дело тонкое – не все могут, что-то обязательно упустится и потребуется горааааздо больше времени.
    что касается движков, то начать посоветовал бы с вордпресса – во-первых, он проще и к нему гораздо легче что-то найти. плюс, у него простой интерфейс, а пара плагинов его вообще делает его совсем интуитивно понятным. минус – придётся обратить внимание на быстродействие и защиту. жумла – она совсем деревянная, и учить работать с ней клиентов гораздо сложнее. с друпалом давно знакомился, но ничего на нём не делал. вроде тоже деревянный был.
    вообще лучше всего самописная, но до этого расти надо и смысла его сейчас делать – нет.
    так что я бы на твоём месте походил на курсы того и другого, посмотрел бы где что лучше получается и в ту бы сторону и специализировался. при этом, с другой стороны, поднимешь свои навыки в другой области и может для более или менее адекватных вещей тебе этого хватит. просто вполне вероятно, что одна из сторон вообще не твоя – ну не интересно, не получается, или вроде стараешься, а получается гагно. в общем, вот
    покажешь сайты?

  9. To Денис
    Денис, не бери готовые CMSки за основу своей работы! Во всяком случае, пока не освоишь хотя бы основы PHP.
    Как разогревая в микроволновке замороженную пиццу ты не станешь поваром, так и разворачивая Джумла на сервере, ты не станешь программером!
    Попиши собственно на чистом PHP, почувствуй кайф, когда тобой придуманная логика, тобой написанный код вдруг начинает работать, гонять инфу, сортировать её, обрабатывать, делать то, что ты придумал!
    А используя CMS без знания PHP, элементарный косяк будет вгонять тебя в ступор.
    Так что гони Windows в шею, ставь Linux, Apache(если не уже…), и вперёд!

  10. 2egorr, согласен! но винду не обязательно гнать в шею, локалку с апаче на нём тоже можно спокойно держать =)

  11. Сайты мои вот: expertavto.com
    yristcom.ru
    tdprometey.ru
    runnerman.ru

    Сайт со спортивным уклоном мой первый,(header вообще жесть) два года уже в сети. Он на таблицах полностью. Хочу его переделать на php, а то гемор страницы новые уже добавлять.

    egorr Кстати Apache на Windows7 у меня не пошёл. Поэтому пользую Денвер.
    И ещё тупой вопрос. Linux чем лучше винды? Слыхал вроде, что вирусню под неё не пишут хакеры. И как вообще совместимость с различным софтом?

  12. по поводу сайтов. то, что можно хоть как-то назвать дизайном, там нет. иными словами, нужно учиться, смотреть, вырабатывать вкус.

    это называется не переделать на пхп, а посадить на движок.

    тут всё равно, что обсуждать, что лучше, автомобиль или велосипед, ноутбук или компьютер, бутерброд или гамбургер. у каждого свои плюсы и минусы.

  13. Кстати Apache на Windows7 у меня не пошёл.

    Криво ставил.

    Поэтому пользую Денвер.

    Это правильно. Но XAMPP ещё правильней!

    Linux чем лучше винды?

    Для веб-программинга Linux бесспорно лучше, потому что это родная среда подавляющего большинства серверов. И ещё можно привести кучу доводов, но это всё-таки комменты к статье, а не форум.

    Слыхал вроде, что вирусню под неё не пишут хакеры.

    Потому как бесполезно… Это ж не Винда! Linux даже юзеру уронить весьма непросто!

    И как вообще совместимость с различным софтом?

    Никаких проблем не будет. На крайний случай есть Wine и VirtualBox.

  14. Спасибо за разъяснения ребята.

  15. Всегда пожалуйста! =)

  16. Здравствуйте господа! Знакомые открыли тур-агенство, хотят иметь сайт. Информации на сайте будет конечно-же много. Создавать такой сайт чисто на html и css можно, но геморно будет добавлять информацию, менять цены и прочее. Вопрос такой. Такие сайты делаются на обычных движках (типа Джумла и т.д). Или под них пишут индивидуальные движки.

  17. Привет!
    Для создания крупного сайта-портала индивидуально что-то создают только в крайних и определённых случаях. Плюс, как правило, это затратнее. Так что, изобретать что-то вовсе необязательно =)

  18. Спасибо за ответ.

  19. незачта =)

  20. Дмитрий
    03/07/2013 at 1:47 Постоянная ссылка Цитировать

    Симпатичный и полезный сайтик! Добавлю в закладки :-)

  21. Александр Шуйский
    03/07/2013 at 6:55 Постоянная ссылка Цитировать

    Спасибо =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии