| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > Ошибки верстки, оптимизация кода |
| Автор: MacTep 21.12.2011, 01:02 |
| Форма простая. Исходник во вложении. Прошу указать основные ошибки верстки. Прошу сильно не ругать, версткой только-только начинаю заниматься. Чуть уточню: может задротствую, но не везде получаются одинаковыми отступы между элементами. И в разных браузерах (IE9, FF8, Chrome) смотрится как-то по-разному все. Хотелось бы услышать мнение от опытных и матерых мастеров, которые жутко придирчивы к мелочам. |
| Автор: actuator 21.12.2011, 04:27 |
| Ошибок несколько, видно, что ты ещё зелен ;) Самое главное - ты используешь html-теги для придания странице желаемого внешнего вида, в то время как на самом деле они предназначены для придания странице структуры, а оформлять её положено только через CSS. У каждого тега есть своё назначение, которое называют его семантикой: тег p предназначен для отделения абзацев, теги ul/li - для создания списков, а тег table - для таблиц в их самом бытовом понимании (то есть для организации данных, в которых важны отношения между столбцами/строками, как товарная накладная). Есть и нейтральные элементы, которые используются для разделения частей страницы по ведомым только разработчику признакам - это div и span. В новейшем стандарте, html5, некоторые популярные применения для таких элементов вынесли в отдельные теги, например, <header> для шапки сайта, <footer> для подвала, <nav> для блока навигации по сайту. Раньше часто делали div'ы с соответствующими id и class-ами, теперь это стандартизовано. Когда же ты используешь таблицы для создания сетки, по которой раскидываешь элементы формы, ты лишь борешься со стандартным поведением браузера - например, у каждой ячейки таблицы есть свои отступы, которые тебе придется либо давить при помощи CSS, или учитывать в размерах элементов. Таблица также строго привязывает свои элементы к заданной сетке. В твоем примере из-за этого даже переставить подписи над элементами ввода - целая проблема. Но не стоит и лепить все подряд на нейтральных тегах: пусть заголовки все-таки будут элементами h1-h7. Далее, ты неуч и не читал http://developers.whatwg.org/forms.html, в котором указано, как именно делаются формы и какие элементы для этого используются. Ты не один делаешь формам заголовки, а элементам форм - подписи. Это уже стандартизовано. Тебе стоит хотя бы просмотреть весь стандарт, чтобы знать, какие проблемы уже решены до тебя и какие теги ты можешь взять на вооружение. Если ты учишься верстать по книге, то у меня для тебя плохие новости - книги для начинающих бесполезны, так как верстальщиками непрерывно копится опыт, и на верстку хотя бы трехлетней давности могут показывать пальцем и улюлюкать. Если стандарт для тебя сложен, лучше впитай из книг как можно больше чисто общетехнической информации - о доктайпах, позиционировании элементов, разнице между пикселями, емами и поинтами и прочим, а потом подари её кому-нибудь и учись по блогам - на том же Хабре есть куча постов по этой теме. Необходимо думать и о том, как пользователи будут смотреть твою страницу. Вот у тебя все размеры - в пикселях. А знаешь ли ты, что у разных мониторов разная плотность пикселей, и на каком-нибудь ноутбуке с 1920x1080 пикселями на 17" экране твой сайт можно будет разглядеть только в микроскоп? Да и текст на разных платформах отрисовывается по-разному, у тебя может быть идеально подогнанная по пикселям сетка, но стоит пользователю увеличить масштаб в браузере - ее порвет в клочья. Ну и конечно же техническая сторона дела - пока не понимаешь, зачем нужен XHTML, пиши доктайп <!DOCTYPE html> и убирай всю xml-ную шелуху типа CDATA, атрибутов xmlns и так далее - хороший программист редко оказывается хорошим верстальщиком, поэтому большинство сайтов по привычке пихают всякий хлам в свои страницы, не понимая, что XML-кой делать их нужно в 0,0001% случаев. Заботься о том, чтобы у тебя было единое написание названий тегов, правил CSS и прочего - лучше писать все это строчными буквами, оно будет лучше сжиматься при отдаче gzip-ом и не будет вызывать проблем, если перейдешь не более строгий доктайп. Думай и о совместимости со старыми браузерами - пока border-radius не был стандартизован, его использовать можно было только с префиксом: -moz-border-radius, -webkit-border-radius и так далее. Это верно для многих правил CSS. |
| Автор: MacTep 21.12.2011, 06:46 |
| Спасибо за подробный комментарий. Учту обязательно. Попробую переработать то, что сделано без использования таблиц... Правда пока не представляю, что из этого получится. |
| Автор: $дмитрий 21.12.2011, 14:22 | ||||||||||||||||||
| Конкретно по коду 1. Название тегов пишем в нижнем регистре
2. Пользуемся сокращениями
3. Не нужно перечислять столько альтернативных шрифтов, достаточно 2-х
4. Свойство border-radius относится к html5, хотя в типе документа указано что пишешь под XHTML. Рекомендую сразу переходить на стандарт html5 5. Сокращаем
6. И здесь
7. И здесь тоже
8. В атрибутах тегов не нужно указывать размер в единицах
9. У картинок обязательно должен быть прописан размер
10. Если размер чего-либо нулевой, не обязательно указывать единицы измерения. Ведь не важно ноль пикселей или ноль сантиметров. В этом правиле есть исключения, но пока об этом говорить рано
Есть еще множество общих рекомендаций, но об этом в другой раз |
| Автор: actuator 21.12.2011, 14:36 | ||
Я даже больше скажу - атрибуты оформления не надо использовать вообще. Через CSS все нормально делается. А если используешь - будет проблема переопределить атрибут в CSS, понадобится ставить !important, который лучше приберечь для более замороченных дел. |
| Автор: $дмитрий 21.12.2011, 15:08 | ||||
Это не совсем верно. Зависит от конкретной ситуации. Иногда правильнее задавать оформление через атрибуты
Это совсем не верно. Правила CSS имеют больший приоритет нежели атрибуты оформления |
| Автор: Evghenusi 21.12.2011, 15:40 | ||
разве? далеко не отходя, выбрал тэг td с классом "quote", в котором находится цитата, и прописал элементу через firebug "color: #FF0000;" , цвет в классе (color: #333333;) моментально "отключился" |
| Автор: $дмитрий 21.12.2011, 17:58 | ||||
Перечитай внимательно о чем речь
|
| Автор: Evghenusi 21.12.2011, 19:46 |
 , да, действительно, firebug приучил меня, если и менять вид элемента, то через style="" ))запомню про атрибуты  |
