Макетик

AnTiBAnnik · February 4, 2009

Оцените дизайн, вёрстку.

Пока без наполнения и без стилей текста.

Вот и домучил я его ))

Как в голову что залезит буду дополнять.

<(O_O)> сайт <(O_O)>

Edited February 4, 2009 by AnTiBAnnik

WuXuXie · February 5, 2009

Firefox 3.0. Нижнее меню выскочило из футера вниз. Зеленые полосы под блоком меню и под футером.

IE 6. Футер развалился. Блок контента съехал вниз.

ЗЫ. И имидж, а не имедж.

Павел Билькис · February 5, 2009

Google Chrome - контент съехал вниз, меню наоборот поднялось.

kalyaka-malyaka · February 5, 2009

фаер 3-й:

ширина - http://www.jetScreenshot.com/demo/er724ig7-216kb.jpg

ие6:

ширина - http://www.jetScreenshot.com/demo/5fmn4jsc-170kb.jpg

футер - http://www.jetScreenshot.com/demo/25277y2k-15kb.jpg

ступенька - http://www.jetScreenshot.com/demo/d80an5i7-18kb.jpg

по дизайну: ИМХО, цветовое сочетание черного с неоново-зеленым - день даже не вчерашний. рекламная компания должна следить за всеми тенденциями в моде, в дизайне, в оформлении. рекламисты должны знать, как продать картинку, разбираться в типографике, цвете и вообще - визуальном воздействии на потребителя. и правильных рекламистов такой "наколенный" дизайн не устроит. а если устроил, значит, рекламисты они неправильные и вывески торговых палаток на оптовом рынке - их потолок.

Vlad · February 5, 2009

Агенство и имедж специально так написаны с ошибками?

Dimitry Wolotko · February 5, 2009

Цвета страшные.

Заголовок где? Untitled Document не смотрится.

Пункты вертикального меню прыгают, при наведении.

Зеркальное отражение горизонтального меню - неудачное.

Ваш код страдает излишеством, к примеру, этот код легко можно сделать более лёгким:

<div id="menu">
<div class="menu"><a class="menus" href="#">О Компании</a></div>
<div class="menu"><a class="menus" href="#">Услуги</a></div>
<div class="menu"><a class="menus" href="#">Новости</a></div>
<div class="menu"><a class="menus" href="#">Портфолио</a></div>
<div class="menu"><a class="menus" href="#">F.A.Q.</a></div>
<div class="menu"><a class="menus" href="#">Контакты</a></div>
</div>

СУПЕР КРЕАТИВНОЕ НАНО АГЕНСТВО ПО СОЗДАНИЮ СУПЕР ИМЕДЖА

Шутку оценил, ошибки нет.

У картинок нет альтов, титлов.

Ну валидный код - это не показатель хорошей работы.

AnTiBAnnik · February 5, 2009

Firefox 3.0. Нижнее меню выскочило из футера вниз. Зеленые полосы под блоком меню и под футером.
IE 6. Футер развалился. Блок контента съехал вниз.
ЗЫ. И имидж, а не имедж.

за FF тут не посмотрел

Футер так должен быть и в GH

фаер 3-й:
ширина - http://www.jetScreenshot.com/demo/er724ig7-216kb.jpg
ие6:
ширина - http://www.jetScreenshot.com/demo/5fmn4jsc-170kb.jpg
футер - http://www.jetScreenshot.com/demo/25277y2k-15kb.jpg
ступенька - http://www.jetScreenshot.com/demo/d80an5i7-18kb.jpg
по дизайну: ИМХО, цветовое сочетание черного с неоново-зеленым - день даже не вчерашний. рекламная компания должна следить за всеми тенденциями в моде, в дизайне, в оформлении. рекламисты должны знать, как продать картинку, разбираться в типографике, цвете и вообще - визуальном воздействии на потребителя. и правильных рекламистов такой "наколенный" дизайн не устроит. а если устроил, значит, рекламисты они неправильные и вывески торговых палаток на оптовом рынке - их потолок.

Фото не открылись а по дизайну можно поподробней ?

Цвета страшные.
Заголовок где? Untitled Document не смотрится.
Пункты вертикального меню прыгают, при наведении.
Зеркальное отражение горизонтального меню - неудачное.
Ваш код страдает излишеством, к примеру, этот код легко можно сделать более лёгким:
<div id="menu">
<div class="menu"><a class="menus" href="#">О Компании</a></div>
<div class="menu"><a class="menus" href="#">Услуги</a></div>
<div class="menu"><a class="menus" href="#">Новости</a></div>
<div class="menu"><a class="menus" href="#">Портфолио</a></div>
<div class="menu"><a class="menus" href="#">F.A.Q.</a></div>
<div class="menu"><a class="menus" href="#">Контакты</a></div>
</div>
СУПЕР КРЕАТИВНОЕ НАНО АГЕНСТВО ПО СОЗДАНИЮ СУПЕР ИМЕДЖА
Шутку оценил, ошибки нет.
У картинок нет альтов, титлов.
Ну валидный код - это не показатель хорошей работы.

Меню так и должно быть

Чем неудачное ?

С кодом заморочимся

Dimitry Wolotko · February 5, 2009

Как минимум вот так:

#menu div {бла-бла-бла}
<div id="menu">
<div><a class="menus" href="#">О Компании</a></div>
<div><a class="menus" href="#">Услуги</a></div>
</div>

А что бы код упростить, то даже так:

#menu a {display:block;бла-бла-бла}
<div id="menu">
<a href="#">О Компании</a>
<a href="#">Услуги</a>
</div>

psywalker · February 5, 2009

AnTiBAnnik

Не мне конешь судить,я сам ничё не умею, но код у тя и вправду большой,вот например шапочку я бы сделал вот так,но наверняка можно и меньше кода использовать

