первая

kintch · June 19, 2012

первая моя верстка http://kintch.16mb.com/syte3/index.html

верстал из бесплатного попавшегося макета, 3 странички

жду анализа, любой критики и советов по всей работе

ShumNo · June 19, 2012

между зелеными кнопками и полосой ниже полагаю не должно быть отступа

меню обычно списком верстают

kintch · June 19, 2012

между зелеными кнопками и полосой ниже полагаю не должно быть отступа
меню обычно списком верстают

то что списком знаю, но и сам не знаю почему тут так сделал, не то что-то в голову влетело

sammasati · June 19, 2012

1. Первое, что сразу бросилось в глаза, а точнее нифига не бросилось - ссылки. Где ссылки? При визуальном осмотре страницы ссылки должны быть сразу видны. И они должны реагировать на наведение курсора. Я не фанат Темы, но все же - http://www.artlebedev.ru/kovodstvo/sections/171/

2. Стили очень желательно выносить в отдельный файл и подключать его с помощью тега link. В больших проектах стили разрастаются на несколько сотен строк и очень сильно мешали бы будь они в самом html-файле. Да и вообще, это удобно.

3. Желательно по-меньше использовать id. А точнее, использовать его только для скриптов. Уже не помню чем они плохи, но все же. Для задания стилей достаточно классов.

4. Желательно отказаться уже от этого длиннющего доктайпа и использовать <!DOCTYPE html>. И мета-тег с кодировкой тоже сокращается до <meta charset="utf-8">

5. Желательно объединять css-инструкции. Т.е. использовать краткую запись некоторых инструкций. Вместо вот этого:

	-moz-border-radius-topleft: 10px;
	 -moz-border-radius-topright:10px; 
	-moz-border-radius-bottomleft:10px;
	 -moz-border-radius-bottomright:10px; 
	-webkit-border-top-left-radius:10px;
	 -webkit-border-top-right-radius:10px; 
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	border-top-left-radius:10px;
	 border-top-right-radius:10px; 
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;

можно написать так:

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

Вместо этого:

background:url(img/head.png) no-repeat;
background-position:49px 9px;

вот это:

background:url(img/head.png) 49px 9px no-repeat;

А вместо этого:

padding-left:39px;
padding-top:80px;

вот это:

padding: 80px 0 0 39px;

Удобно? Удобно.

6. Где тег h1? Нужно соблюдать вложенность заголовков. Не может с бухты барахты идти h2. Перед ним должен быть h1. Для проверки иерархии заголовков можно пользоваться инструментом Document Outline из плагина WebDeveloper для Firefox и Chrome.

7. Для следующей верстки бери макет по-сложнее. Старайся пока обучаешься не верстать одно и то же. С каждого нового макета выноси что-нибудь новое для себя.

Успехов!

kintch · June 19, 2012

1. Первое, что сразу бросилось в глаза, а точнее нифига не бросилось - ссылки. Где ссылки? При визуальном осмотре страницы ссылки должны быть сразу видны. И они должны реагировать на наведение курсора. Я не фанат Темы, но все же - http://www.artlebedev.ru/kovodstvo/sections/171/
2. Стили очень желательно выносить в отдельный файл и подключать его с помощью тега link. В больших проектах стили разрастаются на несколько сотен строк и очень сильно мешали бы будь они в самом html-файле. Да и вообще, это удобно.
3. Желательно по-меньше использовать id. А точнее, использовать его только для скриптов. Уже не помню чем они плохи, но все же. Для задания стилей достаточно классов.
4. Желательно отказаться уже от этого длиннющего доктайпа и использовать <!DOCTYPE html>. И мета-тег с кодировкой тоже сокращается до <meta charset="utf-8">
5. Желательно объединять css-инструкции. Т.е. использовать краткую запись некоторых инструкций. Вместо вот этого:
	-moz-border-radius-topleft: 10px;
	 -moz-border-radius-topright:10px; 
	-moz-border-radius-bottomleft:10px;
	 -moz-border-radius-bottomright:10px; 
	-webkit-border-top-left-radius:10px;
	 -webkit-border-top-right-radius:10px; 
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	border-top-left-radius:10px;
	 border-top-right-radius:10px; 
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
можно написать так:
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
Вместо этого:
background:url(img/head.png) no-repeat;
background-position:49px 9px;
вот это:
background:url(img/head.png) 49px 9px no-repeat;
А вместо этого:
padding-left:39px;
padding-top:80px;
вот это:
padding: 80px 0 0 39px;
Удобно? Удобно.
6. Где тег h1? Нужно соблюдать вложенность заголовков. Не может с бухты барахты идти h2. Перед ним должен быть h1. Для проверки иерархии заголовков можно пользоваться инструментом Document Outline из плагина WebDeveloper для Firefox и Chrome.
7. Для следующей верстки бери макет по-сложнее. Старайся пока обучаешься не верстать одно и то же. С каждого нового макета выноси что-нибудь новое для себя.
Успехов!

спасибо за критику, буду все учитывать,

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

в доктайпах на практике пока не силен, поэтому оставил стандартный при создании документа в дримвивере,

css старался объединять, но не везде получилось(когда объявлял что-то новое, то не следил за повторением ему подобного выше)

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

В общем еще раз спасибо за расписанные пожелания, все будет учтено))))

NeoXidizer · June 19, 2012

в доктайпах на практике пока не силен, поэтому оставил стандартный при создании документа в дримвивере,
css старался объединять, но не везде получилось(когда объявлял что-то новое, то не следил за повторением ему подобного выше)
с id пока тоже не силен, планирую вникнуть в скрипты, что б понять всю суть id и классов.
В общем еще раз спасибо за расписанные пожелания, все будет учтено))))

если не изменяет память (дримвивер не использую), там можно редактировать шаблон, по которому создается документ, просто исправьте его один раз.

запомните - id можно использовать только один раз на всю страницу.

Тобишь нельзя делать так:

<div id="black"></div>
<div id="white"></div>
<div id="black"></div>

CSS на это все равно, а JavaScript будет работать только с первым попавшимся на странице элементом с ID.

Поэтому, лучше не используйте id до тех пор, пока не начнете использовать скрипты. А затем разберетесь, что к чему

Затем:

1. Не используйте заглавные буквы в коде:

не верно:

BODY {
	font-family:"Tahoma";
	background-color:#FFFFFF;
}
A, A:link, A:hover{
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
	font-family:"Tahoma";
	text-decoration:none;
}

верно:

body {
	font-family:"Tahoma";
	background:#fff;
}
a, a:link, a:hover{
	color:#fff;
	font:700 11px "Tahoma";
	text-decoration:none;
}

2. Не используйте глобальный селектор *, это влияет на производительность

* {padding:0;margin:0;}

Лучше просто перечислить используемые элементы, их не так уж и много.

3. Обращайтесь к элементам напрямую, когда это возможно

#head #menu .menu_btn{}
#head #menu  .menu_btn A{}

=

.menu_btn{}
.menu_btn A{}

4. Будьте внимательней:

#left_col{
	width:175px;
	float:left;
	border-right:1px solid #DCDCDC;
}
#right_col{
	width:314px;
	float:left;
}
#left_col,#right_col{
	margin-top:10px;
	padding:0px 15px 10px 15px;
}

float:left так-же можно было перенести, а px у 0 не писать

Edited June 19, 2012 by NeoXidizer

kintch · June 19, 2012

в доктайпах на практике пока не силен, поэтому оставил стандартный при создании документа в дримвивере,
css старался объединять, но не везде получилось(когда объявлял что-то новое, то не следил за повторением ему подобного выше)
с id пока тоже не силен, планирую вникнуть в скрипты, что б понять всю суть id и классов.
В общем еще раз спасибо за расписанные пожелания, все будет учтено))))
если не изменяет память (дримвивер не использую), там можно редактировать шаблон, по которому создается документ, просто исправьте его один раз.
запомните - id можно использовать только один раз на всю страницу.
Тобишь нельзя делать так:
<div id="black"></div>
<div id="white"></div>
<div id="black"></div>
CSS на это все равно, а JavaScript будет работать только с первым попавшимся на странице элементом с ID.
Поэтому, лучше не используйте id до тех пор, пока не начнете использовать скрипты. А затем разберетесь, что к чему
Затем:
1. Не используйте заглавные буквы в коде:
не верно:
BODY {
	font-family:"Tahoma";
	background-color:#FFFFFF;
}
A, A:link, A:hover{
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
	font-family:"Tahoma";
	text-decoration:none;
}
верно:
body {
	font-family:"Tahoma";
	background:#fff;
}
a, a:link, a:hover{
	color:#fff;
	font:700 11px "Tahoma";
	text-decoration:none;
}
2. Не используйте глобальный селектор *, это влияет на производительность
* {padding:0;margin:0;}
Лучше просто перечислить используемые элементы, их не так уж и много.
3. Обращайтесь к элементам напрямую, когда это возможно
#head #menu .menu_btn{}
#head #menu  .menu_btn A{}
=
.menu_btn{}
.menu_btn A{}
4. Будьте внимательней:
#left_col{
	width:175px;
	float:left;
	border-right:1px solid #DCDCDC;
}
#right_col{
	width:314px;
	float:left;
}
#left_col,#right_col{
	margin-top:10px;
	padding:0px 15px 10px 15px;
}
float:left так-же можно было перенести, а px у 0 не писать

и вам спасибо, в следующих работах тоже учту, думаю со временем эти все рекомендации выработаются на автомате

Sign In

первая

Recommended Posts

kintch

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

kintch

Link to comment

Share on other sites

sammasati

Link to comment

Share on other sites

kintch

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

kintch

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information