 |
|
Модераторы: Illuminaty |
 
|
|
Ошибки верстки, оптимизация кода, прошу помочь более опытных коллег 
| MacTep |
|
|||
 Эксперт  Профиль Группа: Завсегдатай Сообщений: 1292 Регистрация: 4.8.2003 Где: г. Самара Репутация: нет Всего: 4 |
Форма простая. Исходник во вложении.
Прошу указать основные ошибки верстки. Прошу сильно не ругать, версткой только-только начинаю заниматься. Чуть уточню: может задротствую, но не везде получаются одинаковыми отступы между элементами. И в разных браузерах (IE9, FF8, Chrome) смотрится как-то по-разному все. Хотелось бы услышать мнение от опытных и матерых мастеров, которые жутко придирчивы к мелочам. Это сообщение отредактировал(а) MacTep - 21.12.2011, 01:06 Присоединённый файл ( Кол-во скачиваний: 4 ) 
pack.zip 24,08 Kb-------------------- (A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :) |
|||
|
||||
Загрузка ...
| actuator |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 15.12.2011 Репутация: 1 Всего: 3 |
Ошибок несколько, видно, что ты ещё зелен ;)
Самое главное - ты используешь html-теги для придания странице желаемого внешнего вида, в то время как на самом деле они предназначены для придания странице структуры, а оформлять её положено только через CSS. У каждого тега есть своё назначение, которое называют его семантикой: тег p предназначен для отделения абзацев, теги ul/li - для создания списков, а тег table - для таблиц в их самом бытовом понимании (то есть для организации данных, в которых важны отношения между столбцами/строками, как товарная накладная). Есть и нейтральные элементы, которые используются для разделения частей страницы по ведомым только разработчику признакам - это div и span. В новейшем стандарте, html5, некоторые популярные применения для таких элементов вынесли в отдельные теги, например, <header> для шапки сайта, <footer> для подвала, <nav> для блока навигации по сайту. Раньше часто делали div'ы с соответствующими id и class-ами, теперь это стандартизовано. Когда же ты используешь таблицы для создания сетки, по которой раскидываешь элементы формы, ты лишь борешься со стандартным поведением браузера - например, у каждой ячейки таблицы есть свои отступы, которые тебе придется либо давить при помощи CSS, или учитывать в размерах элементов. Таблица также строго привязывает свои элементы к заданной сетке. В твоем примере из-за этого даже переставить подписи над элементами ввода - целая проблема. Но не стоит и лепить все подряд на нейтральных тегах: пусть заголовки все-таки будут элементами h1-h7. Далее, ты неуч и не читал стандарт HTML5, в котором указано, как именно делаются формы и какие элементы для этого используются. Ты не один делаешь формам заголовки, а элементам форм - подписи. Это уже стандартизовано. Тебе стоит хотя бы просмотреть весь стандарт, чтобы знать, какие проблемы уже решены до тебя и какие теги ты можешь взять на вооружение. Если ты учишься верстать по книге, то у меня для тебя плохие новости - книги для начинающих бесполезны, так как верстальщиками непрерывно копится опыт, и на верстку хотя бы трехлетней давности могут показывать пальцем и улюлюкать. Если стандарт для тебя сложен, лучше впитай из книг как можно больше чисто общетехнической информации - о доктайпах, позиционировании элементов, разнице между пикселями, емами и поинтами и прочим, а потом подари её кому-нибудь и учись по блогам - на том же Хабре есть куча постов по этой теме. Необходимо думать и о том, как пользователи будут смотреть твою страницу. Вот у тебя все размеры - в пикселях. А знаешь ли ты, что у разных мониторов разная плотность пикселей, и на каком-нибудь ноутбуке с 1920x1080 пикселями на 17" экране твой сайт можно будет разглядеть только в микроскоп? Да и текст на разных платформах отрисовывается по-разному, у тебя может быть идеально подогнанная по пикселям сетка, но стоит пользователю увеличить масштаб в браузере - ее порвет в клочья. Ну и конечно же техническая сторона дела - пока не понимаешь, зачем нужен XHTML, пиши доктайп <!DOCTYPE html> и убирай всю xml-ную шелуху типа CDATA, атрибутов xmlns и так далее - хороший программист редко оказывается хорошим верстальщиком, поэтому большинство сайтов по привычке пихают всякий хлам в свои страницы, не понимая, что XML-кой делать их нужно в 0,0001% случаев. Заботься о том, чтобы у тебя было единое написание названий тегов, правил CSS и прочего - лучше писать все это строчными буквами, оно будет лучше сжиматься при отдаче gzip-ом и не будет вызывать проблем, если перейдешь не более строгий доктайп. Думай и о совместимости со старыми браузерами - пока border-radius не был стандартизован, его использовать можно было только с префиксом: -moz-border-radius, -webkit-border-radius и так далее. Это верно для многих правил CSS. |
|||
|
||||
| MacTep |
|
|||
|
Эксперт Профиль Группа: Завсегдатай Сообщений: 1292 Регистрация: 4.8.2003 Где: г. Самара Репутация: нет Всего: 4 |
Спасибо за подробный комментарий. Учту обязательно. Попробую переработать то, что сделано без использования таблиц... Правда пока не представляю, что из этого получится.
-------------------- (A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :) |
|||
|
||||
| $дмитрий |
|
||||||||||||||||||
 Эксперт Профиль Группа: Завсегдатай Сообщений: 1037 Регистрация: 19.6.2004 Репутация: 10 Всего: 45 |