http://psywalker2008.narod.ru/header/index.html

Заметь , не одного элемента "div" , а <div id="head"></div> я для примера сделал , ты можешь смело заменить его на свой <div id="container"></div> и продолжать делать Контент блоки прям в нём,тоже минус Лишние элементы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<style type="text/css">
		   *{ margin: 0; padding: 0; outline: none; border: none; text-decoration: none; font: 15px  Tahoma, sans-serif; text-align: center;  color: #fff; }
			body { background: #000; width: 1100px; margin: 10px auto;}
				ul { list-style: none; width: 100%; background: url(img/gorizont_line.png) bottom left repeat-x; overflow: hidden;}
					li { float: left; width: 123px;}
					li a { display: block; padding: 9px 20px; background: url(img/ramka1.gif) top left no-repeat;}
					li a:hover { background: url(img/ramka.gif) top left no-repeat; }
						p img { float: left;}
						p a { float: right; width: 31px; height: 30px;}
						  #index { background: url(img/index.png) center left no-repeat;}
						  #mail { background: url(img/mailto.png) center left no-repeat;}
						  #map { background: url(img/map.png) center left no-repeat;}
		</style>
		<title>Head</title>
	</head>
	<body>
		<div id="head">
			<a href="/"><img src="img/logo.jpg" alt="nano reklama" /></a>
			<ul>
				<li><a href="/">О Компании</a></li>
				<li><a href="/">Услуги</a></li>
				<li><a href="/">Новости</a></li>
				<li><a href="/">Портфолио</a></li>
				<li><a href="/">F.A.Q.</a></li>
				<li><a href="/">Контакты</a></li>
			</ul>
			<p><img src="img/ten.gif" alt="" /><a id="map" href="/"></a><a id="mail" href="/"></a><a id="index" href="/"></a></p>
		</div>
	</body>
</html>

Edited February 5, 2009 by psywalker

AnTiBAnnik · February 5, 2009

psywalker спс

вот ценный коммент )

Волнует ещё и вопрос дизайна...

что и ГЛАВНОЕ почему не нравится

Edited February 5, 2009 by AnTiBAnnik

Dimitry Wolotko · February 5, 2009

Значит готовый код - это ценный коммент, а предложение подумать так себе, да?

Searcher · February 6, 2009

Помню, дизайн этого сайта в первом варианте. Было лучше.

Лишнее тут: отражение главного меню, фон левого меню, дергания пунктов левого меню, фон контента вообще не в кассу.

В левом меню надо увеличить расстояние между строками.

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

Ссылки надо делать хотябы подчеркнутыми, либо выделить цветом отличным от основного текста.

При изменении размеров окна меньше 1280х1024 контент спрыгивает под меню. Делайте либо min-width, либо полностью резиновый контент. Это же элементарный макет, что за баги верстки... Зачем у content float:right? Делаете у navigation жесткий width в em, а у content никаких width, просто указываете margin-left как у navigation и нет проблем.

Верстка подвала в IE6 разваливается. Почему сайт становится фиксированным? Контент почему-то немного сползает вниз...

Edited February 6, 2009 by Searcher

psywalker · February 6, 2009

AnTiBAnnik

Незачто ,обращайся,если чё

Кстати,насчёт левого меню,мне кажется,что отступы ссылок при наведении,это уже устаревшая штука,да и код опять таки большой,попробуй что нибудь попроще,типа того:

http://psywalker2008.narod.ru/header/index.html

	   
		  <div id="menu">
				<h1 id="alt">Производство</h1>
				<a href="/">Рекламные вывески</a>
				<a href="/">Крышные установки</a>
				<a href="/">Объёмные буквы</a>
				<a href="/">Оформление входных групп</a>
				<a href="/">Широкоформатная печать</a>
				<a href="/">Оформление мест продаж и выставок</a>
				<a href="/">P.O.S. материалы</a>
				<a href="/">Отдельно стоящие конструкции</a>
				<a href="/">Интерьерная реклама</a>
				<a href="/">Неон</a>
				<a href="/">Фрезерно-гравировальные работы</a>
				<a href="/">Вакуумная формовка</a>
				<a href="/">Потеренная резка</a>
				<h1>Услуги</h1>
				<a href="/">Производство</a>
				<a href="/">Полиграфия</a>
				<a href="/">Дизайн</a>
				<a href="/">Проектирование</a>
			</div>

А CSS будет где-то такой,не такой уж и большой:

#menu { width: 290px; float: left; margin: 5px 0; background: url(img/dm_fon.png) left top repeat-x;}
	#menu a{ display: block; padding-left: 16px;}
	#menu a:hover { text-decoration: underline;}
		h1 { text-decoration: underline; font-size: 18px; padding: 7px 10px 2px;}
		h1#alt {  background: url(img/h1bg.png) left top no-repeat;}

Я сделал отдельный блок для левого меню <div id="menu"></div> ему назначил фон полоску градиент, а левый верхний уголочек повесил на элемент <h1 id="alt"></h1>

P.S и заодно посматри примерный план Контента и Подвала

Edited February 6, 2009 by psywalker

AnTiBAnnik · February 6, 2009

Всем спс в выхи займусь,

Dimitry Wolotko всё гуд тебя проглядел ))) сидел думал над твоим коментом, переделал.

В пон думаю обновлю всё.

AnTiBAnnik · February 8, 2009

Переделал не всё понял, но не важно заказчик хочет другое, при том хочет не за те деньги что платит )))

Сидим со 2-м дизом устраиваем мозговой штурм ))) Кальян и пиво ))

Glebr · February 13, 2009

Ой! А что так ярко то всё? Дизайн конечно нужно подправить... :rolleyes:

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

Обсуждения

Important Information