— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сделал за последнее время:
| Заказать мне работу |
| 27.12 | Семантика или как же лучше |
Допустим мы имеем такую картинку
Распишем идеальную семантическую раскладку:
<div id="cabinet">Вы зашли как <a href="#">admin</a></div>
<form action="#">
<input class="form-text" value="введите строку для поиска" onblur="if (value == '') {value = 'введите строку для поиска'}" onfocus="if (value == 'введите строку для поиска') {value =''}" type="text" />
<input class="form-submit" value="найти" type="submit" />
</form>
</div>
В данном чтобы панелька имела именно такой вид, мы подготовим три изображения. Левое закругление, правое и сам background. Левое мы назначим на #cabinet, правое на form, а bаckground на #search-form. И стилями раставляем все по своим местам. (Я не стал все расписывать в css, кляня свою лень и надеясь на то, что и так все понятно)
Получилось:
Семантично – да;
Компактно – да;
Чисто – да;
Удобно – фиг!;
Под удобно я разумею последующие возможные редизайны или внесения правок в структуру. Вздумай заказчику со своими познаниями на уровне тега font внести туда какие-нибудь структурные изменения (например, захочет передвинуть блок cabinet в противоположный угол), он там сразу и себе нервы потрепет и верстку в итоге сломает.
Поэтому стоит учитовать данные нюасы. И вам хорошо, и заказчику прибавятся от вас положительные переживания. (Что тоже вам же хорошо)
Удобная разметка выглядит так:
<div id="cabinet">Вы зашли как <a href="#">admin</a></div>
<form action="#">
<input class="form-text" value="введите строку для поиска" onblur="if (value == '') {value = 'введите строку для поиска'}" onfocus="if (value == 'введите строку для поиска') {value =''}" type="text" />
<input class="form-submit" value="найти" type="submit" />
</form>
</div></div></div>
Теперь когда оформление вынесено в контейнерную часть, над содержимым этой панельки можно изгаляться как угодно.
Я, кстати, сделал все таки с уклоном в семантику. Во -первых, я люблю прогресс, во-вторых, я ненавижу регресс, и в-третьих, все равно мне туда в случае чего правки вносить.
Комментарии