Як заощадити час! Заготівля для сайту стартовий набір, shublog
Якось давно мені подумалося: кожен раз, коли я починаю верстати новий сайт, я витрачаю час на схожі процедури створення бази макета. А навіщо кожен раз це робити, якщо можна заощадити зайві, скажімо, п'ять хвилин, використовуючи вже наявну заготовку сайту!
З моменту моєї першої заготовки пройшло достатньо часу, і я вже встиг понапіхано в неї завжди необхідних правил. Я поділюся своєю заготівлею, але для початку розповім основу того, що в ній є і повинно бути. Отже.
Для початку необхідний набір наступних елементів:
файл html і прив'язаний до нього файл css
папка для зображень (поки порожня) і ...
однопіксельні прозоре gif зображення з ім'ям blank.gif.
З першими трьома зрозуміло, створили їх заздалегідь, щоб потім не створювати. А навіщо ж нам гифка? У моєму випадку вона може виконувати наступні три функції. Перша, яка пояснює назву файлу - blank.gif є частиною фікса для правильної роботи Internet Explorer з PNG. Друга функція - якщо раптом знадобиться використовувати таблицю html, то для того, щоб вона не "схлопивается" в експлорері, необхідно зображення-розпірка, яким і буде наша гифка (докладніше буде нижче). Третя функція - коли в якомусь контейнері (div) з бекграундом потрібно клікабельно поле, то я використовую позиціонування прозорого гифа, зробленого посиланням (хоча простіше напевно прописати css-умови для тієї посилання, але тут справа звички).
Для подальшого продовження розробки заготовки потрібно зрозуміти, що потрібно нам в наборі, від якої основи нам відштовхуватися. Перш за все необхідно прикинути які типи сайтів є і що в них потрібно, та й взагалі що потрібно для роботи з ними. Тобто вирішити вже спочатку здалеку, як буде виглядати сайт. Для себе я зупинився на наступному:
У заготівлі повинна бути передбачена трёхколоночная гумова верстка, яка легко може бути замінена на Нерезіновую з рівнянням по центру браузера.
У заготівлі повинен бути підвал, який обов'язково повинен притискатися до нижнього краю браузера.
Визначившись з цими пунктами можна приступати до роботи, не забувши також про те, що будуть також потрібні якісь базові оформлювальні елементи, як, наприклад, оформлення тексту на сторінці, оформлення гіперпосилань і так далі. Також не забуваємо про дрібниці типу прибирання пунктирних рамок навколо посилань і інших елементів.
Для прикладу пропоную свій стартовий набір, який можна завантажити за посиланням. Розглянемо, що ж туди було залишати.
Коротке пояснення до коду html. Не звертаючи уваги на кодування, назва і прописування шляху до файлу css, подивимося в вміст тега body. Бачимо два контейнери з ідентифікаторами total і footer, вони слідують один за одним. У другому немає нічого крім тексту, а перший містить таблицю і ще один контейнер з ідентифікатором footer_guarantor. Собственнотрі контейнера цих використовуються для притиснення підвалу до нижнього краю браузера, а таблиця - являє собою прототип трёхколоночной гумової верстки.
Питання напевно виникло, чому я використовую старовинний метод таблиці замість сучасних контейнерів? По правді особисто я віддаю перевагу контейтерную верстку, але в плані трёхколоночной верстки віддаю перевагу таблицю через її стабільності. Поки щось не знаходив таку верстку контейнерами, яка адекватно б поводилася при зменшенні ширини браузера. Плюс до сих пір у мене виникає питання: якщо треба, наприклад, щоб у лівій і правій колонки був бордюр зліва, або бекграунд, то що треба зробити, щоб висоти цих колонок були рівні, тобто щоб зліва і справа симетрично були блоки з однаковим бекграундом, а не один нижче, інший вище. В голову тільки приходить ідея підстроювання за допомогою жабаскріпта, але адекватним цей метод назвати я не можу. Так що залишаю простоту гумової трёхколоночной за таблицями.
#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-код, адже він все таки несе більшої актуальності.
Рядок 2. Всі відступи по нулях. Скидається через те, що в різних браузерах для різних елементів прописані різні значення відступів. Краще самому їх прописати, щоб все скрізь однаково було, це раз. А по-друге, якщо цього не прописати, то весь сайт не буде притиснутий до краю браузера і будуть відступи з усіх сторін. Ну, напевно ви розумієте про що йдеться =).
Рядки 3-9, 42-58. Притиснення підвалу до нижнього краю браузера.
Рядки 10-13. Оформлення тексту на сторінці. Прописувати завжди доводиться. Сюди ж можна дефолтний білий бекграунд прописати. Тут є секрет. Якщо сайт білий, то здається бекграунд білим не треба вказувати, ведьв се отже білим відображено. Як би не так. Якщо в Вінд буде певний оформлення, то колір буде не білий, а наприклад з бежевим або бузковим відтінком, або взагалі кислотних кольорів, в загальному хто на що здатний був.
Рядки 14-17. Налаштування для зображень. По-перше, прибираємо стандартний бордюр до картинок, це страшна штука, нікому не потрібна. По-друге прибираємо обведення при кліці.
Рядки 18-27. Налаштування для посилань. Колір, оформлення, обведення. Чому не приписано тупо для тега a без всяких Ховер, активів тощо, адже сенс один і той же? Один і той же, але не для експлорера 6. Подбаймо про власників старих комп'ютерів.
Рядки 28-30. Рівняння списку. Параметр в принципі не потрібний, часом навіть паразитний. Потрібен він для тих випадків, коли середній блок контенту флоат притиснутий до лівої панелі - якщо не прописати ці рядки, то пункти списків будуть за межі потрібного блоку вилазити. А паразитних він може бути при використанні скриптів різних меню, побудованих на як раз таки списках. Але не завжди.
Рядки 31-33. Клас spacer. Що за дивний клас? Я використовую верстку div-ами, контейнерами, і часто застосовую властивість float. І ось між літаючими цими блоками, іноді потрібно зробити своєрідний розрив, щоб верстка НЕ повзла або не лізла куди не треба. Тоді я в тих місцях створюю порожній див з цим класом. Якщо бути простіше, то наприклад є блок тексту на ширину сторінки. я під ним хочу прилягають один до одного 3 блоку тексту. Якщо я між першим і цими трьома блоками не поставлю я розрив, то все три блоку будуть десь в тексті, а не під ним. Це якщо образно говорити.
Рядки 34-40. Заголовки. Для кожного сайту їх доводиться підлаштовувати, як не крути. Виходячи з розміру шрифту на сайті і розміру найбільшого заголовка, вираховується розмір заголовків, на око. Також вказується для них колір і відступ (щоб не доводилося при написанні контенту два рази Ентер жати - робити відступ).
На завершення
Ось власне мій набір. Хотілося б послухати ваші ідеї з цього приводу, які речі ви використовуєте, щоб додали, щоб віддали перевагу? Буду чекати ваших повідомлень. А поки, до швидких зустрічей! =)
хм, хороша ідея, і, головне, зручно! хоча він дуже схожий з варіантом з архівом і готовими директоріями і файлами в ньому.
А на скрипт, звичайно, із задоволенням би глянув! Можна сюди написати його, можна поштою. Якщо сюди, то треба буде тег code використовувати або відразу замінені спец-символи. Все руки не доходять на автомат скрипт поставити =)
Велике спасибі за приємний відгук =)
Так, блог класний. Багато разів вже заглядав сюди і знаходив потрібну інфу. Та й дизайн у блогу приємний, нічого зайвого, все в міру.
Олександр, а ти як верстати сайт? Спочатку малюєш макет в фотошопі, потім ріжеш і переносиш в HTML? Я пробував так, але в процесі роботи над сайтом завжди якісь деталі з макета не вписуються в сайт. Тому роблю хедер, футер, кнопки для навігації, а інше вже в процесі роботи над сайтом.
І взагалі вважаю - особливо сильно над супер зовнішнім виглядом сайту прибиватися не треба, адже головне вміст, і що воно в собі несе. Скільки я не рив в мережі по веб дизайну, особливо нічого не знайшов стоїть. Тільки забив собі голову і втратив час.
Може порадиш якусь книгу по цій справі? І спасибі за корисний і пізнавальні блог!
велике спасибі за приємний відгук!
ну, взагалі-то створення макетів і верстка - різні речі. я не дизайнер, тому за малювання і ін. не беруся, для цього є окремі люди. дуже рідко, коли зовсім клієнт економить, пропоную готові макети, як тимчасовий варіант. І то, їх треба часто допрацьовувати.
Не погоджуся на тему зовнішнього вигляду. По-перше, зустрічають по обкладинці - завжди приємніше на красивих сайтах, а на страшні - не хочеться навіть повертатися. По-друге, за винятком орієнтованих на комп'ютерників сайтів, на цих чамих сайтах сидять чайники, яких начинка сайту не цікавить, якою б там геніальний скрипт не був написаний - їм головне, щоб красиво і зручно.
так що на тему дизайну порадити нічого не можу. але, як показує практика, краще йти або в сторону програмування, або в сторону дизайну.
Мабуть доведеться рухатися в обидва боки. (На двох зайців доведеться покласти) Бо все треба вміти робити самому.
Адже це мені до душі. Я зробив на HTML і CSS чотири сайту знайомим, на підході ще два. Зараз відчуваю якесь незадоволення, відчуваю треба рухатися далі і в глиб.
А що скажеш про движки сайтів? Джумла, Друпал і т.д. Я коли вивчав веб будівництво, свідомо обійшов їх стороною. Тепер ось думаю, можна зробити сайт на движку, навчити замовника працювати з панеллю керування, щоб сам додавав на сайт що хоче.
Свій движок мені не написати, php поки тільки вивчаю, та й чую, важкувато це буде для мене.
не бачу сенсу "займатися програмуванням", не вивчаючи мову програмування. плюс ти хочеш всього і відразу. наведу приклад з життя. у мене друг в програмінг не шарить, з версткою у нього біда і дизайнер з нього ніякої. але він робить один сайт цілком за кілька годин. да, він отримає гроші, але на виході буде шматок гагна, який в портфоліо не покладеш. він це розуміє. йому більше і не треба. для цих його сайтів у нас навіть є ржачное назву, одне зі слів у назві якого таке - "говносайт".
якщо ти хочеш займатися і тим і іншим, то тобі доведеться витрачати купу грошей на курси, так як самонавчання справа тонка - не всі можуть, щось обов'язково упустив і потрібно горааааздо більше часу.
що стосується двигунів, то почати порадив би з вордпресс - по-перше, він простіше і до нього набагато легше щось знайти. плюс, у нього простий інтерфейс, а пара плагінів його взагалі робить його зовсім інтуїтивно зрозумілим. мінус - доведеться звернути увагу на швидкодію і захист. жумла - вона зовсім дерев'яна, і вчити працювати з нею клієнтів набагато складніше. з Друпалом давно знайомився, але нічого на ньому не робив. вроде тоже дерев'яний був.
взагалі найкраще самописна, але до цього рости треба і сенсу його зараз робити - немає.
так що я б на твоєму місці був схожий на курси того і іншого, подивився б де що краще виходить і в ту б сторону і спеціалізувався. при цьому, з іншого боку, піднімеш свої навички в іншій області і може для більш-менш адекватних речей тобі цього вистачить. просто цілком ймовірно, що одна зі сторін взагалі не твоя - ну не цікаво, не виходить, або на зразок намагаєшся, а виходить гагно. в загальному, ось
покажеш сайти?
To Денис
Денис, не візьмеш готові CMSкі за основу своєї роботи! У всякому разі, поки не освоїти хоча б основи PHP.
Як розігріваючи в мікрохвильовці заморожену піцу ти не станеш кухарем, так і розгортаючи Джумла на сервері, ти не станеш програмістом!
Попишу власне на чистому PHP, відчуй кайф, коли тобою придумана логіка, тобою написаний код раптом починає працювати, ганяти інфу, сортувати її, обробляти, робити те, що ти придумав!
А використовуючи CMS без знання PHP, елементарний косяк буде вганяти тебе в ступор.
Так що гони Windows в шию, став Linux, Apache (якщо не вже ...), і вперед!
2egorr. згоден! але вінду не обов'язково гнати в шию, локалку з Апачі на ньому теж можна спокійно тримати =)
Сайти мої ось: expertavto.com
yristcom.ru
tdprometey.ru
runnerman.ru
Сайт зі спортивним ухилом мій перший, (header взагалі жесть) два роки вже в мережі. Він на таблицях повністю. Хочу його переробити на php, а то гемор сторінки нові вже додавати.
egorr До речі Apache на Windows7 у мене не пішов. Тому використовую Денвер.
І ще тупий питання. Linux чим краще вінди? Чув начебто, що вірусна під неї не пишуть хакери. І як взагалі сумісність з різним софтом?
з приводу сайтів. то, що можна хоч якось назвати дизайном, там немає. іншими словами, потрібно вчитися, дивитися, виробляти смак.
це називається не переробити на пхп, а посадити на движок.
тут все одно, що обговорювати, що краще, автомобіль або велосипед, ноутбук або комп'ютер, бутерброд або гамбургер. у кожного свої плюси і мінуси.
До речі Apache на Windows7 у мене не пішов.
Тому використовую Денвер.
Це правильно. Але XAMPP ще правильніше!
Linux чим краще вінди?
Чув начебто, що вірусна під неї не пишуть хакери.
Тому як марно ... Це ж не Винда! Linux навіть користувачеві впустити вельми непросто!
І як взагалі сумісність з різним софтом?
Ніяких проблем не буде. На крайній випадок є Wine і VirtualBox.
Дякую за роз'яснення хлопці.
Здрастуйте, панове! Знайомі відкрили тур-агенство, хочуть мати сайт. Інформації на сайті буде звичайно-ж багато. Створювати такий сайт чисто на html і css можна, але гамірно буде додавати інформацію, змінювати ціни та інше. Питання таке. Такі сайти робляться на звичайних двигунах (типу Джумла і т.д). Або під них пишуть індивідуальні движки.
Вітання!
Для створення великого сайту-порталу індивідуально щось створюють тільки в крайніх і певних випадках. Плюс, як правило, це затратнее. Так що, винаходити щось зовсім необов'язково =)
Спасибі за відповідь.