Как создать разметку CSS для не дизайнеров

Ok,

Мне было поручено портировать / преобразовать / обновить сайт на работе с макета на основе таблиц до макета на основе CSS. Сайт очень типичный, у него есть заголовок, панель навигации (ширина заголовка), левый столбец, основной столбец, за которым следует нижний колонтитул.

Одна из проблем заключается в том, что наш корпоративный веб-стандарт - IE6. Ходят слухи, что скоро мы развернем IE7, но в настоящее время моей целью является IE6. Я использую Firefox, а мои пользователи - нет, так что это не поможет.

Я нашел SuperPreview онлайн вчера, и это очень поможет, но, честно говоря, я не очень хорошо разбираюсь в CSS, и это меня расстраивает. Мне нужно написать / сгенерировать разметку, которая будет работать с IE6 и, надеюсь, также будет работать с IE7 и IE8, но IE6 - моя базовая линия.

Существуют ли инструменты, которые могут мне помочь или помочь мне в этом? Мне просто нужен инструмент, который может сгенерировать мне какой-нибудь макет, например мастер календаря в Word.

Я знаю, что это сложная задача, есть предложения?

p.s. Чтобы дать вам некоторое представление о возрасте этого сайта, он был написан на ASP 3 или Classic ASP.

Отредактировано.


css internet-explorer-6
person Chris    schedule 03.04.2009    source источник
comment
superpreview звучит круто, но я рассмеялся, когда прочитал [текущие] известные проблемы, в том числе страницы, использующие JavaScript, не имеют точного предварительного просмотра, а композиции размером более 100 МБ могут не отображаться полностью.   -  person Simon_Weaver    schedule 17.04.2009

Ответы (4)


arrow_upward
1
arrow_downward

Пойду искать сайты с готовыми макетами. Такой сайт, как http://blog.html.it/layoutgala/ или подобный. Здесь также есть вопрос, связанный с макетами css. Макеты CSS могут быть довольно сложными для создания правильных и трудных для новичков. Даже специалисты используют готовые проверенные макеты как основу для построения сайта.

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

Кроме того, перестаньте думать, что ie6 - ваша цель, это приведет вас к развитию для ie и приведет к проблемам. Я настоятельно рекомендую разрабатывать с помощью firefox с помощью firebug. А затем исправление ошибок и проблем, которые приносит IE6.

Так тебе будет лучше в будущем. Ваш сайт будет работать лучше, когда придет изменение на ie7 или изменение на что-то еще лучшее, например safari, chrome, firefox, opera или что-то еще, кроме ie. :)

person Mikko Tapionlinna    schedule 03.04.2009
comment
Большое спасибо за это, я также нашел это: openwebdesign.org, но они, как правило, являются дизайнерскими версиями, не вариации одного и того же макета, это то, что я ищу! - person Chris; 03.04.2009

arrow_upward
2
arrow_downward

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

person svinto    schedule 03.04.2009
comment
@svinto, я согласен с вами, однако меня выбрали для этого, потому что у меня есть базовые знания CSS и я очень терпелив. Я просто не знаю, чтобы хоть одна ошибка CSS в IE6 была продуктивной. - person Chris; 03.04.2009
comment
Крис: Если ваш код простой, то ошибок не так уж и много. Просто используйте правильный doctype, а когда что-то странное, добавьте position: relative. Если это не сработает, возьмите книгу «Мастерство CSS», она тонкая и очень-очень хорошая. - person svinto; 04.04.2009
comment
Крис: Также обратите внимание, что около 99% всех людей, жалующихся на IE6, используют неправильный тип документа, что заставляет IE переходить в режим причуд, например. работает как IE 4. - person svinto; 04.04.2009

arrow_upward
1
arrow_downward

Вы можете попробовать использовать макеты Yui.
Множество вкусов на выбор.
Yahoo! Библиотека пользовательского интерфейса: CSS-сетки

person Gero    schedule 03.04.2009

arrow_upward
0
arrow_downward

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

Мне лично нравится http://www.blueprintcss.org/ (другой основной - http://960.gs/)

Вот что он предлагает вам

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

Вы также можете попробовать такие сайты, как http://layouts.ironmyers.com/.

person inspite    schedule 03.04.2009