Web-дизайн: Тонкости, хитрости и секреты
© Copyright Борис Леонтьев
Web-дизайн Web-страницы можно создавать несколькими способами -- с нуля или наоснове существующего шаблона. В последнем случае, впрочем как и в первом, увас могут быть проблемы при тестировании созданного документа, так каксгенерированным ссылкам свойственно ошибаться. Решить эту проблему может ужене редактор, а обыкновенный обозреватель WWW. Eсли у вас имеется коллекция картинок, фонов, маркеров и разделителей,то создание Web-страниц -- весьма увлекательное занятие. Кроме всего этого,помните, что вам обязательно понадобится софт для преобразования обычныхтекстовых файлов в файлы формата HyperText Markup Language. Хороший редактор Web-страниц должен, с одной стороны, позволятьредактировать код HTML, а с другой -- просматривать произведенные такимобразом изменения в режиме непосредственного просмотра. Если вы начинаете с нуля, то вы должны ввести или импортировать текст вдокумент, отформатировать абзацы, разместить картинки. Все картинки итекстовые файлы сохраняются в одном каталоге. Затем все это хозяйствоотправляется к вашему поставщику Internet на его винчестер.
Гипертекстовый документ Под гипертекстовым документом понимают документ, содержащий такназываемые ссылки на другой документ. Реализовано все это через протоколпередачи гипертекста HTTP (HyperText Transfer Protocol). Информация в документах Web может быть найдена по ключевым словам. Этоозначает, что каждый обозреватель Web содержит определенные ссылки, черезкоторые образуются так называемые гиперсвязи, позволяющие миллионампользователей Internet вести поиск информации по всему миру. Гипертекстовые документы создаются на базе языка HTML (HyperText MarkupLanguage). Этот язык весьма прост, управляющие коды его, которые,собственно, и компилируются обозревателем для отображения на экране, состоятиз текста ASCII. Ссылки, списки, заголовки, картинки и формы называютсяэлементами языка HTML.
Универсальный локатор ресурса Web может открывать доступ к другим ресурсам Internet, например кэлектронной почте, FTP, Gopher, WAIS или конференциям Usenet. Одно из такихсредств серфинга по Web обеспечивает встроенный в Windows 98 обозревательMicrosoft Internet Explorer 4.0. Документ в Internet ищется по так называемому адресу URL (UniformResource Locator), синтаксис которого следующий:
protocol ://hostport/path
hostport -- адрес сервера с соответствующим номером порта. Этотпараметр отображает так называемую машинную адресацию. Машинная адресацияможет быть числовой или буквенной.
path -- путь. Вместо аргумента
protocol может стоять: http -- любая гипертекстовая информация. ftp -- протокол передачи файлов. telnet -- терминальный доступ. gopher -- "предшественник" WWW. afs -- файловая система Internet. news -- конференции Usenet. wais -- система баз данных Internet.
Домены Internet Все узлы Web классифицированы Международным центром сетевой информации(NIC) на шесть доменов:
com -- коммерческие предприятия, например, провайдеры Internet
edu -- образовательные учреждения, колледжи и университеты
net -- действующие сети, например, Network Information Center
org -- непрофессиональные организации
mil -- военные сети
gov -- правительственные учреждения, например, whitehouse.gov Кроме этого, все доменные имена имеют указатели на страну, в которойрасположен данный узел. Например, доменные имена .uk, .jp и .us представляютсоответственно Великобританию, Японию и США.
HTML В настоящее время существует масса редакторов Web-страниц, которые нетребуют от вас знаний основ HTML. Но для того чтобы уметь профессиональноподготавливать гипертекстовые документы, вы должны знать их внутреннеестроение, то есть код документа HTML. HTML позволяет вам формировать различную гипертекстовую информацию наоснове структурированных документов. Обозреватель определяет сформированные ссылки и, через протоколпередачи гипертекста HTTP, открывает доступ к вашему документу другимпользователям Internet. Разумеется, для успешной реализации всего этогонеобходим софт, полностью совместимый с WWW и поддерживающий HTML.
Описание HTML HTML-документ -- это обычный текстовой файл. Используя, например,обозреватель Netscape Navigator вы можете просмотреть результат вашейработы, просто загрузив в него созданный на основе синтаксиса HTML текстовойфайл. Гипертекстовый язык предоставляет только информацию для чтения. Этоозначает, что редактировать Web-страницы может лишь тот, кто их создал, а непростой пользователь Сети сетей. Впрочем, если забежать немного вперед,можно сказать, что используя общий шлюзовой интерфейс (CGI) можно добавлятьнекоторые операторы HTML в сгенерированную страницу.
Тэги Самый смак гипертекстового языка -- это ссылки. В мировой паутине выпросто нажимаете на ссылку и мгновенно оказываетесь в другой точке земногошара на выбранной вами страничке. По традиции всех классических руководств по HTML мы приводим самыйпростой гипертекстовый документ.
Пример простого HTML документа Здесь размещен заголовок первого уровня Добро пожаловать в Internet! Первый и последний параграф. В этом примере мы использовали следующие термины гипертекста (такназываемые тэги):
</b> -- тэг, использующийся для определения заголовка. <br><br><b><H1></b> -- тэг заголовка. <br><br><b></b> -- тэг метки параграфа. В языке описания гипертекстовых документов все тэги парные. В конечномтэге присутствует слэш, который сообщает обозревателю о завершении. Но!Существует одно исключение из этого правила пар: В природе не существует тэга <br><br><b><br></b>. Не все тэги совместимы с обозревателями. Если обозреватель не понимаеттэг, то он его просто пропускает. Итак, документ HTML это заголовок: <br><br><b><html></b><br><br><b> <head>
<link rel="canonical" href="https://www.e-lave.ru//index.htm"/> Заголовок </head></b><br><br><b> <body></b><br><br><b> ...</b> и текст <br><br><b>...</b><br><br><b> </body></b> с названием: <br><br><b><head>
<link rel="canonical" href="https://www.e-lave.ru//index.htm"/></b><br><br><b> <title> Название
Название документа Это не правило, и даже не закон, это факт: Любой документ HTML имеет название. По названию вашего документа HTML другие обозреватели могут найтиинформацию. Место для названия всегда определено -- оно находится вверхуэкрана, и отдельно от содержимого документа. Максимальная длина названия --40 символов.
Форматирование Форматирование может быть непосредственным или авторским. Если выиспользуете тэг
, то форматирование считается авторским:
Следующие тэги присущи непосредственному форматированию:
-- параграф.
-- горизонтальная линия.
-- обрыв строки.
Заголовки и подзаголовки Язык HTML позволяет вам работать с шестью уровнями заголовков. Первыйзаголовок -- самый главный. На него обращается особое внимание. Остальныезаголовки могут быть оформлены, например, жирным шрифтом или прописнымибуквами. В HTML первый заголовок обозначается как
:
Текст Под
n понимается уровень заголовка, то есть числа 1, 2, 3, 4, 5 или 6. В HTML первый заголовок может совпадать с названием документа.
Списки Списки подразделяются на ненумерованные:
Элемент списка нумерованные:
Элемент списка c описаниями:
Собака (элемент) Друг человека (описание элемента) и вложенные: <
UL> Примус Другой примус ... ... Выделение текста Текст в документе HTML может быть выделен одним из следующих способов:
-- цитата
-- программный код
-- определение
-- логический акцент
-- ввод с клавиатуры
-- сообщения компьютера
-- сильный акцент
-- переменные
Один большой параграф В HTML разбиение на строки не принципиально. Это означает, что выможете разбить строки вашего документа в любом его месте. Связано это с тем,что в гипертекстовом документе идущие подряд отбивки превращаются в одну.Но! Если отбивка сделана после тэга
, то она учитывается. Есликакой-нибудь тэг
игнорируется, то отбивка также учитывается. В остальныхслучаях обозреватель будет пропускать отбивки.
Ссылки HTML позволяет вам связать текст или картинку с другими гипертекстовымидокументами. Текст, как правило, выделяется цветом или оформляетсяподчеркиванием. Для этого используется тэг
. Помните, что после буквы A долженстоять пробел. Чтобы сформировать ссылку: n наберите
n введите HREF="filename"> n наберите после > текст гипертекстовой ссылки n наберите тэг Bob Bob ссылается на документ BobAnapa.htm l, образуягипертекстовую ссылку. Если документ, формирующий ссылку, находится в другой директории, топодобная ссылка называется относительной: Bob protocol: //hostport/path Предварительное форматирование текста Тэг Расширенные цитаты Тэг Адрес Тэг Куча слов по поводу форматирования символов В HTML слова и строки кодируются логическими и физическими стилями. Физические стили форматируют текст. Логические стили форматируют через определение в гипертекстовомдокументе некоторого значения. Это в частности означает, что тэг заголовкапервого уровня не содержит информации о размере шрифта и гарнитуре. Поэтому,чтобы изменить символьное форматирование заголовка вы должны модифицироватьзаголовок первого уровня. Через логические (в том числе и символьные) тэгивы можете сформировать согласованный гипертекстовый документ, то естьопределить заголовок первого уровня в качестве только Логические стили Ниже мы представляем примеры логических стилей документа HTML. Физические стили Гипертекстовый документ может быть оформлен с использованием следующихстилей: Полужирный Курсив Моноширинный Специальные символы Символы, которые не могут быть введены в текст документанепосредственно через клавиатуру называются специальными символами. Длятаких символов существуют особые тэги. Четыре символа -- знак меньше < , знак больше > , амперсанд & и двойныекавычки " имеют специальное значение внутри HTML и следовательно не могутбыть использованы в тексте в своем обычном значении. Скобки используются для обозначения начала и конца HTML тэгов, аамперсанд используется для обозначения так называемойescape-последовательности. Для использования одного из этих символов введитеодну из следующих escape-последовательностей: < Знак меньше. > Знак больше. & Амперсанд. " Кавычки. Принудительный перевод строки Тэг Горизонтальные разделители Тэг Встроенные изображения Вы можете встраивать в ваш документ картинки. Синтаксис встроеннойкартинки следующий: image_URL есть указатель на файл картинки, синтаксис которогосовпадает с синтаксисом ссылки HTML. Звуковоспроизведение Для того, чтобы вставить в вашу страничку звуковой файл, например,midi-файл, используйте следующую конструкцию: ALIGN="MIDDLE" BORDER="0" AUTOSTART=TRUE> Это одна строка. В этом тэге были использованы следующие параметры: WIDTH Параметр, определяющий ширину midi-плеера. HEIGHT Параметр, определяющий высоту midi-плеера. BORDER Ширина рамки midi-плеера. AUTOSTART Запустить midi-плеер сразу после того, как загрузится документ HTML. Распределение ссылок по картинке Используя технологию распределения ссылок по картинке, вы можете,например, создать графическое меню из одной большой картинки таким образом,чтобы каждый элемент системы меню содержал определенный URL. Распределение ссылок по картинке описывается в тэге IMG следующимпараметром: USEMAP задает расположение схемы распределения map_name в URL . Если URL не указан, то поиск схемы map_name ведется в текущемдокументе. Код схемы может выглядеть так: <MAP NAME="map_name"> Здесь были использованы следующие тэги: SHAPE Форма области. Вы можете выделить область на картинке так: n default -- стандартная форма n rect -- прямоугольник n circle -- круг n poly -- многоугольник произвольной формы COORDS Координаты области. Задаются в пикселах. Отсчет начинается с нуля. Кругимеет три координаты, прямоугольник -- четыре, а для многоугольника вы должны описать каждыйего угол в двух координатах. Например, область, имеющая размеры 50 на 50пикселов, описывается так: HREF="url" Определить ссылку на схеме, то есть вписать URL. NOHREF Указать, что в данной области картинки отсутствует ссылка. Этотпараметр работает всегда, когда не определен параметр HREF. Общий шлюзовой интерфейс и формы HTML Общий шлюзовой интерфейс (Common Gateway Interface) позволяет работатьс данными сервера Web в интерактивном режиме. Сервер Web через CGI запускаетпоисковую программу и пересылает обработанные данные назад. Сама программаCGI хранится в каталоге CGI-BIN. Это означает, что файл из каталога CGI-BINвсегда исполняемый файл. Если CGI- программа, например, взаимодействует ссистемой управления базой данных, то пользователь может получать некоторуюинтересующую его информацию в интерактивном режиме. Это тривиально, но факт: CGI-программы создаются посредством CGI.
FORM ACTION = /SGI-BIN/EXAMPLE.PL и заканчивается тэгом /FORM . ACTION Аргумент ACTION -- это URL программы CGI, то есть /SGI-BIN/EXAMPLE.PL. METHOD Метод, используемый для запроса данных. Этот параметр задает режим передачи данных из формы в программу CGI. Основные режимы передачи -- GET , HEAD и POST . Программа CGI должнаподдерживать один из этих режимов, иначе обработки данных не произойдет. В режиме GET данные входят через URL в строку запроса. Например, еслипрограмма обработки данных BOB.PL лежит в каталоге CGI-BIN , то запрос HTMLпойдет на сервер через ACTION следующим образом: FORM ACTION=/CGI-BIN/BOB.PL METHOD=GET Теперь сервер знает, где находится программа BOB.PL , поэтому он еезапустит в режиме GET . Программы CGI получают данные от переменных окружения и посылаютвыходные данные через общий шлюзовой интерфейс обратно пользователю.Например, после ввода тэга A HREF=BOB.HTML на сервер пойдет запрос GET /BOB.HTML . Заголовок GET определяет получение документа BOB.HTML в корневомкаталоге сервера. Относительно аргумента POST CGI реализован в программах, поддерживающих Unix и некоторые приложенияWindows. CGI для Windows реализуется лишь в том случае, если сервер Webспособен декодировать данные тех форм HTML, которые пересылаются в режимеPOST.
URL-Encoded . Данные формы пересылаются на сервер в виде HTML. Multipart Form Dat a. Данные формы пересылаются на сервер в видеMIME-сообщения. INPUT TYPE=TEXT Поместить в форму текстовое поле данных. NAME=NAME Определить имя текстового поля данных NAME. MXLENGTH=NUMBER Размер текстового поля данных. Вместо NUMBER вы можете ввести целоечисло. RADIO Определить кнопку переключения. NAME=PRODTYPE Определить логическое поле PRODTYPE. INPUT TYPE=CHECKBOX Определить флажок для протокола передачи. ACCEPT Метод, используемый для интерпретации пересылаемых файлов. Файлы могутпересылаться в виде ASCII или HTML. Количество заголовков ACCEPT соответствует типам данных MIME(Multipurpose Internet Mail Extensions). Заголовок ACCEPT: TYPE/SUB-TYPE {parameters} пересылается как значение параметра ACCEPT . Каждый тип данныхимеет собственный параметр ACCEPT . Фреймы Технология фреймирования в HTML позволяет просматривать в одном окнеобозревателя несколько гипертекстовых документов. Один фрейм отображаеттолько один гипертекстовый документ. Создание фрейма Создание фрейма осуществляется через тэг . Тэг в этомслучае не используется. Тэг заканчивает выполнение кода после тэга . Далее идет стандартное применение HTML. Описание фрейма Тэг . Если обозреватель не поддерживает фреймы Если обозреватель того или иного пользователя не поддержавает фреймы,то между тэгом <![CDATA[ и тэгом ]]> заносится текст, которыйраспознает обозреватель. Свойства фреймов Тэг Отмена и восстановление выполненной команды Отмена выполненной команды осуществляется через выбор команды Отменить в меню Правка . Microsoft FrontPage Express позволяет отменить только последнеевыполненное действие. Например, если удален текст, а затем набран новый, тонельзя отменить удаление текста. Выбранная команда Правка к Восстановить восстанавливает последнееотмененное действие. Выделение слова Если вы хотите выбрать слово, дважды щелкните по нему левой клавишеймыши. Выделение строки Выделение строки осуществляется простым щелчком левой клавишей мыши принажатой клавише Alt в любом месте строки. Выделение параграфа Выделение параграфа осуществляется простым щелчком левой клавишей мышипри нажатых клавишах Alt и Ctrl в любом месте параграфа. Выделение всех элементов вашего документа Команда Правка к Выделить все используется для выделения текстовых играфических элементов на текущей странице. Отображение абзацных меток Отображение абзацных меток осуществляется через выбор команды Маркеры форматов в меню Вид . Операции вырезания, копирования и вставки Выбранная команда Правка к Вырезать удаляет активный элемент издокумента Microsoft FrontPage Express и помещает его в буфер промежуточногохранения. Вы можете удалить из документа и поместить в буфер обмена любойвыбранный текстовой или графический элемент как Microsoft FrontPage Express,так и приложения Windows. Команда Файл к Скопировать используется для вставки активного элементав буфер промежуточного хранения. Вы можете поместить в буфер обмена любойвыбранный текстовой или графический элемент как Microsoft FrontPage Expressтак и приложения Windows. Выбранная команда Правка к Вставить помещает копию элемента из буферапромежуточного хранения в документ Microsoft FrontPage Express. Вы можете поместить в документ Microsoft FrontPage Express текстовойили графический элемент из любого приложения Windows. Поиск и замена текста Выбранная команда Правка к Заменить открывает доступ к встроенному вMicrosoft FrontPage Express инструменту редактирования, который используетсядля поиска и замены символов (включая прописные и строчные буквы), целыхслов или частей слов. Поиск и замена спецсимволов осуществляется так же, как поиск и заменапростого текста -- достаточно ввести в поля данных Образец или Заменить наключевые комбинации для специальных символов или ANSI (ASCII) коды символов. Вывод на печать Выбранная команда Файл к Напечатать открывает доступ к диалоговому окнуПечать , с помощью которого можно выбрать принтер для печати текущегодокумента, установить параметры работы этого принтера и вывести на печатьтекущий документ. Оперирование открытыми окнами С помощью команд меню Окно вы можете: Рядом Расположить все окна без взаимного перекрытия по горизонтали. Каскадом Упорядочить все окна с перекрытием так, чтобы название каждого окнабыло видимо. Упорядочить значки Упорядочить пиктограммы минимизированных окон. Установив курсор мыши на кнопке со стрелкой и буксируя мышью один изуказателей прокрутки, можно перемещать страницу до тех пор, пока в документене покажется нужное место. Вертикальный указатель предназначен дляпередвижения страницы по вертикали, горизонтальный -- по горизонтали. Доступ к системе оперативной подсказки С помощью команд меню Справка можно получить доступ к системеоперативной подсказки редактора web-страниц Microsoft FrontPage Express. Стили форматирования В языке описания гипертекстовых документов слова и строки кодируютсялогическими и физическими стилями. Поэтому в редакторе web-страниц MicrosoftFrontPage Express доступны только два стиля оформления параграфов: Стили оформления символов (физические стили) влияют на выравниваниепараграфов, тип, размер, гарнитуру и цвет шрифта. Стили оформления параграфов (логические стили) влияют на все параграфывыделенного текста. Эти виды стиля позволяют вести форматирование черезуказания заголовков того или иного уровня и игнорировать информацию оразмере шрифта и гарнитуре. Поэтому, чтобы изменить форматированиезаголовка, вы должны модифицировать заголовок первого уровня. Через стилиоформления вы можете сформировать согласованный гипертекстовый документ, тоесть определить заголовок первого уровня в качестве только Физические стили Физические стили или стили оформления параграфов доступны через Панель форматирования или через команду Абзац меню Формат . Вы можете оформить доступным физическим стилем не только выбранныйабзац, но и несколько выделенных абзацев. К каждому из этих стилей вы можете применить выравнивание по центру, полевому или по правому краю. Для этого в меню Формат выберите команду Абзац ив появившемся диалоговом окне Свойства абзаца обратитесь к спискуВыравнивание абзаца . Просто определите точку вставки и выберите необходимый стиль абзаца изсписка следующих стилей: Адрес Подпись автора web-страницы. Обычно располагается в конце документа. Заголовки с 1 по 6 уровень Разделение текста документа на разделы, каждый из которых оформлентекстом определенного размера. Маркированый список Список, оформленный маркерами. Обычный Стиль абзаца по умолчанию. Список определений Оформление глоссариев или других списков. Нумерованный список Иерархия с использованием цифр. Список каталогов Специальный стиль для оформления списков файлов или каталогов. Список меню Специальный стиль для оформления небольших параграфов. Форматированный Специальный стиль для оформления листингов программ и другойтехнической документации. Логические стили Microsoft FrontPage Express поддерживает следующие типы логическихстилей: n Полужирный n Курсивный n Полужирный курсив n Машинописный шрифт n Верхний индекс n Нижний индекс n Подчеркнутый n Зачеркнутый Вы можете оформить доступным логическим стилем не только выбранныйсимвол, но и несколько выделенных символов. Просто выделите текст,обратитесь к диалоговому окну Шрифт (доступ: Формат к Шрифт ) и выберитенеобходимый атрибут шрифта. Раскрашивание текста Вы можете оформить цветом не только выбранный символ, но и нескольковыделенных символов. Просто выделите текст, обратитесь к диалоговому окнуШрифт (доступ: Формат к Шрифт ) и выберите из списка Цвет понравившийся вамцвет шрифта. Многоплатформенные шрифты В принципе с помощью Microsoft FrontPage Express вы можете оформлятьсвои web-страницы всеми доступными шрифтами вашей системы. С другой стороны,если вы хотите, чтобы вашу страницу могли просмотривать пользователи другихоперационных систем, вы должны использовать в оформлении так называемыемногоплатформенные шрифты. К ним относятся следующие шрифты: n Arial n Courier n Times Горизонтальные линии Вы можете украсить дизайн вашей web-страницы горизонтальной линией. Дляэтого определите место в вашем документе, в котором должна быть линия, ивыберите из меню Вставка команду Горизонтальная линия . Просмотр и правка исходного кода HTML Microsoft FrontPage Express позволяет вам просмотреть текст исходногокода HTML и, в случае необходимости, произвести редактирование.
Вид команду HTML . Вставка в документ тэгов HTML Вы можете вставить в ваш документ любой тэг HTML, включая Java Script.Для этого выберите из меню Вид команду Разметка HTML , обратитесь кдиалоговому окну Разметка HTML и поместите ваш тэг в поле данных Вставляемая метка HTML . Одновременно вы можете вставить только один тэг. Дизайн web-страниц с помощью таблиц Мощнейшее средство HTML -- таблицы -- позволяют создавать достаточносложный дизайн web-страницы, например, вы можете расположить текст вашегодокумента в нескольких колонках. Для того, чтобы разместить в вашем документе таблицу, определите точкувставки и обратитесь к диалоговому окну Добавить таблицу через командуВставить таблицу меню Таблица . Опции диалогового окна Добавить таблицу позволяют: Размер строки Указать количество строк таблицы. Размер колонки Указать количество колонок таблицы. Выравнивание Определить тип выравнивания элементов таблицы. Размер рамки Определить размер линий границ ячеек в пикселах (до 100 пикселей). Еслиразмер рамки будет иметь нулевое значение, то линия границы таблицыотобразится пунктирами, а при просмотре документа в обозревателе станетневидимой. Промежуток между столбцами Определить расстояние между столбцами в пикселах. Ширина Указать ширину таблицы в пикселах или в процентах от ширины основногоокна соответствующего обозревателя. Независимо от того или иного обозревателя, таблица, ширина которойопределена в пикселах, будет иметь постоянный размер. Таблица, ширина которой определена в процентах, будет подстраиваться ктому или иному обозревателю. Дополнительно Обратиться к диалоговому окну Дополнительные атрибуты , с помощьюкоторого можно вставить в таблицу тэг HTML или сценарий Java. Как добавить в таблицу строку или столбец В созданную таблицу вы можете добавить строку или столбец. Для этоговыберите в таблице место вставки и обратитесь к диалоговому окну Вставить строки или столбцы (доступ: Таблица к Вставить строки или столбцы ). Совет: Ничто вам не мешает вставить таблицу в другую таблицу. Этимчасто пользуются опытные дизайнеры web-страниц. Как добавить в таблицу ячейку В созданную таблицу вы можете добавить ячейку. Для этого выберите втаблице место вставки и дайте команду Вставить ячейку (доступ: Таблица к Вставить ячейку ). Как выделить таблицу С помощью меню Таблица вы можете выделить всю таблицу или только однуячейку, строку или столбец, просто дав одну из следующих команд: Выделить таблицу , Выделить ячейку , Выделить строку , Выделить столбец . К выделенной таблице вы можете применить стандартные операциикопирования и вставки. Как разбить ячейку на столбцы или строки Вы можете разбить ячейку на столбцы или строки с помощью диалоговогоокна Разбить ячейки (доступ: Таблица к Разбить ячейки ). В поле данных Число колонок определите количество столбцов вашей новой ячейки, а в поле данныхЧисло строк укажите количество строк. Свойства таблицы Cозданной таблице вы можете назначить те или иные свойства (шириналинии границы, поля и отступы ячеек, ширина, цвет). Для этого в меню Таблица выберите команду Свойства таблицы и обратитесь к диалоговому окну Свойства таблицы . Опции диалогового окна Свойства таблицы позволяют: Выравнивание Определить тип выравнивания элементов таблицы. Размер рамки Определить размер линий границ ячеек в пикселах (до 100 пикселей). Еслиразмер рамки будет иметь нулевое значение, то линия границы таблицыотобразится пунктирами, а при просмотре документа в обозревателе станетневидимой. Заполнение ячеек Определить максимальный размер заполнения ячейки в пикселах (до 100пикселей). Промежуток между столбцами Определить расстояние между столбцами в пикселах. Ширина Указать ширину таблицы в пикселах или в процентах от ширины основногоокна соответствующего обозревателя. Независимо от того или иногообозревателя, таблица, ширина которой определена в пикселах будет иметьпостоянный размер. Таблица, ширина которой определена в процентах, будетподстраиваться к тому или иному обозревателю. Специальный фон Использовать в качестве фона таблицы картинку. Просто выберите флажокИспользовать фоновое изображение и нажмите кнопку Обзор для поиска файлакартинки в форматах GIF, JPG, BMP, TIF, WMF, RAS, EPS, PCX или TGA. Цвет фона Раскрасить подложку таблицы. Дополнительные цвета В этом разделе вы можете определить цвет для рамки вашей таблицы. Есливы выберите только параметр Граница , т.е. параметры Светлая и Темная рамка останутся используемыми по умолчанию, то через ниспадающий список цветовможно присвоить цвет всей рамке вашей таблице. Имеющие приоритет параметры Светлая и Темная рамка позволяют присвоитьцвет верхней и нижней рамкам таблицы. Манипулирование ячейками таблицы Вы можете назначить те или иные свойства не всей таблице, а только ееячейкам. Для этого в меню Таблица выберите команду Свойства ячейки иобратитесь к диалоговому окну Свойства ячейки . Опции диалогового окна Свойства ячейки позволяют: Выравнивание по горизонтали Определить горизонтальную выключку элементов таблицы (по горизонтали,влево и вправо). Вертикальное выравнивание Определить вертикальную выключку элементов таблицы (сверху, снизу ипосередине). Ячейка с заголовком Присвоить выбранной ячейке таблицы заголовок. Без разбиения Не допускать переноса текста ячейки на следующую строку. Минимальная ширина Указать минимальную ширину ячейки в пикселах или в процентах от ширинытаблицы. Ячейка, ширина которой определена в процентах, будет подстраиватьсяк тому или иному обозревателю. Специальный фон Использовать в качестве фона ячейки картинку. Просто выберите флажокИспользовать фоновое изображение и нажмите кнопку Обзор для поиска файлакартинки в форматах GIF, JPG, BMP, TIF, WMF, RAS, EPS, PCX или TGA. Цвет фона Раскрасить подложку ячейки. Дополнительные цвета В этом разделе вы можете определить цвет для рамки ячейки. Если вывыберите только параметр Граница , т.е. параметры Светлая и Темная рамка останутся используемыми по умолчанию, то через ниспадающий список цветовможно присвоить цвет всей рамке ячейки. Имеющие приоритет параметры Светлая и Темная рамка позволяют присвоитьцвет верхней и нижней рамкам ячейки. Дизайн web-страниц с использованием графики Редактор web-страниц Microsoft FrontPage Express поддерживаетграфические изображения двумя форматами GIF (CompuServe Graphics InterchangeFormat Расширение .GIF) и JPEG (Joint Photographic Experts Group Расширение.JPG). Это означает, что любой файл формата BMP, TIF, WMF, RAS, EPS, PCX иTGA при вставке в рабочую среду Microsoft FrontPage Express будетпреобразован в GIF-картинку. Несколько слов о форматах GIF и JPEG. GIF-формат хорош тем, что онмаленький и имеет всего 256 цветов. Формат JPEG используется только длякартинок, имеющих более 256 цветов. С другой стороны, вы можете создатьJPEG-файл с потерей качества, но без потери количества цветов, это можетзначительно уменьшить размер файла. Поэтому, если вы хотите иметь хорошуюкартинку, просто преобразуйте ее в формат JPG. Вы можете поместить в Microsoft FrontPage Express изображениепосредством выбора из меню Вставка команды Изображение . Изображение Microsoft FrontPage Express может быть помещено в любоеместо вашего документа, определенное точкой вставки. Просто поместите точкувставки в нужное место, выберите через диалоговое окно Изображение (доступ:Вставка к Изображение ) имя графического файла и нажмите кнопку OK . Вы можете помещать в документ Microsoft FrontPage Express толькорастровые (двоичные отображения) картинки. Растровые картинки строятся изотдельных точек и хранятся в виде групп точек, а экран представляется в видепрямоугольного массива точек, компьютеру указывается цвет каждого элементаизображения. Если документ с помещенной картинкой был сохранен, а затем картинкаподверглась редактированию в какой-либо программе, то Microsoft FrontPageExpress не внесет эти изменения в ваш документ. Если вы переместите файл изображения в другую папку, то самоизображение не отобразится в вашем документе.
Библиотека рисунков Microsoft FrontPage Express С помощью вкладки Картинки диалогового окна Изображение вы можетевоспользоваться библиотекой рисунков Microsoft FrontPage Express. Альтернативное отображение картинок Microsoft FrontPage Express отображает изображения посредствомзаменяющего текста и так называемой превью-картинки. Превью-картинка имеетнизкое разрешение (при загрузке исходного изображения сначало проявитсяизображение с низким разрешением), а заменяющий текст используется припросмотре web-страниц в текстовом режиме. Чтобы отобразить картинку посредством заменяющего текста, выберите ее,обратитесь к вкладке Общие диалогового окна Свойства изображения (доступ:Правка к Свойства изображения ) и в поле данных Текст введите информацию, темили иным образом описывающую вашу картинку. Чтобы отобразить картинку посредством превью-картинки, выберите ее,обратитесь к вкладке Общие диалогового окна Свойства изображения (доступ:Правка к Свойства изображения ) и с помощью кнопки Обзор раздела Другие представления выберите картинку с низким разрешением. Как присвоить изображению ссылку Вы можете присвоить помещенной в рабочую среду Microsoft FrontPageExpress картинке любую ссылку. Для этого выберите картинку, обратитесь квкладке Общие диалогового окна Свойства изображения (доступ: Правка к Свойства изображения ) и с помощью кнопки Обзор раздела Ссылка по умолчанию выберите документ HTML, на который должен быть сделан переход. Позиционирование изображений Вы можете позиционировать изображениями, помещенными в рабочую средуMicrosoft FrontPage Express. Для этого выберите изображение и обратитесь квкладке Внешний вид диалогового окна Свойства изображения (доступ: Правка к Свойства изображения к Внешний вид ). С помощью ниспадающего списка Выравнивание укажите тип позиционированиявашего изображения относительно страницы. С помощью опции Интервал по горизонтали вы можете сместить выбранноеизображение относительно страницы по горизонтали. Параметр смещенияодновременно воздействует на правую и левую части выбранного изображения. С помощью опции Интервал по вертикали вы можете сместить выбранноеизображение относительно страницы по вертикали. Параметр смещенияодновременно воздействует на верхнюю и нижнюю части выбранного изображения. Основные свойства web-страницы Свойства созданной страницы представлены диалоговым окном Свойства страницы (доступ: Файл к Свойства страницы ). Папка Укажите путь к папке, в которой хранятся все файлы вашей web-страницы. Заголовок Текст, который вы впишите в это поле данных отобразится в заголовкеокна обозревателя. Практически все поисковые машины Internet начинаютсканирование web-страниц с заголовка. Как озвучить web-страницу Вы можете озвучить вашу web-страницу, просто поместив в нее файлызвуков WAV, AIFF, AU MIDI. Для этого определите точку вставки и обратитесь кразделу Фоновый звук вкладки Общие диалогового окна Свойства страницы (доступ: Файл к Свойства страницы ). С помощью кнопки Обзор выберите звуковой файл на вашем диске. Если выхотите, чтобы ваш звук все время играл в окне обозревателя, поставьте флажокНепрерывно . Если же вы хотите, чтобы ваш звук воспроизводился в течениеопределенного цикла, снимите флажок Непрерывно и укажите количество цикловвоспроизведения с помощью счетчика Цикл . Кодирование web-страниц С помощью Microsoft FrontPage Express вы можете изменить кодировкусимволов web-страницы. Для этого обратитесь к разделу Кодировка HTML вкладкиОбщие диалогового окна Свойства страницы (доступ: Файл к Свойства страницы ). Отображение русских букв зависит от вашей кодировки. Поэтому для того,чтобы в обозревателе нормально отображались русские буквы, вам необходимоустановить в систему многоязыковую поддержку и шрифты с соответствующейкодировкой, например KOI8. Как правило, при pаботе в Windows 98 длякириллизации используется кодиpовка CP1251, а на непонятных компьютерах сUNIX -- кодиpовка KOI-8. Стандарт KOI8 является кириллической кодовой таблицей, позволяющей вамобмениваться некоторыми сообщениями электронной почты и просматриватьweb-страницы. Для того, чтобы Windows 98 понимала KOI8, необходимоустановить многоязыковую поддержку и шрифты с кодировкой KOI8. Помните, что российские серверы Web поддерживают русский язык либочерез кодовую страницу 1251 (Windows 95), либо через таблицу КОИ-8 (Unix). Как присвоить цвет или фон вашей web-странице Вы можете указать цвет фона для вашего документа HTML. Для этогообратитесь к вкладке Фон диалогового окна Свойства страницы (доступ: Файл к Свойства страницы ), поставьте флажок Фоновое изображение и с помощью кнопкиОбзор выберите файл изображения, который будет использоваться в качествефона. Вы можете указать дополнительный цвет фона для текущего документа. Дляэтого обратитесь к вкладке Фон диалогового окна Свойства страницы (доступ:Файл к Свойства страницы ) и выберите из наспадающего списка Фон понравившийся вам цвет. Как присвоить цвет тексту и ссылкам Вы можете присвоить цвет любому выделенному фрагменту текста, а такжегиперссылке, просмотренной и активной ссылкам. Для этого обратитесь квкладке Фон диалогового окна Свойства страницы (доступ: Файл к Свойства страницы ) и выберите из наспадающего списка Текст цвет для выделенногофрагмента текста. Цвет ссылки вы можете изменить с помощью ниспадающих списковГиперссылк а, Просмотренная ссылка и Активная ссылка . Мета-тэги С помощью вкладки Специальный диалогового окна Свойства страницы (доступ: Файл к Свойства страницы ) вы можете включить в ваш документ HTMLдополнительную информацию, которая не отобразится в окне обозревателя, нопомогает той или иной поисковой машине Internet более легко обнаружить вашуweb-страницу. Речь идет о так называемых мета-тэгах. Используя мета-тэги вы можетевключить в свой документ, например, ключевые слова и короткое описание вашейweb-странички: Использование гипертекстовых ссылок Гипертекстовая ссылка считается активной частью документа HTML. Этоозначает, что любому пользователю Internet достаточно щелкнуть по ссылке дляперехода к другой web-странице или другому узлу Internet. Для того, чтобысоздать ссылку, выделите текст или изображение и обратитесь к диалоговомуокну Создать гиперссылку (доступ: Правка к Гиперссылка ). С помощьюниспадающего списка Тип гиперссылки укажите необходимый тип гиперссылки, а вполе данных Адрес (URL) введите необходимый адрес URL. Абсолютные ссылки указывают путь к месту вашего диска, где находитсядокумент HTML. Такие ссылки совершенно не пригодны для публикации вашегодокумента в Web. Относительные ссылки не имеют пути, поэтому, если выпереместите ваши файлы, ссылки все равно будут работать. Пример создания сложного гипертекстового документа Попробуем проследить за тем, как создавалась главная страничкаweb-сервера Московской издательской компании. n Работаем в Microsoft FrontPage Express n Операционная система: Microsoft Windows 98 n Графическая поддержка: Adobe Photoshop 5.0 n Текстовая поддержка: Microsoft Word 7.0 1.
File дадим команду New и в открывшемся диалоговом окневыберем опцию Normal Page 3. На диске создадим папку Mikserver и сохраним созданный документ вэтой папке под именем index.htm . Для этого из меню File выберем команду Save As и в открывшемся диалоге в поле File name напишем index и нажмем OK. 4. Теперь дадим название нашей web-страничке. Для этого из меню File выберем команду Page Properties и в открывшемся диалоге в поле Title напишемследующий текст: Московская издательская компания. Книги по компьютерам, бизнесу,медицине и юмору. Покупка книг через Internet 5. Создадим метку параграфа. Для этого просто нажмем клавишу Enter . 6. Создадим еще одну метку параграфа. Для этого тоже просто нажмемклавишу Enter . 7. В первой метке параграфа построим таблицу с двумя строками. Дляэтого обратимся к меню Table и выберем из него команду Insert Table .Предварительно зададим параметры таблицы и нажмем кнопку OK. 8. У нас получилась табличка без окаймляющей рамки и с двумя строчками. 9. Вторую строку таблицы оформим цветом. Для этого вставим курсор наметку параграфа второй строки таблицы, обратимся к меню Table и выберем изнего команду Cell Properties . 10. В появившемся диалоговом окне Cell Properties обратимся к спискуцветов Background Color и выберем из него заказной цвет Custom . Как толькоэто будет сделано, мы сразу окажемся в следующем диалоговом окне Color . 11. В диалоговом окне Color определим цвет фона строки нашей таблицыкак n Red: 5 n Green: 153 n Blue: 102 Нажмем кнопку Add to Custom Colors , затем нажмем кнопку OK и,возвратившись в наше предыдущее диалоговое окно, нажмем еще раз кнопку OK . 12. У нас получилась табличка, фон второй строки которой оформлензаказным цветом. 13. Теперь под нашей готовой таблицей построим еще одну таблицу счетырьмя столбцами и одной строчкой.
Table и выберем из негокоманду Insert Table . Предварительно зададим параметры таблицы и нажмемкнопку OK . У нас получилась табличка без окаймляющей рамки, с одной строчкой ичетырьмя столбцами. 14. Оформим эту табличку следующим образом: Первый столбец: n имеет ширину 5 пикселей n цвет фона Red: 5, Green: 153, Blue: 102 Второй столбец: n имеет ширину 160 пикселей n цвет фона Red: 5, Green: 153, Blue: 102 Третий столбец: n имеет ширину по умолчанию, т.е. флажок Specify Width снят n цвет фона White Четвертый столбец: n имеет ширину по умолчанию, т.е. флажок Specify Width снят n цвет фона White 15. Теперь в четвертый столбец нашей новой таблицы вставим таблицу содной строкой, с двумя столбцами и зафиксируем ее ширину на уровне 400 пикселей. Для этого поставим курсор на метку параграфа четвертого столбца,нажав клавишу Enter, создадим еще одну метку параграфа (эта метка нам потомпонадобится), перейдем на предыдущую метку, обратимся к меню Table и выберемиз него команду Insert Table . Предварительно зададим параметры таблицы инажмем кнопку OK . 16. У нас получилась вложенная табличка. 17. Столбцы нашей вложенной таблицы оформим следующим образом: Первый столбец: n имеет ширину 100 пикселей n цвет фона White Второй столбец: n имеет ширину 400 пикселей n цвет фона White 18. Создадим под этой вложенной табличкой еще одну таблицу с двумястроками, с одним столбцом и зафиксируем ее ширину на уровне 400 пикселей.Для этого поставим курсор на метку параграфа четвертого столбца, нажавклавишу Enter , создадим еще одну метку параграфа, перейдем на предыдущуюметку, обратимся к меню Table и выберем из него команду Insert Table .Предварительно зададим параметры таблицы и нажмем кнопку OK . 19.
Table и выберем команду Cell Properties . В появившемся диалоговом окнеCell Properties обратимся к списку цветов Background Color и выберем из негозаказной цвет Custom . Как только это будет сделано, мы сразу окажемся вследующем диалоговом окне Color . В диалоговом окне Color выберем из разделаCustom Colors наш цвет фона: n Red: 5 n Green: 153 n Blue: 102 Нажмем кнопку Add to Custom Colors , затем нажмем кнопку OK и,возвратившись в наше предыдущее диалоговое окно, нажмем еще раз кнопку OK . 21. Вторую строку разобьем на два столбца. Для этого из меню Table выберем команду Split Cells . 22. Два этих столбца оформим следующим образом: Первый столбец: n имеет ширину 100 пикселей n цвет фона White Второй столбец: n имеет ширину 300 пикселей n цвет фона White 23. Поставим курсор на метку параграфа первой строки вложенной таблицыс двумя строками и, обратившись к команде Select Table меню Table , выделимтаблицу. 24. Скопируем через комбинацию клавиш Ctrl+C выделенную таблицу. 25. Перейдем на метку параграфа, находящуюся под нашей таблицей и черезкомбинацию клавиш Ctrl+V вставим дубликат таблицы. 26. Повторим описанную в пункте 25 операцию еще 3 раза. 27. Макет нашего web-сервера практически готов. 28. Теперь займемся графикой. Для этого откроем программу AdobePhotoshop 5.0 и создадим в нем следующую GIF-картинку: 29. Эта картинка, состоящая из 128 цветов, имеет размер 589 на 45пунктов, а ее разрешение соответствует 72 DPI. Из Adobe Photoshop она былаэкспортирована в GIF через диалоговое окно GIF89a Экспорт опции (доступ:Файл к Экспорт к GIF89a Экспорт ). При этом цвет надписи "Деньги приходят иуходят. Книги остаются" задан так: n Red: 5 n Green: 153 n Blue: 102 30. Поместим созданную картинку в макет нашего web-сервера. Для этогопоставим курсор в самую верхнюю строчку таблицы и выберем из меню Insert команду Image . 31. С помощью появившегося диалогового окна найдем на диске файл нашейкартинки и, выбрав его, нажмем кнопку OK . 32. В программе Adobe Photoshop 5.0 создадим навигационную GIF-картинкунашего web-сервера. 33. Эта картинка, состоящая из 64 цветов, имеет размер 635x31,разрешение соответствует 72 DPI, а фон ее прозрачен. Из Adobe Photoshop онабыла экспортирована в GIF через диалоговое окно GIF89a Экспорт опции (доступ: Файл к Экспорт GIF89a к Экспорт ). 34. Поместим созданную картинку в макет нашего web-сервера. Для этогопоместим курсор на вторую строчку верхней таблицы и выберем из меню Insert команду Image . С помощью появившегося диалогового окна найдем на диске файлнашей картинки и, выбрав его, нажмем кнопку OK . 35. В программе Adobe Photoshop 5.0 создадим картинку, которая будетвыполнять роль зазывалы посетителей нашего web-сервера. 33. Эта картинка, состоящая из 64 цветов, имеет размер 304x39,разрешение соответствует 72 DPI. Из Adobe Photoshop она была экспортированав GIF через диалоговое окно GIF89a Экспорт опции (доступ: Файл к Экспорт GIF89a к Экспорт ). При этом цвет надписи "Добро пожаловать" задан так: n Red: 5 n Green: 153 n Blue: 102 34. Поместим созданную картинку в макет нашего web-сервера. 35. В программе Adobe Photoshop 5.0 создадим кнопку "Издательство МиК". 36. Эта картинка, состоящая из 32 цветов, имеет размер 111x14,разрешение соответствует 72 DPI. Из Adobe Photoshop она была экспортированав GIF через диалоговое окно GIF89a Экспорт опции (доступ: Файл к Экспорт GIF89a к Экспорт ). 37. Поместим созданную картинку в макет нашего web-сервера. 38. В программе Adobe Photoshop 5.0 создадим так называемый буллет,т.е. картинку в виде черного квадратика, состоящую из 4 цветов и имеющуюразмер 8x8 пунктов. 39.
File и выберем из него командуPage Properties . В появившемся диалоговом окне Page Properties перейдем квкладке Language . Из списка раздела Save выберем опцию Cyrillic , а из спискараздела Load выберем опцию Automatic Encoding . 42. Используя Microsoft Word 7.0 и операции копирования и вставки,заполняем информационную часть нашего web-сервера текстом. Бесплатное размещение web-страницы на сервере www.geocities.com Вы можете бесплатно разместить свою Web-страничку и бесплатно получитьадрес e-mail на сервере GeoCities. Эта компания полагает, что каждый человекимеет право разместить в киберпространстве собственную домашнюю страничку.Программа поддержки бесплатных Home Page создана для представленияиндивидуальных проектов в World Wide Web. Эта программа поддерживаетсяспонсорами, которые имеют постоянные коммерческие Web-страницы. Вам достаточно выполнить все указания Main Homesteading Page. Если вашадрес электронной почты действительно существует, то на него придет письмо синформацией относительно использования вашей Web-странички. GeoCities разработала уникальный Home Page Editor, с помощью котороговы можете создать персональную Web-страничку и специальная секцияNeighborhoods, где выбирается тема страницы. Выбираем тему Вы можете выбрать тему для своей странички из двадцати девятинижепубликуемых рубрик. Вам достаточно щелкнуть на названии понравившейсявам рубрики, получить дополнительную информацию, заполнить форму, получитьписьмо и, наконец, приступить к публикации собственного гипертекстовогодокумента. Area51 или Area51/Vault Научная фантастика. Athens или Athens/Acropolis Все, что может быть связано с образованием.
BourbonStreet GeoCities не может не включить в свои рубрики тему, связанную свеликолепным легким джазом. Broadway Театры и шоу. CapeCanaveral Наука и технологии. Инженерия, математика, авиация и т.д. CapitolHill Политика, государство и национальные интересы. Участники этой рубрикивесьма смело высказываются обо всем этом. CollegePark Почувствуйте вкус университетской жизни! Colosseum или Colosseum/Field Если вы любите спорт, то здесь вы можете разместить соответствующуюстраничку. Олимпийские игры, профессиональный спорт и т.д. Enchanted Forest Место для детей. Игры, рассказы, учебные ссылки и домашние странички,созданные детьми. Heartland или Heartland/Plains Отцы, дети и проблемы в семье. Hollywood или Hollywood/Hills Кинематограф, телевидение и живое видео! HotSprings Центр вашего здоровья и профессиональной пригодности. Правильная пища,медицинские проблемы, лечебные курорты. MotorCity С волной пестрого флага, MotorCity приветствует автомобильных фанатов. NapaValley Откупорьте бутылку вина, возьмите прекрасную сигару и присоединяйтесь кNapaValley, чтобы стать истиным гурманом и ценителем вкусной пищи. Paris или Paris/LeftBank Сообщество романтиков. Великолепный Париж. Поэзия, искусство,прекрасное вино и континентальный образ жизни. RainForest Сохранение окружающей среды. RodeoDrive Магазин для весьма обеспеченных господ. SiliconValley, SiliconValley/Park или SiliconValley/Heights or SiliconValley/Pines Компьютеры и программное обеспечение. Самая популярная рубрика вGeoCities. SoHo или SoHo/Lofts Писатели и еще раз писатели. SouthBeach или SouthBeach Marina Местечко для праздношатающихся гуляк. SunsetStrip или SunsetStrip/Alley, или SunsetStrip/Towers Рок-н-ролл, блюзы, панк-клубы. TheTropics Каждый когда-нибудь мечтал оказаться в Раю. Рубрика для всех тех, кто вканикулы любит путешествовать. TelevisionCity Все о телевидении. TimesSquare или TimesSquare/Arcade Игры и приключения. Tokyo или Tokyo/Towers Для всех тех, кто интересуется Дальним Востоком. Vienna Классическая музыка, оперетта и балет. WallStreet Здесь GeoCitizens делает бизнес. Инвестиции, финансы, бизнес икоммерция. WestHollywood Геи, лесбиянки и прочие сексуальные меньшинства. Yosemite Любители свежего воздуха. Путешествия, альпинизм, лыжный спорт,рэфтинг, кемпинг и все то, что можно делать на свежем воздухе. Три шага -- и ваш мегабайт в киберпространстве! Вам нужно сделать только три шага для того, чтобы ваша Home Page сталаполновластным членом киберпространства. Ниже публикуется информацияотносительно этого. Просмотрите каталог Neighborhood Directory и выберите тему для своейстранички. Будьте уверены в том, что выбранная тема соответствует вашейстраничке. Найдите незанятый адрес в соответствующей секции Neighborhood . Дляэтого существует два способа. Выбрав из секции Neighborhood опцию main page ,вы можете вести поиск через пронумерованные блоки адресов уже существующихстраниц до тех пор, пока не найдете свободное место. Вы можете также простощелкнуть на слове Join и следовать предложенным инструкциям. Выбрав Yes наследующей странице, вы сможете автоматически найти свободное местопосредством поля данных Vacancy Locator . Щелкните на Apply for this address для резервирования места под своюстраничку. После этого вы автоматически переместитесь на страничку срегистрационной формой. Здесь вы должны ввести свои персональные данные.Особо хотим подчеркнуть -- правильно укажите ваш адрес электронной почты.Именно по этому адресу будет выслан пароль, без которого невозможен доступ квашей страничке. Подтверждение регистрации Если вы правильно заполнили регистрационную форму, то вы получите такназываемое подтверждение регистрации. Вас поприветствуют, сообщат выбраннуюрубрику и укажут электронный адрес, по которому будет выслана дополнительнаяинформация. Если вам известен пароль, то вы можете изменить свой адресэлектронной почты посредством Personal Profile Editor . Поддерживаемые типы файлов Вы можете просмотреть специальный список, в котором указаны всеподдерживаемые типы файлов. Если вам необходима поддержка какого-либодругого типа, вы должны обратиться с соответствующим запросом на серверGeocites. Отошлите соответствующее письмо по адресу: comments@geocities.com. В целях безопасности не поддерживаются скриптыCGI и EXE-файлы. Это, конечно, не относится к счетчикам, формам и картамкартинок, разработанными Geocites. Относительно файла index.html Вы можете модифицировать свой документ, находясь у себя дома или делатьвсе то же самое, используя Home Page. Несмотря на то, что в вашем каталогеможет находиться несколько гипертекстовых страниц, файл вашей первойстранички должен быть назван как index.html. Именно этот файл будет загружать документ, когда кто-нибудь обратитсяпо вашему адресу. Вы должны удалить старый файл index.html из вашего каталога. Это можносделать посредством Disk Usage Utility , то есть специальной странички,которая позволяет манипулировать файлами вашего каталога. Все остальные гипертекстовые страницы могут иметь любые названия.Помните, что вы можете создать новую страницу непосредственно на сервереGeocites с помощью Home Page Editor . Если вы изменили свою страничку через Home Page Editor , то вамдостаточно нажать на кнопку Create/View . Теперь ваша страничкамодифицируется и вы сможете увидеть произведенные изменения в режимепредварительного просмотра. Соглашения относительно имен при пересылке гипертекстовых файлов В пределах вашего документа HTML, вы должны использовать определенноесоглашение, касающееся имен файлов, размещенных на сервере Geocites.Конечно, вы можете через встроенные ссылки обращаться к другимгипертекстовым документам WWW. Но файлы, переданные на сервер через FTP,должны удовлетворять следующим требованиям: Это моя вторая страница и обратиться к картинке, находящейся в вашем текущем каталоге,используя ссылку Использование протокола передачи Вы можете пересылать ваши файлы на сервер ftp.geocities.com. В полеLogin укажите Member Name , а в поле Password ваш пароль (эти две вещи должныбыть вами получены от Geocites по электронной почте). Соединившись с ftp.geocities.com, вы автоматически окажетесь в вашем текущем каталоге.Этот каталог предназначен для файлов вашей Web-странички. Вы не можете создавать подкаталоги на сервере Geocities. Передавайтевсе ваши файлы только в свой текущий каталог. Пересылка всех не текстовыхфайлов (GIF, JPG, ZIP) осуществляется в бинарном режиме или через командуraw . Файлы HTML и другие текстовые файлы должны передаваться в режиме ASCII. Вы можете иметь в своем текущем каталоге столько файлов, сколькохотите, но пространство на диске ограничено для использования только одниммегабайтом. Ваш собственный универсальный локатор ресурса Каждый зарегистрированный пользователь получает собственный уникальныйURL. Этот локатор вы можете сообщать всем поисковым службам Internet. ВашURL будет всегда начинаться с http://www.geocities.com и заканчиватьсявыбранной рубрикой и полученным номером вашего адреса. Например, если вашадрес есть 2090 и находится в Athens Neighborhood, то ваш URL будетвыглядеть так: http://www.geocities.com/Athens/2090/ Предварительный просмотр, обновление и удаление Ваши файлы будут автоматически перемещены посредством FTP в ваш текущийкаталог.
Neighborhood соответствующий каталог и свой адрес. Кроме этого, вы можете обновлять ваш гипертекстовый документпосредством обыкновенной пересылки файлов через FTP в ваш текущий каталог.Вы можете так же удалить все переданные файлы, используя утилиту Personal Profile Deletion Utility . Вам не нужно удалять старые файлы перед тем, какпередавать новые. Когда вы будете передавать файлы, то в вашем каталоге файлс прежним именем просто автоматически перезапишется. Удостоверьтесь в том, что имя нового файла точно такое же как текущийфайл, особенно при посылке вашего файла index.html. При использовании Basic Home Page Editor вы можете получить сообщение:"Page not created with Home Page Editor", означающее, что ваша страничка несоздана в HTML-редакторе Geocities. Вы пересылаете через FTP файл index.htmlи затем можете модифицировать основанный на этом файле гипертекстовыйдокумент с помощью основного редактора Geocities или Advanced HTML Editor .Вы можете, конечно, не производить никаких изменений, а просто передать файлindex.html через FTP или EZ File Upload Utility . Скорее всего, это сообщение появилось из-за того, что вы добавили тэгиHTML в строку Title основного или расширенного редактора, а системаGeocities не смогла понять этого. Итак, если вы попали в такую ситуацию, тоу вас имеется два решения: n Не изменяя текущего экаунта, удалите ваш профайл и измените свой адрес посредством Profile Deletion Utility n Сделайте все будущие изменения вашего гипертекстового документа index.html через FTP или Advanced HTML Editor Ссылки на другие страницы Вы можете добавить в свой гипертекстовый документ ссылки на другиестраницы, находящиеся в вашем текущем каталоге. Для этого вы должныпользоваться файлами с непосредственными ссылками. Например, если ваш файлindex.html имеет ссылку ко второй странице в пределах вашего каталога, тотакая ссылка должна быть организована следующим образом: Cкрипты Вы не можете передавать скрипты на сервер Geocities. Это связано сбезопасностью. Теоретически, запущенная на сервере скрипт-программа можетоткрыть доступ ко всем областям сервера. Поэтому Geoсities предлагает толькосвои разработки. Вы можете использовать формы трех скриптов: n imagemap n counter n mailto Все остальные формы должны передаваться только на электронный адрессервера. Они будут рассматриваться, изучаться, в общем, тестироваться. Серверы, совершенно бесплатно предлагающие web-пространство для вашей web-страницы http://www.geocities.com http://www.xoom.com http://www.hypermart.net http://members.tripod.com http://www.angelfire.com http://www.crosswinds.net/index.html http://www.fortunecity.com http://www.fsn.net http://a1bbs.dzone.co.kr http://www.easyspace.com http://www.cynetcity.com http://www.cybercities.com http://www.royaltystudios.com http://www.internet-club.com http://www.student.toplinks.com/freehome.htm http://rampage.ml.org/freeinfo.html http://www.cybercity.hko.net/ http://bip.concept.se/user http://www.nether.net/ http://www.metrocity.net http://mkn.co.uk/ http://www.nettaxi.com http://home.onestop.net/ http://www.yi.com/ http://www.howdyneighbor.com/ http://www.schlund.de/ http://www.cqws.com/rates.html http://jungle.fapema.br/ http://free.prohosting.com/ http://www.home.ch http://www.earthonline.net/ http://www.freenation.com/ Бесплатная регистрация вашей web-страницы в поисковых машинах Internet Если вы хотите бесплатно зарегистрировать вашу web-страницу в поисковыхмашинах Internet, просто обратитесь к одному из ниже перечисленных серверов. 1000 Christian Links In 72 Categories ADD-URL http://www.newcreations.net/sermoncentral/addurl.html PM FFA Link Page http://11pm.com/links/links.htm Register's Cool Site Award http://www.123register.com/award.html Mockingbird Lane FFA Link Page http://1313mockingbirdlane.com/links/links.htm Have Fun FFA Link Page http://www.2havefun.com/links/links.htm FFA Link Page http://www.4u2.de/ Free Banner Exchange http://1-2-free.com/ Banners http://www.123banners.com/ AmericaMall http://www.1second.com/1america.htm StopBiz http://www.1stopbiz.com/ FFA Link Page http://212.net/ BuySell http://www.2buysell.com/ Cool Web Coolest Site http://www.2coolweb.com/ Hand Internet Market http://www.2him.com/ Exchange http://www.x-x.com/ Советы и секреты Небольшой наезд... Путешествуя по Internet, вы, наверное, обратиливнимание на различный вид web-страниц. Некоторые страницы выглядят весьмакрасиво и до отказа заполнены нужной вам информацией. Другие -- безобразны,отвратительны и заполнены, как правило, всякой ерундой. Разработкой и тех идругих страниц занимаются пользователи, называющие себя web-дизайнерами илиweb-мастерами. Понятно, что хороший web-дизайн напрямую зависит от того, какпользователь владеет интеллектуальной дисциплиной, называемой web-дизайном. Если вы программист, никогда не пускайтесь в авантюры типа "Разработкаweb-сервера". Поверьте, это не для вас. Web-дизайн -- это далеко не кодыHTML! Именно на этих самых кодах зацикливаются многие программисты, забываяпро главное -- красивый дизайн, функциональность и содержание.Профессиональный дизайн web-страничек и серверов WWW не может быть выполненпрограммистом. Web-сервер Web-сервер начинается с создания и разметки гипертекстовых документов.Далее создается концепция развития web-сервера. До этого необходимо найтиразличные публикации, скомпоновать их, выписать ключевые слова и правильнооформить заголовки. Web-сервер должен иметь удобный навигационный интерфейс. Прописка web-сервера Первое, что нужно сделать -- правильно сформировать название вашегоweb-сервера, например, "Дизайн, реклама и литературное творчество БорисаЛеонтьева". Далее, необходимо найти 10 ключевых слов и записать их, разделяяпробелом: "дизайн реклама web-страница предпечатная подготовка компьютернаяграфика маркетинг advertising art-director". После этого идет описание web-сервера, например, оно может быть таким: "Персональная страничка московского писателя, дизайнера и специалистапо рекламе и маркетингу Бориса Леонтьева и его дизайн-студии M&C. Здесь вынайдете тексты книг Бориса Леонтьева по компьютерной тематике, а такженекоторые работы по дизайну и компьютерной графике. Высококачественныйдизайн. Дизайн web-сайтов. Услуги по изготовлению рекламы. Услуги поизготовлению web-страниц высокого качества. Предпечатная подготовка любойполиграфии". Теперь укажите информацию, с помощью которой с вами можно связаться: Boris Leontiev Design Studio M&C 13, 2nd Zvigorodskaya str., Moscow, 123022, Russia mobile tel.: (8902) 681 0085 e-mail: bobleon@uniinc.com Если вы хотите прописать свой web-сервер в русскоязычных поисковыхсистемах, то просто добавьте свой ресурс через ссылки Add URL или ДобавитьURL, обратившись к следующим системам и каталогам: n Altavista n Rambler n Апорт! n Yandex n Search n Weblist Web-дизайн и графика Считается, что графическое наполнение web-страницы должно бытьвыполнено в едином стиле. Это обстоятельство, в частности, и характеризуетпрофессиональное исполнение web-страницы. Далее уже идут средства того, какэто воплотить в Internet. Прежде всего это цвет, шапка, меню, таблицы и ссылки. В частности, цвет в web-дизайне подчиняется тем же законам, что и впрепресс-дизайне. Например, пастельные цвета и яркие цвета считаются единымистилевыми элементами, а холодные серые пролонгируют фиолетовую цветовуюгамму и ближайший к ней спектр. Концепция web-сервера Концепция (удобная навигация, легкость модификации) web-сервераначинается с организации его структуры. Самая простая структура web-сервера называется полносвязной структурой.Web-сервер с такой структурой состоит из главной страницы, на которойразмещены все имеющиеся ссылки. Древняя и давно забытая последовательнаяорганизация web-сервера основывается на последовательно (вперед и назад)переходящих ссылках. Весьма сложная древовидная структура web-сервераиспользуется многими корпоративными узлами. Комбинированная структурасочетает в себе все вышеупомянутые. Помните, что любая структура должна иметь возможность развиваться. Как быстро и правильно построить web-сервер Для начала создайте так называемую домашнюю страницу, т.е. документHTML, с которого, собственно, и начинается ваш web(http://members.rotfl.com/bobleon). Не забивайте эту страницу графикой(стандарт де-факто -- от 65 до 95 килобайт графики)! Просто сообщитепосетителю о том, что за информацию он может найти здесь, а также предложитеему выбрать нужную кодировку. Например, если ваш web является информационным, обязательнооптимизируйте все ваши странички на самое оптимальное (640x480) разрешениеэкрана. Удобная навигация Схема, по которой посетитель вашего web-сервера просматриваетгипертекстовые документы, называется навигацией. Понятно, что навигациядолжна быть удобной, понятной и продуманной. При построении навигационной схемы используйте такую цветовую гамму,которая не сможет отвлечь посетителя от основной темы вашего web-сервера. Основной навигационный элемент, например шапка, располагается, какправило, наверху, а вторичные элементы находятся в любых других местах, ноявляются едиными дизайнерскими решениями. Поисковые роботы Поисковыми роботами называюся специальные программы, которые производятиндексацию гипертекстовых страниц того или иного web-сервера. Под индексацию может попадать различная информация: файлы, текст и дажескрипты CGI. Для того, чтобы помочь ориентироваться роботу в структуре web-сервераиспользуют так называемые мета-тэги. Происходит все это дело по весьма сложной схеме, ибо идентичных роботовв Internet не существует.
Мета-тэги Любой мета-тэг находится в заголовке гипертекстового документа междутэгами
HTTP-EQUIV Этот атрибут сообщает обозревателю: n Заголовок документа HTML. n Дату создания документа HTML. Для этого используется атрибут Expires , например Content-Type . Здесь вы можете указать кодировки (charset) ваших HTML-документов, например Window-target , например Ext-cache , например Set-Cookie , например PICS-Label . n Как будет работать механизм кэширования в данном документе HTML. Основной атрибут: Cache-Control . Используются атрибуты Public (документ кэшируется во всех доступных кэшах), Private (документ кэшируется только в частном кэше), no-cache (документ вообще не кэшируется) и no-store (документ кэшируется без сохранения) NAME Этот атрибут сообщает роботу: n Индексацию web-страницы. Используется атрибут Robots с допустимымипараметрами ALL , NONE , INDEX , NOINDEX , FOLLOW и NOFOLLOW , например Description , например Keywords , например Document-state , например Static и Dynamic . n Каким образом необходимо индексировать web-страницы. Используется атрибут URL , например Author . n Название HTML-редактора. Используется атрибут Generator . n Авторские права на документ HTML. Используется атрибут Copyright . n Описание данного файла. Используется Resource-type . Помните, что робот начнет индексацию лишь в том случае, если присутствует параметр document . Счетчики посещений Счетчик посещений позволяет подсчитывать количество пользователей,посетивших ваш web-сервер. Как правило, для этого используется рисунок вформате GIF и простейший CGI-сценарий. Понятно, что счетчик посещения в основном интересен лишь web-мастерудля того, чтобы оценить популярность своего творения. 200 лучших ключевых слов поисковой системы Yahoo! 1 sex 2 chat 3 xxx 4 playboy 5 netscape software 6 nude 7 porno 8 games 9 porn 10 weather 11 penthouse 12 pamela anderson 13 pornography 14 pussy 15 persian kitty 16 maps 17 halloween 18 music 19 adult 20 chat rooms 21 erotica 22 microsoft 23 jokes 24 shareware 25 magazines 26 pictures 27 employment 28 jobs 29 erotic 30 gay 31 jenny mccarthy 32 netscape 33 bondage 34 lingerie 35 hardcore 36 cindy crawford 37 hustler 38 espn 39 supermodels 40 disney 41 star wars 42 girls 43 movies 44 star trek 45 mirc 46 genealogy 47 screen savers 48 japan 49 soccer 50 tits 51 nude celebrities 52 nudity 53 mpeg 54 nudes 55 mtv 56 las vegas 57 nasa 58 travel 59 metallica 60 real estate 61 stock quotes 62 golf 63 sex stories 64 lesbian 65 cnn 66 sports 67 quake 68 hewlett packard 69 irc 70 simpsons 71 gay sex 72 nirvana 73 x-files 74 madonna 75 sex pictures 76 horoscope 77 football 78 map 79 java 80 midi 81 fuck 82 anal sex 83 cars 84 usa today 85 recipes 86 education 87 mexico 88 airlines 89 html 90 free sex 91 days of our lives 92 australia 93 marijuana 94 nfl 95 india 96 pearl jam 97 babes 98 wrestling 99 hong kong 100 history 101 baseball 102 webcrawler 103 dogs 104 bob dole 105 news 106 ibm 107 cunt 108 anime 109 sailor moon 110 chat room 111 beatles 112 nude pictures 113 lyrics 114 nude women 115 newspapers 116 smashing pumpkins 117 winzip 118 clipart 119 naked 120 women 121 phish 122 anal 123 cyberporn 124 world series 125 clinton 126 canada 127 oral sex 128 warez 129 nike 130 sony 131 alta vista 132 nba 133 personals 134 bill clinton 135 demi moore 136 software 137 men on the net 138 wwf 139 models 140 van halen 141 screen saver 142 bmw 143 brad pitt 144 korea 145 books 146 france 147 magazine 148 icons 149 germany 150 free 151 sounds 152 chicago 153 university 154 astrology 155 quicktime 156 florida 157 new york 158 ufo 159 polymyalgia rheumatica 160 cartoons 161 newsgroups 162 nascar 163 yahoo 164 dilbert 165 china 166 cum 167 alt.sex 168 penis 169 hawaii 170 clip art 171 dictionary 172 bikini 173 doom 174 freeware 175 marilyn manson 176 screensaver 177 spanking 178 screensavers 179 spain 180 new york times 181 photography 182 basketball 183 lottery 184 lt thomas dooley 185 ford 186 real audio 187 hockey 188 virus 189 universities 190 usenet 191 novell 192 free stuff 193 yellow pages 194 fashion 195 u2 196 seattle 197 consumer reports 198 teri hatcher 199 italy 200 humor Тестируйте свой дизайн различными обозревателями! Помните, что не все пользователи Internet путешествуют черезобозреватель Microsoft Internet Explorer. В мире существует масса другихобозревателей, например, Netscape Communicator. Функциональность и содержание Дизайн дизайном, но web-страница должна иметь хорошее информационноенаполнение. Функциональность и содержание Дизайн дизайном, но web-страница должна иметь хорошее информационноенаполнение. Как работать с графикой Стандартный пользователь Internet -- это пользователь, имеющий мониторс разрешением 640 на 480 пикселов. Поэтому любая графика вашего web-дизайнадолжна укладываться в этот размер. Кроме этого, графика в документе HTMLдолжна иметь небольшой размер, иначе, ваше творение останется незамеченным. Подписывайтесь под своим дизайном! Это правила хорошего тона. Подпись должна иметь ссылку на ваш адресэлектронной почты. Отмечайте время! Всегда ставьте дату последнего редактирования web-страницы. Оставляйте в документе белые места! Они помогают отдыхать пользователю от обилия графики и текстовойинформации. Если вы что-то рекламируете... ...то используйте в тексте повторения. Чтобы создать иллюзию безразмерности... ...выносите ваши рисунки на самую малость за край страницы. Служебные объявления Служебные объявления всегда черно-белые. Жирный шрифт и фотография Жирный шрифт и фотография -- элементы одного дизайна. Текстовые и графические объекты Выравнивайте текстовые и графические объекты только одним способом,например, по центру. Симметричность оформления Соблюдайте симметричность оформления графики и текста. Не трогайте основной стиль! Изменяйте дизайн, не трогая основной стиль оформления вашего документа. Текст над заголовками Текст над заголовками всегда оформляется уплотненным шрифтом, при этомзаголовки оформляются одним шрифтом, а основной текст -- другим. Дизайн заголовка, текста над заголовком и строки автора -- всегда единый и гармоничный. Строка автора набирается маленькими прописными буквами. Шрифт строкиавтора идентичен шрифту заголовка. Огромная оформительская работа Вы должны так спроектировать свой документ так, чтобы у пользователясложилось впечатление, что над документом была проделана огромнаяоформительская работа. Принцип контрастности Применяйте принцип контрастности: на фоне текста, набранного светлымшрифтом располагаются жирные заголовки. Цитата Цитата -- внедренный текст. Шрифт цитаты идентичен шрифту строкиавтора. Прочно привязывайте смысловую графику Прочно привязывайте смысловую графику к соответствующему ей основномутексту. Комбинируйте! Комбинируйте различные элементы дизайна. Дизайн первой страницы Дизайн первой страницы вашего документа должен отличаться от дизайнавсех остальных страниц. Прежде чем начать Прежде чем начать создание вашего документа, проведите предпроектноеисследование, то есть выясните, для кого будет предназначена публикуемаяинформация: профессионалы, художники, бизнесмены и т.д. Симпатичные картинки Если вы хотите вставить в документ HTML несколько симпатичных картинок,но у вас их нет, то рекомендуем вам воспользоваться абсолютно бесплатнымиминиатюрами, листинги которых можно найти по адресу:hhtp:/www.yahoo.com/Computers/Multimedia/Pictures/Clip_Art Только JPEG и GIF Помните, что в Web-страницах используются только файлы графическихформатов JPEG и GIF. Создавайте зеркала вашего сервера Помните о конечных пользователях. Гипертекстовые зеркала ощутимо небьют по их карманам. Всегда используйте название документа Если ваш документ не имеет названия, то такой документ считаетсянепрофессионально подготовленным. Все web-страницы должны иметь заголовок.Это помогает пользователям понимать тему вашего документа. Могут быть другие шрифты... Помните, что пользователи, посетившие вашу страницу, могут использоватьдля ее просмотра шрифты, весьма сильно отличающиеся от тех, которыми выоформляли исходный документ HTML. Забудьте о фреймах! Без комментариев. Так сказать, примите на веру! Список тэгов, пригодных только для обозревателя Microsoft Internet Explorer n ... n ... BGPROPERTIES=значение n ... LEFTMARGIN=n n ... TOPMARGIN=n n ... VALIGN=позиция n ... n ... n 