.::cs-dl.ru::. Скачать Counter-Strike скачать Photohop

Теория правильного макета

FrAiDeR — Fri, 06 May 2011 08:09:43 GMT

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

Сетка
Начнём попорядку а именно с выравнивания элементов, то есть построения сетки. Перед её использование лучше активировать вид линейки (если конечно он уже не активирован), нажимаем CTRL+R теперь у нас есть вид линейки, нажимаем два раза на шкалу и выбираем пиксели, так в построении макета будет удобней. Для создания сетки вы можете нажать на шкале и держа вести направляющую в нужное направление, направляющие сетки будут "прилипать" к элементу выбранному в панели слоёв и наоборот, элемент будет прилипать к сетке, для более точного построения можно нажать (просмотреть -> новая направляющая).

Всё по папкам
Элементы выровнены, теперь для облегчения жизни верстальщика (ну или вас самих), нужно распихать все слои по полочкам и дать им имена, не стоит этим пренебрегать, иначе сами же запутаетесь. Выделяется три основных папки, это header body и footer, в них вложены остальные папки, такие как меню, блоки, вид материалов и т.д. Каждый графический элемент должен находиться в своём "Домике" , то есть к примеру рисуем поиск, создаём папку кнопка и папку форма ввода, в папке кнопка создаём ещё папки с кнопкой при наведении, активной кнопкой и т.д.

Мелочи.
Теперь о мелочах в макете. Зачастую весь дизайн может измениться при добавлении какой либо мелочи. Некоторые совсем их не прорисовывают, макет должен быть максимально приближен к конечному результатату. Обязательно отображайте цвета ссылок, как обычные ссылки, так и ссылки при наведении, ведь легче подобрать цвета в фотошопе чем уже потом подбирать их при вёрстке. Также используйте различные иконки, не умеете рисовать сами, подберите чтонить из интернета, но не переусердствуйте, в противном случает всё испортите и будет свалка.

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

Шрифт
Основной шрифт текста везде это Verdana ставим в фотошопе на 11px и метод сглаживания "нет", но в тексте вы можете использовать любой из стандартных шрифтов, главное чтобы он реализовывал ваши дизайнерские задумки. Посмотреть стандартные шрифты можно тут . Не нужно делать шрифт слишком большой, эта одна из основных ошибок неопытных дизайнеров.

Как создать конструтор с нуля!

FrAiDeR — Fri, 06 May 2011 08:08:22 GMT

сл установки заключается в создании html страницы, так называемого каркаса, который содержит определенные теги и коды. Для начало изучим основные теги которые нам понадобятся для установки шаблона.

Code

…

- это верхняя часть сайта, чаще всего –это шапки сайтов. Но может быть и такое, что особо выделенной верхней части сайта может и не быть.

Code

…

- Между этими тегами располагается колона блоков, справа и слева или же с какой-нибудь одной стороны.

Code

…

- этот тег непосредственно относится к самому блоку, который располагается между тегами

Code

…

Часть дизайна, которая не будет использована в модуле "Форум". Обычно, это центральная часть сайта, находящаяся между Верхним и Нижним блоками.

Code

[TITLE]

  [BODY]

- Блок в котором находится дизайн персональной страницы.

Основные коды, используемые при установке:
[TITLE]– Это заголовок страницы. Он автоматически проставляет на всех страницах нужные заголовки. используется между тегами . Ещё этот код используется в заголовках блоков без квадратных рамок TITLE, что позволяет автоматически задавать названия в стандартных блоках.
[CSS_URL]- Автоматически указывает ссылку на файл с css. Используется
[BODY] – Это «тело» документа или блока. Предназначен для вывода, таких частей сайта, как форум или других модулей. Код [BODY] выводит основной контент сайта. Используется чаще всего в середине документа, но это не обязательно. Так же этот код используется для вывода основной страницы в Пример
[COPYRIGHT] – это не обязательный код он выводит на экран такие значения Copyright MyCorp © текущий год.
CONTENT –этот код отображает содержимое блоков.
Пример использования всех этих тегов и кодов вы можете посмотреть в админ панели Управление дизайном - Конструктор шаблонов – пример каркаса.
Или ниже

