Некоторые секреты для начинающего верстальщика | Все что вы хотели знать о хостинге и сайтостроении

Некоторые секреты для начинающего верстальщика


Рубрика: CSS

Если вы не понаслышке знакомы с понятием верстки слоями или, как еще её называют, DIV-ной или CSS-верстки, то данная статья именно для вас. При CSS-верстке начало работы не может не вселить оптимизм в грандиозном успехе начатого мероприятия – так все слажено и маловесно получается. Но редкий верстальщик не сталкивается с одной весьма неприятной проблемой. Вот о ней-то и пойдет речь далее.

Некоторые секреты для начинающего верстальщика

Достаточно часто выходит так, что при верстке прописаны все необходимые размеры и границы, но при этом в разных браузерах сверстанные страницы ведут себя самым непредсказуемым образом: отображаются по разному, дизайн ломается… У такого, казалось бы, нелогичного поведения результата ваших трудов есть свои причины. Итак:

1. DOCTYPE

Страница, в которой тег DOCTYPE указан неверно либо вовсе не прописан, с большой долей вероятности может не пройти проверку валидатором, так как браузеры все еще обращают внимание на этот тег

2. WYSIWYG-редактор

В работе используете редактор Front-Page или ему подобный? При таком варианте добиться кроссбраузерности при сложной верстке достаточно затруднительно даже для профи, не говоря уже о новичках в визивиге. Для выхода из неприятной ситуации есть два пути:

  • Отказаться от WYSIWYG-редактора в пользу Source-editor. Т.е. работать с обычным текстовым редактором. Для повышения комфортности процесса верстки можно предпочесть те, в которых предусмотрены функции подсветки синтаксиса и вставки некоторых тегов прописанными заблаговременно кнопками.
  • Довести знание визивига до совершенства. При этом от понимания хотя бы общих правил css и html вы не освобождаетесь

3. html и css-код

При верстке не существует мелочей, важна каждая деталь прописанного вами кода. При появлении проблем с отображением самым тщательным образом проверьте все теги, присутствующие в коде, грамотность их вложения и употребления, обратите внимание на указанные значения атрибутов для каждого тега. Убедитесь в соответствии использованного html и css-кода спецификации и стандартам, указанным в DOCTYPE

4. Селекторы

Использование в коде селекторов, которые не все браузеры поддерживают в равной степени – верный путь к отсутствию кроссбраузерности вашей страницы. Даже при грамотном валидном css-коде результат может быть бесконечно далек от задуманного. Это объясняется тем, что разные браузеры поддерживают разные обновления css, следовательно, дают разное отображение страницы

Некоторые секреты для начинающего верстальщика

5. Размеры

Несоответствие заявленных размеров тем объемам, которые вы пытаетесь разместить в данном блоке, приведут к смещению, «расползанию» всего дизайна. Например, если вы попытаетесь расположить изображение габаритами 200х200 рх в блоке, ширина которого задана величиной 180 рх, блок раздвинется по периметру, при этом соседним блокам придется сдвинуться в сторону. Если места не хватит, блок перейдет туда, где места больше. В итоге страница безобразно расползется. При игнорировании явного указании размеров, дизайн будет раздвигаться по мере заполнения, но смотреться это будет не намного лучше, да еще и ошибку в таком случае найти практически невозможно. Программно исправить такую проблему невозможно, следовательно, груз ответственности за соблюдением размеров ложится на плечи верстальщика.

6. Значения по умолчанию

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

Нюансов, подобных перечисленным, существует еще немало. Но лучшие знания пробретаются на личном практическом опыте. Грамотно ставьте перед собой выполнимые задачи и планомерно идите к их реализации, параллельно изучая дополнительную литературу и оттачивая свое мастерство на практике.

Если вам понравилась статья или была полезна, поделитесь ею с друзьями: