Практическая работа №3.

Практическая работа №3. Работа со ссылками
Ссылки позволяют осуществлять навигацию по всемирной сети интернет.
Различают несколько типов ссылок:
 Внутренние – предназначены для перемещения по сайту;
 Внешние – предназначены для выхода на другие сайты всемирной
сети;
 Ссылки внутри изображения;
 Ссылки для отправки электронной почты.
Шаг 1. Внутренняя ссылка
1. Создадим внутреннюю ссылку. Для этого откроем страницу News,
поставьте курсор после третьей картинки, нажмите Enter. Под картинками
напишем текст: После хорошего отдыха получаются хорошие работы!
2. Выделите текст «работы», щелкните правой кнопкой мыши и выберите
команду hyperlink (вставить ссылку).
3. Выберите из списка страницу our works (рис. 1). В строке Address
должен отобразиться путь к странице.
Рис. 1. Создание внутренней ссылки
4. Сохраните изменения, нажмите F12, проверьте работоспособность нашей
ссылки.
Шаг 2. Оформление страницы Our works (наши работы).
1. Измените заголовок Resume на Наши работы.
2. В качестве первой фотографии вставьте фото «плакат_3D». Уменьшите
рисунок, чтобы он не заходил за границу заголовка справа (рис. 2).
Рис. 2. Размещение первого рисунка на странице
3. Далее разместите все графические файлы последовательно друг за
другом. При уменьшении больших картинок изменяйте размер в HTML
коде (рис. 3).
Рис. 3. Изменение размера картинок в коде
4. Теперь разместим Flash ролики на нашу страницу. Под заголовком
Headline 3 разместите ролик стакан_Сисенко, выполните команду
Insert>Media>Flash Movie. Замените текст заголовка на «Освежись».
5. Поставьте курсор в свободное место под последней картинкой и
выполните команду Insert>Media>Flash Movie. Увеличьте ролик под
размер картинки. Вставьте все оставшиеся ролики.
6. Сохраните изменения, просмотрите страницу в браузере (разрешите
заблокированное содержимое при просмотре), измените размер роликов
при необходимости.
Примечание:
Чтобы удалить ссылку:
1. Щелкните правой кнопкой мыши по ссылке и выберите из контекстного меню
пункт Hyperlink Properties (Свойства ссылки).
2. В окне Edit Hyperlink нажмите кнопку Remove Link (Удалить ссылку) (рис.
4). Окно закроется, и текст перестанет быть ссылкой.
Рис. 4. Удаление ссылки
Шаг 3. Создание внешних ссылок
1. Откройте страницу links.htm. На этой странице разместим ссылку на
официальный сайт нашего колледжа.
2. Вместо
первой
ссылки
напечатайте
адрес
сайта
колледжа
http://k36.mskcollege.ru/
3. Выделите текст ссылки, щелкните правой кнопкой мыши и выберите из
контекстного меню команду Hyperlink (Ссылка).
4. Нажмите кнопку Browse the Web (Обзор Web), рис. 5.
Рис. 5. Создание внешней ссылки
5. Перейдите на страницу, на которую должна вести ссылка, и нажмите
комбинацию клавиш Alt+Tab. Адрес страницы появится в поле Address в
окне Insert Hyperlink. Нажмите ОК.
6. Самостоятельно
добавьте
ссылки
на
информационные
сайты:
www.yandex.ru, www.google.com и два сайта на ваш выбор.
7. Добавьте краткое текстовое описание для каждой ссылки, например для
Яндекса «перейдите по ссылке, если хотите быть в курсе последних
новостей».
8. Удалите лишние элементы страницы, за исключением заголовка
Headline3.
9. Сохраните изменения и просмотрите страницу в браузере.
Шаг 4. Создание почтовой ссылки.
1. Откройте страницу contact.htm.
2. Выделите текст, который должен стать ссылкой (ваш вбитый ранее
почтовый адрес), щелкните правой кнопкой мыши и выберите из
контекстного меню команду Hyperlink.
3. В окне Insert Hyperlink нажмите кнопку E-mail Address (Почтовый адрес)
(рис. 6).
Рис. 6. Создание почтовой ссылки
4. Введите тему письма (subject) и адрес, Expression Web автоматически
добавит в начало адреса схему mailto:.
5. Нажмите OK. Окно закроется, и выделенный текст станет ссылкой на
почтовый адрес.
Шаг 5. Открытие ссылок в новом окне.
Обычно при щелчке по ссылке браузер заменяет текущую страницу новой.
Но можно задать параметры ссылки так, что конечная страница будет
открываться в новом окне. Это особенно полезно для внешних ссылок,
поскольку в исходном окне посетитель будет по-прежнему видеть ваш сайт.
Чтобы задать место открытия ссылки:
1. Щелкните правой кнопкой мыши по ссылке на яндекс и выберите из
контекстного меню команду Hyperlink.
2. В окне Edit Hyperlink нажмите кнопку Target Frame (Конечный фрейм) (рис.
7).
3. В окне Target Frame выберите вариант New Window (Новое окно), рис. 8.
4. Нажмите OK. Окно закроется, и вы снова окажетесь в окне Edit Hyperlink.
5. Нажмите OK. Окно закроется, и место открытия ссылки будет изменено.
Рис. 7. Открытие сайта по ссылке в новом окне
Рис. 8. Выбор варианта открытия сайта
Шаг 6. Создание всплывающих подсказок для ссылок
В Expression Web всплывающие подсказки называются ScreenTips. Когда
вы проводите курсором над ссылкой на какой-нибудь странице, появляется
короткий текст, описывающий, куда ведет ссылка. Конечно, задавать этот
параметр не обязательно, но, поскольку он помогает пользователям
ориентироваться, делайте это, когда есть возможность.
Чтобы добавить всплывающую подсказку:
1. Щелкните правой кнопкой мыши по ссылке на сайт нашего колледжа и
выберите из контекстного меню команду Hyperlink.
2. В окне Edit Hyperlink нажмите кнопку ScreenTip (Подсказка) (рис. 9).
Рис. 9. Вход для создания подсказки для ссылки
3. В окне Set Hyperlink ScreenTip (Задать подсказку для ссылки) введите текст
подсказки (рис. 10).
Рис. 10. Ввод подсказки для сайта
4. Нажмите OK. Окно закроется, и вы снова окажетесь в окне Edit Hyperlink.
5. Нажмите OK. Окно закроется, и для ссылки будет задана всплывающая
подсказка.
6. Создайте подсказки для других ссылок.
7. Нажмите клавишу F12 для запуска браузера и проведите курсором над
текстом ссылки, чтобы увидеть всплывающую подсказку в действии.
Шаг 7. Инструменты для работы со ссылками
В режиме Hyperlinks (Ссылки) вы можете быстро найти и поправить
«битые» (никуда не ведущие) ссылки внутри своего сайта. Обязательно
тестируйте все ссылки; ничто так не раздражает посетителей, как ссылки,
ведущие в никуда.
Чтобы воспользоваться режимом просмотра ссылок:
1. Откройте Web-сайт, перейдите на вкладку Web Site (Сайт) в верхней
части окна редактирования и нажмите кнопку Hyperlinks (Ссылки),
которая расположена в нижней части окна (рис. 11).
Рис. 11. Структура ссылок сайта
2. Чтобы получить общее представление о сайте, щелкните по его
начальной странице (в данном примере default.htm). В режиме просмотра
ссылок показываются все ссылки, ведущие на начальную страницу и с
нее.
3. Чтобы проанализировать какую-либо из представленных на этой
диаграмме страниц, щелкните по ней правой кнопкой мыши и выберите
из контекстного меню команду Move to Center (Переместить в центр)
(рис. 12). Теперь в центре отображаются выбранная страница и
связанные с ней ссылки.
Рис. 12. Связь страницы Our works с другими страницами
Чтобы проверить все ссылки на сайте:
1. Выполните команду Task Panes ⇒ Hyperlinks (Панели задач ⇒
Гиперссылки). На панели Hyperlinks перечислены все внутренние
«битые» ссылки, а непроверенные внешние помечены вопросительным
знаком (рис. 13).
2.
3.
Рис. 13. Анализ состояния ссылок
Нажмите кнопку Verify Hyperlink (Проверить гиперссылки), чтобы
начать проверку.
В диалоговом окне Verify Hyperlinks отметьте переключатель Verify all
hyperlinks (Проверить все ссылки) (рис. 14) и нажмите кнопку Start
(Начать).
Рис. 14. Проверка всех ссылок
4.
Спустя некоторое время на панели Hyperlinks будет показано состояние
всех ссылок на сайте.
Чтобы исправить битые ссылки:
1. Находясь на панели Hyperlinks, щелкните правой кнопкой мыши по «битой»
ссылке (на это указывает значок разорванной цепочки) и выберите из
контекстного меню команду Edit Hyperlink (Изменить ссылку).
2. В диалоговом окне Edit Hyperlink нажмите кнопку Browse (Обзор) и укажите
страницу, на которую следует перейти.
3. После того как нужная страница будет задана, вы снова окажетесь в окне
Edit Hyperlink. Решите, что вы хотите сделать: исправить эту ссылку на всех
страницах (это наиболее вероятное решение, оно подразумевается по
умолчанию) или только на некоторых. Нажмите кнопку Replace (Заменить).
Спустя некоторое время панель Hyperlinks перерисовывается, исправленной
«битой» ссылки на ней уже не будет.
Когда исправляется внешняя ссылка, против нее на панели Hyperlinks
изображается вопросительный знак и статус Unknown (Неизвестно). Нажмите
кнопку Verify Hyperlink (Проверить ссылку), чтобы снова открыть диалоговое
окно Verify Hyperlinks. После успешной проверки вопросительный знак
заменяется галочкой (рис. 15).
Рис. 15. Проверка внешних ссылок
4. Повторяйте описанные шаги до тех пор, пока «битых» ссылок не останется.