Какбэ макет

selevit · February 9, 2011

Всем доброго времени суток, тут нарисовал макет, оцените пожалуйста

http://www.code-live.ru/4/

klierik · February 9, 2011

учить -> http://cherenkevich.livejournal.com/38085.html

selevit · February 9, 2011

klierik, не совсем понял вас, какая здесь может быть блочная сетка? это же просто картинка?

Edited February 9, 2011 by selevit

klierik · February 9, 2011

качественные макеты строятся по сетке, может она у тебя есть, но я чтото не заметил.

имхо - не знаешь сеток не берись рисовать дизайн.

Yahoo! · February 9, 2011

Кстати в этот раз намного лучше, только фон прямоугольников "Главное меню" "Поиск по сайту" сильно выделяется.

Shift-Web · February 9, 2011

klierik, никогда ими не пользовался ....

ТС, слишком много глянца

Yahoo! · February 9, 2011

Зачем статистика нужна?? Поиск в верхний правый угол, вход тоже можно реализовать c помощью popUp, тогда места станет больше и можно сделать в две колонки

Edited February 9, 2011 by Yahoo!

ВовчиГ · February 9, 2011

У тебя рядом с формой авторизации нету одной нужной кнопочки : "вход"

selevit · February 9, 2011

Зачем статистика нужна?? Поиск в верхний правый угол, вход тоже можно реализовать c помощью popUp, тогда места станет больше и можно сделать в две колонки

В том то и дело, что я не хочу делать в 2 колонки, вот кровь из носа, хочу 3

Сейчас верстаю

У тебя рядом с формой авторизации нету одной нужной кнопочки : "вход"

Я уже заметил, когда рисовал, забыл про кнопку =) в HTML сейчас сделаю)

Yahoo! · February 9, 2011

Почему чем меньше колонок, тем лучше
Чем меньше колонок, тем проще дизайн, мы передаем меньше информации, но более надежным способом.
Малое число колонок это еще и побочный продукт, преобладания сайтов с центральным выравниванием, если мы не пытаемся заполнить экран максимально возможным количеством информации, нам просто не нужно много колонок.

процитировано с desingformaster

Edited February 9, 2011 by Yahoo!

Vlad · February 9, 2011

Все эти цитаты для новичков, которые не знают, что хотят. В данном случае точно знают, хе.

selevit · February 9, 2011

Влад, вы совершенно правы, я хочу 3 колонки

Html уже сверстал, посмотрите пожалуйста, если есть какие-нибудь ошибки, скажите

<!DOCTYPE html>
<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
	<title>Code-Live.ru — Кодинг-портал</title> 
	<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]--> 
	<link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body>
	<header>
		<h1>Code-Live.ru</h1>
		<h4>Кодинг-портал</h4>
	</header>
	<nav class="main">
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a class="current" href="#">Исходники</a></li>
			<li><a href="#">Софт</a></li>
			<li><a href="#">Форум</a></li>
			<li><a href="#">Правила</a></li>
			<li><a href="#">FAQ</a></li>
		</ul>
	</nav>
	<section class="content column">
	<h1>Что нам понадобится для работы</h1>
<p>Итак, собственно, что нам нужно? А нам необходимо всего две вещи:</p>
<p>Компилятор, в котором мы будет писать программы<br />
Естественно, желание учиться</p>
<p>Что касается компилятора для новичка, то я бы всем посоветовал Visual Studio 2008 Express Edition, который вы можете бесплатно скачать по ссылке выше. Если Ваша скорость интернет-соединения не позволяет скачать 800 МБ трафика, то можете воспользоваться более легким компилятором - Dev C++ 5</p>
<p>Первый пункт будет несложным, что же касается желания, то этого я Вам навязать не смогу, это скажем так, дело субъективное, поэтому, если желание есть и Вы скачали и установили компилятор, то можно приступать к следующему уроку, в котором мы напишем свою первую программу.</p>
<p> <a href="#">Перейти к следующему уроку</a></p>
<p class="info">
Автор: <strong>selevit</strong><br />
Дата добавления: <strong>5 февраля 2011</strong><br />
Просмотров: <strong>73</strong><br />
</p>
	</section>
	<aside class="column left">
	<h3>Главное меню</h3>
	<nav>
		<ul>
			<li><a href="#">C/C++</a></li>
			<li><a href="#">Delphi</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">Pascal</a></li>
			<li><a href="#">PHP</a></li>
			<li><a href="#">Javascript</a></li>
			<li><a href="#">C++ с нуля</a></li>
		</ul>
	</nav>
	<h3>Полезные ссылки</h3>
	<nav>
		<ul>
			<li><a href="#">Киберфорум</a></li>
			<li><a href="#">HtmlBook.ru</a></li>
			<li><a href="#">КиберГуру</a></li>
			<li><a href="#">Форум HtmlBook</a></li>
		</ul>
	</nav>
	</aside>
	<aside class="column right">
	<h3>Поиск по сайту</h3>
	<form name="search" method="get" class="search">
		<input type="search" name="query" />
		<button type="submit">Найти</button>
	</form>
	<h3>Статистика</h3>
	<span class="stats">
	<h4>Сейчас на сайте</h4>
	Гостей: <strong>56</strong><br />
	Пользователей: <strong>17</strong>
	</span>
	<h3>Вход на сайт</h3>
	<form name="auth" method="get" class="auth">
		<input type="text" name="user" placeholder="Имя пользователя" />
		<input type="password" name="pass" placeholder="Пароль" />
		<button class="submit">Войти</button>
	</form>
	</aside>
	<footer>Sergey Levitin © 2010-2011. All rights reserved</footer>
