Отправляет email-рассылки с помощью сервиса Sendsay

Как создать сайт. Рассылка для чайников.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Секреты создания и продвижения продающих сайтов" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ArtDir

Статистика

4.819 подписчиков
+2 за неделю
←   Все выпуски   →

Как создать сайт. Рассылка для чайников. Java Script и CSS. Выпуск №1.


Информационный Канал Subscribe.Ru
 
 

Как создать сайт. Рассылка для чайников.

Как сделать сайт

Как раскрутить

Где разместить

Как заработать

Способ гиперраскрутки

Автор  рассылки

Сайт поддержки

Подраздел Java Script и CSS

Ведущий раздела: RealMan, сайт поддержки webchainik.h11.ru
Здравствуйте уважаемые читатели. Давно я не писал, каюсь. Но на то были причины личного характера, надеюсь такое больше не повториться. Этот выпуск особенный не только потому что он сильно задержался, но и потому что с него я начинаю нумерацию своего раздела. Теперь номера выпусков будут совпадать с номерами уроков публикуемых на моем сайте. Надеюсь долгий перерыв вас не лишил целеустремленности в изучении. Сегодня я напишу:

Начальные сведения о CSS или о том, где их можно селить.

Ну давайте, придерживаясь плана, заведем разговор о каскадных таблицах стилей. Ни для кого не секрет, что у большинства пользователей Интернет скорость передачи данных невелика, порядка нескольких килобайт в секунду. Этот факт накладывает большие ограничения на творческий процесс. Иной раз приходится отказываться от красивых нарисованных кнопочек, потому что нетерпеливый юзер не желает ждать, но его можно понять. CSS дают такие возможности, которые позволяют оставить красоту на странице и удержать нетерпеливого юзера. В некоторых ситуациях они могут заменить photoshop или достаточно сложную анимацию небольшим программным кодом. Но до всего этого нам еще далеко, прежде всего CSS — это средство, позволяющее задавать различные свойства HTML-тегам. Задать их можно тремя способами:

для отдельного тега

Таким способом например, можно указать, как должен выглядеть конкретный абзац P:

К этому абзацу применено стилевое определение.

Вот что написано для этого абзаца в HTML-кодах:

Стиль задается атрибутом style. Браузеру дано указание вывести абзац зелеными буквами размером в 1.5 сантиметра. Стилевые определения задаются при помощи указаний, общий вид которых:

характеристика: величина;

Указания отделяются друг от друга символом “;”. Атрибут style можно использовать практически в каждом теге, задавая его специфические свойства. Посмотрите еще один пример внедрения стилей в теги HTML-программы. Вот еще один пример, только уже целиком HTML файла:

Скопируйте этот пример в ваш текстовой редактор и посмотрите что получается. Рекомендую вам так поступать с каждым примером и повозможности эксперементируйте с ними.

для отдельного HTML-файла

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

Браузер отображает заголовки в этом документе рубленым шрифтом цвета “maroon” и выравнивает их по правому краю экрана. Такое поведение браузера соответствует инструкции:

Стилевые определения (селекторы) располагаются внутри тегов “запакованные” в HTML-комментарии (для браузеров, которые не поддерживают CSS).
Cтилевое определение имеет вид:

Имя тега (или имена тегов через запятые)
{
характеристика: величина;
...
характеристика: величина;
}

В приведенном выше примере использованы три характеристики:

text-align:right;
задает выравнивание по левому краю
color:maroon;
задает цвет “maroon”
font-family:"Arial Cyr",Geneva,Helvetica,sans-serif;
задает рубленный шрифт

Заголовки будут выводиться шрифтом “Arial Cyr”, если, конечно, этот шрифт есть на компьютере пользователя. Если шрифта нет, браузер последовательно ищет шрифты “Geneva”, “Helvetica” или, в конце концов, какой-нибудь рубленый шрифт (указание “sans-serif”). В случае полной неудачи браузер выведет текст шрифтом по-умолчанию, то есть, как правило, шрифтом “Times New Roman”.

для нескольких HTML-файлов

