Глава 8. Свойства тэга mailto

Если нам надо разместить на странице ссылку для отправки электронной почты мы обычно пишем вот такое:

< a href=mailto: [email protected]> Письмо мастеру< /a>

Еще мы можем заменить надпись любой картинкой:

< a href=" mailto: [email protected]" > < img src=" folder.gif" width=" 16" height=" 16" border=" 0" alt=" [email protected]" >

Еще возможна отправка с автоматическим заполнением Темы письма и Заголовка в вашем почтовом клиенте, вот пример:

< a href=" mailto: [email protected]? subject=Пишу с твоего сайта& Body= Уважаемый мастер! " > Письмо мастеру< /a>

Глава 9. Пример практического создания сайта

Представьте себе, что вы решили написать в Инете о себе любимом, ну и чуть-чуть о своей подруге. Далеко не лучшая идея — вряд ли кому-то это интересно, разве ближайшим друзьям и родственникам. Но для примера сойдет.

Начнем, пожалуй, с того, что застолбим себе местечко на каком-нибудь сервере, появится стимул побыстрее его заполнить (предполагается, что почтовый ящик у вас уже есть). Возьмем, к примеру, Fortune City — дают 100 МБ. Думаю, достаточно. Для регистрации жмем вот сюда, выбираем тематику сайта (не мучайтесь, любую выбирайте! ), имя пользователя и пароль. Далее заполняем предлагаемые формы. Если вы не очень уверены в своем английском, то предварительно кликните ссылку Registration Help! в верхней части страницы. Там найдете переводы всех форм, которые предстоит заполнять при регистрации на FortuneCity.

...Ну вот. Место у вас есть, и появился адрес. Что-то вроде http: //www.fortunecity.com/business/fax/339.

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

заглавная страничка — index.html (обычно она всегда так называется);
страничка про девушку — назовем ее girl.html;
две фотографии — пусть это будут myphoto.gif и herphoto.gif.

Все файлы расположим в одной папке (их всего 4, поэтому и мудрить не будем).

Теперь для создания самих страничек можете воспользоваться Front Page или Word. А можно открыть что-нибудь типа Блокнота или WordPad и сделать все вручную. Мне лично второй вариант больше нравится. Итак, набираем следующее (назначение тэгов — это то, что находится между символами «< » и «> »):

< HTML> < HEAD>

< TITLE> Обо мне и моей любимой< /TITLE> < /HEAD>

< BODY BGCOLOR=" #A0F0F0" > < H2 ALIGN=CENTER> Тимон Тимонович< /H2>

< IMG SRC=" myphoto.gif" WIDTH=" 122" HIGHT=" 183" ALIGN=LEFT ALT=" Моя фотка" >

Это я! Родился, рос, потом учился, и все время рос. Вот такое у меня бурное детство...

Чем я занимаюсь сейчас? Да все тем же, чем и раньше — ем и пи-саю. Вот такой вот я есть!

< HR>

Про мою девушку вы можете узнать < A HREF=" girl.html" > здесь< /A>.

< /BODY>

< /HTML>

Этот файл назовите index.html и сохраните на диске. Для этого выберите в меню « Файл » опцию « Сохранить как... ». Выберите тип файла « Текстовый документ », а имя — «index.html». Теперь наберем следующий файл:

< HTML> < HEAD>

< TITLE> Обо мне и моей любимой< /TITLE> < /HEAD>

< BODY BGCOLOR=" #A0F0F0" > < H2 ALIGN=CENTER> Тима< /H2>

< IMG SRC=" herphoto.gif" WIDTH=" 128" HIGHT=" 185" ALIGN=RIGHT ALT=" Фото моей девушки" >

Знаете, ее биография не очень-то отличается от моей... Лучше про ее маму расскажу: < UL> < LI>

На днях теща 50 копеек проглотила. Подавилась. И знаешь, мелочь, а приятно! < LI>

Вчера хоронили тещу. Порвали три баяна... < /UL> < HR>

Чтобы вернуться ко мне, < A HREF=" index.html" > жмите здесь< /A>. < /BODY> < /HTML>

Сохраните этот файл как girl.html. Сюда же скопируйте myphoto.gif и herphoto.gif. Можете скопировать любые два графических файла с расширением gif из имеющихся в наличии. Главное не забудьте их переименовать в myphoto.gif и herphoto.gif. Теперь откройте папку, куда вы все сложили, дважды кликните по index.html и увидите результат своих трудов.

Осталось только перебросить все это хозяйство на сервер (upload). Можно использовать только браузер (обновление по WWW), а можно

FTP-клиент (по FTP). Второй вариант гораздо быстрее и удобнее. Рассмотрим оба варианта.

Upload по WWW

Заходим на www.fortunecity.com, находим вверху ссылку «Build» («Создать») и жмем на нее, затем выбираем «Update with advanced home-builder» и в появившемся окне вводим свой логин и пароль. Попадаете на страничку «build» — строительство своего сайта. Там пока пусто. В верхней части страницы — ваш адрес (чтоб не забыли! ). Ниже — список имеющихся на вашем сайте файлов (собственно говоря, пока там ничего не имеется) и их размер: html files (HTML-файлы), graphic files (графические файлы), other files (другие файлы) и directories (папки). Кнопки: edit (редактировать), rename (переименовать), view (просмотреть), delete (удалить), create directory (создать папку), create new html file (создать новый HTML файл). Так как нам пока редактировать и удалять нечего, смотрим далее. Внизу страницы под заголовком « Uploading files » находим 10 окошек с кнопками « Обзор ». Жмем на одну из кнопок, в открывшемся окне выбираем свой файл « index.html », нажимаем открыть. То же повторяем и для «girl.html», «myphoto.gif» и «herphoto.html». Еще чуть ниже нажимаем на «upload files». Готово. Теперь набираем в окне браузера адрес своей странички и смотрим, что получилось.

Upload по FTP

Рассмотрим на примере программы CuteFTP. Сперва настраиваем ее для работы со своим сайтом: в FTP Site Manager (открывается при каждом запуске программы) нажимаем Add Site. Придумываем Site Label, можно любое имя (ну, например, site01). Host Address — вводим ftp.for-tunecity.com, User ID — ваш логин для входа на сайт, Password — пароль, остальное — по умолчанию. Нажимаем « Connect ». Если все сделали правильно и сервер FortuneCity не глючит (что иногда случается с ним), то менее, чем через минуту мы можем редактировать свой сайт. В левом окне выбираем файлы, которые следует загрузить на сервер, нажимаем upload (стрелка вверх) или в меню Commands выбираем upload — выбранные файлы выгружаются на сервер. Все. Закрывайте программу и заходите на свой сайт.

Часть 11. Тонкости и секреты

Глава 1. Фреймы

Для начала давайте решим, для чего используются фреймы. Они появились еще во второй версии Netscape Navigator и предназначались для облегчения навигации при создании страничек (так тогда казалось).

Техника использования фреймов заключается в том, что все окно браузера делится на несколько областей, в каждую из которых можно загрузить независимую страничку. Кроме этого, был введен механизм, позволяющий управлять любой страничкой из любого окна. Например, можно в одном окне организовать меню сайта, а в другом показывать его содержимое. Причем, щелчок по ссылке в окне меню открывал страничку совсем в другом окне. Такое построение сайта встречается чаще всего, но ничто не мешает нам сделать не два фрейма, а, например, 3, 4, 5... и т.д. Но пока не будем торопиться с обсуждением механизма работы фреймов, а поговорим об их недостатках и уместности применения.

Основные недостатки сайта, построенного с применением фреймов, следующие:

Странички сайта не индексируются обычными поисковыми системами, исключая первую страницу. Это происходит из-за того, что страница описания фреймов не содержит в себе ссылок вида < a href=" " >...< /a> и поисковые роботы, естественно, не могут попасть на внутренние странички. Приходится прикладывать дополнительные усилия, чтобы все же осуществить это. В частности, вводить вышеупомянутые ссылки именно для роботов.
В случае попадания не на первую страничку сайта не существует «официального» способа перейти на первую страничку сайта — приходится вручную редактировать путь в адресной строке браузера.
В ввиду того, что фреймовая структура сайта придает ему достаточно узнаваемый вид, то большинство подобных страничек выглядят достаточно однообразно.
Невозможно поставить закладку на внутреннюю страничку сайта. А это уже серьезно! Представьте, что вы наткнулись на очень интересную статью и желаете, например, поместить ссылку в свою коллекцию или послать другу ее адрес. Так вот, ни то, ни другое вы сделать не сможете — фреймы скрывают истинный адрес странички. Ради справедливости, нужно сказать, что этот адрес все же можно узнать, открывая ссылку в новом окне.
Проблемы отображения странички в разных версиях браузеров. От этого уже никуда не уйти и это предложение можно автоматически добавлять практически к любым расширениям HTML.

В каких случаях уместно применять фреймы?

Честно говоря, есть очень мало задач, которые нельзя решить без использования фреймов. Первоначально введенные для того, чтобы облегчить создание механизма навигации по сайту, на данный момент они, по-моему, ясно показали, что не справляются с этой задачей. Для этой цели гораздо лучше подходит технология SSI.

Тем не менее, в каких случаях оправдано их применение:

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

Но есть один удачный способ применения фреймов — создание системы помощи для сложных сайтов. В этом случае очень удобно открывать новое окно, где уже и используется фреймовая структура. Это очень похоже на встроенную систему помощи Windows.

Механизм работы фреймов

Если все же решено применять фреймы, то давайте разберемся с тем, как правильно писать HTML-код и работать с ними.

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

index.htm — страничка контейнер.

< html>

< head>

< title> Frame page< /title>

< /head>

< frameset cols=" 160, *" >

< frame src=" left.htm" name=" menu" scrolling=no noresize>

< frame src=" right.htm" name=" content" scrolling=no noresize>