Code

[TITLE]

Code

$WDAY$, $DATE$, $TIME$	You logged in as $USERNAME$ \| Group "$USER_GROUP$"Hello $USERNAME$ \| RSS
SITE LOGO
Site home \| $MODULE_NAME$ \| Profile page \| Register now \| Log out \| Log in

» TITLE

CONTENT

[BODY]

[COPYRIGHT]

$POWERED_BY$

[TITLE]

[BODY]

[Table] У меня получилось![/Table]

Как установить шаблон?

FrAiDeR — Fri, 06 May 2011 08:06:14 GMT

[Table]Как установить дизайн на новый Ucoz :[/Table]

[spoiler="Открой"] [Table]1. Понятно дело, что до того как установить шаблон, нам нужно его скачать.

2. Далее смотрим что именно мы скачали, если это общий шаблон, то заначит его можно применять, для всех страниц, кроме форума (ну если только в описании шаблона не написано, что можно примить и для форума!)

3. Заходим в панель управления сайтом (http://www.ваше_название_сайта.ucoz.ru/admin): Главная » Управление дизайном » Конструктор шаблонов.

4. В скачанном архиве убеждаемся, что есть: tmpl.txt (основной код шаблона), styles.css (таблица стилей-CSS), и папка img (где находятся все использованные рисунки шаблона).

5. Открываем tmpl.txt (например с помощью блокнота), копируем весь текст (ctr+A, ctr+C), и вставляем в конструкторе шаблонов.

6. В панели управления заходим: Главная » Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS). Открываем styles.css (например с помощью блокнота), копируем весь текст (ctr+A, ctr+C), и вставляем в открытом окне в панели управления.

7. Закачиваем с помощью: Главная » файловый менеджер; или с помощью FTP-менеджера

8. Вот и все, теперь наслаждаемся, новым дизайном сайта!))

Если вы скачали какойто шаблон и там есть папка css а в ней два файла то эту папку надо тоже загружать в корень сайта.[/Table]

[/spoiler]
[Table]Теперь как установить DLE Шаблон на UcoZ:[/Table]

[spoiler="Открой"] [Table]Установка дле шаблона на юкоз делается в несколько шагов.

1) Загрузить в кореневую папку папки с шаблона css и images (dleimages и другие не нужно только эти две)

2) Открываеш фал mailn.tpl в обычном блокноте

3) Копируем содержимое и в редактировании страниц (пункт "Страницы сайта") на юкозе вставляем все скопированое вместо того чтo там уже есть, только не забудь в самый низ впихнуть $POWERED_BY$

4) После этого Дизайн->Быстрая замена участков шаблона

4.1. Меняем {THEME} на пустое полу, то есть в нижнее поле не вводим ничего, а в верхнее {THEME}

5) А дальше просто вставляем бб-коды, операторы и.т.д, редактируете шаблон короче.
[/Table]
[/spoiler]

Как привысить 75000 символов в шаблоне

FrAiDeR — Fri, 06 May 2011 08:05:12 GMT

верное многие сталкивались с такой проблемой когда редактор тебе пишет, что мол у вас более 75000 символов, сейчас я расскажу как можно превысить эти 75000 символов (Правда придётся угробить глобальный блок)

Ну в общем так!

1. Создаём ПУСТОЙ глобальный блок.

2. Идём в Управление дизайном, а далее в тот шаблон где не хватает места под символы

3. Вставляем код глобального блока туда где должен был быть код который вы хотели вставить

(ГЛОБАЛЬНЫЙ БЛОК ДОЛЖЕН БЫТЬ ОБЯЗАТЕЛЬНО СОВЕРШЕННО ПУСТЫМ!)

4. Сохраняем изменения.

5. Редактируем этот глобальный блок, добавляем код и всё, что у вас не влезло в тот шаблон

6. Сохраняем изменения в глобальном блоке.

7. Радуемся, всё работает, всё, что было нужно вам запихнуть, но то, что не влезало теперь влезло! И без особого труда!

За что можно получить бан от яндекса?

