От Slices към табличен лейаут или css?

Един коментар от поста “Ако можехте какво бихте променили във Photoshop?” ме провокира да напиша тази тема. Всъщност ще ми отнеме много по-малко време да отговоря на blood_freak в пост отколкото с коментар, защото тук мога да вмъкна няколко картинки 🙂 .

Случаят е следният: Имате вече готов лейаут на уеб сайт в PSD формат например (всъщност формата няма абсолютно никакво значение по отношения на това което ще обясня) . Имате лейаут и стигате до момента, в който Photoshop (или ImageReady в CS2 и по-стари версии) ще го превърне в “работещ” уеб сайт. Работещ е малко силно казано, защото просто нарязан и пльоснат в нета, сайтът е далече от качествен продукт. Но това няма да го коментирам сега. Нарязвате сайта и получавате код. Да но това което получавате е табличен лейаут хъх. А таблиците, както знаем са не са най-добрият вариант за основа на кода на уеб сайта ви. Ами има и друг вариант – да кажем на Photoshop, че не искаме код с таблици, а със css. Естествено че може 🙂 . Е кодът не е чак толкова подреден и описателен, както вие бихте си го написали, имам предвид имена на класове и тн, но все пак е нещо, а и ако сте на “Вие” с css, тази опцийка ще ви помогне много.

Ето и същината. Лейаутът е нарязан и всичко е готово да бъде експортнато. Следва ctrl+alt+shift+S (Save for Web & Devices shortcut). Виждате големия диалогов прозорец с различните настройки за формати и тн. Отдясно горе цъкнете триъгълничето (фиг.1) отстрани под бутона Done.

Оттам изберете Edit Output Settings. Ще видите нов прозорец с различни настройки по експортването. От падащото меню изберете Slices, както е на фиг.2.

И тук вече е забавата. Настройката по подразбиране (не знам защо е оставена от адобските инженери) е табличен лейаут – Generate Tables. Вие може да го промените на css лейаут от Generate CSS (by ID, inline, by Class), като тази опцийка ще ви поднесе един освободен от тежестта на таблиците лайаут.

Аз бих предпочел да си напиша css-a , но все пак ако бюджета е нисък или ви притиска времето, или просто така ви е кеф ето ви едно решение 🙂

Много набързо потърсих и открих една тема, която ми се струва описателна относно CSS vs Табличен лейаут

Коментари през Facebook

2 Comments
  • blood_freak
    January 4, 2008

    Благодаря за отговора, че чак и цяла тема. 😉 Още утре (т.е днес, но след като се наспя)ще пробвам, да видим как става номера, не знаех, че има такава опция и до сега само таблици шляпах наред…

  • ph1x
    January 4, 2008

    😉

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

Your email address will not be published. Required fields are marked *