Web - дизайн вопросы и ответы

Как сделать, чтобы при нажатии на ссылку, загружалась бы другая страничка?

<A НREF="http://www.server.com">Здесь ваш текст</A>

Как сделать, чтобы при нажатии на ссылку, появлялся бы бланк отправления сообщения?

<A НREF="mailto:yourname@server.com">Здесь ваш текст</A>

Можно добавить автоматическое подставление строки Subject:

<A НREF="mailto:yourname@server.com?Subject=ваш_subj">Здесь ваш

текст</A>

Как сделать, чтобы при нажатии на картинку, делалось одно из выше перечисленного?

Как сделать, чтобы при нажатии на ссылку, она открывалась в другом окне?

<A НREF="http://www.server.com" TARGET="_blank">Здесь ваш текст</A>

или

<A НREF="http://www.server.com" TARGET="_new">Здесь ваш текст</A>

Как сделать, чтобы при наведении мышки на ссылку, выдавался мой текст, а не "http://www.server.com/Firma/Name/1234/...."?

<A НREF="http://www.server.com" onMouseOver="window.status='мышка на ссылке';return true" onMouseOut="window.status='мышка за пределами ссылки'; return true">Здесь сама ссылка</A>

Как подавить подчеркивание ссылок?

В <head></head> вставьте кусок:

<style>

a.noneline text-decoration: none;

</style>

В <A НREF..> впишите:

Как сделать, чтобы при нажатии на ссылку, в одном фрейме, она открывалась в другом?

Как сделать, чтобы фреймы открывались в том же окне, но поверх других фреймов?

Как сделать, чтобы при нажатии на ссылку, она открывалась в новом окне?

или

Как сделать, чтобы при нажатии на ссылку, она открывалась в том же фрейме?

Как сделать, чтобы при нажатии на ссылку менялось содержимое двух фреймов?

а)

<A НREF="file.htm" onclick="top.frames[2].location='newframe2'; onclick="top.frames[3].location='newframe3';">text</A> Где цифра в frames[x] - номер изменяемых фреймов.

б)

Где newframes содержит тот же фреймсет, но с измененными фреймами.

Как сделать, чтобы нельзя было изменять размер фрейма/растягивать?

Добавить в описание фрейма noresize

Пример:

Как определить, что юзер открыл страницу не в фрейме, а ее надо смотреть в фрейме?

а) Пользователю предлагают перейти на главную страницу.

<!--

if (self.parent.frames.length == 0)

document.writeln("Best view with<A НREF="index.html">main

frame</A>");

// -->

</SCRIPT>

б) Сразу грузится главный фрейм.

<!--

if (self.parent.frames.length == 0)

self.parent.location="index.htm";

// -->

</SCRIPT>

Как убрать 1 пиксел между фреймами в Netscape?

marginweight=0 marginheight=0 в <body> теге зафpейменных стpаниц.

Именно в <body>!

Что такое таблицы?

Таблица начинается и заканчивается тэгами <TABLE></TABLE>. Не забывайте закрывать ее, а то некоторые браузеры не покажут ее содержимое.

Опции:

<TR></TR>

Table Rows. Строка таблицы. Если в таблице содержатся два набора тэгов <TR> и </TR>, в ней будут две строки. Весь текст, графику, другие таблицы и атрибуты, которые вы хотите поместить одну строку, должны быть помещены между тэгами <TR> и </TR>.

<TD></TD>

Внутри таблицы размещаются ячейки с данными. Каждая ячейка, содержащая текст или графику должна быть заключена в тэги <TD></TD>.

<TH></TH>

Table Header. Заголовок таблицы. По умолчанию текст между тэгами <TH> и </TH> записывается жирным шрифтом и располагается по середине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю - <ALIGN=LEFT> и <ALIGN=RIGHT>.

NOWRAP

Чтобы текст, не помещающийся в одну строку, не переходил на следующую используйте данный атрибут (для <TH></TH> и <TR></TR>).

COLSPAN=xx