</body>
</html>

Edited February 9, 2011 by selevit

Great Rash · February 9, 2011

Если уж вы решили заняться HTML5-версткой, то не надо переусердствовать. У вас элемент <section> используется не по назначению, в этом месте надо использовать элемент <div>.

Спека гласит:

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Что по-человечески значит, что с помощью секции можно выделить некую распространенную часть документа или приложения, но как контейнер ее использовать не рекомендуется и если вам нужен элемент как контейнер, то для этих целей надо использовать <div>.

Опять же неправильно, с точки зрения семантики, использовать элемент <aside> для представления правой и левой колонок пруф (инглиш)

Внутри <form> inline-элементы (коими являются <input> и <button>) должны располагаться в контейнере. Это может быть <div> или <fieldset>, или любой другой блочный элемент.

Ну вот, если уж разговор про красивый код зашел...

swetlana · February 9, 2011

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

здесь как минимум две ошибки.

Одна: безнадёжно устаревшая кривая кодировка.

Вторая: слишком длинная запись.

Правильно так:

<meta charset=utf-8>

Vlad · February 9, 2011

По мелочам пройдусь

Было <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

Стало <meta charset="windows-1251" />

<h4>Кодинг-портал</h4>

</header>

Здесь логичнее так

<h2>Кодинг-портал</h2>

</hgroup>

За то, что <h4> внутри <span>, бьют канделябром. Больно. До тех пор, пока не запомнят на всю жизнь, что так делать нельзя. Либо пока не умрут от разрыва селезенки.

</header>

swetlana · February 9, 2011

Опять же неправильно, с точки зрения семантики, использовать элемент <aside> для представления правой и левой колонок пруф (инглиш)

пруф не котируется. Там изложено некое субъективное мнение, которое там же и пересмотрено (см. замечаение в самом начале статьи).

Смотрим оригинал: http://www.whatwg.org/specs/web-apps/curre...e-aside-element — речь исключительно о том, что контент косвенно касается основного содержания страницы и может рассматриваться отдельно от основной статьи.

А также:

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements

— сайдбары явно упомянуты

Другое дело, что сам тип трёхколоночной компоновки выглядит архаично, но это уже другой вопрос.

Внутри <form> inline-элементы (коими являются <input> и <button>) должны располагаться в контейнере. Это может быть <div> или <fieldset>, или любой другой блочный элемент.

если xhtml — да. В данном случае всё проще. В конце концов, такого рода вопросы проясняются при помощи валидатора.

selevit · February 9, 2011

Спасибо за советы, исправил, скоро выложу сверстанный макет

Great Rash · February 9, 2011

>>>The element can be used for typographical effects

Сайдбары - это не типографика. Это layout.

swetlana · February 9, 2011

> can be used

Может быть использован.

Где написано "The element can be used for typographical effects only"?

Edited February 9, 2011 by swetlana

Great Rash · February 9, 2011

Я ж говорю: "с точки зрения семантики". Я вообще страницу могу на одних спанах зафигачить. И все будет чики-чики. Даже блин <input> могу на спанах и яваскрипте эмулировать.

swetlana · February 9, 2011

Ок, возвращаемся к семантике.

Только смотрим не сомнительные толкования, а первоисточник:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content

В способности зафигачить страницу на одних только спанах не сомневаюсь. Понимаю, что технически сложностей никаких.

Речь именно о семантике. «Секция на странице, содержащая информацию, имеющую косвенное отношение к окружающему контенту, и которую можно воспринимать отдельно от основного контента.» — согласен с таким переводом?

В подавляющем большинстве случаев боковые колонки очень здорово попадают под такое определение. Более того, боковые колонки — это традиционный способ отображения такого рода информации.

Так что в данном моменте у ТС всё в порядке.

Great Rash · February 9, 2011

А вот и нет: вот типичный <aside> (См. Два слова о)

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

swetlana · February 9, 2011

да, это частный случай, когда aside уместен.

Vlad · February 9, 2011

Great Rash, не факт. В данном случае разделяю мнение Светланы, что <aside> может использоваться для чего угодно, если это что угодно не является основным контентом страницы. Вообще, каждый при своем мнении останется, нет ведь инструментов для проверки семантики HTML5. Или есть?

swetlana · February 9, 2011

Влад, а разве такие инструменты могут существовать даже хотя бы теоретически?

Ведь ни один робот пока что не сумеет понять, является ли информация основной или косвенно относящейся к основной. Робот в лучшем случае по разметке сможет понять, подразумевая, что разметка верна.

Sign In

Какбэ макет

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information