Энциклопедия создания сайтов

       

Энциклопедия создания сайтов для начинающих.


Рабочий стол и инструментарий

Вот... поговорим теперь о конкретном. О рабочем столе. Что на нем должно быть и как за ним работать.

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

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

При создании страниц я рекомен do you удержаться от использования таких программ как FrontPage(r), HomePage(r), PageMill(r), SiteMill(r) и т.п. Если вы одной рукой мешаете в кастрюле борщ, другой утомительно замачиваете белье, а третьей собираетесь делать сайт, то это ваши программы (они для домохозяек).

Чем плохи программы типа FrontPage(r)

по сравнению с текстовыми редакторами? Между ними примерно такая же разница, как между духовой печью и микроволновой. Духовка прекрасно обращается с продуктами - хорошо прогревает их, создает тепло дома, делает нежную корочку, поджаривает хлеб. А микроволновка тупо греет воду в любом продукте, совершенно не заботясь о вкусе. Даже тарелки холодными после нее остаются. А самое гнусное - это гренки в микроволновке. С растаявшим сыром на хлебе, который сгибается пополам, как часы на картинах Дали.

Страницы, вышедшие из FrontPage(r) - это как раз такие гренки. Их видно за километр и они неудобоваримы.

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



Чем отличается текстовый редактор от текстового процессора? Тем, что первый редактирует, а второй - процессирует? Ну да. Текстовому редактору не нужны разные шрифты, поддержка графики, таблицы, чертежи. Он мал и неприхотлив. Он быстро обрабатывает тексты любого размера. Это то, что нужно для HTML. Если вы работаете на Макинтоше, лучшее, что можно себе представить - редактор BBEdit. Он подкрашивает таги, запоминает положение и размер окна, умеет редактировать файлы прямо на сервере (у него FTP встроен), имеет расширенные возможности поиска и вообще всячески скрашивает жизнь.
<


А зачем вам вообще нужно делать страницу

   Хотя этот вопрос можно и не задавать. Страницы создают для себя или для фирмы.

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

Можно же создать интересное место, наполнить его информацией, поддерживать и обновлять его. И получать от этого удовольствия не меньше, чем от издания собственного журнала.

Фирме страница нужна тоже. Но не из соображений тщеславия, а потому что про фирму должны знать. А если про нее ничего не знают, то пойдут в ту, про которую знают. WWW-страница экономит фирме кучу денег, рассказывает о ней потенциальному клиенту нужную информацию. И справляется с этим, замечу, гораздо лучше лицемерного менеджера по продажам, который с улыбкой подходит, интересуясь: "Чем могу вам помочь?" Да ничем, отвали ты, сам разберусь.

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

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

Copyright © 1997-1999 Артемий Лебедев

E-mail: tema@tema.ru

На главную страницу




 

Стандартные события

ОБРАТИТЕ ВНИМАНИЕ: события для некоторых HTML элементов , которые описаны здесь поддерживаются некоторыми версиями Netscape

и более поздними версиями Internet Explorer

Чтобы использовать браузер v4. 0 создавая сценарии, удостовертесь, что ваши потенциальные клиенты используют требуемую версию браузера, или они были перенанаправлены соответственно на нужную страницу.

onclick

Событие   onclick    может использоваться, чтобы выполнить функции сценария, когда пользователь нажимает на специфический элемент. Internet Explorer 4.0

поддерживает это событие почти для всех HTML элементов, в то время как Netscape и более ранние версии Internet Explorer поддерживают это только в некотрых элементах (типа links, image map и т.д.). См. порядок событий onmouse*   для деталей .

ondblclick

Cобытие  ondblclick   происходит, когда пользователем осуществляются двойные щелчки на специфическом элементе (почти все элементы для Internet Explorer 4.0). Например, следующая ссылка не отвечает на одиночно нажимание - нормальным способом, но двойное нажатие направляет к новому документу.

Это событие для Internet Explorer 4.0 и выше и Netscape 4.0 и выше.

Netscape 3.0 полностью поддерживает onclick событие и , но не поддерживает ondblclick событие, поэтому для пользователей Netscape 3.0 , ссылка будет полностью мертва. Пользователи Internet Explorer 3. 0x получили бы ошибку создания сценария.

 <A HREF="other_page.htm" onclick="javascript:return false" ondblclick="self.location.href ='other_page.html'">ссылка</A>  

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

ссылка-пример

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

ondragstart

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


Стандартные МЕТОДЫ

Ниже перечисленные методы поддерживаются Internet Explorer`ом 4.0 На самом деле их больше, чем описано здесь, но на мой взгляд, я имею в виду - для меня они не пригодны...

К тому же ни один из методов не поддерживается Netscape`ом

или любыми предыдущими версиями Internet Explorer

click

Метод  click  может использоваться, чтобы 'нажать' определенный объект через создание сценария,вызывая событие  onClick 

для специфического элемента.

Например, нажмите верхнюю ссылку 1 , и это ' нажмет ' вторую ссылку 2:

Ссылка 1

Ссылка 2

insertAdjacentHTML

