Жанр: Учеба
WEB-дизайн: Тонкости, хитрости и секреты
... в рабочую среду Microsoft FrontPage
Express картинке любую ссылку. Для этого выберите картинку, обратитесь к
вкладке
Общие диалогового окна
Свойства изображения (доступ:
Правка к
Свойства изображения) и с помощью кнопки
Обзор раздела
Ссылка по умолчаниювыберите документ HTML, на который должен быть сделан переход.
Позиционирование изображений Вы можете позиционировать изображениями, помещенными в рабочую среду
Microsoft FrontPage Express. Для этого выберите изображение и обратитесь к
вкладке
Внешний вид диалогового окна
Свойства изображения (доступ:
Правка к
Свойства изображения к Внешний вид).
С помощью ниспадающего списка
Выравнивание укажите тип позиционирования
вашего изображения относительно страницы.
С помощью опции
Интервал по горизонтали вы можете сместить выбранное
изображение относительно страницы по горизонтали. Параметр смещения
одновременно воздействует на правую и левую части выбранного изображения.
С помощью опции
Интервал по вертикали вы можете сместить выбранное
изображение относительно страницы по вертикали. Параметр смещения
одновременно воздействует на верхнюю и нижнюю части выбранного изображения.
Основные свойства web-страницы Свойства созданной страницы представлены диалоговым окном
Свойства
страницы (доступ:
Файл к Свойства страницы).
Папка Укажите путь к папке, в которой хранятся все файлы вашей web-страницы.
Заголовок Текст, который вы впишите в это поле данных отобразится в заголовке
окна обозревателя. Практически все поисковые машины Internet начинают
сканирование web-страниц с заголовка.
Как озвучить web-страницу Вы можете озвучить вашу web-страницу, просто поместив в нее файлы
звуков WAV, AIFF, AU MIDI. Для этого определите точку вставки и обратитесь к
разделу
Фоновый звук вкладки
Общие диалогового окна
Свойства страницы(доступ:
Файл к Свойства страницы).
С помощью кнопки
Обзор выберите звуковой файл на вашем диске. Если вы
хотите, чтобы ваш звук все время играл в окне обозревателя, поставьте флажок
Непрерывно. Если же вы хотите, чтобы ваш звук воспроизводился в течение
определенного цикла, снимите флажок
Непрерывно и укажите количество циклов
воспроизведения с помощью счетчика
Цикл.
Кодирование web-страниц С помощью Microsoft FrontPage Express вы можете изменить кодировку
символов web-страницы. Для этого обратитесь к разделу
Кодировка HTML вкладки
Общие диалогового окна
Свойства страницы (доступ:
Файл к Свойства страницы).
Отображение русских букв зависит от вашей кодировки. Поэтому для того,
чтобы в обозревателе нормально отображались русские буквы, вам необходимо
установить в систему многоязыковую поддержку и шрифты с соответствующей
кодировкой, например KOI8. Как правило, при работе в Windows 98 для
кириллизации используется кодировка CP1251, а на непонятных компьютерах с
UNIX — кодировка KOI-8.
Стандарт KOI8 является кириллической кодовой таблицей, позволяющей вам
обмениваться некоторыми сообщениями электронной почты и просматривать
web-страницы. Для того, чтобы Windows 98 понимала KOI8, необходимо
установить многоязыковую поддержку и шрифты с кодировкой KOI8.
Помните, что российские серверы Web поддерживают русский язык либо
через кодовую страницу 1251 (Windows 95), либо через таблицу КОИ-8 (Unix).
Как присвоить цвет или фон вашей
web-странице Вы можете указать цвет фона для вашего документа HTML. Для этого
обратитесь к вкладке
Фон диалогового окна
Свойства страницы (доступ:
Файл к
Свойства страницы), поставьте флажок
Фоновое изображение и с помощью кнопки
Обзор выберите файл изображения, который будет использоваться в качестве
фона.
Вы можете указать дополнительный цвет фона для текущего документа. Для
этого обратитесь к вкладке
Фон диалогового окна
Свойства страницы (доступ:
Файл к Свойства страницы) и выберите из наспадающего списка
Фонпонравившийся вам цвет.
Как присвоить цвет тексту и ссылкам Вы можете присвоить цвет любому выделенному фрагменту текста, а также
гиперссылке, просмотренной и активной ссылкам. Для этого обратитесь к
вкладке
Фон диалогового окна
Свойства страницы (доступ:
Файл к Свойства
страницы) и выберите из наспадающего списка
Текст цвет для выделенного
фрагмента текста.
Цвет ссылки вы можете изменить с помощью ниспадающих списков
Гиперссылка,
Просмотренная ссылка и
Активная ссылка.
Мета-тэги С помощью вкладки
Специальный диалогового окна
Свойства страницы(доступ:
Файл к Свойства страницы) вы можете включить в ваш документ HTML
дополнительную информацию, которая не отобразится в окне обозревателя, но
помогает той или иной поисковой машине Internet более легко обнаружить вашу
web-страницу.
Речь идет о так называемых мета-тэгах. Используя мета-тэги вы можете
включить в свой документ, например, ключевые слова и короткое описание вашей
web-странички:
<META name="description" content="Хороший сайт">
<META name="keywords" content="автомобиль, стоп"> Использование гипертекстовых ссылок Гипертекстовая ссылка считается активной частью документа 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. Откроем гипертекстовый редактор Microsoft FrontPage Express.
2. В меню
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. У нас получилась еще одна вложенная табличка.
20. Первую строку этой таблицы оформим нашим заказным цветом фона. Для
этого вставим курсор на метку параграфа первой строки таблицы, обратимся к
меню
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. Теперь займемся графикой. Для этого откроем программу Adobe
Photoshop 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. Поместим созданную картинку в макет нашего web-сервера.
40. Повторяя эти "графические" шаги, мы заполним наш web графикой.
41. Прежде чем оформлять текстовую часть нашего web-сервера, разберемся
с кодировками. Для этого обратимся к меню
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,
должны удовлетворять следующим требованиям:
<IMG SRC = "image.gif"> или
<A HREF = "util.zip"> Вы можете обратиться к любому типу файла, который поддерживается
сервером Geосites. Например, вы можете обратиться к страничке page2.html,
находящейся внутри index.html, используя ссылку
<HREF = "hobbies.html">
Это моя вторая страница </A> и обратиться к картинке, находящейся в вашем текущем каталоге,
используя ссылку
<IMG SRC = "photo.jpg">
Использование протокола передачи Вы можете пересылать ваши файлы на сервер 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.geocitie
...Закладка в соц.сетях