| Автор: actuator 21.12.2011, 23:30 |
| Да, правда, я неправ. |
| Автор: hoomclab 22.12.2011, 02:10 |
Я когда начинал сайты делать тоже пробовал дизайн через HTML верстать - замучался потом. Только через CSS! |
| Автор: MacTep 22.12.2011, 14:17 |
| Спасибо за советы, друзья-товарищи. Очень полезные вещи пишите. Теперь осталось только работать с дивами так же удобно, как с таблицами и вообще будет все хорошо. Я думаю, в этой же теме выложу поправленную страничку, а вы снова выскажетесь |
| Автор: magelan 22.12.2011, 14:39 | ||||
на все могу закрыть глаза, кроме этого. теги лучше писать БОЛЬШИМИ, т.к. классы обычно пишут маленькими и это удобно. Гораздо легче читается и понятно, что сразу для всех тегов. Ошибки ловить проще. для actuator пока вы не занимаетесь коммерческой версткой, ваше бла-бла-бла по поводу семантической разметки имеет смысл, на практике выходит все не так и придерживаться правил семантической верстки (заметьте не блочной, потому что их часто путают) можно только на проектах которые вы делаете сами, единолично, с нуля и до конца... дай бог что вы сможете сделать хотя бы один такой проект за который заплатят. |
| Автор: $дмитрий 22.12.2011, 18:59 | ||
Тут вопрос предпочтений. Для меня писать теги большими буквами, это последняя стадия деградации мозга. Для других это "удобно". Хотя видеть такой стиль оформления ".cn DIV .cn2{" это конечно взрыв мозга зы Надеюсь в html теги хоть в нижнем регистре? |
| Автор: actuator 22.12.2011, 23:27 | ||||
|
| Автор: MacTep 24.12.2011, 23:58 |
| Неплохую тему я поднял... В который раз читаю и радуюсь тому, что об этом вообще говорят. |
