Створення сайту
Сьогодні я продовжу серію статей про створення сайту.
Отже, після установки обраного нами скрипта (для уроків буду використовувати DLE), нам потрібно створити свій дизайн, щоб наш сайт не був схожий на сотні інших сайтів в мережі.
Відразу скажу, що не знаючи основ .html і .css ви не зможете верстати дизайн.
Для початку нам потрібно буде намалювати дизайн. Спочатку я хотів для уроку намалювати свій, але на це піде багато часу, тому для прикладу верстки я взяв готовий шаблон, щоб не витрачати час на його малювання. Знайти уроки з малювання дизайну ви можете на багатьох ресурсах в мережі. Раджу, якщо мало фантазії, брати з кожного уроку будь-які частини, і малювати їх по-своєму. Повністю перемальовувати немає сенсу, тому що це зробили багато до вас.
Отже, візьмемо такий ось дизайн.
Завантажити шаблон у форматі .psd (для Photoshop) ви можете тут.
Після того, як ви завантажили шаблон, потрібно його розрізати і вшити в код. Для чого це потрібно? Чому не можна повністю «увіткнути» все зображення? Все досить просто, в цьому випадку дизайн буде лише картинкою, в якій не можна нічого змінити і нічого писати.
Тому зображення потрібно розрізати для того, щоб частини цього зображення могли бути вшиті в код, і при додаванні новин або будь-яких записів, автоматично розтягуватися, не виходячи за розміри зображення. Знову ж, різати треба в залежності від верстки, яку ви збираєтеся використовувати. Зараз в моді верстка за допомогою div'ов, але я її не визнаю, тому що у неї багато обмежень, а віддавати данину моді я не збираюся. Тому урок буде з використанням верстки таблицями. Раджу об'єднувати дві верстки. Цим ви досягнете кращого результату.
Отже, для початку нам потрібно розрізати шаблон.
Запускаємо Photoshop і завантажуємо в нього зображення.
Зображення повинно бути в форматі .gif або .png. Навіщо це треба? Все просто. Дані формати підтримують альфаканали і прозорість. Це означає, що весь фон буде прозорим. Якщо ви будете різати в .jpg, то залишиться білий фон, або який він там у вас. Відповідно, фон сайту доведеться робити такого ж кольору, щоб фон не муляв очі. Багато хто використовує .gif, але я від нього відмовився, тому що IE не дуже розуміє прозорість в даному форматі, і доведеться писати купу коду, який підвищить вагу сторінки. Так само даний формат має досить погана якість і не дуже добре відображає тіні. Проте, зображення у форматі .png, досить багато важать, і можуть сильно перевантажити станицю. Щоб такого не відбувалося, є доповнення до Photoshop, що дозволяє зберігати зображення у форматі SuperPNG. Це той же .png, тільки з можливістю прибирати метатеги, інформацію про зображенні, що дозволяє знизити вагу зображення навіть менше, ніж .gif.
Отже, продовжимо. Завантаживши зображення, нам потрібно його розрізати. Але як? Давайте подивимося на саме зображення.
Отже, нам потрібна сама напис або логотип. Його можна отримати двома способами - зберегти тільки один напис або вирізати з частиною фону. Раджу зберегти тільки напис, але можете робити на свій розсуд.
Для визначення точного розміру в пікселях можна скористатися інструментом «лінія».
Вгорі встановлюємо потрібну нам товщину, перетягуємо об'єкт на потрібний нам край і з обох сторін ставимо напрямні. Якщо хтось знає більш зручний варіант для вимірювання - буду вдячний. Але поки користуюся цим. Давайте встановимо напрямні на нашій шапці.
Щоб нам було більш зрозуміло, давайте класифікуємо частини нашого дизайну.
Як бачите, сайт ділиться на шапку, сайдбар, контент і підвал. Виходячи з цього і буде будуватися наш дизайн і верстка.
Як бачите, у нас багато дрібних деталей, багато хто може сказати: «А чи не можна було повністю вирізати блок?». Ні, не можна. В цьому випадку макет буде статистичним, і не буде змінюватися в залежності від інформації, що знаходиться в ньому. Тому нам потрібно вирізати всі маленькі деталі. Ви зрозумієте, навіщо це потрібно, коли ми перейдемо до написання коду.
Отже, ми відзначили всі, що нам потрібно вирізати, і тепер настав час зайнятися самої нарізкою. Напрямні нам допоможуть не вибратися за рамки потрібного нам сектора. Вибираємо інструмент «рамка». і виділяємо потрібну частину для нарізки. Тепер двічі клацають по мишці в місці виділення, і зображення обрізається.
Точно так ми чинимо з усіма частинами нашого шаблону.
Тепер у нас з'явилося багато нарізаних частин шаблону, які, після написання коду, стане нашим дизайном. Врахуйте, що написи розділів, посилань і т.п. різати непотрібно, тому що це текстова інформація, яка буде залежати від налаштувань нашого движка і потрібних нам функцій.
Для більш докладної інструкції по роботі в Photoshop зверніться до безлічі інструкцій в мережі.
Так само викладаю підручники по роботі з HTML і CSS, які знадобляться для наступної нашої статті.
HTML для тих, хто в танку
- Якщо у вас немає часу для того, щоб проводити на ринку весь день, ви можете продати авто заповнивши анкету. І покупці на ваш автомобіль знайдуться самі.
- Зараз дуже вигідно купувати нерухомість. Ціни на нерухомість впали, а це нам на руку. Не пропустіть момент.
Шановні Новомосковсктелі! Якщо ви виявили в тексті помилку, не полінуйтеся, виділіть слово і натисніть CTRL + Enter. Зробимо мову чистішою!
Новини схожі на: Створення сайту. нарізка шаблону
І знову оновлення дизайну блогу
Вічна боротьба або DIV VS TABLE
Вже давно йде битва між прихильниками верстки DIV'амі і верстки таблицями. У кожного з них є свої аргументи. Спочатку я вчився верстати таблицею, так як в той час DIV'ов ще не було. Потім почав помічати, що багато хто використовує DIV'и, і закликають до цього інших. Начебто і аргументи
Переклад скандинавського скрипта і шаблон для нього
В одному з постів я писав про скрипт скандинавського аукціону. Даним скриптом я сам не користувався, так як немає мети створювати скандинавський аукціон. Я лише перевірив його на тестовому сервері, і переконавшись в його працездатності - виклав скрипт на блозі. На моє здивування, скрипт має досить
Естафета - Дизайн блогу - погляд з боку
Отже, підхоплюю естафету від Спостерігача - Дизайн блогу - погляд з боку. До того ж, я черговий раз міняю дизайн свого блогу. Я міняв дизайн блога раз п'ять (раз в два місяці), і все тому, що мені дизайн не подобається - починаєш з одного - закінчуєш іншим. Отже, в цей раз я вирішив задумку