Ориентация на таблицы стилей и кросс-браузерную совместимость - PullRequest
3 голосов
/ 03 декабря 2009

Позвольте мне начать эту тему с объяснения моего опыта работы с веб-дизайном. Я всегда был скорее программистом, работающим с PHP, SQL и прочим. Однако у меня есть небольшой фон с HTML и CSS. Проблема в том, что я не знаю всего этого. Что я знаю, так это то, что когда дело доходит до проектирования (не бэк-энд грязной работы), я понимаю основные свойства CSS, а также понимаю HTML, и я обычно могу собрать неаккуратную веб-страницу с двумя и парой миллиардов тегов DIV.

В любом случае ..

Проблема, с которой я всегда сталкивался, заключается в том, что когда я проектирую веб-сайт в браузере, таком как IE7 (а затем он выглядит идеально в IE7), а затем смотрю на него в IE8, IE6 или Mozilla (и т. Д.), Он получает все Пространственный и некрасивый, выглядит совершенно иначе, чем на IE7.

Вопрос первый:

По сути, я спрашиваю всех, по какому маршруту я должен научиться правильно строить сайт? Создайте, как и положено, вместе со стандартами CSS и HTML, которые сделают мой сайт одинаковым на всех браузерах. (Не только изучение стандартов, но и где я могу научиться правильно писать свой код?) Где можно найти надежный бесплатный ресурс для изучения этих вещей?

Вопрос второй:

Как правильно кодировать мой сайт? Использую ли я все внешние таблицы стилей, чтобы упростить динамический дизайн страницы, или я жестко кодирую некоторые вещи в теги DIV на каждой странице? Что правильно?

О, и если у кого-нибудь есть какие-либо учебные пособия о том, как правильно спроектировать полный макет, не стесняйтесь добавить его в ответ.

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

Спасибо, Сэм Парди

Ответы [ 3 ]

2 голосов
/ 04 декабря 2009

Во-первых, я рекомендую НЕ начинать с IE в качестве браузера для разработчиков. Скажем, начните с Firefox (что дает вам преимущество таких инструментов, как Firebug и панель инструментов для веб-разработчиков ), а затем настройте его правильно в IE.

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

Наконец, начните с определения своего контента с помощью простого HTML, основывая структуру на значении контента (часто называемом «семантическим» HTML), а не на том, как вы хотите, чтобы он выглядел. Например, используйте тег <ul> для чего-то, что представляет собой список элементов, даже если вы не хотите отображать его в виде «списка маркеров» (стиль по умолчанию для <ul>). Затем начните добавлять стили, чтобы он выглядел правильно. Это приведет к очень чистому HTML, который может поддерживать множество форматов и макетов (взгляните на CSS Zen Garden, чтобы понять, что я имею в виду), а также поможет подтолкнуть вас к макету, который отражает структуру вашего контента, который будет легче читать и понимать.

С точки зрения книг, вы не ошибетесь с Эрик Мейер . Разумеется, HTML - это легко, и я не рекомендую делать изящные вещи с HTML, поэтому приложите усилия к изучению CSS (Эрик - гуру CSS).

1 голос
/ 04 декабря 2009

СЛИШКОМ много сайтов, на которых есть отличные учебники по HTML и CSS. Они предоставят вам всю информацию, которую вы запрашиваете. Я бы начал читать некоторые великие гуру HTML / CSS:

Саймон Коллисон
Энди Бадд
Молли Холшзаг
Дэн Седерхольм
Джейсон Санта Мария
Эрик Мейер
Джеффри Зельдман
Кэмерон Молл

Любая книга или статья, которую вы можете найти у этих людей, направит вас в правильном направлении; вы не ошибетесь!

Что касается сайтов, которые дадут вам надлежащие методы / концепции / обучение для сайтов, соответствующих веб-стандартам:

http://www.w3schools.com/default.asp
http://www.webstandards.org/
http://www.smashingmagazine.com/
http://www.webdesignpractices.com/
http://www.designmeltdown.com/default.aspx
http://www.cameronmoll.com/
http://www.alistapart.com/
http://www.cssnewbie.com/
http://www.css3.com/
http://htmldog.com/
http://css -tricks.com /
http://simplebits.com/
http://www.colly.com/
http://glish.com/css/#tutorials
http://meyerweb.com/
http://jasonsantamaria.com/

Одной из лучших книг, которые я купил на сегодняшний день, чтобы помочь с HTML и CSS-кодированием СВОБОДНО, является Начало веб-разработки CSS Саймоном Коллисоном . Отлично, легко понять и не слишком медленно. Прекрасные примеры для подражания. После этого купите CSS Mastery - Advanced Web Standards Solutions, также от Саймона Коллисона и Энди Бадда и Кэмерон Молл . Эта книга знакомит вас с некоторыми продвинутыми методами, которые вы сейчас увидите на многих веб-сайтах, некоторые из которых были изобретены авторами.

1 голос
/ 04 декабря 2009

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

A1.

При начале работы на новом сайте сначала возьмите каждый фрагмент контента, который должен быть на странице, и вставьте его в текстовый файл. Затем разместите их в рациональном порядке (подумав: «Если бы мне пришлось использовать текстовый браузер для использования этой страницы, как бы я хотел, чтобы она была упорядочена ...»).

Затем начните оборачивать теги HTML вокруг каждого фрагмента контента. Для каждой части подумайте: «Что это за информация?» Заголовок? h1 / h2 / etc тэги. Параграф? Цитата? Стол? p quote table. По сути, используйте HTML-теги, которые описывают, какую информацию представляет каждая часть контента. Когда я делаю это, я не обращаю внимания на то, как это выглядит в браузере на данный момент.

Как только все содержимое размечено, начните писать CSS. Если это вообще возможно, постарайтесь не трогать разметку на этом этапе. Однако иногда это невозможно, и выбрасывание div или span вокруг некоторых элементов неизбежно. Чем меньше бессмысленной разметки , тем лучше.

По моему опыту, этот подход делает вещи очень чистыми и аккуратными, а также облегчает отладку проблем с макетом.

A2.

Встраивание стилей в вашу разметку с использованием атрибута "style" прекрасно подходит для создания прототипов, но будьте осторожны, соблазн оставить их там, как только он заработает, силен. Лучше всего иметь все ваши стили во внешних таблицах стилей. Мне интересно услышать любые альтернативные точки зрения.

Некоторые замечательные веб-стандарты / CSS-ресурсы:

Надеюсь, это поможет!

...