11 советов создателю сайтов
11 советов создателю сайтов
В этом уроке мы дадим несколько полезных советов начинающим и уже опытным создателям веб-сайтов. Следуя этим советам, вы сможете немного повысить свои навыки веб-мастера.
1. Всегда пишите теги строчными буквами.
Теоретически, код можно писать так:
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
Но лучше было бы написать так:
<div>
<p>Here's an interesting fact about corn. </p>
</div>
Несмотря на внешнее сходство этих вариантов кода, второй намного лучше читается и воспринимается глазом, т.к. теги в нем написаны строчными буквами.
2. Используйте теги H1-H6.
Для форматирования текста желательно использовать именно эти теги.
3.Тег
4. Правильный код навигационных блоков.
Такую навигацию можно было бы сделать при помощи такого кода:
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
Однако намного правильнее сделать ее списком, т.е. так:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
5. Отдельная таблица стилей CSS для Internet explorer.
Как известно, браузер IE своеобразно интерпретирует многие теги и стили, поэтому рекомендуется создавать отдельные стили для него. Для этого используется такой код:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
Этот код сообщает "если браузером является IE7, то следует использовать следующую таблицу стилей, а если нет, то использовать основную".
6. Используйте правильный редактор кода.
Выбор в качестве редактора кода программы блокнот не совсем правильный, т.к. он может сбросить кодировку файла, в нем нет подсветки синтаксиса и счетчика строк. Поэтому следует использовать специальные программы, предназначенные для редактирования кода, как например:
1.
2.
3.
4.
5.
7. Когда Ваш вебсайт готов, оптимизируйте код.
Оптимизация файлов с css и javascript кодом позволит Вам уменьшить размер этих файлов на 25%.
Вот некоторые сервисы для оптимизации кода:
javascript:
1.
2.
CSS:
1.
2.
3.
8. Просматривайте исходники сайтов.
Когда вы заинтересовались каким-либо сайтом, всегда старайтесь посмотреть его исходный код и CSS и взять лучшие элементы из них.
Конечно, это не значит, что вам следует копировать дизайн таких сайтов, но вам стоит посмотреть, как они устроены.
9. Изучайте фотошоп.
Даже если вы прекрасно знаете html+css, это не значит, что вы являетесть отличным веб-мастером. Вам нужно все время совершенствоваться в знании программы Рhotoshop.
10. Всегда сбрасывайте значения CSS.
В начале CSS файла всегда следует обнулить все стили, и только затем прописывать их значения.
Вот код обнуления стилей для тегов. Используйте его!
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
11. Выравнивайте элементы сайта.
Посмотрите, как выглядят сайты с отличным дизайном. Элементы выровнены друг относительно друга, а не разбросаны в хаосе.
Вам также следует стараться располагать элементы четко, структурированно и ровно (если, конечно, тематическая направленность сайта и конкретный дизайн не предполагают обратного).
В этом уроке мы дадим несколько полезных советов начинающим и уже опытным создателям веб-сайтов. Следуя этим советам, вы сможете немного повысить свои навыки веб-мастера.
1. Всегда пишите теги строчными буквами.
Теоретически, код можно писать так:
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
Но лучше было бы написать так:
<div>
<p>Here's an interesting fact about corn. </p>
</div>
Несмотря на внешнее сходство этих вариантов кода, второй намного лучше читается и воспринимается глазом, т.к. теги в нем написаны строчными буквами.
2. Используйте теги H1-H6.
Для форматирования текста желательно использовать именно эти теги.
3.Тег
H1
.При создании сайта или блога тег H1 всегда используйте именно для заголовков статей. Это полезно для качественной поисковой оптимизации сайта.
4. Правильный код навигационных блоков.
Такую навигацию можно было бы сделать при помощи такого кода:
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
Однако намного правильнее сделать ее списком, т.е. так:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
5. Отдельная таблица стилей CSS для Internet explorer.
Как известно, браузер IE своеобразно интерпретирует многие теги и стили, поэтому рекомендуется создавать отдельные стили для него. Для этого используется такой код:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
Этот код сообщает "если браузером является IE7, то следует использовать следующую таблицу стилей, а если нет, то использовать основную".
6. Используйте правильный редактор кода.
Выбор в качестве редактора кода программы блокнот не совсем правильный, т.к. он может сбросить кодировку файла, в нем нет подсветки синтаксиса и счетчика строк. Поэтому следует использовать специальные программы, предназначенные для редактирования кода, как например:
1.
2.
3.
4.
5.
7. Когда Ваш вебсайт готов, оптимизируйте код.
Оптимизация файлов с css и javascript кодом позволит Вам уменьшить размер этих файлов на 25%.
Вот некоторые сервисы для оптимизации кода:
javascript:
1.
2.
CSS:
1.
2.
3.
8. Просматривайте исходники сайтов.
Когда вы заинтересовались каким-либо сайтом, всегда старайтесь посмотреть его исходный код и CSS и взять лучшие элементы из них.
Конечно, это не значит, что вам следует копировать дизайн таких сайтов, но вам стоит посмотреть, как они устроены.
9. Изучайте фотошоп.
Даже если вы прекрасно знаете html+css, это не значит, что вы являетесть отличным веб-мастером. Вам нужно все время совершенствоваться в знании программы Рhotoshop.
10. Всегда сбрасывайте значения CSS.
В начале CSS файла всегда следует обнулить все стили, и только затем прописывать их значения.
Вот код обнуления стилей для тегов. Используйте его!
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
11. Выравнивайте элементы сайта.
Посмотрите, как выглядят сайты с отличным дизайном. Элементы выровнены друг относительно друга, а не разбросаны в хаосе.
Вам также следует стараться располагать элементы четко, структурированно и ровно (если, конечно, тематическая направленность сайта и конкретный дизайн не предполагают обратного).