- Добавить в Избранное
-
Сделать стартовой
 
Содержание
Глава 1- 18
Как создаются Web-страницы
Основные принципы работы с Dreamweaver
Начинаем с текста
Рисунки,звуки,фильмы
Таблицы
Работа с Web-сайтом
Фреймы
Табличный дизайн
Использование шаблонов
Каскадные таблицы стилей
Свободно позиционируемые элементы
Анимация элементов Web-страниц
Использование сценариев
Метатегн и серверные директивы
Введение в серверное программирование
Формы
Простейшие серверные приложения
Создание интерактивных сайтов
На заметку
Установите на своем сайте нашу кнопку:

Вебмастеру - портал о редакторе Macromedia Dreamweaver MX. Создание сайтов.


    1  2  3  4  5  6  7  8    
Создание обычных гиперссылок
А создаются они очень просто. И в этом — большая заслуга разработчиков Dreamweaver , сделавших продукт, реализующий просто даже весьма сложные задачи.
Но хватит петь дифирамбы Dreamweaver . Давайте попробуем его в настоящем деле! Вставим в текст нашей пока что единственной Web -страницы две гиперссылки, указывающие "вовне" нашего сайта: на "домашний" сайт фир­ мы Macromedia — создателя Dreamweaver и на почтовый адрес гипотетического Ивана Ивановича. Щелкнув по первой из них, пользователь сможет попасть на сайт http://www.macromedia.com , а щелкнув на второй — написать письмо Ивану Ивановичу. Второй ссылкой мы займемся чуть позже, а пока...
Выделим название фирмы Macromedia и обратим внимание на редактор свойств. Мы сразу заметим большое поле ввода интернет-адреса для гиперссылки
Все, что нам нужно сделать, — это ввести в него интернет-адрес сайта Mac romedia и нажать клавишу < Enter >. Результат появится сразу. Теперь при просмотре в Web -обозревателе пользователь может просто щелкнуть мышью по слову " Macromedia ", чтобы перейти на "домашний" сайт этой фирмы.
Вы уже заметили, что после вставки гиперссылки слово " Macromedia " изменило свой цвет на синий и стало подчеркнутым, хотя мы явно не задавали для него никакого HTML -форматирования. Дело в том, что, согласно стан­дарту HTML , текст-содержимое гиперссылок форматируется особым образом, чтобы его всегда можно было отличить от остального текста. И по умолчанию все ссылки, еще не посещенные пользователем, выделяются синим цветом.
Для создания гиперссылки из выделенного текста вы также можете вос­ пользоваться пунктом Make Link меню Modify или контекстного меню или нажать комбинацию клавиш < Ctrl >+< L >. После этого на экране появится диалоговое окно Select File . Нужный адрес вводит­ ся в поле ввода URL этого окна. Остальные элементы управления лучше пока не трогать — мы рассмотрим их позже, когда будем связывать воедино все Web -страницы нашего сайта. Не забудьте нажать кнопку ОК, чтобы Dreamweaver создал эту гиперссылку.
Вы, вероятно, обратили внимание, что справа от поля ввода интернет-адреса находятся две небольшие кнопки. Кнопка в виде мишени, находящаяся левее, нам пока бесполезна — мы рассмотрим ее, когда будем говорить об управлении сайтом, в главе 6. Кнопка в виде папки, находящаяся правее, позволит вам открыть то же самое диалоговое окно Select File .
Впоследствии вы можете изменить интернет-адрес вашей гиперссылки. Для этого поставьте текстовый курсор на текст гиперссылки, измените адрес и нажмите кнопку < Enter >. Вы также можете воспользоваться пунктом Change Link меню Modify или контекстного меню или нажмите комбинацию клавиш < Ctrl >+< L >. После этого на экране появится все то же незаменимое диалоговое окно Select File , в котором вы сможете изменить интернет- адрес.
Для удаления гиперссылки и превращения ее содержимого в обычный текст воспользуйтесь пунктом Remove Link меню Modify или контекстного меню или нажмите комбинацию клавиш
<Ctrl>+< Shift >+< L >.
Отлично! Мы имеем гиперссылку для перехода на сайт Macromedia . Чего еще желать?
Много чего. Например, мы можем сделать так, что при переходе на сайт Macromedia пользователь будет иметь возможность просматривать также и сайт Иванова. Как это сделать? Очень просто: мы откроем сайт Macromedia в новом окне Web -обозревателя.
Поставьте текстовый курсор где-нибудь в тексте гиперссылки и снова по смотрите на редактор свойств.
Этот список содержит четыре пункта, но сейчас полезными для нас будут только два: _ blank и _ self . Первый из них позволит вывести страницу, на которую указывает гиперссылка, в новом окне Web -обозревателя, а вто­ рой — в том же окне. (Вместо того чтобы выбирать второй пункт списка, вы можете просто оставить его содержимое пустым.) В данном случае вам нужно выбрать пункт _ blank .
Для задания цели гиперссылки вы также можете воспользоваться подменю Link Target меню Modify или подменю Target Frame контекстного меню. Для этого выберите нужный пункт-переключатель. Пункт Default Frame задает цель по умолчанию.
Примечание
Гиперссылка создается с помощью парного тега < А >, внутри которого помещается текст . Этот тег содержит обязательный атрибут href , задающий интернет - адрес назначения . Кроме того , данный тег может включать атрибут target , задающий цель гиперссылки .
Вот мы и сделали первую нашу гиперссылку. Теперь примемся за вторую.
Создание почтовых гиперссылок
Вторая гиперссылка будет слегка отличаться от первой. Хотя бы потому, что она указывает не на Web -страницу, а на почтовый адрес, и при щелчке на ней пользователь попадет в окно открывшейся программы почтового клиента, установленного в системе по умолчанию. И еще: гиперссылку, указывающую на почтовый адрес, нужно записать особым образом. Давайте вспомним интернет-адрес сайта Macromedia : http://www.macromedia.com и придумаем почтовый адрес, который может быть у нашего гипотетическо­ го Web -дизайнера Ивана Иванова: ivanov@somemail.ru
Немного теории. Почтовый адрес состоит из имени почтового ящика и имени сервера почты, разделенных символом "@" ("коммерческое эт", также известен как "собака", "ухо" или "улитка"). Вы можете провести аналогии между номером абонементного ящика и адресом почтового отделения, где этот ящик находится. Значок "коммерческое эт" — первый признак, что пе­ ред нами почтовый адрес.
Согласно стандарту HTML , этот почтовый адрес должен быть записан так: mailto:ivanov@somemail.ru причем между двоеточием после " mailto " и собственно адресом не должно быть пробела.
В последнем абзаце, где говорится об авторских правах, есть имя автора. Из него-то мы и сделаем гиперссылку, указывающую на почтовый адрес. Для этого выделим имя автора и введем почтовый адрес в приведенном выше формате в поле адреса редактора свойств. После нажатия клавиши < Enter > мы получим результат.
Как видите, эта гиперссылка внешне ничем не отличается от сделанной нами ранее. Фактически, гиперссылки, указывающие на Web -страницы и почтовые адреса, ничем не отличаются друг от друга. И чтобы не обескуражить пользователя, вам придется самим дать понять ему, что он получит в результате. Вы можете написать где-то в тексте, что это почтовый адрес, или сделать что-то еще.
К несчастью, из-за ошибки в Dreamweaver невозможно отредактировать почтовый адрес, помещенный в гиперссылку. Если вы выберете пункт Change Link в меню Modify (или нажмете комбинацию клавиш < Ctrl >+< L >), то вместо полного адреса в диалоговом окне Select File появится только ад­ рес почтового сервера. Так что вам для этих целей лучше воспользоваться редактором свойств.
Есть еще один способ создать гиперссылку, указывающую на почтовый адрес, более элегантный. Для этого необходимо либо переключиться на страницу Common панели объектов и щелкнуть кнопку Email Link , либо выбрать пункт Email Link в меню Insert . В результате этих действий на экране появится небольшое диалоговое окно Email Link
В поле Text самим Dreamweaver подставляется текст, который будет являться содержимым гиперссылки — имя, выделенное нами в окне документа. К сожалению, при этом Dreamweaver портит русский текст, превращая его в набор невразумительных черточек и квадратиков, так что вам, скорее всего, придется ввести его заново. В поле E - Mail вам нужно будет ввести почто­ вый адрес, причем ввести его нужно без " mailto :". После этого остается нажать кнопку ОК для создания гиперссылки или Cancel — для отказа от этого.
    1  2  3  4  5  6  7  8   Вверх
Copyright©  Бронников М.В 2004г.
Все вопросы комментарии направляйте по адресу SWMR@narod.ru 
  Akavita
Хостинг от uCoz