Соединение столбцов. Если вы хотите, сделать какую-нибудь ячейку шире, чем верхняя или нижняя, используйте данный атрибут. (Укажите на сколько ячеек надо "растянуть" данную ячейку - COLSPAN)

ROWSPAN=

Аналогичен COLSPAN, только он задает число строк, на которые растягивается ячейка.

WIDTH=

Применяется в двух случаях. Можно поместить его в тэг <TABLE> для задания ширины всей таблицы, а можно в тэгах <TR></TR> или <TH></TH> для задания ширины ячейки или группы ячеек.

CELLPADDING=

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

ALIGN=

Выравнивание текста или графики в ячейке по горизонтали (LEFT, RIGHT, CENTER, JUSTTIFY).

VALIGN=

Выравнивание текста или графики в ячейке по вертикали (TOP, BOTTOM, CENTER, BASELINE).

<CAPTION></CAPTION>

Заголовок таблицы. Центрируется по умолчанию

BORDER=

Рамка таблицы.

CELLSPACING=

Атрибут определяет ширину промежутков между ячейками (по умолчанию - 2pix)

BGCOLOR=""

Фоновый цвет таблицы.

BORDERCOLOR= (IE)

Цвет линий, обрамляющих таблицу или ячейку.

BORDERCOLORDARK= BORDERCOLORLIGHT=

Атрибуты для создания трехмерных таблиц.

Пример:

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 HEIGHT="1" BORDERCOL&

OR="#33CCFF" bordercolordark="#33CCFF" bordercolorlight="#33CCFF">

<CAPTION>TABLE</CAPTION>

<BR>

</TD>

</TR>

<BR>

</TD>

</TR>

</TABLE>

Как используется тэг <META>?

<META> используется в рамках тэга <HEAD>, чтобы указать какую-либо полезную информацию, не определяемую другими HTML документами.

В частности некоторые поисковики индексируют страницу этим тэгам.

Формат:

или

Атрибуты и их аргументы

HTTP-EQUIV="Content-Type"

Указывает тип документа. Можно вдобавок указать кодировку документа. Но с этим будьте аккуратны.

HTTP-EQUIV="Refresh"

Время, через которое браузер автоматически обновит документ. Можно сделать автоматическую загрузку другой странички.

Через 5 секунд начнется загрузка указанного URL. Если не хотите ждать, пишите:

Content="0; URL=...">

NAME="KeyWords"

Поисковые машины смотрят наличие этого параметра, за которым идет слово CONTENT="<words>", где<words> - слова, на которые ваша страничка ориентирована. Например, ваша страничка посвящена фильму "Титаник":

На ключевое слово Titanik, поисковик выдаст ссылку на вашу страничку.

NAME="Description"

В поле CONTENT="<word>"- описание вашей странички.

NAME="GENERATOR"

