Главная

Работа в Жизнь
  Все о работе
  Работа на дому
  Поиск работы
Работа в Интернете
  Виды заработка
  Создание сайта
  Мошенничество
  Полезные статьи
  Новости
  Халява в сети
  Разное
Вебмастеру
  Web-дизайн
  Вопросы
  Литература
  Шаблоны сайтов
Разное
  Карта сайта
  Ссылки
  О сайте

WEB-дизайн. Полное руководство / Часть 5. Microsoft FrontPage Express /

Глава 18. Пример создания сложного гипертекстового документа

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 определим цвет фона строки нашей таблицы как:

• Red: 5
• Green: 153
• Blue: 102

Нажмем кнопку Add to Custom Colors, затем нажмем кнопку OK и, возвратившись в наше предыдущее диалоговое окно, нажмем еще раз кнопку OK.



 

12. У нас получилась табличка, фон второй строки которой оформлензаказным цветом.
13. Теперь под нашей готовой таблицей построим еще одну таблицу с четырьмя столбцами и одной строчкой. Для этого поставим курсор на вторую метку параграфа нашего документа, обратимся к меню Table и выберем из него команду Insert Table. Предварительно зададим параметры таблицы и нажмем кнопку OK.

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

14. Оформим эту табличку следующим образом:

Первый столбец:

• имеет ширину 5 пикселей
• цвет фона Red: 5, Green: 153, Blue: 102

Второй столбец:

• имеет ширину 160 пикселей
• цвет фона Red: 5, Green: 153, Blue: 102

Третий столбец:

• имеет ширину по умолчанию, то есть, флажок Specify Width снят
• цвет фона White

Четвертый столбец:

• имеет ширину по умолчанию, то есть, флажок Specify Width снят
• цвет фона White

15. Теперь в четвертый столбец нашей новой таблицы вставим таблицу с одной строкой, с двумя столбцами и зафиксируем ее ширину на уровне 400 пикселей. Для этого поставим курсор на метку параграфа четвертого столбца, нажав клавишу Enter, создадим еще одну метку параграфа (эта метка нам потом понадобится), перейдем на предыдущую метку, обратимся к меню Table и выберем из него команду Insert Table. Предварительно зададим параметры таблицы и нажмем кнопку OK.



 

16. У нас получилась вложенная табличка.
17. Столбцы нашей вложенной таблицы оформим следующим образом:

Первый столбец:

• имеет ширину 100 пикселей
• цвет фона White

Второй столбец:

• имеет ширину 400 пикселей
• цвет фона White

18. Создадим под этой вложенной табличкой еще одну таблицу с двумя строками, с одним столбцом и зафиксируем ее ширину на уровне 400 пикселей. Для этого поставим курсор на метку параграфа четвертого столбца, нажав клавишу Enter, создадим еще одну метку параграфа, перейдем на предыдущую метку, обратимся к меню Table и выберем из него команду Insert Table. Предварительно зададим параметры таблицы и нажмем кнопку OK.



 

19. У нас получилась еще одна вложенная табличка.
20. Первую строку этой таблицы оформим нашим заказным цветом фона. Для этого вставим курсор на метку параграфа первой строки таблицы, обратимся к меню Table и выберем команду Cell Properties. В появившемся диалоговом окне Cell Properties обратимся к списку цветов Background Color и выберем из него заказной цвет Custom. Как только это будет сделано, мы сразу окажемся в следующем диалоговом окне Color. В диалоговом окне Color выберем из раздела Custom Colors наш цвет фона:

• Red: 5
• Green: 153
• Blue: 102

Нажмем кнопку Add to Custom Colors, затем нажмем кнопку OK и, возвратившись в наше предыдущее диалоговое окно, нажмем еще раз кнопку OK.

21. Вторую строку разобьем на два столбца. Для этого из меню Table выберем команду Split Cells.



 

22. Два этих столбца оформим следующим образом:

Первый столбец:

• имеет ширину 100 пикселей
• цвет фона White

Второй столбец:

• имеет ширину 300 пикселей
• цвет фона 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 Экспорт). При этом цвет надписи "Деньги приходят и уходят. Книги остаются" задан так:

• Red: 5
• Green: 153
• 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-сервера.



 

36. Эта картинка, состоящая из 64 цветов, имеет размер 304x39, разрешение соответствует 72 DPI. Из Adobe Photoshop она была экспортирована в GIF через диалоговое окно GIF89a Экспорт опции (доступ: Файл => Экспорт GIF89a => Экспорт). При этом цвет надписи "Добро пожаловать" задан так:

• Red: 5
• Green: 153
• Blue: 102

37. Поместим созданную картинку в макет нашего web-сервера.
38. В программе Adobe Photoshop 5.0 создадим кнопку "Издательство МиК".



 

39. Эта картинка, состоящая из 32 цветов, имеет размер 111x14, разрешение соответствует 72 DPI. Из Adobe Photoshop она была экспортирована в GIF через диалоговое окно GIF89a Экспорт опции (доступ: Файл => Экспорт GIF89a => Экспорт).
40. Поместим созданную картинку в макет нашего web-сервера.
41. В программе Adobe Photoshop 5.0 создадим так называемый буллет, то есть, картинку в виде черного квадратика, состоящую из 4 цветов и имеющую размер 8x8 пунктов.
42. Поместим созданную картинку в макет нашего web-сервера.
43. Повторяя эти "графические" шаги, мы заполним наш web графикой.



 

44. Прежде чем оформлять текстовую часть нашего web-сервера, разберемся с кодировками. Для этого обратимся к меню File и выберем из него команду Page Properties. В появившемся диалоговом окне Page Properties перейдем к вкладке Language. Из списка раздела Save выберем опцию Cyrillic, а из списка раздела Load выберем опцию Automatic Encoding.



 

45. Используя Microsoft Word 7.0 и операции копирования и вставки, заполняем информационную часть нашего web-сервера текстом.

  Спонсоры страницы : фирменный стиль шаблоны | Сложный ремонт ноутбуков hp киев без выходных.