FrAiDeR — Fri, 06 May 2011 08:04:38 GMT

Чужой контент

Если на сайте отсутствует уникальный собственный контент, а его наполнение – новости и статьи со сторонних сайтов, у него есть большой шанс попасть в бан. Цель создания таких сайтов – их продвижение с последующей продажей ссылок, либо прокачка собственных основных сайтов аналогичной тематики.
Партнерки, не несущие собственной ценности

На таких сайтах располагаются партнерские программы интернет-магазинов, онлайн-сервисов и т.д. Уникальной информации на этих сайтах также нет. Цель их создания – получение комиссионных за переходы посетителей на сайт, разработавший партнерскую программу.
Текстовые блоки, нацеленные на поискового робота

Здесь имеется в виду текст, содержащий ключевые слова, но не несущий полезной информации для посетителей сайта. Такие текстовые блоки обычно начинаются со слов "нас можно найти по следующим ключевым словам:", "наши ключевые слова:" и т.д. Цель размещения такого текста – повышение плотности ключевых слов, однако в большинстве случаев, реальной пользы это не приносит.
Избыточное повторение ключевых слов

В отличие от предыдущего случая, здесь имеет место необоснованно частое употребление ключевых слов в полезном тексте страницы. Такие действия делают текст плохо читаемым и неудобным для восприятия. Примером такого нарушения могут служить заголовки вида "продажа подержанных телефонов, продажа подержанных телефонов в Москве" и т.д. Очень часто можно встретить сайты, с избыточным повторением ключевых слов в названиях элементов меню. Например, "продажа подержанных автомобилей Opel", "продажа подержанных автомобилей Audi" на странице авто сайта, посвященной продаже только подержанных автомобилей.
Ссылочный спам

Нарушителями являются сайты, ведущие беспорядочной обмен ссылками с сайтами разных тематик. В некоторых случаях обменные ссылки и кнопки разбиты по категориям специально организованного каталога, в некоторых – находятся на одной странице. Часто такие каталоги и страницы закрыты от индексации в мета-тэге Robots либо в файле robots.txt. Наличие на сайте страниц с обменными ссылками ("линкопомоек" на жаргоне оптимизаторов) обусловлено желанием оптимизатора получить положительный эффект от влияния ссылочного ранжирования. Однако именно это нарушение является самой распространенной причиной бана.
Линкфармы

Линкфармы – сайты или группы сайтов, интенсивно ссылающиеся друг на друга. Как правило, таким образом линкуются сайты одной тематики. Например, сайты, посвященные различным маркам автомобилей, различным моделям мобильных телефонов и т.д.
Нерекомендующие ссылки

Под термином "нерекомендующие ссылки" следует понимать платные ссылки, поставленные сайтом-донором для поднятия позиций сайта-акцептора за счет эффекта ссылочного ранжирования. Такие ссылки также относят к ссылочному спаму. Платные ссылочные блоки чаще всего находятся в футере сайта, либо под новостными блоками, блоками меню и т.д. Один из методов борьбы с такими ссылками – непот-фильтр, снижающий до нуля положительный эффект ссылочного ранжирования для сайта-акцептора. Непот-фильтр, как правило, накладывается на сайты в автоматическом режиме. При ручной же проверке сайты, размещающие на своих страницах платные ссылки, заносятся в бан.
Перенасыщенность рекламой

Если большой процент полезной площади страниц сайта занят рекламой (баннеры, контекстная реклама и т.д.), сайт также подлежит бану. В первую очередь это касается сайтов, размещающих контекстную рекламу системы "Бегун". Что касается контекстной рекламы самого Яндекса, то ее размещение (в разумных количествах) даже полезно. Благодаря этому Яндекс однозначно "распознает" тематику сайта, а в некоторых случаях это увеличивает шанс на бесплатное попадание в каталог этой поисковой системы.
Скрытый текст

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

Бессмысленный текст генерируется в автоматическом режиме (чаще всего на основе цепей Маркова) и служит для того, чтобы соблюсти строго заданную плотность ключевых слов. Сайты, содержащие бессмысленный текст, не несут абсолютно никакой пользы для пользователя и предназначены исключительно для поискового робота.
Редиректы