Обычно вставляется редакторами WYSIWYG (FP'98). Совершенно необязателен. Вот что вставляет Netscape Composer:

<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [en] (Win95; I)

[Netscape]">

Пример использования:

<HEAD>

<TITL_E>ИЧП "ЗУБЫ"</TITL_E>

</HEAD>

В чем отличия <b> и <strong>, <i> и <em>?

<b> и <i> - тэги физического выделения, то есть, вы принудительно заставляете выделять текст полужирным или наклонным шрифтом. <strong> и <em> - тэги логического выделения, то есть, каждый браузер может по своему выделить текст внутри этих тэгов.

Как разместить картинку в центре экрана?

Можно сделать ее в таблице:

<tr>

</td

</table>

Как сделать неподвижный фон(background)?

Это расширение для IE 3.01 и позже. Ha навигаторе и старых версиях IE не работает.

Как вставить музыку в html файл?

Просто вставьте данный скрипт в вашу страничку:

<SCRIPT LANGUAGE="JavaScript"><!-- Hide the script from old

browsers

function BGSound()

// find out what browser it is

var Cmd = " "

var Brwsr = window.navigator.appName

if (Brwsr == "Microsoft Internet Explorer")

// Use BGSOUND for MSIE

Cmd = "<BGSOUND SRС=" + "music.mid" + ">"

else

// Everyone else gets EMBED

Cmd ="<EMBED SRС='music.mid' HIDDEN=TRUE>"

return Cmd

// do it!

document.write(BGSound())

// end hiding here -->

</SCRIPT>

Как сделать так, чтобы при наведении мышки на текст с ссылкой, он (текст) поменял цвет?

Вставьте данный скрипт в вашу страничку:

<!--

ua=navigator.userAgent;

v=navigator.appVersion.substring(0,1);

if ((ua.lastIndexOf("MSIE")!=-1) -- (v!='1') -- (v!='2') --

(v!='3')) document.body.onmouseover=makeCool;

document.body.onmouseout=makeNormal;

function makeCool()

srс = event.toElement;

if (srс.tagName == "A")

srс.oldcol = srс.style.color;

SRС.style.color = "FF0000";

function makeNormal()

SRС=event.fromElement;

if (SRС.tagName == "A")

SRС.style.color = SRС.oldcol;

//-->

</SCRIPT>

Как сделать неподчеркнутые ссылки?

Вставить в <head> вот такой кусок:

<!--

A:link text-decoration: none;

A:visited text-decoration: none;

A:active text-decoration: none;

A:hover text-decoration: none;

-->

</STYLE>

Как сделать кнопку "Back"?

<A НREF="javascript:history.back()">Hазад</a>

Что такое "форма"?

Форма начинается и заканчивается тэгами <FORM>, она может содержать различные поля и кнопки.

Формат:

....

</FORM>

В поле ACTION - адрес программы, которая будет запущена по нажатию кнопки Sumbit(срабатывание формы). Поле METHOD может принимать одно из двух значений: GET или POST. GET - введенная пользователем информация помещается в конец URL.

Поскольку размер формы может быть большой, то получится большой URL при выполнении формы.

POST - информация от пользователя вливается в общий поток данных

Что такое "разворачивающиеся списки"?

Формат:

</SELECT>

NAME - уникальное имя элемента. Каждый элемент должен иметь уникальное имя, чтобы при получении введенной пользователем информации. <OPTION></OPTION> - добавляет новый элемент списка. Внутри тэга вводится имя этого элемента.

Если у элемента определена опция VALUE, программе-обработчику будет передано указанное значение, иначе - сам текст элемента.

Также один любой элемент может быть исходно выделен. Для этого используется опция SELECTED внутри тега <OPTION>.

Что такое "список со множественным выбором"?

Формат такой же как и у обычного разворачивающегося списка, только в тег SELECT добавляются еще две опции:

SIZE - определяет сколько элементов должно одновременно отображаться в списке.

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

VALUE - дает команду посылать заданный параметр _вместо_ текста между тэгом <OPTION>.

Что такое "флажки"?

Формат:

Что такое "переключатели"?

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

Формат:

Что такое "текстовые поля"?

Формат:

MAXLENGTH - указывает максимально возможную длину вводимой строки.

SIZE - видимый размер поля.

Что такое "текстовые области"?

Формат:

ROWS - количество строк.

COLS - количество символов в строке.

Что такое "парольные поля"?

Формат:

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

Что такое "скрытые поля"?

Формат:

Данное поле нужно для передачи параметров программе-обработчику без предоставления пользователю возможности поменять их.

Для чего нужны кнопки Submit & Reset?

Формат:

По кнопке SUBMIT происходит отправка формы, а по кнопке RESET - сброс в исходное состояние.

Мне нужно, чтобы формы отсылались на мой e-mail. Как это сделать?

а) Если надо отослать одно поле, то подойдет следующая конструкция:

б) Если же полей много (имя, фамилия), то надо использовать халявные сервера со скриптами - например, cgi-free. Недостаток - реклама: перекидывает. После послать на страничку с своей рекламой.

Здесь your@email - ваш email (на который вышлется), temp.htm - полный адрес к странички благодарности "что вы заполнили форму"

Как использовать "карту"?

Для того, чтобы при нажатии на определенную область картинки происходил переход на один адрес, а при нажатии в другой области - на другой, то проще всего воспользоваться следующей конструкцией:

В любом месте html-файла описать сам "мэп"(карту):

