Помогалка Корнелии

Как скачать картинки с сайта на свой компьютер?   Очень просто: кликните правой кнопкой мышки по выбранной картинке/анимашке, в открывшемся меню выберите команду: «сохранить рисунок как...» (сохранить изображение как, save image) или «сохранить фон...», далее жмите OK.   Хочу создать свой сайт, но не знаю как это сделать...   Есть разные способы создания странички. Можно выделить пять: 1) Универсальный. Пишем html-код странички от руки в стандартном блокноте Windows (Пуск> программы> стандартные> блокнот), не забываем сохранить файл с расширением .html или .htm (его дописываем прямо к названию файла через точку) (НЕ txt!) Естественно, тут нужно знать html :) 2) C помощью редакторов. Таковых существует множество, например, Microsoft FrontPage (визуальный и очень простой в обращении :) Здесь уже знать html не обязательно), AceHTML, HomeSite... 3) C помощью обычного Word'a. Набиваете страничку, размещаете картинки, таблички... Жмете: файл> сохранить как> тип: веб-страница. 4) На шаблонах. Сейчас в инете много разных шаблонов, которые можно скачать и отредактировать первым или вторым способом (см.выше) 5) C помощью конструкторов на готовых шаблонах за несколько минут в режиме on-line. См. narod.ru или ucoz.ru. Вообще, конечно, первый способ — лучший. Рекомендую почитать мои статьи, написанные специально для начинающих сайтостроителей самым понятным языком :) Где можно бесплатно разместить свой сайт?   Бесплатные хостинги: narod.ru :: ucoz.ru :: nm.ru :: h15.ru :: boom.ru :: jino-net.ru Как установить готовый шаблон сайта?   Сначала его нужно скачать (см. раздел шаблоны сайтов или ищите интересные ссылочки на сайты с шаблонами на форуме), после чего — отредактировать. Внутри каждого архива с выбранным шаблоном (на моем сайте) лежит файл readme.txt, в котором подробно описан процесс редактирования готовых шаблонов. После того, как все странички будущего сайта будут отредактированы, остается только загрузить сайт на сервер (см.выбор хостинга выше). На narod'e это можно сделать через «мастерскую» командой «загрузить файлы на сервер» (файлы выбираем кнопкой «обзор» со своего компьютера). А лучше всего отправлять файлы по ftp, естесственно :) Для тех, кто впервые столкнулся с шаблонами и запутался что к чему, я написала подробную статью. Где можно найти литературу по html и css?   Можно почитать мои статьи по html и другим полезным вещам, думаю, они написаны подробно и понятно. Еще советую заглянуть на мой форум, там можно найти много полезных ссылок на учебники. Кстати, все возникающие вопросы оставляйте там же. Как защитить картинки и текст сайта от копирования?   Полной защиты не существует :), можно лишь усложнить процесс добычи картинок/текста с сайта: раскрыть окно браузера в полный формат, без менюшек и заблокировать правую кнопку мыши. Скрипт отключения правой кнопки мыши: <script language="JavaScript1.2"> if (window.Event) document.captureEvents(Event.MOUSEUP); function nocontextmenu() { event.cancelBubble = true, event.returnValue = false; return false;//fantasyflash.ru } function norightclick(e) { if (window.Event) { if (e.which == 2 || e.which == 3) return false; } else if (event.button == 2 || event.button == 3) { event.cancelBubble = true, event.returnValue = false; return false; } } if (document.layers) document.captureEvents(Event.MOUSEDOWN); document.oncontextmenu = nocontextmenu;//osw document.onmousedown = norightclick; document.onmouseup = norightclick; //--></script> Более полную информацию по защите смотрите на моем форуме в теме Авторское право. Хочу поставить на свой сайт гостевую! Желательно со смайликами   Бесплатные гостевые книги: xbase.ru (рекомендую! смайлы можно загрузить свои) :: woguest.ru :: fastbb.ru :: guestbook.ru. А если хотите иметь свою собственную гостевую, ни от кого не зависящую, рекомендую зайти на myscript.ru и скачать php-исходники для гесты. Помните, не все бесплатные хостинги поддерживают php. Хочу поставить на сайт опрос-голосование, как это сделать?   Рекомендую зарегистрироваться на tigvote.ru или woguest.ru Как поставить счетчик на сайт?   Зарегистрируйте свой сайт на spylog.ru, mail.ru или hotlog.ru — после выбора рубрики каталога, в которую вы хотите поместить свой проект, вам предложат варианты счетчиков (с цифрами и без). Остается только выбрать подходящий и получить его html-код для вставки на свою страничку.   Как сделать баннер?   Обычный статистический баннер можно сделать в Adobe Photoshop, анимированный — в Ulead GifAnimator.   У меня уже есть свой баннер, но как сделать для него код? чтобы можно было всем раздавать...   Проще простого взять код моей кнопки и сменить адреса в http на свои: до своего сайта, своей кнопки, а также поменять описание в title (или alt'e). Или вот универсальный код: <a href="http://адрес_вашего_сайта" target="_blank"> <img src="http://адрес_до_вашего_баннера" title="описание вашего сайта" border="0" width="88" height="31"></a> Где width — это длина вашей кнопки в пикселях; height — ее высота   Как сделать окно с полосой прокруткой и текстом внутри?   <textarea name="textpole" rows="3" cols="20"> ваш текст </textarea> Где, rows — количество строк, cols — количество столбцов   У тебя рядом с заголовком страницы в http-адресе рисунок. Его еще видно в избранном. Как это сделать?   Это иконка в адресной строке. Ее адрес прописывается в мета-теге, который вставляется между тегами head: <LINK href="picture.ico" type=image/x-icon rel="shortcut icon">. Не забывайте, что расширение картинки должно быть ICO! В примере это picture.ico При наведении мышки на меню твоего сайта, меняется цвет ячейки-кнопки, как это сделать?   <table width=120><tr><td bgcolor="#CCFFCC" onmouseover="this.style.backgroundColor='#FFCCCC';" onmouseout="this.style.backgroundColor='#CCFFCC'"><a href="http://fantasyflash.ru">ссылка</a></td></tr> <tr><td bgcolor="#CCFFCC" onmouseover="this.style.backgroundColor='#FFCCCC';" onmouseout="this.style.backgroundColor='#CCFFCC'"><a href="http://fantasyflash.ru">ссылка2</a></td></tr></table> ссылка Наведите мышку на зеленую ячейку — она поменяет цвет. Как сделать маленькое выскакивающее окно при клике по ссылке?   Копируйте код: <a href="#null" ONCLICK="window.open('page.html','','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=100,Height=200');">ссылка</a> page.html— адрес вашей страницы (можно с http), которая будет открываться в мини-окне (width — ширина окна; height — высота).

Существуют разные способы создания сайтов. Можно выделить пять:

1) Универсальный. Пишем html-код странички от руки в стандартном блокноте Windows (Пуск> программы> стандартные> блокнот), не забываем сохранить файл с расширением .html или .htm (его дописываем прямо к названию файла через точку) (НЕ txt!) Естественно, тут нужно знать html :)

2) C помощью редакторов. Таковых существует множество, например, Microsoft FrontPage (визуальный и очень простой в обращении). Здесь уже знать html не обязательно), AceHTML, HomeSite...

3) C помощью обычного Word'a. Набиваете страничку, размещаете картинки, таблички... как на простом документе. Жмете: файл> сохранить как> тип: веб-страница.

4) На шаблонах. Сейчас в инете много разных шаблонов, которые можно скачать и отредактировать первым или вторым способом (см.выше)

5) C помощью конструкторов на готовых шаблонах за несколько минут в режиме on-line. См. narod.ru или ucoz.ru. Вообще, конечно, первый способ — лучший :)
 

Небольшой обзор WYSIWYG-редакторов html

1) Adobe Golive Cs (HTML, CSS, JS, SSI, PHP, Java, Vbscript, C# )
2) Macromedia HomeSite
3) Macromedia Dreamweaver (HTML, CSS, JS, ASP, PHP, JSP)
4) Microsoft FrontPage (очень рекомендую тем, кто не хочет изучать html)
5) Namo WebEditor
6) CuteSite Builder (нет доступа к html-коду)
7) CoffeeCup VisualSite Designer (нет доступа к html-коду)
8) Acella
9) EasyWebEditor (нет доступа к html-коду)

Ссылки на закачку программ смотрите на моем форуме.

PS самый простой редактор html/php страниц — блокнот винды :)

Структура Html-документа или с чего начинается каждая страничка

Html-код страничек будем писать в обычном блокноте Windows (Пуск> программы> стандартные> блокнот).

После того, как весь код будет написан (см. ниже), не забываем сохранить созданный файл с расширением .html или .htm (его дописываем прямо к названию файла через точку), но ни в коем случае не .txt!

Отредактировать сохраненный html-файл можно следующим образом: открываем страничку в браузере и выбераем команду меню (для IE): вид> просмотр HTML-кода, после чего и откроется html-код выбранной странички в блокноте (но может открыться в другом редакторе. Все зависит от настроек браузера).

Рассмотрим структуру html-документа...

Самая первая строчка html-документа:
<! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Лучше всего указывать метод strict, иначе под IE появятся разные виды глюков. Самый расспространенный — неверная интерпретация IE margin'ов и padding'ов: он их суммирует сверху к общей длине блока. Новичкам советую пока не заморачиваться по этому поводу)

Весь html-документ заключается в теги:

<html>....</html>

Добавляем голову html-документа — head:

<html>
<head>....</head></html>

В голову пишем заголовок нашего сайта в тегах title:

<html>
<head>
<title>Заголовок.....</title>
</head>
</html>

Затем добавляем мета-тег кодировки нашей странички (если пропустить этот важный момент, на вашем сайте возможно нежелательное появление иероглифов и других неопознанных объектов :) )

<html>
<head>
<title>Заголовок.....</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
</head>
</html>

На самом деле существует еще множество интересных мета-тегов, но об этом позже)

Далее (после title) добавляем тело html-документа (здесь содержится весь наш сайт: картинки, таблички, тексты...) — body:

<html>
<head>
<title>Заголовок.....</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
</head><body>.......</body>
</html>
 

Чтобы облегчить жизнь поисковым роботам (да и себе тоже), не забывайте о meta-тегах. Все они вставляются между тегами head.

<META NAME="Description" CONTENT="подробное описание вашего сайта">
это описание поисковик должен выдавать рядом с ссылкой на ваш сайт, правда далеко не все из них это делают.

<META NAME="Keywords" CONTENT="ключевые слова вашего сайта">
сильно на них не рассчитывайте: в последнее время поисковики при индексации больше обращают внимание на сам текст сайта, а не на набор ключевых слов в мета-тегах.

<META NAME="Updated" CONTENT="дата обновления">
дата последнего обновления сайта.

<META NAME="Document-state" CONTENT="Dynamic">
если документ часто обновляется.

<META NAME="revizit-after" CONTENT="7 days">
частота захода роботов на ваш сайт для последующей индексации. Это старый мета-тег и он редко работает :)

<META NAME="Document-state" CONTENT="Static">
если сайт не изменяется, можно заблокировать доступ робота к сайту.

<META NAME="robots" CONTENT="разрешение">
действия, разрешенные роботам: ALL (все действия разрешены), Index (можно индексировать страницу), Noindex (нельзя индексировать).

<META NAME="Rating" CONTENT="доступ">
указание доступа к вашему сайту: General (сайт доступен всем), 14 jears (доступен инетчикам от 14 лет; можно писать любую другую цифру для аналогичных случаев), Mature (только взрослым)...

<META NAME="URL" CONTENT="http://Адрес вашего сайта">
определение главной страницы для индексирования.

<META NAME="doc-type" CONTENT="Тип документа">
указание типа документа, например — «Homepage».

<META NAME="language" CONTENT="Russian Federation">
указание языка вашего сайта.

<META NAME="Author" CONTENT="Автор сайта">
здесь можно указать автора сайта.
 

Часто бывает необходимо равномерно распределить текст по абзацу (чтобы текст не обрывался по правому краю), за выравнивание по строке (и по левому и по правому краю одновременно — как в этом абзаце (на этой странице)) отвечает параметр JUSTIFY в АLIGN. Имейте в виду: не все редакторы распознают этот параметр! Если вы пишите свою страничку в блокноте, то там таких проблем нет. А самый главный недостаток этого параметра, на мой взгляд, это то, что он иногда любит переносить на следующую строку повтор слова конца предыдущей строки. Не знаю откуда такие глюки. Ну и, конечно, что в нем не нравится обычно: если слов в предложении мало, то они некрасиво растянутся по всей строке, образуя пустоты между словами...

Лучше всего размещать на сайте картинки форматов gif или jpg. Иногда нужны и png, а вот bmp'шки не рекомендуются из-за своего гигантского размера: чем больше весит картинка, тем дольше она будет загружаться при просмотре ваших страниц, в результате чего гость просто сбежит с вашего сайта или отключит показ картинок в браузере :)

Картинки вставляются с помощью тега IMG с указанием адреса самой картинки (можно через http. Кстати, url-адрес любой картинки в сети можно узнать, кликнув правой кнопкой по выбранной картинке и выбрать там пункт «свойства») в src:

<img src="images/cat.gif" width="100" height="200">

width — ширина картинки в пикселах;
height — высота картинки, тоже в пикселах.

Не забывайте указывать параметры width и height! Это один из способов ускорения загрузки графики.

А еще, для каждой картинки можно прописать alt-текст. В этом случае при наведении мышки на картинку появится всплывающий комментарий. Например:

<img src="images/cat.gif" width="100" height="200" alt="котенок :)">

Если пользователь отключит показ картинок в своем браузере, то вместо картинок увидит эти надписи-комментарии. А по стандартам html указывать alt обязательно всегда, в некоторых случаях можно писать пустой alt="".

Кроме alt'a существует еще и title. В отличие от alt'a, с отключенными картинками при title на экране мы не увидим никаких комментариев к отключенным изображениям в IE. В Firefox наоборот: видимы значения title, но не видны alt'ы (alt всплывает). И еще, title можно приписывать к текстовым ссылкам. Бывает полезно и очень удобно:)

Обтекание картинок текстом

Картинку можно расположить слева или справа от текста. За ее расположение отвечает параметр align:

<img src="cat.gif" width="100" height="200" align="right">

right — картинка справа от текста;
left — картинка слева от текста;
bottom — нижняя линия строки текста выравнивается по нижнему краю картинки;
top — верхняя линия строки текста выравнивается по верху картинки;
middle или center — строка текста выравнивается по середине картинки.

Иногда бывает полезно задать поля вокруг картинки. Это делается с помощью параметров hspace и vspace:

<img src="cat.gif" width="100" height="200" align="right" hspace="15" vspace="10">

Разместить картинку по центру можно с помощью тега center:

<center><img src="cat.gif" width="100" height="200"></center>

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

Со структурой html-странички мы с вами уже познакомились в соответствующей теме, поэтому с тегом body вы уже знакомы. Именно в этом теге можно задать цвет фона вашего сайта или прописать путь до фоновой картинки.

Смена цвета фона:

<body bgcolor="#код_цвета">

Коды смотрите в фотошопе. Вместо кода можно указывать английские названия цветов: blue, red, black, white, lime, yellow и т.д.

Графический фон:

<body background="fon.jpg">
где fon.jpg — ваше фоновое изображение.

Фон можно зафиксировать, т.е. при прокрутке текста фон двигаться не будет:

<body background="fon.jpg" bgproperties="fixed">

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

Ссылки вставляются с помощью тега A HREF, в котором прописывается путь до страницы, которая будет открываться при клике по  ссылке:

<a href="page.html">текст ссылки</a> — относительная адресация

или:

<a href="http://fantasyflash.ru/page.html">текст ссылки</a> — абсолютная адресация

Обе ссылки будут текстовыми. А можно сделать ссылку-картинку. В этом случае достаточно вместо «текста ссылки» вставить картинку (см. «графика на web-страницах»):

<a href="page.html"><img src="cat.gif" border="0" width="50" height="70"></a>

Параметр border=0 указывает на то, что вокруг нашей ссылки-картинки не будет рамочки, которые бывают у ссылок.

PS Абсолютную адресацию используйте только тогда, когда нельзя применить относительную! Представьте, что вы решили переехать на новый домен: вам придется менять пути для каждой ссылки и каждой картинки, если они будут прописаны абсолютно...

Часто бывает необходимо сделать так, чтобы при клике по ссылке новая страница открывалась в новом, выскакивающем отдельно, окне (например, при клике по какому-нибудь баннеру). Это делается с помощью параметра target, который вставляется внутрь тега «a href»:

<a href="http://fantasyflash.ru" target=_blank>ссылка</a>

При target=_top — открытие страницы будет происходить поверх основной. Это удобно использовать, например, во фреймах.

А вообще, в target'e может быть имя окна фрейма (или iframe), котрое будет указывать на то, что страничка, описанная в ссылке, откроется именно в этом окне. Но об этом читайте в статье о фреймах или iframe :)

Ссылка на скачивание файла

Тут все просто. Достаточно прописать в ссылке путь до нужного файла, например:

<a href="http://fantasyflash.ru/layouts/bluebutterfly.rar" title="файл 18Кб">скачать!</a>

title — всплывающая надпись, которую вы хотите видеть при наведении мышки на ссылку.

Ссылка на отправку письма

Обычно запускается формочка программы Outlook или TheBat:

<a href="mailto:name@name.ru">написать письмо</a>,
где name@name.ru — ваш e-mail.

Цвет ссылок

Цвет указывается внутри тега body (см. «структуру html»):

<body link="#код_цвета1" vlink="#код_цвета2">

link — цвет всех ссылок;
vlink — цвет ссылок при наведении мыши
alink — цвет ссылок в момент клика по ним

 

Горизонтальные линии часто используются для оформления текста на странице, для отделения одной части текста от другой. Достаточно разместить в нужном месте html-кода тег <HR>

Параметры этого тега:

ALIGN — выравнивание линии на странице (center, right, left);
SIZE — толщина линии в пикселях;
WIDTH — длина линии в пикселях или в % от ширины всей страницы;
COLOR — цвет линии (только для Internet Explorer и NetSurfer!);
NOSHADE — запрет выпуклости.

Например:
<HR SIZE="20" WIDTCH="50%" ALIGN="center" COLOR="red">
означает, что мы размещаем красную линию шириной в 20 пикселей по —центру длиной в пол экрана.

А вообще, наиболее универсальный способ, позволяющий создать совершенно любые линии — нарисовать их в каком-либо графическом редакторе или использовать готовые графические линии из интернета. В страничку вставляем их как графический объект:

<IMG SRC="путь_к_нашей_линии-изображению">

Не забывайте указывать длину и ширину линии: width и height.

А можно растянуть цветной квадратик размерами 1пиксель×1пиксель, превратив его в линию (очень удобно! и графический файл очень маленький :) ), указав width="желаемый размер" после пути к изображению, внутри тега IMG
 

Списки могут быть нумерованными: каждому пункту соответствует порядковый номер; а могут быть маркированными, где рядом с каждым пунктом стоит спец.символ — маркер или картинка.

Пример маркированного списка смотрите тут

Маркированный список

<UL type=disc>
   <LI>первое</LI>
   <LI>второе</LI>
   <LI>третье</LI>
</UL>

type определяет вид маркера:

disc — закрашенный круг;
circle — обведенный по контуру круг;
square — закрашенный квадрат.

В качестве маркера можно использовать и любое графическое изображение. Наример, пиксельную картинку. В этом случае вместо type нужно указать путь до картинки в SRC: src="http://yoursite.com.ru/image.gif"

Нумерованный список

<OL start=1 type=1>
<LI>первое</LI>
<LI>второе<LI>
<LI>третье<LI>
</OL>

type определяет вид маркера:

1 — нумерация арабскими цифрами (1,2,3...);
a — нумерация латинскими строчными буквами;
A — нумерация латинскими заглавными буквами;
I — нумерация римскими цифрами.

start указывает номер, с которого нужно начать нумерацию (для римских цифр «start=6 type=I» эквивалентно началу нумерации с VI)
 

В таблицах можно размещать тексты, рисунки, другие таблицы... Вообще, сайты чаще всего верстают именно табличками :)
html-код простой таблицы из 2 столбцов и 2 строк представлен ниже:

<table>
<tr>
   <td>первая ячейка первой строки</td>
   <td>вторая ячейка первой строки</td>
</tr>
<tr>
   <td>первая ячейка второй строки</td>
   <td>вторая ячейка второй строки</td>
</tr>
</table>

Внутри тега table можно указать разные свойства будущей таблицы:

border — толщина рамок-границ (при border=0 границы становятся невидимыми!);
bgcolor — цвет фона таблицы;
width — ширина таблицы (в пикселях или %);
cellpadding — отступ в пикселях содержимого ячеек от их границ.

Например:
<table border="2" bgcolor="#FF0000" width="300" cellpadding="15">

Внутри тега tr (строки) тоже можно указать полезные свойства:

align (значение left, right или center) — выравнивание содержимого в ячейках;
valign (значение top — по верху ячеек, bottom — по низу, center — по центру) — вертикальное выравнивание содержимого в ячейках;
bgcolor — фон ячеек в данной строке.

Например:
<tr align="center" valign="center" bgcolor="#666666">

Свойства тега td (столбца):

bgcolor — цвет фона ячейки;
background — фоновое изображение ячейки;
width — длина ячейки;
align — выравнивание содержимого в ячейке (left, right, center);
valign — вертикальное выравнивание (top, bottom, center);
colspan — объединение указанного кол-ва столбцов;
rowspan — объединение указанного кол-ва строк;
nowrap — отключение автопереноса текстовых строк в пределах ячейки.

Например:
<td bgcolor="red" background="rose.jpg" width="200" align="center" valign="center" colspan="2">

! приоритет параметра, расспространяющегося на  меньшую область, всегда выше.
 

Iframe — внедренные окна. Это разновидность фреймов, но не фрейм. Очень удобная штука, если не работает php :) В качестве примера, смотрите внедренное окно с новостями на моем хомяке

Код iframe вставляется внутри выбранной странички, в том месте (между тегами body), где мы хотим видеть «врезанную» страничку.

<iframe name="fr1" src="page1.html" width="300" height="200" frameborder="1" scrolling="yes" marginheight="20" marginwidth="30"> </iframe>

name — имя iframe (любое!);
src — адрес странички, которая будет открываться внутри iframe;
width — длина iframe;
height — высота iframe;
frameborder — рамка (1 — есть, 0 — нет);
scrolling — наличие полос прокруток (no — их нет, yes — есть, auto — браузер сам определяет: нужна ли полоса прокрутки);
marginheight — отступ от края окна до расположенного внутри него по высоте текста;
marginwidth — отступ от края окна до расположенного по ширине текста.

Ссылки в iframe

Страничка открывается внутри iframe:
<a href="page4.html" target="fr1">ссылка</a>
target указывает на то, что страничка page4.html откроется ВНУТРИ фрейма с именем fr1. Вот зачем нужно указывать имена фреймов в name :)

Страничка открывается поверх странички с iframe:
<a href="page4.html" target="_top">ссылка</a>

Страничка открывается в новом окне:
<a href="page4.html" target="_blank">ссылка</a>
 

Автор уроков— Ollenkka

1. Оформляйте страницы в едином стиле.
2. Используйте понятную навигацию (например, горизонтальное или вертикальное меню).
3. Не используйте слишком яркие и ядовитые цвета на страничке.
4. Цвет текста не должен сливаться с фоном.
5. Если вы используете, к примеру, темный графический фон на сайте и белый цвет текста, то не забывайте заливать цвет фона темной краской! Отключите картинки в свойствах браузера и посмотрите на свою страничку: белый текст на белом фоне — ошибка многих начинающих сайтостроителей :)
6. Не перегружайте страницы графикой: замедленная загрузка страниц раздражает посетителей.
7. Если вы используете в меню графические кнопки-ссылки, то обязательно прописывайте для них подсказки в ALT-тексте (посмотрите страничку с отключенными картинками!)
8. Не делайте больших графических подложек (коллажи вместо фона) на сайте. Они будут долго загружаться. Их лучше всего нарезать и только уже потом верстать сайт из кусочков.
9. Оптимизируйте графику.
10. Если вы размещаете на своем сайте большое количество информации, то текст лучше разбить на кусочки абзацами или оформить на дополнительных страницах. То же самое относится и к графике.
11. Не используйте на страничке горизонтальные полосы прокрутки. Старайтесь оптимизировать странички под все разрешения: верстайте тянущиеся сайты.
12. Старайтесь тестировать сайт в разных браузерах. Красивая страничка, сделанная под IE, может ужасно смотрется в Oper'e или FireFox.
13. Не выбирайте специфические шрифты для своего текста, а если без этого никак не обойтись, заголовки лучше вставить картинками-надписями, иначе большинство браузеров просто не распознает такой шрифт.
14. Не надоедайте посетителям бесконечными бегущими строчками в разные стороны. Это противозаконно))
15. Не перегружайте страницы скриптами, это не только тормозит загрузку, но и раздражает посетителей.
16. Не используйте фреймы, иначе процесс индексации будет сильно тормозить. Да и вряд ли конечный результат вам понравится: через поисковик народ будет попадать на внутренние страницы сайта и не увидит всей его красоты, а самое главное, меню для навигации не будет доступно и гость покинет ваш сайт. Если без фреймов не обойтись, то используйте iframe для меню.
17. Попытайтесь придумать запоминающийся, простой URL-адрес сайта, а не бессмысленный набор символов и, особенно, цифр.
18. Обновляйте свой сайт. Необновляемй проект посетители быстро забудут и вряд ли вернутся. А на главной странице старайтесь размещать новости сайта. Без них сайт кажется мертвым и необновляемым...

1. Откройте изображение, из которого собираетесь делать авик:
   File> Open> выбор картинки> ok (файл> открыть)
2. Выберите инструмент «прямоугольная область» (rectangular marquee tool)
   
3. С нажатой клавишей Shift выделите этим инструментом нужную область вашего изображения для будущего аватара
   
4. Если выделенная область немного сдвинулась, ее можно легко передвинуть мышкой (не забудьте отпустить клавишу Shift)
   
5. Выбирайте в меню: Image> Crop и выделенный фрагмент вашего изображения вырежется. (Или жмем: Ctrl+C> Ctrl+N> Ok> Ctrl+V, но это будет чуточку дольше)
   
6. Далее уменьшаем размер нашей аватарки: Image> Size> 100 (вводим цифру)> Ok.
   
7. Аватар готов! Осталось сохранить его: File> Save as...
   Чтобы атарка весила как можно меньше и при этом не потеряла качество, жмите:
   File> Save for Web. Посмотрите там разные варианты: gif/jpg, количество цветов — colors (64, 128, 256...) и, собственно, размер будущей аватары. Выберите оптимальный вариант и жмите Save.

Создание рамок на аватарах

1-ый способ
Можно выбрать любую кисточку, задать ей цвет, выбрать нужную форму и после чего просто «проехать» с нажатой клавишей Shift по краям аватары (4 стороны).

2-ой способ (быстрый)
Выделите аватар прямоугольной областью (как мы делали в первом уроке)> жмите првую кнопку по выделенному изображению> Stroke. Откроется окно, в котром нужно задать цвет будущей рамки (кликните по цветному квадрату палитры в этом окне) и толщину линии в пикселях. Я выбрала 1px. Жмем OK и смотрим, что получилось:



Рамочки из пунктиров или точек

 

1. Выберите кисть и ее цвет. Я выбрала круглую N5
2. Жмите Toggle the brushes palette:
   
3. В открывшемся окне выбираем Brush Tip Shape и двигаем движок Spasing для увеличения расстояния между точками/штрихами, пока не подберем нужный вариант:
   
4. Теперь можно проехать по краям нашего аватара с нажатой клавишей Shift
   

Размер и форму кисточек можно менять:


 

1. Откройте изображение, из которого собираетесь делать баннер: файл> открыть (file> open).
2. Выберите инструмент «прямоугольная область» (rectangular marquee tool).
3. Выделите фрагмент изображения выбранным инструментом — просто проведите мышкой по изображению, не отпуская левой кнопки. Появится прямоугольник с бегущим пунктиром по краям. Чтобы выделенный фрагмент соответствовал размерам стандартной кнопки 88×31, нужна небольшая тренеровка)) А можно схитрить (кстати, очень удобно): a) файл> новый> 88×31 пикселей; б) выделить всю область созданного прямоугольника с помощью прямоугольного выделения; в) перетащить «рамочку» выделения на изображение, из которого делаем кнопочку. Т.е. таким образом мы быстренько подогнали размеры необходимого прямоугольного выделения. Не забывайте, если исходное изображение очень крупное, его сначала нужно уменьшить и только потом резать на баннеры-кнопки.
4. Редактирование> копировать (edit> copy).
5. Файл> новый> ok (размеры 88×31 пикселей!) (file> new> ok; width & height)
6. Редактирование> вставить (edit> paste)

Все! заготовка для кнопочки готова. Осталось вставить на нашу кнопочку текст:

1. Выберите цвет будущего текста (2 клика по верхнему цветному квадратику — ниже панели с инструментами).
2. Выберите инструмент «текст» (кнопка «Т» на панели инструментов).
3. Кликните выбранным инструментом в том месте заготовки баннера, где хотите видеть будущий текст.
4. Набирайте текст :)

К любому тексту можно добавлять потрясающие эффекты: тень, рельеф, свет... Это делается через меню «слой> эффекты слоя> выбрать эффект» (layer> layer style). Только не забудьте перед этим выделить нужный текстовый слой («окно> показать слои» / «window> layers») на панеле «слои» с нажатой клавишей Ctrl(!).

Точно также можно заливать текст градиентной заливкой — плавным переходом цветов (тест сначала выделяем по контуру на текстовом слое с кл.Ctrl, затем проводим по тексту инструментом «Градиент» (gradient tool; дополнительный инструмент к инструменту заливка) от одного конца текста до другого (например, по диагонали), с нажатой кнопкой мыши). Эффект ну очень красивый... Лучше смотрится на жирном шрифте. Стоит попробовать :)

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

Можно взять, например, GifConstruction (заготовки для картинок баннера, которые будут чередоваться друг за другом, нужно сначала сделать как простые баннеры). А лучше всего использовать Ulead GifAnimator или Image Ready (прилагается к фотошопу).

И последнее, лучше всего, чтобы ваш баннер весил не более 3-7кб. Могу посоветовать хорошую прогу — GifOptimizer, она отлично сжимает графику без потери качества.

1. рисуете мини-картинку будущей кисти (например, звездочку)
2. выделяете готовую картинку с помощью инструмента «Область» (пунктирная прямоугольная рамочка)
3. • редактирование> определить кисть> Ok (для фотошопа версии 6.0)
   • редактирование> определить установки кисти (для фотошопа версии 8.0 CS)
     (Edit> Define Brush Preset)> вводим имя кисти> ok.

Шаблон сначала нужно скачать (например, здесь, другие ссылки смотрите на моем форуме), после чего — отредактировать. Внутри каждого архива с выбранным шаблоном (на моем сайте) лежит файл readme.txt, в котором подробно описан процесс редактирования готовых шаблонов.

Отредактировать html-файл можно следующим образом:

открываем страничку в браузере и выбераем команду меню в IE: вид> просмотр HTML-кода (view> sourse), после чего и откроется html-код выбранной странички в блокноте (иногда это может быть другой редактор: все зависит от настроек браузера).

После того, как все странички будущего сайта будут отредактированы, остается только загрузить сайт на сервер. На narod'e это можно сделать через «мастерскую» командой «загрузить файлы на сервер» (файлы выбераем кнопкой «обзор» со своего компьютера). А лучше всего отправлять файлы по ftp, естесственно :)

Если у вас еще нет своего сайта и вы не знаете, где искать «народную мастерскую», то делайте следующее: зайдите на сайт narod.ru, там есть формочка «займите это имя для своего сайта». Набираете придуманное имя и жмете кнопку «занять». Там нужно будет придумать свой пароль, заполнить анкетку... Потом попробуйте зайти в «мастерскую» на страничке narod.ru, введя логин и пароль в формочку справа.

В мастерской можно загрузить файлы на сайт по соответствующей ссылке или сделать сайт в режиме on-line по простым шаблонам.

И последнее, странички, отправленные на narod'ный сервер можно отредактировать (например, добавить скрипты) прямо там. Для этого вы должны зайти через «мастерскую» в «управление файлами» (ищите ссылочку в столбце справа), там вам будет выведен список всех файлов на вашем сайте. Далее выбираете страничку (по названию) и кликаете на квадратную кнопочку справа (такая кнопка есть рядом с каждой страничкой) — «редактор страниц». После этого вам откроется html-код выбранной странички в небольшом окне. Добавляете туда все, что хотелось и жмете кнопку «сохранить». Все, окно редактора после этого можно закрывать :)

Автор уроков— Ollenkka