Главная · Поиск книг · Поступления книг · Top 40 · Форумы · Ссылки · Читатели

Настройка текста
Перенос строк


    Прохождения игр    
SCP-127: Живое оружие
StarCraft II: Wings of Liberty |#17| Media Blitz
StarCraft II: Wings of Liberty |#16| Supernova
DARK SOULS™: REMASTERED |#14| Gravelord Nito

Другие игры...


liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня
Rambler's Top100
Образование - Борис Леонтьев Весь текст 152.03 Kb

WEB-дизайн: Тонкости, хитрости и секреты

Предыдущая страница Следующая страница
1 2 3 4 5  6 7 8 9 10 11 12 13
помогает той или иной поисковой машине 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. Если ваш
Предыдущая страница Следующая страница
1 2 3 4 5  6 7 8 9 10 11 12 13
Ваша оценка:
Комментарий:
  Подпись:
(Чтобы комментарии всегда подписывались Вашим именем, можете зарегистрироваться в Клубе читателей)
  Сайт:
 
Комментарии (8)

Реклама