Макурина Т.А., Плисковский Е.А. Web-дизайн и программирование в Интернет: Учебно-методические указания к лабораторным работам [PDF] - Все для студента. Лабораторные работы web дизайн


Методические указания по выполнению лабораторных работ дисциплины «Программирование сайтов и web-дизайн» для специальности 09.02.03 «Программирование в компьютерных системах»

Министерство образования и науки Российской ФедерацииФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ«САРАТОВСКИЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТИМЕНИ Н.Г.ЧЕРНЫШЕВСКОГО»Колледж радиоэлектроники имени П.Н.Яблочкова

УТВЕРЖДАЮЗам. директора по УМР__________ И.Н.Толмачева«____»__________ 20 г.

Методические указания по выполнениюлабораторных работ

Дисциплина «Программирование сайтов и web-дизайн» Специальность 09.02.03 «Программирование в компьютерных системах»Разработал преподаватель М.В. Хамутова

Рассмотренона заседании ПК«___»_____________20 г.Протокол №__________Председатель: А.Ю. Будюков_____________________ Ф.И.О.,подпись

Саратов, 2016г.Оглавление13 TOC \o "1-1" \h \z \u 1413LINK \l "_Toc356321645"14Общие сведения 13 PAGEREF _Toc356321645 \h 144151513LINK \l "_Toc356321647"14Глава 1. Язык гипертекстовой разметки HTML. 13 PAGEREF _Toc356321647 \h 147151513LINK \l "_Toc356321648"14Лабораторная работа №1 «Основы работы в HTML. Форматирования шрифта и абзаца» 13 PAGEREF _Toc356321648 \h 147151513LINK \l "_Toc356321650"14Лабораторная работа № 2 «Создание таблиц» 13 PAGEREF _Toc356321650 \h 1410151513LINK \l "_Toc356321651"14Лабораторная работа №3 «Вставка в HTML-документ рисунков. Создание закладок и гиперссылок» 13 PAGEREF _Toc356321651 \h 1412151513LINK \l "_Toc356321652"14Лабораторная работа № 4 «Создание форм в HTML-документе» 13 PAGEREF _Toc356321652 \h 1414151513LINK \l "_Toc356321654"14Лабораторная работа № 5 «Фреймы» 13 PAGEREF _Toc356321654 \h 1419151513LINK \l "_Toc356321655"14Глава 2. Каскадные таблицы стилей CSS. 13 PAGEREF _Toc356321655 \h 1422151513LINK \l "_Toc356321656"14Лабораторная работа № 6 «Создание навигационной карты» 13 PAGEREF _Toc356321656 \h 1422151513LINK \l "_Toc356321657"14Лабораторная работа №7 «Способы подключений CSS» 13 PAGEREF _Toc356321657 \h 1424151513LINK \l "_Toc356321658"14Лабораторная работа №8 «Редактирование html-страницы с применением css» 13 PAGEREF _Toc356321658 \h 1428151513LINK \l "_Toc356321659"14Лабораторная работа №9 «Верстка макетов с помощью CSS» 13 PAGEREF _Toc356321659 \h 1431151513LINK \l "_Toc356321660"14Глава 3. Язык сценариев JavaScript. 13 PAGEREF _Toc356321660 \h 1435151513LINK \l "_Toc356321661"14Лабораторная работа №10 «Динамичные эффекты посредством CSS» 13 PAGEREF _Toc356321661 \h 1432151513LINK \l "_Toc356321662"14Лабораторная работа №11 «Размещение кода JavaScript. Основы JavaScript» 13 PAGEREF _Toc356321662 \h 1436151513LINK \l "_Toc356321663"14Лабораторная работа №12 «События и Функции в JavaScript» 391513LINK \l "_Toc356321664"14Лабораторная работа №13 «Создание сценариев с использованием встроенного объекта Date» 13 PAGEREF _Toc356321664 \h 1442151513LINK \l "_Toc356321665"14Лабораторная работа № 14 «Массивы» 13 PAGEREF _Toc356321665 \h 1444151513LINK \l "_Toc356321666"14Лабораторная работа №15 «Встроенный объект String» 13 PAGEREF _Toc356321666 \h 14461515

educontest.net

WEB-дизайн Лабораторная работа № 4

2

WEB-дизайн

Лабораторная работа № 4

Задание:

  1. Привести примеры упорядоченных и неупорядоченных списков. Каждая группа форматированного текста должна содержать не менее 10 элементов и 3-х уровней вложенности. На каждом уровне необходимо применить свой маркер или тип индексации.

  2. Разработать таблицу данных с использованием тэга предварительного форматирования PRE. Таблица должна содержать заголовок, названия столбцов и 5 строк данных.

  3. Включить в документ HTML примеры форматирования текста на основе тега выделения цитат BLOCKQUPTE

  4. Включить в программу примеры воспроизведения цифрового видео. (атрибут DYNSRC= тэга IMG.)

  5. Разработать бегущую строку текста.

Методические рекомендации:

Списки

Существуют два основных вида списков: упорядоченные (по алфавиту или по цифрам) и неупорядоченные (с вводным маркером). Браузер выделяет список из текста отступом от края страницы. Списки могут быть вложенными.

Упорядоченные списки задаются парным тегом OL, а неупорядоченные тегом UL.

Для элементов списка используются непарные теги LI

Для неупорядоченных списков можно выбрать один из трех видов вводных маркеров. Это делается с помощью атрибута TYPE= внутри тега UL. Возможные аргументы DISK (круг), CIRCLE (окружность), SQUARE (квадрат).

Для упорядоченных списков можно выбрать способ индексации: арабскими цифрами, прописными буквами, строчными буквами или римскими цифрами. Это делается с помощью атрибута TYPE= с соответствующим аргументом (соответственно 1, A, a, i). Начальный номер, с которого начинается нумерация элементов списка, задается атрибутом START= внутри тега OL.

Пример:

Упорядоченный список

  1. Элемент списка 1
  2. Элемент списка 1
    1. Элемент списка
    2. Элемент списка 4
      1. Элемент списка 5
      2. Элемент списка 6
        1. Элемент списка 7
        2. Элемент списка 8

Неупорядоченный список

  • Элемент списка 1
  • Элемент списка 2
    • Элемент списка 3
    • Элемент списка 4
      • Элемент списка 5
      • Элемент списка 6
Текст заранее заданного формата (преформатированный текст)

PRE - парный тег предварительного форматирования. При выводе информации на экран тег сохраняет все дополнительные пробелы, символы табуляции и символы концов строк. При этом текст на экране выглядит точно так, как вы его создали в редакторе HTML.

Пример

bКоличество продаж

___________________________________________________

Апрель Май Июнь Июль Август b

Карандаши 300 1000 300 200 100

Блокноты 400 2000 400 300 200

Ластики 500 3000 500 400 300

Стрелки 600 4000 600 500 400

С помощью тега часто форматируют информацию табличного характера. Здесь это делается несколько проще и нагляднее. Однако существенно ограничены возможности организации рамок, общего оформления и размещения графики.

Выделение цитат. Тэг BLOCKQUOTE

Тэг позволяет напечатать текст с отступом от левого края. Повторяя этот тэг, можно увеличить величину отступа. Внутри тэга можно использовать теги параграфа P и разрыва строки BR.

Пример:

Пример использования в документе тега BLOCKQUOTE

BLOCKQUOTE