Метод insertAdjacentHTML  может использоваться, чтобы вставить новый HTML элемент в документ, без того, чтобы удалить предыдущий HTML. Например:

 document.all.tags("P").item(1).insertAdjacentHTML("BeforeBegin", "<P>Вот вам новый параграф")  

Добавил бы новый  <P>'Вот вам новый параграф' передвторым параграфом в документе. Возможные значения для позиционирования:

 BeforeBegin 

 AfterBegin 

 BeforeEnd 

 AfterEnd 

Попробуйте сами...

insertAdjacentText

Метод  insertAdjacentText  идентичен методу insertAdjacentHTML , за исключением того, что это вставляет текст.

[ На главную страницу ] [ К оглавлению ]




 

Стандартные свойства

Для любого элемента, которые поддерживаетInternet Explorer 4.0,к элементу могут быть добавлены любые атрибуты на ваш выбор, и управление их значениями доступно через создание сценариев.

className

Свойство  className  может используется, чтобы определить, или установить, какое значение из параметров style sheet`а (настройки стиля документов) данный элемент использует. Например, следующий элемент <А> использует style sheet class " warning "

<A HREF="warning.htm" CLASS="warning"> the warning </A>  

Например в style sheet используя следующие значения

.warning { text-decoration: none; } .warning:hover { color:#878187; }

мы добьемся того, что внешний вид ссылки будет без подчеркивания, а при on mouse over появится подчеркивание, более того сменится цвет ссылки...Это конечно не ново...

document

Свойство  document  содержит ссылку к объекту документа, в котором содержится элемент . Через это могут быть получены, различные свойства объекта документа. Например

  document.all.tags('Div')

Обращается ко всем тэгам <DIV>.

filters

Свойство  filters  из коллекции фильтров представляет совокупность Фильтров, примененную к определенному элементу. Например:

<IMG ID="logo" SRC="images/logo.gif" WIDTH="384" HEIGHT="154" STYLE="filter:revealTrans(Duration=3.0, Transition=12);VISIBILITY:hidden" >

. . .

logo.filters.item(0).Apply()

logo.style.visibility=""

logo.filters.item(0).Play()

Где к изображению применен фильтр Transition filter, который позже вызван в сценарии JavaScript.

id

Свойство  id  присваивает уникальное имя определенному элементу, что впоследствие помогает к нему обратиться...

innerHTML

Свойство  innerHTML  Позволяет вписать в любой элемент с заранее присвоенным ID Новый HTML код полностью заменив предыдущий.

language

Свойство  language  определяет язык сценария используемый для элемента. По умолчанию в Explorer`е используется JavaScript.

style

Свойство  style  определяет конкретный стиль для конкретного элемента.

title

Атрибут  title  отражает подсказку. Значения атрибута  title 

обычно используются (в Internet Explorer 4.0) как ToolTips, и отображаются, когда мышь проходит над специфическим элементом. Возможно динамически изменить свойство  title  через создание сценария.

[ На главную страницу ] [ К оглавлению ]




Визуальные

фильтры

`Dynamic

HTML`

для IE4

Обратите внимание: фильтры, описанные здесь поддерживаются только Internet Explorer 4.0. Визуальные Фильтры должны быть помещены в Style Sheets поскольку они применяются, используя атрибуты Style Sheet.

Визуальные Фильтры обеспечивают управление визуальными объектами. Также, через создание сценария, примененные фильтры - могут динамически меняться без перезагрузки документа. Обычно, они применяются к элементу <IMG>, но могут применяться и к элементу <DIV>, который в свою очередь могут содержать любой HTML, так что визуальные фильтры могут применяться фактически к любому содержанию. Обратите внимание, что, если они применяются к текстовым блокам ( в элементах <DIV>), элемент <DIV> должен определить атрибуты ширины и высоты Style Sheets .

Список визуальных Фильтров:

Фильтр Описание
Alpha Различные эффекты прозрачности объекта.
Blur Размывает и смазывает объект.
Chroma Делает определенный цвет прозрачным.
DropShadow Копирует и сдвигает объект в виде тени.
FlipH Горизонтальное зеркальное изображение объекта.
FlipV Вертикальное зеркальное изображение объекта.
Glow Adds radiance around the outside edges of the object.
Gray Уничтожает цвета - делает ЧБ объект.
Invert Название говорит само за себя.
Light Осветляет объект.
Mask Выделяет объект.
Shadow Еще один вид тени(у меня не работают др. параметры).
Wave Создает волнистый эффект.
XRay Что-то типа Invert`а и Gray`я.

Internet Explorer так же поддерживает Transition Filters (Reveal и Blend transitions) фильтры появления и смешивания объекта.

Основной синтаксис применения фильтров:

 STYLE="filter:ИМЯ_ФИЛЬТРА(ПАРАМЕТР1, ПАРАМЕТР2...)"  

Параметры для каждого фильтра определяются свои собственные они описаны далее.

alpha

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




Dynamic HTML

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

'Dynamic HTML' поддерживается и Microsoft`ом и Netscap`ом, версиями браузеров Internet Explorer 4.0 и Communicator 4.0.

Далее будут рассмотрены стандартные 'Dynamic HTML ' свойства, методы и события.

События Dynamic HTML

Методы Dynamic HTML

Свойства Dynamic HTML

Визуальные фильтры

На главную страницу




 

Фрэймы

Испольльзуя фрэймы, позволяющие разбивать Web-страницы на множественные скроллируемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений. Каждое подокно, или фрэйм, может иметь следующие свойства:

  • Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов
  • Каждый фрэйм имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрэйма
  • Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра)
  • Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:

    • Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрэйме. Это может быть графический логотип фирмы, copyright, набор управляющих кнопок
    • Помещение в статическом фрэйме оглавления всех или части WEB-документов, содержащихся на WEB-сервере, что позволяет пользователю быстро находить интересующую его информацию
    • Создавать окна результатов запросов, когда в одном фрэйме находитс собственно запрос, а в другом результаты запроса
    • Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных
    • <HTML>

      <HEAD>...</HEAD>

      <FRAMESET>...</FRAMESET>

      </HTML>

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

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

      1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.




      Энциклопедия создания сайтов для начинающих

      Version 3.00

      New Web-Masters Club

         Перед Вами сборник публикаций лучших веб-дизайнеров и   веб-мастеров Рунета. Все собрано, систематизированно и готово к употреблению. Дерзайте!

      Начать изучение

         Что нового в третьей версии:

      - Добавлено "Руководство по DHTML";

      - Добавлен третий этап обучения "Изучение психологии в Интернет и ее применение в создании сайтов";

      - Добавлена статья Georgy Good "Об эффективном расположении элементов графики и текста на экране";

      - Добавлена статья Georgy Good "О элементах восприятия и цветах"

          Что нового во второй версии:

      - Добавлено "Практическое руководство по HTML" Николая Чувахина;

      - Добавлена коллекция JavaScripts;

      - Добавлена статья Владислава Золотухина "Фреймы";

      - Добавлена статья Виктора Ануприенко " Создание META-тегов"




      Энциклопедия создания сайтов для начинающих

      Version 3.00

      New Web-Masters Club

      Этап номер 1. Создание сайта.

         Для начала ознакомьтесь с мнением Артемия Лебедева на тему А зачем вам вообще нужно делать страницу?  Далее у нас в программе советы чайнику от студии JS. Что делать? - Классический русский вопрос неминуемо встает перед каждым, кто решил создать собственный сайт в Интернет. Итак, с чего начинается создание страницы?

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

         Теперь поговорим о том, как форматировать текст.

         Настало время познакомиться с фреймами, но я не рекомендую применять их на своих сайтах.

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

         Теперь, владея необходимым минимумом для создания страничек, поговорим о рабочем столе и инструментарии веб-мастера. При создании своих сайтов Вы наверняка столкнетесь с необходимостью применения CGI-скриптов.

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

         Могу поспорить, у Вас есть свой любимый броузер, которым Вы пользуетесь для просмотра страниц в Интернет, но это не значит, что у всех стоит такой же броузер и, что надо создавать страницы только под него. "Best viewed with" посвящается...

         Чтобы сделать свои странички более интересными, интерактивными и интеллектуальными, Вам надо познакомиться с JavaScript'ами.

      Кроме Javascripts, существует еще один язык, который позволит создать Вам нечто необычайное. Итак, далее будут рассмотрены стандартные Dynamic HTML  свойства, методы и события.

         Перед тем, как закончить первый этап обучения, хочу Вам дать несколько полезных советов лично от себя.

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

      Этап номер 2. Реклама сайта.

         На этом этапе я хочу представить Вам несколько публикаций.

      1. Основы сетевой рекламы. Станислав Жарков.

      2. Обмен ссылками. Тимофей Бокарев.

      3. Создание META-тегов.

      Виктор Ануприенко.

      Этап номер 3.

      Изучение психологии в Интернет и ее применение в создании сайтов.

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

         Вебмастерам не обязательно полностью изучать НЛП. Но некоторые разделы могут здорово пригодиться для cоздателей Web страниц. В частности можно узнать, что у каждого сайта может быть цель. И оказывается, чем четче поставил ее автор сайта, тем большего он сможет добиться. С помощью НЛП можно построить свой сайт привлекательно для максимального количества людей, заходящих на сайт. Не секрет, что многие люди не идут дальше первой страницы. И здесь правильное оформление и НЛП-стки составленный текст могли бы очень помочь остаться этим людям на сайте. Это и подбор цветов сайта с учетом психологии. И многие-многие другие моменты. Профессионально занимающихся интернетом НЛПеров сейчас очень мало. А вот вебмастеров интересующихся НЛП становится все больше и больше. Выбор за вами.

      Georgy Good.

      Project Psychology Online Russia www.psycho.all.ru

        1. Об эффективном расположении элементов графики и текста на экране. Georgy Good.

      2. О элементах восприятия и цветах. Georgy Good.

         Вот, вроде бы и все...

      Присылайте свои предложения, вопросы, комментарии на mail@urcov.vrn.ru

      Жду от Вас материалов для пополнения "Энциклопедии".

      Copyright (c) 1998-1999 New Web-Masters Club

      Created by Волынский Александр Николаевич



      Содержание раздела