</MAP>

Где "элементы":

SHAPE - очертания области. Принимает значения: RECT, CIRCLE, POLY. По умолчанию RECT.

а) RECT- прямоугольник. COORDS="x1, y1, x2, y2" x и y задают координаты верхнего левого и нижнего правого углов.

б) CIRCLE - круг. COORDS="x0, y0, r" x0 и y0 - координаты центра. r - радиус.

в) POLY - многоугольник. COORDS="x1, y1, x2, y2, x3, y3..." x и y - координаты вершин.

Все координаты указываются в пикселах, за исключением случаев COORD="0,0,50%, 100%" (в процентах).

COORDS - координаты области. Форма, определяемая SHAPE.

HREF - адрес документа (URL)

NOHREF - означает, что этот регион не действует. Используйте его - когда хотите "вырезать" область.

ALT - текстовое описание области. Используется для того, чтобы показывать текстовые метки, которые могут высвечиваться в строке статуса, когда мышь или другое устройство управления курсором находится над горячей зоной, или же для создания текстовой строки для неграфической программы просмотра.

Обратите внимание, что при описании "мэпа" пишется просто имя_мепа, а при описании картинки пишется #имя_мэпа. Пример:

</map>

Так же можно воспользоваться специальными программами для нарезки мэпов.

Как отформатировать текст по ширине?

text

</p>

Как изменить абзацный отступ?

<p style="text-indent: 15pt">... Абзац ...</p>

Как можно изменить параметры <hr>?

SIZE=xx

Атрибут указывает высоту линии.

WIDTH=xx

Пикселы или проценты. Длина линии.

ALIGN=word

Выравнивание (CENTER, LEFT, RIGHT).

NOSHADE

Атрибут для создания линий без тени.

COLOR=word

Имя цвета или #RRGGBB. Цвет линии. Работает только в IE.

Тэг <HR> можно (но не нужно) использовать для создания окружностей:

<HR NOSHADE SIZE=100 WIDTH="1%"> (SIZE - диаметр)

Примеры:

Как определить разрешение у юзера и в зависимости от разрешения посылать на разные страницы?

<html>

<head>

var height=0;

var width=0;

if (self.screen) // for NN4 and IE4

width = screen.width

height = screen.height

else if (self.java) // for NN3 with enabled Java

var jkit = java.awt.Toolkit.getDefaultToolkit();

var scrsize = jkit.getScreenSize();

width = scrsize.width;

height = scrsize.height;

</script>

</head>

<body>

<!--

if (width == 800 && height == 600)

location.href = "800x600.htm"

else if (width == 640 && height == 480)

location.href = "640x480.htm"

else

location.href = "unknown.htm"

//--> </script> </body> </html>

Как сделать автоматическую надпись "Последнее обновление"?

Вставьте в страничку следующий текст:

Последнее обновление:

<!-- document.writeln(document.lastModified)

// --></SCRIPT>

Как сделать так, чтобы при наведении мышки на картинку-ссылку, картинка изменилась?

<SCRIPT LANGUAGE="JavaScript"> <!--//

* if (navigator.appName == "Netscape" -- parseFloat(navigator.appVersion)

>= 3.0) roll = 'true';

* else if (navigator.appName == "Microsoft Internet Explorer" -- parseFloat(navigator.appVersion) >= 3.0) roll = 'true';

else roll = 'false';

function over(img, ref) if (roll == 'true') document.images[img].SRС

= ref;

function out(img, ref) if (roll == 'true') document.images[img].SRС

= ref;

if (roll == 'true')

a1=new Image;a1.srс="over.gif";

a2=new Image;a2.srс="out.gif";

aX=new Image;aX.SRС="Image.img"

//--> </SCRIPT>

a1,a2,.. - так подгружаем картинки нажатой и не нажатой кнопок. Не забудьте про это!

Затем прописывайте картинку-ссылку:

Здесь mover - имя картинки, необходимо чтобы java-скрипт знал какую картинку менять. У каждой картинки должно быть свое имя.

Создание сайта

Web - дизайн вопросы и ответы