Обычной практикой является указание стилей в отдельном файле. Для таких файлов используют расширение css. Например, можно в файле style.css записать:

Для подключения этих указаний в разделе ... HTML-файла нужно поместить ссылку:

Понятно, что такой способ расположения стилевых определений очень удобен. На один и тот же стилевой файл могут ссылаться много HTML-документов. Изменения в этом единственном файле скажутся на внешнем виде десятка (а то и сотни) документов.
Обратите внимание на стилевое указание BODY {margin-left:40px;}. Оно задает отступ слева в 40 пикселов для всего документа в целом. В силу такого определения визуальные элементы страницы не будут “наползать” на вертикальную полосу слева страницы. Как видите, для задания страничного отступа можно обойтись без таблиц.

Первый шаг и первый скрипт на Javascript.

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

Программу на JavaScript можно помещать внутрь HTML-кода или держать в отдельном файле. Этот файл браузер прочитает по специальной команде-тегу LINK(с которым мы уже встречались) во время интерпретации(выполнения) HTML-программы. Программы на JavaScript не работают самостоятельно. Коды JavaScript дополняют коды HTML и живут только вместе с ними. Даже если они расположены в отдельном файле.

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

пояснения:
  • Код скрипта оформляют как HTML-комментарий. Браузеры, которые умеют работать со скриптами, об этом знают, а другие — просто пропустят комментарии.
  • Закрывающий тег HTML-комментария предваряется двумя наклонными чертами "//" (комментарий языка JavaScript) опять же в целях безопасности. Теория гласит, что некоторые браузеры сходят с ума, если не видят этих знаков. (Комментарием в JavaScript считается все, что располагается от символов "//" и до конца текущей строки).
  • Открывающий тег SCRIPT использует атрибут language для указания языка, на котором написан скрипт. Значением этого атрибута в нашем случае является ключевое слово JavaScript.
  • Команда < NOSCRIPT >...< /NOSCRIPT > является не обязательной, но желательной. Внутри этой команды располагаются теги HTML, которые будут показаны браузером в случае если он не умеет работать со скриптами.
Ну все, со средой обитания скриптов познакомились, пора завести хотябы одного.

Скрипт, расположенный в приведенном выше примере, содержит всего одну команду на языке JavaScript - вызов функции alert. Функция alert создает информационную панель с единственной кнопкой "Ok". Пользователь читает сообщение, нажимает кнопку и панель убирается с экрана. Теперь браузер приступает к интерпретации команд, расположенных вслед за скриптом в HTML-коде.

Если текст-параметр функции alert слишком длинный, его можно записывать в нескольких строчках используя знак "+" (операция соединения):

alert("Язык JavaScript был разработан фирмой Netscape"+
" (первое название \языка — LiveScript)");

Операция соединения не означает разрыв строки на экране браузера. Для перевода строк используйте символы "\n":

alert("Первая строка.\nСтрока вторая.");

Пара новых заданий.

1. По CSS. Внимательно изучите все методы задания стилей. Большие возможности дает комбинирование этих методов. Поэксперементируйте с их комбинациями и найдите ответы на следующие вопросы.
  • Какое CSS-указание главнее: описанное в отдельном теге или размещенное в HEAD-разделе HTML-документа?
  • Какое указание главнее: описанное в HEAD-разделе HTML-документа или размещенное в отдельном css-файле и связанное с документом при помощи тега LINK, помещенного в HEAD-раздел? Зависит ли результат от порядка следования этих предписаний?
2. По JavaScript. Проведите серию опытов с функцией alert. Возьмите какой-нибудь достаточно объемный текст и позаботтесь чтобы он красиво выводился, лучше всего взять стихи. Используйте символы перевода строк, запись одной функции на нескольких строчках, запись нескольких функций alert.

Любую критику, пожелания, идеи и вопросы посылайте мне на vovan666@rambler.ru! В письме, пожалуйста, укажите, могу ли я публиковать ваше письмо в рассылке.

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

Рассылки Subscribe.Ru
Как создать сайт. Рассылка для чайников.

Все предыдущие выпуски рассылки находятся в Архиве.

Архив рассылки.

 

Lbn Best

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное