ФорумРазработкаКлиентская сторонаВерстка и оформление → Дизайн для Wp, Верстка

Дизайн для Wp, Верстка

  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 июня 2010 г. 14:08

    Народ, столкнулся с проблемой верстки для WordPress. Нарисовал вчера дизайн, а добавил только шапку и меню горизонтальное, то бишь файл Header.php отредактировал.

    Мне нужно из jpeg фала сверстать дизайн. Я ни когда этого не делал. Хотел бы услышать какие-нибудь рекомендации по верстке. С чего начинать. Резать буду либо фотошопом либо Фаерворксом.
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 14 июня 2010 г. 15:50, спустя 1 час 42 минуты 33 секунды

    AdmBuxonly, ножом резать будет удобнее =)))

    бери уже готовый исходник в ВП (дефолтный темплейт) и на его основе делай свой. В общем, сложного по сути ничего.
    А в целом, для удобства, лучше сначала сверстать обычную ХТМЛ-страницу полностью всего шаблона, а уже после этого его переносить в ВП.
    А резать таки Фаерфоксом… хм… интересно было бы посмотреть как ты это сделаешь :)

    п.с. А вот Аристер - злоебучее хернё, хоть и делает типа рабочее нечто. Но вообще в коде там пиздец немаленький, и лишнего ого как много, особенно в стилях.
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 июня 2010 г. 16:03, спустя 12 минут 40 секунд

    В стилях вообще какие-то паттерны находятся левые… А Fireworks ом я уже разал. Для джумлы делал. Там все намного проще было… а тут запоролся с ВП.
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 14 июня 2010 г. 17:24, спустя 1 час 21 минуту 45 секунд

    AdmBuxonly, ага, теперь понял что прочитал неправильно. Фаерворксом может и порежешь. Но один хер порезать - это пол беды. А дальше что будешь делать?

    п.с. Для Джумлы шаблон натягивать не проще чем в ВП. Может и не сложнее, но и не проще. По сути и там и там говененько, так как многое самому приходится допиливать по функционалу отображения шаблонов.
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 июня 2010 г. 17:38, спустя 13 минут 38 секунд

    AdmBuxonly, ага, теперь понял что прочитал неправильно. Фаерворксом может и порежешь. Но один хер порезать - это пол беды. А дальше что будешь делать?


    Ну так как у меня с дивами очень плохо, думаю сверстать на таблицах, которые знаю на 5+. Или полгода потратить на чтение различных книг по веб-дизайну. Я за первое.
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 июня 2010 г. 18:14, спустя 36 минут 2 секунды

    Может порекомендуешь литературу или сайт, где можно уверенно верстать на дивах макеты любой сложности?
  • Абырвалг

    Сообщения: 6480 Репутация: N Группа: Джедаи

    Spritz 14 июня 2010 г. 18:28, спустя 13 минут 37 секунд

    у Шевчука есть тема для WP - Конструктор. На основе нее типа удобно шаблоны делать.
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 июня 2010 г. 18:41, спустя 12 минут 52 секунды

    Я предлагаю, для реализации шаблона следующий код (рисунок выложу чуть по позже):

    <div id="main">
    <div id="header">HEADER</div><!–End header–>
    <div id="block_header">BLOCK POD HEADER</div><!–End block_header–>
    <div id="menu">MENU</div><!–End menu–>

    <div id="content">CONTENT
    <div id="block_viget">
    <div id="r_menu">PR MENU</div>
    <div id="l_menu">LT MENU</div>
    </div><!–End block_viget–>
    </div><!–End content–>
    </div> <!–End main–>


    Ждите рисунок, а то ни чего не понять…
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 июня 2010 г. 18:50, спустя 8 минут 53 секунды

    Этот правильный код, там скосячил а кнопку редактирования найти не могу.
    <div id="main">
    <div id="header">HEADER</div><!–End header–>
    <div id="block_header">BLOCK POD HEADER</div><!–End block_header–>
    <div id="menu">MENU</div><!–End menu–>

    <div id="content">CONTENT
    <div id="block_viget">
    <div id="r_menu">PR MENU</div>
    <div id="l_menu">LT MENU</div>
    </div><!–End block_viget–>
    </div><!–End content–>
    <div id="news">NOVOSTY</div>
    <div id="footer">FOOTER</div>
    </div> <!–End main–>


    - вот
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 июня 2010 г. 19:43, спустя 53 минуты 12 секунд

    Вообщем вот какой код получился. Но я не знаю как прикрепить block_viget, чтобы он растягивался вниз, когда контент будет растягиваться. Т.е. вместе с content растягивался. А так получилось.

    #main {
    z-index:0;
    height:auto;
    width:1001px;
    margin:0 auto;
    background-color:#fff;
    }
    #header {
    z-index:1;
    height:150px;
    width:1001px;
    margin:0 auto;
    background-color:#ccc;
    }
    #block_header {
    z-index:1;
    height:350px;
    width:1001px;
    margin:0 auto;
    background-color:#333;
    }
    #menu {
    z-index:1;
    height:70px;
    width:1001px;
    margin:0 auto;
    background-color:#00ffff;
    }
    #content {
    z-index:1;
    height:500px;
    width:595px;
    background-color:#f4fab5;
    }
    #block_viget {
    margin-top:-18px;
    margin-left:595px;
    z-index:1;
    height:auto;
    width:406px;
    background-color:#adefbb;
    }
    #r_menu {}
    #l_menu {}
    #news {
    z-index:1;
    height:355px;
    width:1001px;
    margin:0 auto;
    background-color:#000;
    }
    #footer {
    z-index:1;
    height:25px;
    width:1001px;
    margin:0 auto;
    background-color:#aa4a4a;
    }

    /* End Main Styles */
    Спустя 57 сек.
    Для r_menu и l_menu допишу потом…
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 18 июня 2010 г. 14:04, спустя 3 дня 18 часов 21 минуту

    Ребят, помогите пожалуйста!!! Не могу исправить. Ошибку допустил и блоки с меню поехали вниз, когда текст контента добавил. Что дописать или исправить помогите.

    То, что получилось, можно глянуть тут: finanse-pro.ru/test/index.php

    Вот файл КСС: finanse-pro.ru/test/style.css

    А вот код верстки:

    <div id="main">
    <div id="header"></div><!–End header–>
    <div id="block_header"></div><!–End block_header–>
    <div id="menu"></div><!–End menu–>

    <div id="content">
    <div id="soder">Цель данного — дать как можно больше информации о заработке в сети Интернет, открыть глаза на несуществующие виды заработка и возможности заработать первый рубль ну или доллар.<div>
    <div id="block_viget">
    <div id="r_menu">PR MENU</div><!–End r_menu–>
    <div id="l_menu">LT MENU</div><!–End l_menu–>
    </div><!–End block_viget–>
    </div><!–End content–>
    <div id="news">NOVOSTY</div>
    <div id="footer">FOOTER</div>
    </div> <!–End main–>


    Помогите пожалуйста, я не так сильно в этом разбираюсь, и все что смог сделал..
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 18 июня 2010 г. 14:22, спустя 18 минут 20 секунд

    Область контента я выделил… синим
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 18 июня 2010 г. 17:43, спустя 3 часа 20 минут 18 секунд

    AdmBuxonly, не читал твои стили, но, думаю примерно так:
    1. soder - сделай эму райт-маржин по ширине двух боковых колонок.
    2. content - ему оверфлав поставь скрытый (хайден который)
    Спустя 164 сек.
    AdmBuxonly, обломался я и решил таки посмотреть в стили - у тебя там ппц каша.
    В общем, лучше делай все заново, начиная от каркаса и вставляя внутрь постепенно нужные тебе блоки. А то нынче у тебя тот ещё ппц. У тебя блоки менню находятся визуально справа, а обтекаемость у них СЛЕВА. Схуяли!?
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 18 июня 2010 г. 18:04, спустя 21 минуту 40 секунд

    Хорошо, попробую сверстать заново, если не получиться напишу, где не понял.
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 18 июня 2010 г. 18:34, спустя 29 минут 43 секунды

    Все, поменял расположение блоков и подправил КСС, но теперь проблема вот в чем:текст контента уходит под блок с новостями. Возможно и меню также. Как быть? Я не понимаю смысл позиционирования. Как мне сделать так, чтобы блок с новостями автоматом двигался вниз, когда будет увеличиваться контент или пункты меню?

Пожалуйста, авторизуйтесь, чтобы написать комментарий!