< /frameset>

< noframes>

Ваш браузер не поддерживает фреймы, пожалуйста, обновите

его.

< /noframes>

< /html>

И сразу напишем код для страничек, входящих в фреймовую структуру.

left.htm — страничка, содержащая меню.

< html>

< head>

< title> Menu page< /title>

< /head>

< body>

< a href=" topic_1.htm" target=" content" > topic #1< /a>

< a href=" topic_2.htm" target=" content" > topic #2< /a>

< a href=" topic_3.htm" target=" content" > topic #3< /a>

< a href=" topic_4.htm" target=" content" > topic #4< /a>

< /body> < /html>

right.htm — страничка, в которой будут отображаться основные статьи сайта.

< html> < head> < title> Content page< /title>

< /head>

< body>

Эта страничка будет грузиться по умолчанию, и на ней обычно размещают приветственный текст.

< /body>

< /html>

Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тэга < body> мы используем тэг < frameset>, в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тэга < frame>. Давайте-ка подробнее разберем наш пример:

< frameset cols=" 160, *" >

< frame src=" left.htm" name=" menu" scrolling=no noresize>

< frame src=" right.htm" name=" content" scrolling=no noresize>

< /frameset>

В параметре тэга < frameset> мы определяем, что страничка будет разделена по вертикали и состоять из двух колонок (если нам нужно разделить окно по горизонтали, то тогда вместо параметра cols, нужно применять параметр rows).

В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделенные запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звездочки, обозначающей — «все оставшееся пространство». Вот примеры определения фреймов:

< frameset cols=" 200, *" > — 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей.
< frameset rows=" 25%, 50%, 25%" > — 3 строчки, высоты которых определены в процентах от высоты окна браузера.
< frameset rows=" *, 2*, *" > — то же самое, что и

предыдущая строчка, но записанная при помощи звездочек. Цифра перед звездочкой указывает количество повторов. Ширина одной звездочки определяется как среднее арифметическое между всеми звездочками в строке с учетом коэффициентов перед ними.

Тэг < frameset> является контейнером, и в качестве его элементов должны быть написаны строчки для каждой колонки (строки) при помощи тэга < frame>. Вот пример описания:

< frame src=" left.htm" name=" menu" scrolling=no noresize>

src — URL странички, которая будет помещена во фрейм.

name — имя странички, по которому к ней можно будет обращаться.

scrolling, noresize, ... — параметры, управляющие поведением фрейма — возможностью изменять пользователем ширину фрейма и управлять появлением полосы прокрутки в случае, если содержимое странички не помещается на экране.

Обратите внимание на параметр name — он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился еще один параметр target=" content" — вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:

< a href=" topic_1.htm" target=" content" > topic #1< /a>

В качестве значения параметра указывается то самое имя, которое мы присвоили нашему фрейму. Таким образом, мы можем открыть любую ссылку из любого окна и в любом окне. Достаточно лишь знать его имя.

Кроме имен, определяемых непосредственно нами, есть часть уже определенных, и наиболее важные из них следующие:

_blank — открывает ссылку в новом окне
_top — открывает ссылку на все окно, если она находилась во фрейме. Другими словами, она разрушает структуру фрейма и загружает файл во все окно.
_parent — открывает ссылку в родительском окне.

До сих пор в качестве элементов контейнера < frameset> мы использовали простые тэги < frame>, но мы также можем использовать и контейнер < frameset>. В этом случае мы получаем т.н. вложенные фреймы. Вот пример:

< frameset rows=" 40, *" >

< frame src=" up.htm" name=" logo" scrolling=no noresize>

< frameset cols=" 160, *" >

< frame src=" left.htm" name=" menu" scrolling=no noresize>

< frame src=" right.htm" name=" content" scrolling=no noresize>

< /frameset>

В данном случае определены три фрейма — один горизонтальный вверху, который мы можем использовать, например, как логотип. И два вертикальных, которые разделили второй горизонтальный фрейм.

В общем случае можно использовать сколько угодно фреймов (в пределах разумного, конечно).

Небольшое замечание. В принципе, в качестве источника фрейма может быть указана не HTML-страничка, а рисунок в формате GIF или JPEG, но применение такого механизма считается дурным тоном.

Теперь о подводных камешках. Самый большой из них следующий — Netscape Navigator не точно соблюдает ширину фрейма в пикселах и может принимать лишь некие кратные шаги. Поэтому в случае, если возникла такая проблема, нужно просто подкорректировать ширину фрейма под стандарты Netscape.

Кстати, рамку фрейма можно убрать, указав параметр:

frameborder=0

И еще одно! Для браузеров, которые не понимают фреймов, есть специальный тэг < noframes>. Как раз он и определяет, что увидит пользователь с браузером, который не поддерживает фреймов. Обычно в этом месте либо размещают надпись, либо указывают список на основные раздела сайта, чтобы человек все же смог просмотреть странички.

⇐ Предыдущая 35 36 37 38 394041 42 43 44 Следующая ⇒