Это замечательное средство выделения цитат, определений и других структурных элементов документа. Он широко применяется наряду с другими инструментами форматирования. Тэг является парным. Внутри тэга можно использовать теги параграфа и разрыва строки.

Вот и все. До свидания.

/BLOCKQUOTE

Тэг LEFTMARGIN= задает смещение (отступы ) текста и графики для всего HTML-документа по горизонтали.

Тэг TOPMARGIN= = задает смещение (отступы ) текста и графики для всего HTML-документа по высоте.

Воспроизведение видео в Internet Explorer

Файлы видео встраивают в Web- страницы при помощи атрибута DYNSRC= тэга IMG. Тэг загружает некоторое, встроенное в операционную систему программное обеспечение, предназначенное для воспроизведения видеоклипов. Обычно это OuickTime.

Атрибут START= определяет каким образом задается начало воспроизведения. Значение OPENFILE обеспечивает запуск видео автоматически при загрузке файла. Значение MOUSEOVER инициирует воспроизведение видео при наведении курсора на изображении-ссылке.

Атрибут LOOP= задает количество повторов видеоклипов. Если нужно задать количество повторений бесконечным, надо ввести ключевое слово INFINITE.

Примеры:

1.

2.

align=left hspace=10 vspace=5 start=mouseover Рис.1.1 (анимационный)

. Здесь анимационный файл используется в качестве графической ссылки для демонстрации файла pr1_21.htm, содержащего ту же анимационную сцену, на полном экране.

Бегущая строка

loop=infinite scrolldelay=100

Ниже приводится краткая инструкця для начинающих пользователей персонального

компьютера. Прочтите ее "на всякий случай" !

Атрибуты:

Height, Width – высота и ширина окна

Hspace, Vspace – ширина и высота пустых полей вокруг окна

Bgcolor – цвет фона окна

Direction – направление движения бегущей строки

Loop – количество циклов повторения. Значение infinite – непрерывный цикл

Scrolldelay – скорость прокручивания.

Организация возвратов (обратных переходов) по связанным документам HTML.

Для этих целей удобно использовать встроенную функцию JavaScript history.back

[назад]

2

multiurok.ru

Лабораторная работа 3. Создание веб-сайта. Основы.

Транскрипт

1 Лабораторная работа 3. Создание веб-сайта. Основы. Цель работы: получить теоретические и практические навыки создания вебсайта на этапе планирования и разработки дизайна. 1. Теоретическая часть. Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа: Планирование Дизайн Разработка (Лабораторная работа 4) 1.1. Планирование Данный этап можно разделить на несколько подэтапов: Создание идеи Разработка структуры проекта Проработка макета проекта Создание идеи На данном этапе нам необходимо определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические Разработка структуры проекта Когда мы определились с темой проекта, подобрали необходимый материал, следующим этапом будет разработка структуры проекта. Структура проекта подразумевает под собой разделы сайта, в соответствии с которыми будет формироваться навигационное меню и строиться дизайн проекта. На данном этапе можно классифицировать материал по темам и разделам Проработка макета проекта После того, как мы определились со структурой проекта можно составить макет проекта (схематично). Для отрисовки наброска можно использовать бумагу и ручку, любой редактор графики (GIMP, Photoshop и др.). Важно отметить, что данный этап это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

2 Основные элементы страницы Зачастую основными элементами страницы являются: содержащий блок (wrapper, container), логотип, навигация, контент, футер (нижний колонтитул), свободное пространство (по сути свободное пространство это не элемент дизайна, но понятие, помня о котором при составлении макета страницы, наш проект не будет выглядеть как нагромождение блоков).

3 Содержащий блок (контейнер) Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed). Логотип Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета). Навигация Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации). Контент Контент это основная составляющая веб-страницы. Он занимает главенствующую роль в дизайне страницы, поэтому занимает большее пространство, подкреплѐн, помимо текста, графикой. Нижний колонтитул (footer) Данный элемент располагается внизу страницы и обычно содержит информацию о правообладателе, контактные и юридические данные, ссылки на основные разделы сайта (зачастую дублирует основную навигацию), ссылки на социальные сети, форму обратной связи и пр Резиновый и фиксированный макет Фиксированный макет Фиксированный макет подразумевает под собой, что в независимости от разрешения экрана пользователя ваш сайт всегда будет занимать одинаковую ширину. Резиновый макет «Резиновый» макет подразумевает, что страница сайта будет стараться занять всѐ доступное ей пространство на экране пользователя, подстраиваясь под разрешение. В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаѐтся 3 макета под разрешения iphone (Android Phone), ipad (Android Tablet) и Desktop.

4 Полезные ссылки по теме: Пример сайта, использующего концепцию адаптивного веб-дазайна Статья, в которой разбирается данная концепция (eng.) Книга об отзывчивом веб-дазайне от автора статьи Почему при «резиновом» дизайне создаѐтся несколько макетов, а не используется один? При разработке макета мобильной версии сайта стараются на первый план выносить основной контент, поэтому навигационное меню часто прячется, скрываются большие баннеры и декоративные элементы, блоки контента обычно располагают друг под другом. На заранее составленном макете как раз можно определиться какие элементы мы оставляем на мобильном, а какие прячем Модульная сетка Перед составлением схемы проекта так же необходимо уяснить понятие модульной сетки. Модульная сетка подразумевает под собой разделение страницы на отдельные колонки по вертикали и выстраивание контента, при разработке дизайн макета, именно по этой сетке. Наиболее популярной системой является модульная сетка 960 Grid System ( которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вѐрстки).

5 Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и еѐ неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей. Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap ( Благодаря модульной сетке блоки контента и элементы будут располагаться на определѐнном расстоянии друг от друга, будут иметь удобоваримую ширину, что в дальнейшем визуально будет приятно пользователю и не будет вызывать у него какиелибо неудобства в восприятии сайта. Модульная сетка, по сути, это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдѐте в шаблонах сетки 960gs.

6 Полезные ссылки и материалы: Паттерны адаптивной сетки Создание прототипа на основе 960gs (eng.) Использование сетки 960gs как основы для дизайна (eng.) Макеты веб-страниц Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространѐнных: Навигация в левом столбце Навигация в правом столбце Навигация в трѐх столбцах

7 Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаѐтся больше пространства для контента, составляющего наш сайт. Но данный список типов макетов нельзя назвать исчерпывающим, поэтому перед разработкой макета и дизайна страницы так же можно погулять по различным сайтам с примерами других работ, а так же по сайтам схожей с вашей тематикой: На первых двух сайтах можно посмотреть какие цвета использовались в дизайне Дизайн После создания макета проекта можно переходить непосредственно к созданию дизайнмакета. На данном этапе начать стоит с определения цветовой гаммы проекта. Один из способов определения основного цвета в проекте это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

8 Для работы с выбранным цветом и составлением палитры цветов нашего сайта можно использовать следующие инструменты: Color Scheme Designer 3 ( Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте Adobe Color CC ( Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещѐ и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

9 COLORlovers ( Обширное сообщество, где можно подобрать различные палитры. Важно отметить, что при подборе цветов для палитры всегда стоит выбирать как минимум 2 контрастирующих цвета. Достижение нужного контраста между цветами необходимое условие для того, чтобы у вас получился хороший интерактивный дизайн. При работе над дизайном главной и внутренних страниц стоит помнить о некоторых основных принципах Элементы Call to Action Понятие призыва к действию относится к интерактивным элементам сайта: кнопки, баннеры и пр. Данные элементы оформляются таким образом, что пользователю должно хотеться непременно на них нажать. Например, это может быть кнопка с призывом к действию (Нажми, Купи, Сэкономь), яркий баннер с заманчивым предложением, яркой картинкой и пр. Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action) AIDA Данное понятие применяется чаще при дизайне главных страниц, страниц акций и пр., где необходимо подтолкнуть пользователя к тому или иному действию: подписка, покупка и пр. Если перевести данный акроним на русский, то мы получим следующие понятия: Привлечение внимания Интерес Желание Действие

10 Таким образом становится понятен принцип построения дизайна, опирающегося на данное понятие: например, яркая картинка, баннер должны привлечь внимание пользователя, сопутствующий посыл в тексте должен вызвать в нѐм интерес и желание, а завершающим аккордом должна стать, например, кнопка с призывом к действию. Но и данный принцип не работает сам по себе без некоторых других: схема просмотра страницы (наиболее, естественный путь движения глаз по странице), визуальные направляющие Схема просмотра страницы Довольно часто встречается Z-схема просмотра страницы. В соответствии с этим элементы страницы обычно располагают следующим образом: логотип слева вверху, меню справа вверху, информационные блоки, картинки слева внизу, кнопка с призывом к действию справа внизу.

11 Визуальные направляющие Визуальными направляющими называют декоративные элементы страницы, которые перенаправляют взгляд пользователя на те или иные элементы дизайна, формы, кнопки и пр. В качестве визуальных направляющих могут выступать стрелка, направление взгляда человека на изображении, направление указательного пальца, в общем всѐ, что может както указывать в ту или иную сторону. На первом изображении взгляд невольно следует за указательным пальцем мужчины, а его прямой взгляд невольно привлекает внимание к себе при первом взгляде на страницу. Тот же эффект продемонстрирован на втором изображении с наложенной тепловой картой: в первом случае нас привлекает в основном прямой взгляд ребенка (прямо в глаза), во втором случае направление взгляда ребенка и его поза невольно обращают взгляд пользователя на блок справа.

12 Фрэймворки Стоит так же отметить, что иногда, при разработке дизайна страницы, используют фрэймворки Bootstrap, Foundation, Material Design Lite, которые, помимо готовых элементов дизайна (кнопки, формы ввода и пр.), предлагают свою модульную сетку, CSS сниппеты (часть кода, разметки, которая может неоднократно использоваться) для вставки элементов в страницу (тех же кнопок, элементов форм и пр.) и классы разметки, а так же JS скрипты для соответствующих интерактивных элементов. Использование данных библиотек может в значительной мере сэкономить время при разработке проекта (дизайне, вѐрстке), правда в то же время может сделать ваш сайт похожим на другие, если использовать элементы дизайна фрэймворков как есть. На основе каждого фрэймворка можно найти огромное количество платных и бесплатных тем и страниц, а так же разработать свои Трэнды Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL) Нельзя не упомянуть о некоторых наметившихся трендах последнего времени в качестве компоновки и дизайна страниц. Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделѐнную на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаѐтся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счѐтчики, анимация и пр.).

13 Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн. Скевоморфизм Скевоморфизм уже продолжительное время уступает свои позиции плоскому дизайну. Данное понятие означает наделение интерактивных элементов качествами реальных. Например, оформление страницы с книгами в виде книжной полки, оформление кнопки на подобии настоящей с соответствующей имитацией нажатия, использование реальных текстур и пр. Данный принцип активно использовался при создании страниц буквально пару лет назад, но затем тенденции сменились и на первый план вышел плоский дизайн (Flat, Material).

14 Плоский дизайн Плоский дизайн использует минимум текстур и оформление, создание дизайна базируется на понятиях контраста, соотношения цветов и размеров. Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях ios сначала использовала имитацию реальных объектов, а затем всѐ упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google. Неплохой сайт-сравнение двух концепций: По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

15 2. Практическая часть. Провести проектирование веб-сайта, повторив этапы в соответствии с индивидуальным заданием из лабораторной работы 2. Все этапы зафиксировать в отчете, позволяющем проверить ход работы. 3.Контрольные вопросы Любые, позволяющие удостовериться, что студент разобрался в теоретической части лабораторной работы.

docplayer.ru

Макурина Т.А., Плисковский Е.А. Web-дизайн и программирование в Интернет: Учебно-методические указания к лабораторным работам [PDF]

  • Файл формата pdf
  • размером 821,85 КБ
  • Добавлен пользователем ольга, дата добавления неизвестна
  • Отредактирован 22.01.2010 16:43

Приводится описание теоретической части, посвященной изучению методологии создания динамических HTML-страниц, широко используемых при создании Web-приложений, даются рекомендации для выполнения лабораторных работ, приводится варианты заданий на лабораторные работы. Методические указания разработаны на кафедре "Системы автоматизированного проектирования" и предназначены для студентов специальностей 220300 и 351500.

  • Чтобы скачать этот файл зарегистрируйтесь и/или войдите на сайт используя форму сверху.
  • Регистрация

www.twirpx.com

Лабораторная работа №4. Создание Web-узла в Microsoft FrontPage. По теме "Web-дизайн"

  1. Загрузите MicrosoftFrontPage.

  2. Задайте команду Файл\ Создать.

  3. В окне "Создание"(правая часть рабочей области) выберите пункт Другие шаблоны web-узлов.

  4. Из появившегося списка выберите Мастер корпоративного web-узла

  5. Отвечайте на вопросы мастера

    1. Выберите все страницы для включения в Web-узел. Нажмите на кнопку "Далее".

    2. Выберите все предложенные разделы для размещения на домашней странице. Нажмите на кнопку "Далее"

    3. Выберите все предложенные разделы для размещения на странице новостей. Нажмите на кнопку "Далее"

    4. Укажите число продуктов – 3. Нажмите на кнопку "Далее".

    5. Выберите все предложенные элементы для каждого продукта. Нажмите на кнопку "Далее".

    6. В форме "обратная связь" выберите все пункты кроме пунктов должность и обратный адрес. Нажмите на кнопку "Далее".

    7. Выберите пункт "нет" в окне "Обратная связь". Нажмите на кнопку "Далее".

    8. Выберите все возможные варианты для страницы "Оглавление". Нажмите на кнопку "Далее".

    9. Отметьте все элементы для верхней и нижней частей страницы. Нажмите на кнопку "Далее".

    10. Выберите пункт "ДА" для пометки незавершенных страниц специальным значком. Нажмите на кнопку "Далее".

    11. Введите название организации – Сыктывкарский государственный университет, а также почтовый адрес. Нажмите на кнопку "Далее".

    12. Заполните поля "номера телефонов" и "адреса". Нажмите на кнопку "Далее".

    13. Нажмите на кнопку "Готово".

  6. Запустите файл index.htm. Просмотрите содержимое страницы. Обратите внимание на области страницы. Найдите знак, обозначающий состояние редактирования страницы.

  7. Используя последовательно вкладки (в нижней части рабочей области) перейти в указанные виды страницы (КОНСРУКТОР, С РАЗДЕЛЕНИЕМ, КОД, ПРОСМОТР).

  8. Вернитесь в вид КОНСТРУКТОР.

  9. В списке файлов (на панели, расположенной в левой части рабочей области) найдите файл домашней страницы.

  10. Задайте другую тему для страницы используя команду ФОРМАТ/ТЕМА.

  11. Добавьте эмблему организации.

  12. Определите для области системы навигации новые настройки шрифтов.

  13. Выведите область системы навигации в виде приподнятого объекта.

  14. Измените тип вывода системы навигации с горизонтального на вертикальный (используя контекстное меню).

  15. Введите текст на страницы.

  16. Перейдите на вкладку Веб-узел и просмотрите переходы на страницы. Убедитесь в их корректности.

  17. Сохраните страницы на диске D:\ в своей папке. Сделайте копию на другой носитель.

Лабораторная работа №5. "Обновление Web-узла в Microsoft FrontPage " По теме "Web-дизайн"

Задание . Обновите сайт, созданный при выполнении предыдущей работы

  1. Оформление главной страницы.

    1. Добавьте дату и время (используя команду вставка).

    2. Вставьте динамический эффект – бегущую строку.

    3. Вставьте динамический эффект – интерактивную кнопку.

    4. Добавьте коллекцию фотографий.

    5. Определите местонахождение для счетчика посещений сайта.

    6. Выберите элемент управления – электронная таблица.

    7. Выберите элемент управления – сводная таблица Office.

    8. Добавьте расписание занятий.

    9. Добавьте различные виды панелей ссылок: панель со ссылками вперед- назад, Панель на структуре переходов, панель с пользовательскими ссылками. Какой вид панели более предпочтителен в данном случае и почему?

    10. Вставьте новое оглавление для Веб-узла.

    11. Добавьте компонент "лучшая десятка".

    12. Добавьте HTML-элемент.

  2. В список продуктов добавьте еще один полновесный пункт.

  3. Откорректируйте все переходы на Веб-узле.

  4. Просмотрите результат в браузере.

studfiles.net

«Web- проектирование и Web-дизайн. Пакет FrontPage2003. Управление Web-сайтом»

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИМОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ ИНСТИТУТ

РАДИОТЕХНИКИ, ЭЛЕКТРОНИКИ И АВТОМАТИКИ

(ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)Факультет Кибернетики

Кафедра Интеллектуальных

технологий и систем

Лабораторная работа № 4

Тема: «Web- проектирование и Web-дизайн. Пакет FrontPage2003. Управление Web-сайтом»

Дисциплина: «Интернет технологии»

Выполнил: Ижбулатов Р.М.

Группа:ИИ-1-3

Проверил: Звездочкина М.К.

МОСКВА 2007

Цель работы: Ознакомление с основами Web-проектирования и Web-дизайна. Формирование навыков использования пакета FrontPage 2002/2000 для разработки и управления Web-сайтом. Разработка и поддержка собственного Web-сайта.

Задание

1. Изучите Методические указания или соответствующие разделы пособия [1].

2. Запустите пакет FrontPage 2002/2000. Описания, приведенные ниже и в Методических указаниях, даны для FrontPage 2002. Однако с небольшими изменениями они справедливы и для FrontPage 2000

3. Создайте Web-узел с помощью мастеров и шаблонов FrontPage 2002/2000 (См. Методические указания, разделы 3.7.3., 3.7.4.). Для этого выполните следующие действия:

3.1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Новая страница или Web -узел).

3.2. На появившейся панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).

В окне вкладки Шаблоны веб-узлов (Рис.1) вы видите несколько вариантов создания сайта:

Мастер корпоративного веб-узла;

Мастер интерфейса базы данных;

Шаблон создания многостраничного персонального Web-узла

и т. д.

Рис.1 Диалоговое окно Шаблоны веб-узлов

3.3. Выберите Личный Web-узел. Если вы имеете достаточный опыт Web-проектирования и Web-дизайна, то можете выбрать Мастер корпоративного веб-узла или Мастер интерфейса базы данных.

3.3. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов введите местоположение и имя создаваемого Web-узла. Назовем Web-узел, например, mypersweb. По умолчанию местоположение и имя создаваемого Web-узла имеет вид:

C:\Documents and Settings\My\Мои документы\Мои веб-узлы\myweb1

Можете оставить его без изменения.

Замечание

1. Имена узла, папок, файлов и ссылок вашего сайта должны быть написаны только латиницей без использования заглавных букв, так как интернет-хостинги не поддерживают кириллицу! Заметим,что большинство начинающих разработчиков работают под платформой Windows, для которой имена файлов вида Index.htm и index.htm — это одно, в то время как для Unix, Linux и прочих платформ-хостингов это 2 разных файла, и ссылка index.html для документа Index.htm работать не будет.

2. При работе с пакетом FrontPage важно помнить, что любые изменения файлов и папок, входящих в состав Web-узла FrontPage, должны выполняться исключительно средствами пакета FrontPage. Иными словами, для удаления, переименования и копирования файлов в узел FrontPage нельзя использовать Проводник Windows. В противном случае отслеживание изменений файлов и папок узла будет существенно осложнено, если вообще возможно.

3.4. Дважды щелкните на значке Личный веб-узел (Personal Web). Начинается процесс создания шаблона. Через некоторое время в главном окне программы FrontPage откроется полученный Web-узел для просмотра и редактирования (рис. 2).

Рис. 2. Шаблон Персонального Web-узла, созданный с использованием шаблона.4. Модификация персонального Web-узла

На рис. 2 показана домашняя страница персонального Web-узла, созданного с помощью шаблона. Она содержит набор элементов, которые вы можете использовать в том виде, в котором они предлагаются мастером, или их изменить.

В верхней части домашней страницы расположен заголовок Добро пожаловать!, представляющий собой объект, называемый объявление на странице (Page Banner). Этот объект используется для отображения в графическом виде заголовков на Web-страницах. Вид заголовка определяется в диалоговом окне Свойства объявления на странице (Page Banner Properties), открываемом двойным щелчком на заголовке или одноименной командой контекстного меню.

В центре домашней страницы (ниже и правее пунктирных линий) расположен обычный текст, который можно изменять. Чтобы разобраться, обычный это текст на Web-странице или какой-либо объект, поэкспериментируйте. Перемещайте курсор внутри домашней страницы и следите за тем, как меняется внешний вид курсора при установке на те или иные объекты.

При нахождении курсора над заголовком страницы, над расположенной под заголовком датой, курсор принимает вид руки, держащей страницу.

4.1. Изменение свойств объектов и размещение необходимой информации

Установите курсор на текст в центре страницы. Курсор не меняет своего внешнего вида. Текст вы можете смело удалить и на его месте разместить необходимую информацию, отражающую ваши личные данные.

Для изменения свойств объектов, над которыми курсор принимает вид руки, держащей страницу, используются соответствующие диалоговые окна. Например, для изменения формата отображаемой на странице даты вам необходимо установить курсор на дату и дважды щелкнуть мышью. Откроется диалоговое окно Дата и время (Date and Time) (рис. 3), используя которое вы сможете установить иной формат отображения даты.

Рис. 3. Диалоговое окно Дата и время4.2. Настройка свойств панели ссылок

Слева на странице размещена панель ссылок, называемая также панелью навигации. Для настройки свойств панели ссылок используется диалоговое окно Свойства панели ссылок (Link Bar Properties), открываемое при двойном щелчке на этой панели.

Названия кнопок панелей ссылок соответствуют названиям страниц, входящих в Web-узел, на которые по этим ссылкам осуществляется переход. Вы можете проверить действия этих ссылок. Для этого выполните следующие действия:

1. Установите курсор на название одной из страниц на панели навигации.

2. Когда курсор примет вид руки, держащей страницу, нажмите клавишу и, удерживая ее нажатой, щелкните левой кнопкой мыши. Осуществится переход на выбранную вами страницу.

Вы не можете выделить надпись на панели навигации и изменить размещенный на ней текст. Чтобы поменять названия кнопок на панели ссылок, вы должны присвоить другие названия страницам, на которые перемещаетесь с помощью этих кнопок. Например, для изменения названия Увлечения на Хобби вам необходимо выполнить следующие действия:

1. Откройте в режиме редактирования страницу с названием Увлечения. Для этого выполните одно из следующих действий:

• Дважды щелкните мышью значок файла interes.htm на панели Список папок (Folder List)

• Для перехода с домашней страницы на страницу Увлечения воспользуйтесь панелью ссылок: удерживая нажатой клавишу , щелкните на надписи Увлечения

2. Установите курсор на заголовок страницы и дважды щелкните мышью.

3. В поле Текст объявления (Page banner) открывшегося диалогового окна Свойства объявления на странице (Page Banner Properties) (рис. 4) введите вместо Увлечения новое название заголовка, например, Хобби.

Рис. 4. Диалоговое окно Свойства объявления на странице

4. Нажмите кнопку ОК. Диалоговое окно Свойства объявления на странице закроется. Страница будет иметь вид, представленный на рис. 5.

Рис. 5. Вид Web-страницы после изменения ее названияСовет

Обратите внимание, что изменилось не только название страницы, но и название кнопки на панели ссылок, размещенной слева на странице. Вернитесь на домашнюю страницу и посмотрите на панель ссылок, размещенную на ней. Название соответствующей кнопки изменилось и на домашней странице, и на всех страницах Web-узла. Действуя аналогичным образом, вы можете изменить названия остальных кнопок, кроме кнопки Домой.

Помимо приведенного выше способа изменения названия страниц, а соответственно, и названий кнопок панелей ссылок, существует еще один:

1. Перейдите в режим работы Переходы (Navigation), нажав одноименную кнопку на панели режимов Представления (Views). В рабочей области программы FrontPage отображается структура навигации персонального Web-узла, в которой страницы представлены в виде прямоугольников.

2. Установите курсор на страницу, название которой хотите изменить, нажмите правую кнопку мыши и выберите в появившемся контекстном меню команду Rename (Переименовать). Название страницы становится доступным для редактирования (рис. 6).

3. Введите новое название страницы и нажмите клавишу .

Рис. 6. Изменение названий страниц в режиме ПереходыОба приведенных способа, используемых для изменения текста кнопок панели ссылок, не позволяют изменить название кнопки, предназначенной для перехода на домашнюю страницу.

Чтобы изменить на панели ссылок название кнопки перехода на домашнюю страницу, вы должны воспользоваться вкладкой Переходы диалогового окна Настройка веб-узла (Web Settings) (рис. 7).

Рис. 7. Диалоговое окно Настройка веб-узла

Для открытия этого окна воспользуйтесь командой Настройка веб-узла (Web Settings) из меню Сервис (Tools). Затем в текстовое поле Домашняя страница (Home page) вместо Домой введите новое название ссылки и нажмите кнопку ОК. Просмотрите, как теперь выгладят панели ссылок. Походите по страницам Web-узла.

Совет

Используя вкладку Переходы диалогового окна Настройка веб-узла, помимо кнопки Домой панели ссылок можно изменить названия кнопок, позволяющих перемещаться по страницам Web-узла одного уровня иерархии.

4.3. Изменение темы оформления Web-узла

Шрифты, цвет текста и гиперссылок, фоновое изображение персонального Web-узла определены темой, заданной мастером по умолчанию. Для изменения темы оформления Web-узла воспользуйтесь диалоговым окном Темы (Themes) (Рис. 8), открываемым командой Тема (Theme) из меню Формат (Format). На Рис. 9. показан вид домашней страницы Web-узла после изменения Темы Web-узла.

Рис. 8. Диалоговое окно Темы Web-узла

Рис. 9. Вид домашней страницы после изменения Темы Web-узла4.4. Переименование Web-узла

При создании Web-узла имя, которое вы ему даете, используется также в качестве имени папки на диске, где расположен Web-узел. Вы можете переименовать свой узел в любой момент. Выберите Tools > Web Settings (Сервис > Настройка Web-узла) и в диалоговом окне Web Settings (Настройка Web-узла) щелкните на вкладке Общие (рис. 10). В поле Web name (Имя веб-узла) можно указать новое имя Web-узла. Помните, что имя должно соответствовать правилам указания имен файлов сервера или операционной системы, с которой ведется работа. (Рекомендуется использовать только латиницу без заглавных букв)

Рис. 10. Диалоговое окно Настройка Web-узлаНазвание Web-узла может быть изменено в любой момент, но, так как имя Web-узла входит в состав его URL, избегайте переименований после того, как узел введен в эксплуатацию. Пользователи, которые добавили ваш узел в список закладок или «избранных» узлов, не смогут найти его после изменения URL.

4.5. Перемещение Web-узла

Для перемещения Web-узла не существует какой-либо специальной команды, но вы можете сделать это в два приема. Сначала скопируйте узел в новое место командой File >• Publish Web (Файл > Опубликовать Web узел). Затем удалите оригинал Web-узла.

4.6. Удаление Web-узла

Для удаления Web-узла с сервера или локального диска необходимо выполнить следующие действия.

Откройте узел во FrontPage.

Отобразите файлы узла либо в списке Folders List (Список папок), либо в режиме Folders (Папки).

Выберите папку, расположенную в Web-узле на самом верхнем уровне (имяэтой папки соответствует названию Web-узла).

4. Выберите команду меню Edit >• Delete (Правка > Удалить) или нажмите клави­шу Delete. Отображаемое при этом диалоговое окно Подтверждение удаления предлагает на выбор два варианта удаления узла. Можно удалить из узла только служебные файлы FrontPage, оставив все остальное без изменений, или же удалить все файлы Web-узла. При выборе второго варианта Web-узел, включая все входящие в его состав папки и файлы, будет удален без возможности восстановления.

Рис. 10. Диалоговое окно Подтверждение удаления5. Модификация Web-узла

Изменяя свойства объектов, размещая необходимую информацию и используя результаты выполнения лабораторных работ № 1,2,3, модифицируйте Web-узел. Добавьте текст, замените фотографии, избранные ссылки. Используйте стандартные скрипты, предоставляемые хостингом: - Форум, Гостевая книга, Голосование, Счетчик посещений и т. д. При возникновении вопросов или неясностей вы можете обратиться к Методическим Указаниям4 Дополнение или к соответствующим разделам пособия [1]. Таким образом, вы создадите свой личный персональный Web-узел.

6. Протестируйте и настройте Web-узел (См. Методические указания, раздел 4).

7. Опубликуйте Web-узел (См. Методические указания раздел, 5 и список Хостинги).

8. Вновь протестируйте и настройте Web-узел, добиваясь приемлемого времени загрузки страниц и правильной работы всех ссылок..Структура сайта

odtdocs.ru

ЛАБОРАТОРНАЯ РАБОТА 1 РАЗРАБОТКА СТРУКТУРЫ ВЕБ-САЙТА СОЗДАНИЕ ПРОСТЕЙШИХ ВЕБ-СТРАНИЦ

Разработка структуры веб-сайта15

ЛАБОРАТОРНАЯ РАБОТА 1

РАЗРАБОТКА СТРУКТУРЫ ВЕБ-САЙТА.

СОЗДАНИЕ ПРОСТЕЙШИХ ВЕБ-СТРАНИЦ

  1. ЦЕЛЬ РАБОТЫ

Целью работы является получение навыков проектирования и тестирования (исследования) веб-сайтов с помощью редактора HTML-страниц. В качестве редактора используется пакет прикладных программ Microsoft FrontPage.

  1. СВЕДЕНИЯ ИЗ ТЕОРИИ

    1. Проектирование структуры веб-сайта

Разработка структуры сайта необходима для:

  • создания четкой и логичной схемы навигации;

  • организации простой технологии внесения изменений при редактировании сайта.

Для достижения этих целей процесс создания структуры принято рассматривать в двух аспектах. Фактически проектируются две структуры: логическая и физическая. Логическая структура определяет, в какой последовательности материалы будут доступны пользователю, какие ссылки следует выбирать для доступа к информации, размещенной на сайте. Хорошо продуманная логическая структура гарантирует, что на поиск необходимых данных будет затрачено меньше времени, и что они всегда будут найдены. Для создания полноценной логической структуры достаточно следовать нескольким простым правилам:

  • любой документ сайта должен оказываться доступным не более чем с помощью трех переходов с главной страницы сайта;

  • все навигационные элементы должны отображаться сразу после загрузки страницы;

  • все внутренние связи должны быть двунаправленными, то есть позволять перемещаться между документами в обоих направлениях;

  • с любой страницы должен быть предусмотрен возврат на главную страницу сайта;

  • названия рубрик и распределение материала между ними должно быть понятным каждому посетителю сайта.

  • если сайт имеет более одного уровня навигации, он обязательно должен содержать навигационную карту.

  • для удобства посетителей, каждый сайт должен иметь простую, четкую и логичную схему навигации.

Пример логической структуры веб-сайта показан на рис. 1.1.

Рис. 1.1. Логическая структура сайта

Существует несколько видов логических структур сайта. Самая простая из них – линейная [1]. В ней страницы следуют одна за другой, и пользователь должен просматривать их последовательно, как слайд-шоу. Недостатков у такой структуры достаточно много. Как следствие, область ее применения ограничена. Она может использоваться на сайтах-презентациях и в онлайновых учебных пособиях. Самый простой вариант сайта с линейной структурой – набор страниц, с каждой из которых есть ссылка на следующую и на предыдущую. Однако и здесь начинающие авторы допускают ошибки. Дело в том, что на каждой странице обязательно должны присутствовать соответствующий заголовок и ссылка на первую страницу. В противном случае посетители, попавшие в середину сайта – например, в результате обращения поисковой системы, не смогут сориентироваться в ситуации, и покинут проект разочарованными. Кроме того, полезно показывать общее число страниц в отображаемом документе и выделять номер той из них, которая воспроизводится в данный момент времени.

Следующим вариантом структуры сайта является линейная структура с альтернативами и вариантами. Ее основой остается простое линейное размещение страниц. Однако на сайтах, построенных по данному принципу, посетители могут проявить некоторую инициативу, позволяющую облегчить поиск нужной информации. Под альтернативами здесь понимается выбор между двумя ветвями перемещения. Чаще всего подобная структура используется для сбора информации о посетителе. Примером может служить процесс регистрации клиента на сайте фирмы, оказывающей определенные услуги. Работа всегда начинается со стартовой страницы. Однако затем частным лицам предлагается ввести одну информацию, а представителям организаций – другую. Возможно, ветви альтернатив в дальнейшем вновь смыкаются, и все пользователи попадают на одну и ту же страницу.

Третий вариант носит название линейной структуры с ответвлениями. Это тоже контролируемая структура перемещения по ресурсам, наглядный аналог которой – дорога с ответвляющимися от нее тупиковыми тропами. Иными словами, посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на любой из них, его заинтересовала, и он желает ознакомиться с ней подробнее, то ему предоставляется возможность перейти на ответвление, а потом вернуться обратно на основную "дорогу". Главное преимущество такой структуры состоит в том, что к ней легко перейти с обычного линейного размещения страниц. Часто бывает, что однажды созданный сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам нежелательна. В этом случае автор может без затруднений расширить свой проект. И его сайт не утратит четкости логических связей.

Следующий вариант – древовидная структура (рис. 1.1) – универсальный и в большинстве приложений наиболее предпочтительный способ размещения страниц. Она хорошо зарекомендовала себя для создания практически любых типов сайтов. Пользователь, попадая на главную страницу, оказывается перед выбором, в каком направлении двигаться дальше. После перехода в нужный раздел, он выбирает необходимый подраздел, затем пункт (параграф) и т.д. У древовидной структуры достаточно много достоинств, однако и она не лишена недостатков. Остановимся на главном из них.

В древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Формальные критерии либо тривиальны, либо рассчитаны на узкие группы пользователей. Успех зависит от опыта, интуиции и квалификации автора. Если "дерево" сайта будет расти только вглубь, то посетителям, чтобы найти необходимую информацию, придется загрузить и просмотреть слишком много страниц. Естественно, это занимает много времени и раздражает. Если же создается очень широкая древовидная структура, то приходится тратить время по другой причине – для выбора нужной ветви поиска. Использование древовидной структуры сайта вынуждает постоянно следить за ее разрастанием и придерживаться золотой середины. Качество работы автора зависит от его мастерства, а не от соблюдения формальных правил.

Еще одним вариантом является решетчатая структура. Эта структура заметно сложнее рассмотренных ранее. В ней все страницы также размещаются в различных ветвях. Однако пользователю дается возможность перемещаться по ним не только вертикально (вверх и вниз), но и горизонтально (то есть между ветвями разных уровней). Используется «решетка» в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью ссылок на рубрики в других разделах.

Использование решетчатой структуры в других проектах считается нецелесообразным. Во-первых, она относительно сложна в реализации. Во-вторых, обращаться с «решеткой» нужно с очень большой осторожностью. В противном случае в схеме возникают непредусмотренные связи, и поиск информации приводит к непредсказуемым результатам.

Физическая структура не влияет на просмотр страниц посетителями и служит в основном для удобства создателя сайта при его редактировании, позволяя легко найти нужный файл (документ) [2]. При проектировании физической структуры разработчик может ненадолго забыть о пользователях и немного подумать об удобствах сопровождения сайта. Обычно распределяют отдельные папки для каждого из его разделов и подразделов. Внутри папок также создают отдельные папки для вспомогательных изображений, отдельные папки для мультимедиа-информации (музыка, видео, и т.п.) – то есть файлы сайта разделяются по функциональным признакам. В простом статическом сайте можно четко определить несколько групп файлов:

  • страницы сайта, представляющие собой HTML-файлы;

  • таблицы стилей;

  • клиентские скрипты;

  • графические файлы, используемые в дизайне сайта;

  • файлы для копирования посетителями.

Особое место занимает вопрос, связанный с выбором имен файлов. Логично и понятно названный файл позволяет сэкономить время при обновлении сайта. Кроме того, при передаче поддержки сайта другому сотруднику, будет гораздо легче объяснить, где находится та или иная информация. Возможно, на первых порах это кажется неважным, однако опыт показывает, что разбираться в структуре неудачно именованного сайта довольно затруднительно.

Прежде всего – не следует называть файлы безликими именами, такими как page1.htm, 123.htm и т.п. Необходимо, чтобы при взгляде на список файлов сразу становилось понятно, что в них содержится. Другими словами, называть файлы следует исходя из содержательного смысла документа. Если страница излагает общую информацию о компании, то принято называть ее about.htm, а страницу с контактной информацией – contacts.htm.

В некоторых случаях для группы файлов могут использоваться похожие наименования, состоящие из базового имени и цифры. Например, если вы периодически пишете статьи на своем сайте, то файлы удобно называть последовательно: article_1.htm, article_2.htm, article_3.htm и т.д. Заметим, что в качестве разделителя базового имени и цифры используется знак подчеркивания. Он позволяет отделить номер статьи, что способствует быстрому нахождению нужного файла.

При формировании имен файлов можно взять за основу либо русский язык, либо английский. Так как использовать русские символы в именах файлов нельзя (причины этого описаны ниже), то при использовании русского в качестве базового языка необходимо писать имена файлов в транслитерации (русские слова латинскими буквами). В этом случае страницу с описаниями услуг можно назвать, например, uslugi.htm, а страницу с информацией об истории фирмы – istoriya.htm. Предпочтительно использовать в качестве основного языка английский, потому что в этом случае слова будут корректно индексироваться поисковыми системами, а значит, при корректном запросе по теме вашего сайта релевантность (степень соответствия поисковому запросу) вашей страницы будет выше. Не следует лишь забывать о правильном написании английских слов. Кроме этого, если имена файлов используют английский язык, то человек, который попал на вашу страницу и не знает русский язык, сможет догадаться, о чем идет речь. Выбрав язык для использования в именах файлов, придерживайтесь его в пределах всего сайта. Не допускайте чередования английских и русских имен файлов.

Для зависимых файлов, например, для иллюстраций к какой-либо странице, удобно использовать следующее правило: имя графического файла образуется из названия страницы и идентификатора иллюстрации, разделенных знаком подчеркивания. В качестве идентификатора иллюстрации может использоваться либо порядковый номер появления ее в документе, либо, что предпочтительнее, некоторый идентификатор, позволяющий легко опознать ее. Допустим, что наша статья называется article_1.htm, и в ней используются иллюстрации – пусть это будут фотографии сотрудников отдела и схема их взаимного подчинения. Тогда имена графических файлов, образованных согласно данному правилу, будут соответствовать конкретным фамилиям, например: article_1_ivanov. jpg,article_1_petrov.jpg, article_1_sidorov.jpg, а иерархия отношений – штатной схеме отдела: article_1_scheme.gif.

Для части графических файлов, преимущественно участвующих в создании дизайна сайта, удобно использовать префиксы и суффиксы. Если спроектировано графическое меню сайта, которое подсвечивается при наведении курсора манипулятора мышь, то все графические файлы, формирующие меню, можно предварять префиксом «m_», а к названиям изображений, которые появляются при наведении мышью, добавлять суффикс «_over». Тогда название графического пункта меню, например "О компании", будет состоять из двух файлов – «m_about.gif» и «m_about_over.gif».

Префиксы удобно добавлять к таким изображениям, которые могут изменяться в зависимости от типа страницы. Приведем несколько часто используемых префиксов:

  • «bg_» (background) – для фоновых изображений;

  • «m_» (menu) – для пунктов графического меню;

  • «t_» (title) – для графических заголовков;

  • «icon_» – для пиктограмм;

  • «button_» – для графических кнопок, не являющихся элементами меню.

В качестве «корня» слова, образующего имя файла, удобно использовать название страницы, к которой относится данная графика. В приведенном примере «корнем» выступала страница about. Продолжим упражнения с ней и образуем имя файла, используемого как подложки этой страницы – получится имя bg_about.gif. Разумеется, имеет смысл это делать, если фоновый рисунок на разных страницах различный. Если же он везде одинаковый, то файл достаточно назвать просто bg.gif. Такова основа методики формирования имен файлов.

Перечисленные шаги выполняются с единственной целью – облегчить ориентирование в огромном количестве файлов, из которых состоит любой современный сайт. В результате нетрудно найти нужную html-страницу и все относящиеся к ней иллюстрации, а также понять содержимое графических файлов, даже не заглядывая в них.

При создании имен файлов следует помнить об ограничениях, накладываемых со стороны операционных систем. Например, в формате UNIX-систем index.html и Index.html – разные файлы, а с точки зрения Windows – одни и те же. Нужна осторожность при использовании русских букв в именах файлов – преобразование символов из одной кодировки в другую превратит файл "галерея.htm" в "ЗБМЕТЕС.htm".

Рассмотрим инструментальное средство разработки сайтов, применяемое в лабораторных работах по курсу «Пакеты прикладных программ».

    1. Краткое описание среды Microsoft Frontpage

Достаточно подробное описание среды проектирования изложено в [3]. Помимо редактора HTML-страниц, она включает средства управления веб-сайтами. На рис. 1.2 представлено окно системы после запуска. Все средства манипуляции сайтами вызываются с помощью левой панели инструментов. Обращение к средствам редактирования страниц осуществляются через меню и верхнюю панель инструментов. Схема работы проста: задать структуру узла, упаковать в эту структуру свои страницы и создать связи между ними.

В состав FrontPage входят несколько заготовок сайтов с различной структурой страниц (рис. 1.3). При входе в систему автоматически создается веб-сайт, содержащий одну веб-страницу. Если вы желаете воспользоваться такой заготовкой – необходимо обратиться в меню «Файл»/«Новый»/«Сайт». Появится окно выбора заготовки сайта. Не нужно описывать все возможные заготовки. Для выполнения лабораторной работы достаточно использовать:

  • One Page Web – веб-сайт с одной, заглавной, веб-страницей;

  • Empty Web –упомянутый веб-сайт с одной безымянной веб-страницей;

  • Personal Web – прототип персонального веб-сайта с несколькими страницами (фотоальбомом, списком интересов и т.д.).

Заготовки «Пустой узел» или «Одностраничный узел» помогают создать любой сайт «с нуля», не навязывая определенного стиля или структуры сайта. Для управления структурой сайта существует панель инструментов, расположенная слева (рис.1.2). По нажатию кнопки «Страница» появляется редактор HTML-страниц. Кнопка «Папки» предъявит список папок, входящих в состав сайта. Папками можно манипулировать: создавать, удалять, перемещать. Все эти функции доступны через меню «Файл» и контекстное меню, вызываемое щелчком правой кнопки «мыши» на имени папки. С помощью подменю «Обратить в сайт» папку пакуют в отдельный, не зависимый от ныне редактируемого, сайт. Нажатие кнопки «Отчеты» вызовет список отчетов о страницах, входящих в веб-сайт. Двойной щелчок левой кнопки «мыши» по элементу списка выводит на экран более подробную информацию по выбранной категории отчета.

Рис. 1.3. Выбор заготовки сайта

Перейдем к главному в системе Front-Page, к редактору веб-страниц. Собственно редактор состоит из трех закладок: «Нормальный», «HTML» и «Просмотр». Это – три режима работы со страницей.

Режим «Нормальный» предназначен для редактирования страницы практически точно в таком же виде, как она будет выглядеть в процессе просмотра Web-страницы пользователем сети Интернет. Другое название режима – «видишь то, что получишь», т.е. страница отображается практически точно в таком же виде, как она будет выглядеть в программе просмотра, такой как Internet Explorer. В этом режиме на экране представлены заголовок страницы, панель навигации в виде кнопок под заголовком, панель навигации в виде гиперссылок в левой части страницы – и текст в правой части. Параметры панели навигации в виде кнопок можно изменять. Эти изменения распространятся на все страницы сайта, поскольку созданные автоматически панели находятся в общих для всех страниц областях, расположенных по краям страницы. Можно удалить лишнюю панель навигации, можно добавить новую панель.

По второй закладке вы попадаете в окно редактора HTML. Здесь отображен код, который вы набирали клавишами в первом окне. Существует и обратная связь – все то, что вы написали во втором окне, найдет свое отражение в первом. Режим HTML позволяет редактировать страницу в текстовом представлении. Используйте этот режим, когда хорошо овладеете языком разметки гипертекстов.

По третьей закладке попадаем в окно просмотра, которая покажет, как ваша веб-страница будет выглядеть в браузере. Режим «Просмотр» позволяет не только просмотреть страницу в том виде, в котором ее отобразит браузер, но и проверить функции этой страницы, такие как: переходы по ссылкам, корректное отображение рисунков, использование объектов и форм и т.д.

Первая закладка редактора веб-страниц практически совпадает с окном Microsoft Word. Нас в большей степени привлекает меню, остановимся на нем подробнее.

Первое «собственное» меню в FrontPage – это «Обзор». Помимо дублирования левой панели инструментов, оно содержит пункт «Показать теги», щелчок по которому включает или выключает режим показа тегов при редактировании документа на первой закладке редактора. Меню «Вставка» служит для вставки в документ различных объектов: картинок, форм, компонентов, документов в формате других приложений Microsoft Office. Будьте внимательны при добавлении компонентов в формы – для того, чтобы они заработали, на веб-сервере должны быть установлены FrontPage Web Server Extensions. Дело в том, что Microsoft разработала свой метод обмена данными между клиентским компьютером и сервером, который реализован с помощью так называемых веб-ботов. Веб-ботом и является компонент FrontPage для обеспечения передачи данных. Эта технология поддерживается только веб-серверами, на которых установлен FrontPage Web Server Extensions. Веб-бот может вызвать функцию записи информации, введенной в форму, в файл, функцию поиска по сайту, функцию вывода даты последнего обновления страницы и т.д.

В меню «Формат» особого внимания заслуживают два пункта: «Динамик HTML эффекты» и «Тема». «Динамик HTML эффекты» вызывает окно добавления реакций на различные события, происходящие с произвольным элементом веб-страницы. В результате добавления эффекта в теле документа появляется заготовка функции на языке JavaScript, которую вы заполняете в соответствии со своим замыслом.

Пункт «Тема» предназначен для оформления веб-страницы аналогично одному из шаблонов (тем), предлагаемых создателями FrontPage.

  1. ПОДГОТОВКА К ВЫПОЛНЕНИЮ РАБОТЫ

    1. Подготовить сменный носитель (дискету, flash-накопитель) для сохранения результатов работы с целью их дальнейшего использования в работах №№ 2 – 4.

    2. По рекомендованной литературе [1 – 7] ознакомиться с принципами работы в среде Microsoft FrontPage.

    3. Ознакомиться с базовыми элементами языка HTML.

    4. Выбрать тематику будущего веб-сайта.

    5. Ознакомиться с дизайном и структурой существующих веб-сайтов.

    6. Подготовить текст теоретических разделов отчета о работе.

    7. Ответить на контрольные вопросы настоящих методических указаний.

  1. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

    1. РАЗРАБОТКА ЛОГИЧЕСКОЙ СТРУКТУРЫ ВЕБ-САЙТА. Определите тип и количество информации, которая будет помещена на сайт. В результате должно получиться не менее пяти разделов. К полученным разделам обязательно добавьте разделы «Анкета» и «Гостевая книга».

    2. ВЫБОР ВИДА ЛОГИЧЕСКОЙ СТРУКТУРЫ САЙТА. Выберите вид логической структуры веб-сайта в соответствии с рекомендациями, данными в разделе 2.1. Предпочтительной является древовидная структура сайта. Подобную структуру имеет сайт, описываемый ниже в качестве примера.

    3. ЛОКАЛИЗАЦИЯ ПРОЕКТА. Средствами Windows создайте папку для хранения файлов вашего сайта. Создайте в ней подпапки в соответствии с разработанной физической структурой сайта. При разработке физической структуры рекомендуется создавать отдельную подпапку для каждого раздела (остальные рекомендации сформулированы в разделе 2.1).

    4. ЗАПУСК MICROSOFT FRONTPAGE. Запустите среду создания веб-сайтов Microsoft Frontpage (Пуск – Программы – Microsoft Frontpage).

    5. СОЗДАНИЕ СТРАНИЦ САЙТА. В появившемся окне редактора веб-страниц введите необходимую информацию.

      1. Нажмите правую кнопку мыши и выберите меню «Свойства страницы». Пройдите по всем закладкам появившегося окна и установите все необходимые вам свойства. Особое внимание обратите на последнюю закладку, на которой устанавливаются языковые параметры (рис. 1.4).

      2. Введите информацию, необходимую для размещения на титульной странице (рис. 1.5). Сохраните полученный файл.

      3. Создайте новую страницу. Расположите на ней элементы меню сайта в соответствии с созданной логической структурой (рис. 1.6).

      4. Создайте остальные страницы сайта (кроме анкеты и гостевой книги) в соответствии с разработанной структурой. Наполните их информацией. На одну из страниц поместите крупный блок информации, преимущественно текстовой (рис. 1.7).

      5. Позаботьтесь о том, чтобы сделать дизайн сайта привлекательным для посетителей, используя предоставленные вам изобразительные средства.

    6. ЗАВЕРШЕНИЕ РАБОТЫ. Сохраните получившиеся страницы и перепишите созданные файлы на заранее подготовленный носитель. Выйдите из Frontpage, выключите компьютер.

  1. СОДЕРЖАНИЕ ОТЧЕТА

Отчет о работе должен содержать следующие материалы в соответствии с полученным индивидуальным заданием:

    1. Обоснование выбора структуры сайта (по материалам п. 2.1).

    2. Схему логической структуры созданного сайта (по материалам п. 2.1).

    3. Схему физической структуры созданного сайта (до уровня файлов – по материалам п. 2.1).

    4. Словесную постановку задачи лабораторной работы (по материалам индивидуального задания).

    5. Последовательность выполнения работ в среде Microsoft FrontPage для создания сайта (по материалам п. 2.2).

    6. Формализацию выполненного индивидуального задания (разделение структуры и оформления создаваемых документов).

    7. Ответы на контрольные вопросы и выводы по выполненной работе.

  1. КОНТРОЛЬНЫЕ ВОПРОСЫ

    1. Перечислите наиболее распространенные виды логических структур веб-сайтов (по материалам п. 2.1).

    2. Почему в именах файлов нежелательно использование символов русского алфавита (по материалам п. 2.1)?

    3. С какой целью (для использования в какой части сайта) мог быть создан файл bg_about_me.jpg(по материалам п. 2.1)?

    4. Сформулируйте принцип организации, преимущества, недостатки и область применения решетчатой структуры сайта (по материалам п. 2.1).

    5. Укажите достоинства и недостатки пакета Microsoft FrontPage как универсального инструмента для обмена и управления узлами в Web в сравнении с другими средствами редактирования HTML-страниц (см., например, [4]).

    6. Параметры (атрибуты) какого элемента определяются заново при изменении в редакторе цвета фона веб-страницы (см., например, [4])?

    7. Какими атрибутами или какими элементами HTML устанавливаются наклон, толщина, подчеркивание и другие особенности шрифта в тексте и его фрагментах (см., например, [4])?

Приобретение навыков проектирования HTML-страниц

textarchive.ru