Под редиректом в данном случае подразумевается страница, либо сайт, единственная цель которого перенаправить посетителя на другой ресурс. Чаще всего для привлечения посетителя с поисковой системы используется скрытый, либо бессмысленный текст. После попадания на такой сайт (на жаргоне оптимизаторов "дорвей") пользователь в автоматическом режиме отправляется на основной сайт, корректный с точки зрения поисковой системы.
Клоакинг

Клоакинг – метод, суть которого заключается в том, что пользователь поисковой системы и поисковый робот при заходе на сайт получают разные версии одних и тех же его страниц. Отследить клоакинг в автоматическом режиме достаточно сложно. Чтобы выявить его вручную, достаточно сравнить страницы сайта в вашем браузере со страницами сайта, содержащимися в кэше поисковой системы.

Итак, причин для бана очень много. Однако избежать его не так сложно. Вот какие рекомендации на этот счет дает Александр Садовский:
Отличайтесь
Думайте о пользователях
Размещайте только содержательные ссылки
Не скрывайте контент дизайном
Честно оценивайте сайт

Если вы подозреваете, что ваш сайт все-таки попал в бан, проверьте количество проиндексированных страниц. Если оно равно нулю, возможно, это бан. Однако причиной того, что ни одна страница сайта не проиндексирована, также могут являться сбои в работе поисковой системы. Для того чтобы убедиться, что к вашему сайту действительно применены санкции, отправьте письмо в службу поддержки Яндекса (по адресу addurl@yandex-team.ru ) и спросите, "наказан" ли ваш сайт. Если сайт действительно забанен, вам об этом сообщат, однако причину бана не укажут. Тут уж разбирайтесь сами.

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

Словарь CSS

FrAiDeR — Fri, 06 May 2011 08:04:03 GMT

[spoiler="Свойства фона"]background-position - задает стартовую позицию фонового изображения.
background - объединяет в себе все свойства, которые используются для определения фона страницы.
background-attachment - определяет является ли фоновое изображение фиксированным или прокручивается вместе со страницей.
background-color - задает цвет фона для элемента.
background-image - определяет используемое изображение фона для элемента.
background-repeat - определяет как повторять фоновое изображение.[/spoiler]
[spoiler="Свойства границ"]border-bottom-width -задает ширину нижней границы элемента.
border-left-width - задает ширину левой границы элемента.
border-left-style - задает стиль левой границы элемента.
border-left-color - задает цвет левой границы элемента.
border-left - объединяет в себе все свойства, которые используются для определения левой границы (рамки) элемента.
outline-color - задает цвет внешней границы элемента.
border-collapse - способно удалять двойные линии (границы) на месте стыка ячеек таблицы.
border-width - задает ширину для четырех границ.
border-top-width - задает ширину верхней границы элемента.
border-top-style - задает стиль верхней границы элемента.
outline-style - задает стиль внешней границы элемента.
border-right - объединяет в себе все свойства, которые используются для определения правой границы (рамки) элемента.
border-right-color - задает цвет правой границы элемента.
border-right-style - задает стиль правой границы элемента
border-bottom-color - задает цвет нижней границы элемента.
border-bottom - объединяет в себе все свойства, которые используются для определения нижней границы (рамки) элемента.
border - объединяет в себе все свойства, которые используются для определения границы (рамки) элемента.
border-color - задает цвет для четырех границ.
outline - задает внешнюю границу вокруг элементов
border-top-color - задает цвет верхней границы элемента.
border-top - объединяет в себе все свойства, которые используются для определения верхней границы (рамки) элемента.
border-style - задает стиль для четырех границ.
border-spacing - задает расстояние между границами ячеек в таблице
border-right-width - задает ширину правой границы элемента.
outline-width - задает ширину внешней границы элемента.[/spoiler]
[spoiler="Свойства размера"]min-width - определяет минимальную ширину элемента.
max-width - определяет максимальную ширину элемента.
min-height - определяет минимальную высоту элемента.
height - определяет высоту элемента.
width - определяет ширину элемента.
max-height - определяет максимальную высоту элемента.[/spoiler]
[spoiler="Свойства шрифта"]font-size - задает размер шрифта.
font-weight - определяет толщину символов в тексте.
font-style - задает стиль шрифта для текста.
font-family - задает шрифт для элемента.
font - бъединяет в себе все свойства, которые используются для определения шрифта.
font-variant - определяет должен ли текст отображаться капительными буквами или нет.[/spoiler]
[spoiler="Свойства генерированного контента"]quotes - задает тип кавычек, которые используются для вставленных цитат.
counter-reset - создает или сбрасывает один или несколько счетчиков.
counter-increment - используется для увеличения значения счетчика приращений
content - предназначено для вставки сгенерированного контента[/spoiler]
[spoiler="Свойства списка"]list-style - объединяет в себе все свойства, которые используются для определения внешнего вида списка.
list-style-position - определяет место расположение маркера списка.
list-style-type - определяет тип маркера в списке.
list-style-image - заменяет маркер списка изображением.[/spoiler]
[spoiler="Свойства отступов"]margin-top - определяет верхний отступ для элемента.
margin-right - определяет правый отступ для элемента.
margin-bottom - определяет нижний отступ для элемента.
margin-left - определяет левый отступ для элемента.
margin - задает все свойства отступов в одной строке.[/spoiler]
[spoiler="Свойства полей"]padding-top - задает верхнее поле для элемента.
padding-right - задает правое поле для элемента.
padding-left - задает левое поле для элемента.
padding-bottom - задает нижнее поле для элемента.
padding - задает все свойства полей в одной строке.[/spoiler]
[spoiler="Свойство позиционирования"]top - устанавливает положение верхнего края содержимого элемента без учета толщины рамок и отступов.
cursor - определяет тип курсора при наведении мішки на элемент.
display - определяет, как элемент должен быть показан в документе.
visibility - способно сделать любой видимым или невидимым.
right - устанавливает положение правого края содержимого элемента.
z-index - управляет расположением элемента по z-оси
float - определяет по какой стороне будет выравниваться объект. Остальные элементы будут обтекать его с других сторон.
clip - позволяет определить область позиционированного элемента, в которой будет показано его содержимое.
left - устанавливает положение левого края содержимого элемента
clear - устанавливает с какой стороны элемента запрещено обтекание другими элементами.
overflow - управляет отображением содержания блочного элемента
bottom - устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.
position - используется для позиционирования элемента.[/spoiler]
[spoiler="Свойства таблицы"]caption-side - задает расположение заголовка (подписи) таблицы.
empty-cells - позволяет определить показывать границы и фон пустых ячеек или нет.
table-layout - позволяет определить алгоритм разметки таблицы.[/spoiler]
[spoiler="Свойства текста"]vertical-align - задает вертикальное выравнивание элемента.
word-spacing - уменьшает или увеличивает пробелы между словами.
white-space - определяет отображение пробелов между словами.
text-align - определяет горизонтальное выравнивание текста в элементе.
text-indent - определяет отступ первой строки в текстовом блоке.
text-decoration - определяет оформление текста.
direction - позволяет задать направление отображения текста.
line-height - определяет высоту строки.
letter-spacing - увеличивает или уменьшает расстояние между буквами в тексте.
color - позволяет задать цвет текста.
text-transform - контролирует в тексте выделение заглавными буквами.[/spoiler]
[spoiler="CSS Псевдоклассы/элементы"]:lang - добавляет стиль к элементу со специальным атрибутом lang.
:hover - добавляет стиль к элементу при наведенной мышкой.
:active - добавляет стиль к активному элементу.
:first-child - добавляет стилевое оформление к первому дочернему элементу селектора
:visited - добавляет стиль к посещенной ссылке.
:after - добавляет контент после элемента.
:before - добавляет контент до элемента.
:focus - добавляет специальный стиль к элементу, который получает фокус.
:first-line - добавляет стилевое оформление к первой строке текста.
:first-letter - добавляет стилевое оформление к первой букве текста.
:link - добавляет стиль к непосещенной ссылке.[/spoiler]