Конкретно по коду
1. Название тегов пишем в нижнем регистре
2. Пользуемся сокращениями
3. Не нужно перечислять столько альтернативных шрифтов, достаточно 2-х
4. Свойство border-radius относится к html5, хотя в типе документа указано что пишешь под XHTML. Рекомендую сразу переходить на стандарт html5 5. Сокращаем
6. И здесь
7. И здесь тоже
8. В атрибутах тегов не нужно указывать размер в единицах
9. У картинок обязательно должен быть прописан размер
10. Если размер чего-либо нулевой, не обязательно указывать единицы измерения. Ведь не важно ноль пикселей или ноль сантиметров. В этом правиле есть исключения, но пока об этом говорить рано
Есть еще множество общих рекомендаций, но об этом в другой раз |
||||||||||||||||||
|
|||||||||||||||||||
| actuator |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 15.12.2011 Репутация: 1 Всего: 3 |
Я даже больше скажу - атрибуты оформления не надо использовать вообще. Через CSS все нормально делается. А если используешь - будет проблема переопределить атрибут в CSS, понадобится ставить !important, который лучше приберечь для более замороченных дел. |
|||
|
||||
| $дмитрий |
|
||||
|
Эксперт Профиль Группа: Завсегдатай Сообщений: 1037 Регистрация: 19.6.2004 Репутация: 10 Всего: 45 |
Это не совсем верно. Зависит от конкретной ситуации. Иногда правильнее задавать оформление через атрибуты
Это совсем не верно. Правила CSS имеют больший приоритет нежели атрибуты оформления |
||||
|
|||||
| Evghenusi |
|
|||
 майский жук Профиль Группа: Участник Сообщений: 506 Регистрация: 3.8.2006 Где: Молдова, Кишинёв Репутация: 3 Всего: 15 |
разве? далеко не отходя, выбрал тэг td с классом "quote", в котором находится цитата, и прописал элементу через firebug "color: #FF0000;" , цвет в классе (color: #333333;) моментально "отключился" Это сообщение отредактировал(а) Evghenusi - 21.12.2011, 15:44 |
|||
|
||||
| $дмитрий |
|
||||
|
Эксперт Профиль Группа: Завсегдатай Сообщений: 1037 Регистрация: 19.6.2004 Репутация: 10 Всего: 45 |
Перечитай внимательно о чем речь
Это сообщение отредактировал(а) $дмитрий - 21.12.2011, 18:01 |
||||
|
|||||
| Evghenusi |
|
|||
|
майский жук Профиль Группа: Участник Сообщений: 506 Регистрация: 3.8.2006 Где: Молдова, Кишинёв Репутация: 3 Всего: 15 |
 , да, действительно, firebug приучил меня, если и менять вид элемента, то через style="" ))запомню про атрибуты  |
|||
|
||||
| actuator |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 15.12.2011 Репутация: 1 Всего: 3 |
Да, правда, я неправ.
|
|||
|
||||
| hoomclab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 4 Регистрация: 22.12.2011 Репутация: нет Всего: 0 |
Я когда начинал сайты делать тоже пробовал дизайн через HTML верстать - замучался потом. Только через CSS!
 |
|||
|
||||
| MacTep |
|
|||
|
Эксперт Профиль Группа: Завсегдатай Сообщений: 1292 Регистрация: 4.8.2003 Где: г. Самара Репутация: нет Всего: 4 |
Спасибо за советы, друзья-товарищи. Очень полезные вещи пишите. Теперь осталось только работать с дивами так же удобно, как с таблицами и вообще будет все хорошо. Я думаю, в этой же теме выложу поправленную страничку, а вы снова выскажетесь
Это сообщение отредактировал(а) MacTep - 22.12.2011, 14:19 -------------------- (A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :) |
|||
|
||||
| magelan |
|
||||
 потерял xPath Профиль Группа: Участник Сообщений: 393 Регистрация: 5.4.2010 Репутация: 4 Всего: 16 |
на все могу закрыть глаза, кроме этого. теги лучше писать БОЛЬШИМИ, т.к. классы обычно пишут маленькими и это удобно. Гораздо легче читается и понятно, что сразу для всех тегов. Ошибки ловить проще. для actuator пока вы не занимаетесь коммерческой версткой, ваше бла-бла-бла по поводу семантической разметки имеет смысл, на практике выходит все не так и придерживаться правил семантической верстки (заметьте не блочной, потому что их часто путают) можно только на проектах которые вы делаете сами, единолично, с нуля и до конца... дай бог что вы сможете сделать хотя бы один такой проект за который заплатят. |
||||
|
|||||
| $дмитрий |
|
|||
|
Эксперт Профиль Группа: Завсегдатай Сообщений: 1037 Регистрация: 19.6.2004 Репутация: 10 Всего: 45 |
Тут вопрос предпочтений. Для меня писать теги большими буквами, это последняя стадия деградации мозга. Для других это "удобно". Хотя видеть такой стиль оформления ".cn DIV .cn2{" это конечно взрыв мозга зы Надеюсь в html теги хоть в нижнем регистре? Это сообщение отредактировал(а) $дмитрий - 22.12.2011, 18:59 |
|||
|
||||
| actuator |
|
||||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 15.12.2011 Репутация: 1 Всего: 3 |
|
||||
|
|||||
|
|
| 1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | Вёрстка веб-сайтов | Следующая тема » |
[ Время генерации скрипта: 0.0971 ] [ Использовано запросов: 20 ] [ GZIP включён ]
Реклама на сайте Информационное спонсорство
|
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |