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. Вообще, конечно, первый способ — лучший

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

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

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

или HTML-код вставки картинки:
<img src="http://fantasyflash.ru/anime/teddy/image/teddy110.gif">
BB-код вставки картинки (обычно для форумов):

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

Не забывайте указывать параметры 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>

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

А вообще, размещать картинки, текст и другие элементы страницы удобно в табличках, сделав невидимые границы. Об этом читайте в темке «таблицы».

Оформляйте страницы в едином стиле.
Используйте понятную навигацию (например, горизонтальное или вертикальное меню).
Не используйте слишком яркие и ядовитые цвета на страничке.
Цвет текста не должен сливаться с фоном.
Если вы используете, к примеру, темный графический фон на сайте и белый цвет текста, то не забывайте заливать цвет фона темной краской! Отключите картинки в свойствах браузера и посмотрите на свою страничку: белый текст на белом фоне — ошибка многих начинающих сайтостроителей
Не перегружайте страницы графикой: замедленная загрузка страниц раздражает посетителей.
Если вы используете в меню графические кнопки-ссылки, то обязательно прописывайте для них подсказки в ALT-тексте (посмотрите страничку с отключенными картинками!)
Не делайте больших графических подложек (коллажи вместо фона) на сайте. Они будут долго загружаться. Их лучше всего нарезать и только уже потом верстать сайт из кусочков.
Оптимизируйте графику.
Если вы размещаете на своем сайте большое количество информации, то текст лучше разбить на кусочки абзацами или оформить на дополнительных страницах. То же самое относится и к графике.
Не используйте на страничке горизонтальные полосы прокрутки. Старайтесь оптимизировать странички под все разрешения: верстайте тянущиеся сайты.
Старайтесь тестировать сайт в разных браузерах. Красивая страничка, сделанная под IE, может ужасно смотрется в Oper'e или FireFox.
Не выбирайте специфические шрифты для своего текста, а если без этого никак не обойтись, заголовки лучше вставить картинками-надписями, иначе большинство браузеров просто не распознает такой шрифт.
Не надоедайте посетителям бесконечными бегущими строчками в разные стороны. Это противозаконно))
Не перегружайте страницы скриптами, это не только тормозит загрузку, но и раздражает посетителей.
Не используйте фреймы, иначе процесс индексации будет сильно тормозить. Да и вряд ли конечный результат вам понравится: через поисковик народ будет попадать на внутренние страницы сайта и не увидит всей его красоты, а самое главное, меню для навигации не будет доступно и гость покинет ваш сайт. Если без фреймов не обойтись, то используйте iframe для меню.
Попытайтесь придумать запоминающийся, простой URL-адрес сайта, а не бессмысленный набор символов и, особенно, цифр.
Обновляйте свой сайт. Необновляемй проект посетители быстро забудут и вряд ли вернутся. А на главной странице старайтесь размещать новости сайта. Без них сайт кажется мертвым и необновляемым...

Самый простой баннер — без анимации, т.е. на выбранной фоновой кнопке размещается какая-нибудь прикольная (или не очень ) надпись.

Размер стандартного баннера-кнопки — 88×31 (от нестандартных лучше отказаться! Рискуете получить отказ от его размещения)

Сделать такую кнопку очень просто: просто выберите шаблон или сделайте свой в PhotoShop.

Рассмотрим для начала самый простой способ создания кнопочек без анимации в Adobe PhotoShop:

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

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

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

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

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

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

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

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

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

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

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

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

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

Вставте его в HTML код:

<script language="JavaScript1.2">
grphcs=new Array(2)
Image0=new Image();
Image0.src=grphcs[0]="http://fantasyflash.ru/script/web/image/sneg1.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://fantasyflash.ru/script/web/image/sneg1.gif";
Amount=25;
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];//osw
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;//fantasyflash.ru
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',20);
}
window.onload=fall
//-->
</script>