Замечание: при необходимости изменения формата кнопки окно свойств меняющейся кнопки можно активизировать с помощью команды свойства кнопки контекстного меню.

23. Затем, под созданными кнопками нужно расположить объект автофигуру (см. рис. 12). Работа с панелью Рисование осуществляется аналогично панелям офисных приложений (MS Word, MS Excel).

24. Для размещения данной автофигуры под кнопками используйте команду Порядок → На задний план (команда контекстного меню или опции ДЕЙСТВИЯ панели «Рисование»).

25. После того, как страница создана, ее нужно сохранить под названием «Содержание.html» (Файл → Сохранить как). Для просмотра созданной страницы в браузере выберите: Файл → Просмотреть в обозревателе → выбирается обозреватель.

Рисунок 12. Страница «Содержание»

26. Шаг 3: Создание основной фоновой страницы, которая будет отображаться в правой части окна документа «Титульная».

27. Изначально, укажите тот же фон, который использовали изначально для первой страницы.

28. Следующим шагом будет вставка графического изображения «Sun.jpg» из папки «картинки для Web узла». Для вставки используется пункт меню Вставка → Рисунок → Из файла (аналогично офисным приложениям).

29. Размер, место расположения вставленного изображения редактируется аналогично работе в редакторе, например MS Word, т.е. размеры можно менять с помощью угловых манипуляторов, расположение - с помощью кнопок выравнивания объектов на странице (по левому краю, по центру и т.д.).

30. Далее, следует разместить на этой же странице объекты типа Автофигура. После их размещения их необходимо оформить аналогично рисунку 14. Оформление осуществляется с помощью панели инструментов Рисование (см. рис. 13).

Рисунок 13. Панель инструментов РИСОВАНИЕ

Рисунок 14. Страница «Титульная»

31. После того, как страница готова сохраните ее под названием «Титульная.html». При сохранении страницы вы указываете место сохранения самой страницы, а также при необходимости место сохранения вставленного изображения. Для этого при сохранении автоматически появляется окно сохранения вставленных изображений страницы (см. рис. 15).

Рисунок 15. Окно сохранения внедренных файлов

32. Чтобы в итоге в нашей папке, в которой хранятся все используемые картинки и созданные файлы, был порядок (так как их в итоге будет много), нужно в этом открывшемся окне с помощью кнопки «Сменить папку» выбрать место сохранения изображений. В результате нажатия кнопки, откроется окно (см.рис.16), в котором нужно выбрать папку Images или при необходимости создать новую папку с помощью кнопки

Рисунок 16. Выбор места сохранения изображений

33. Для просмотра созданной страницы в браузере выберите: Файл → Просмотреть в обозревателе → выбирается обозреватель.

34. Шаг 4: Создание основной фреймовой структуры документа или создание домашней страницы «Главная.html».

35. Данная домашняя страница будет объединять все три ранее созданные страницы.

36. Файл → Создать → в появившемся меню в правой части окна выберите Другие шаблоны страниц. В открывшемся окне (см. рис. 17) на вкладке «Страница рамок» выберите «Вложенная иерархия». Поэкспериментируйте с шаблонами рамок. При выборе шаблона в правой части открывшегося окна отображается описание выбранного шаблона (образец структуры страницы и описание (т.е. каким образом будут работать гиперссылки)).

Рисунок 17. Окно выбора шаблонов страниц

37. Результатом выбора данного шаблона будет открывшаяся страница, в которой нужно разместить ранее созданные страницы (см. рис. 18).

Рисунок 18..Страница «Главная..html»

38. В каждом подокне можно отобразить или созданную ранее страницу, или создать новую. Нам необходимо добавить ранее созданные страницы с помощью кнопок в каждом подокне страницы «Задать начальную страницу..».

39. Для начала добавим страницу «Заголовок» в верхнюю часть окна. Нажмите кнопку «Задать начальную страницу..», в результате чего откроется окно «Добавление гиперссылки» (см. рис. 19). Выберите документ «Заголовок.html».

40. Аналогично добавьте другие страницы: в левую часть окна нужно добавить страницу «Содержание. html», в правую часть окна - «Титульная. html».

Рисунок 19..Страница «Добавление гиперссылки»

41.
В результате должно получиться (см. рис. 20):

Рисунок 20..Фреймовая структура документа

42. Основная фреймовая структура готова. Теперь переходим к созданию гиперссылок на другие страницы, которые нужно создать. Предполагается, что по нажатию на кнопку «УСТРОЙСТВО ВВОДА» в правой части окна документа должна отобразиться страница «Устр_Вводa.html», отображающая информацию об устройствах ввода.

43. Шаг 5: Создание страницы «Устр_Вводa.html». Для оформления этой страницы воспользуемся встроенными темами Web-узла.

44. Создайте пустую страницу с помощью кнопки «Создать страницу» (или с помощью пункта меню Файл), после чего появится ярлычок созданной страницы «нов_стp_l.htm» слева в окне просмотра папок и файлов Web-узла. Теперь необходимо ее оформить, для этого следует щелкнуть по названию созданной страницы двойным щелчком мыши.

45. Оформим фон страницы. Выберите Формат → Тема. В правой части окна документа появится меню тем Web-узла, в котором нужно выбрать тему «Гранит» (см. рис. 21).

Рисунок 21. Окно выбора тем

46. Далее, рассмотрим добавление слоев на страницу узла. Слой - это контейнер, содержащий элементы страницы, такие как текст или графические изображения. Слои можно перекрывать, отображать, вкладывать или скрывать.

Дата добавления: 2015-07-10