КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Создание Web-страниц в приложении FrontPage
|
|
|
|
Использование таблиц
Гиперссылки и рисунки в Web-документах
РАЗРАБОТКА WEB-СТРАНИЦ
Практикум
1. В текстовом редакторе Блокнот создать HTML -документ с произвольным содержимым, включающий текст, списки. Определить различный шрифт текста.
2. Просмотреть созданный документ в браузере.
Гиперссылки. В HTML -документах переход от одного фрагмента текста к другому задается с помощью тэга вида:
<a href="[ адрес перехода ]"> выделенный фрагмент текста </a>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов:
1. Чтобы организовать ссылку на другой документ надо задать имя этого HTML -документа, к которому нужно перейти. Например: <a href="primer1.htm"> столица </a>
Такой текст приведет к появлению в документе гиперссылки, т.е. подчеркнутого текста столица, при нажатии мышкой на который в текущее окно будет загружен документ с именем primer1.htm.
Если в адресе перехода не указано место размещения этого документа, то он компьютер будет искать его в текущей папке.
2. Если необходимо дать ссылку на документ, находящийся на другом компьютере, нужно использовать тэг, например, вида:
<a href="http://www.ok.open.by/about.htm"> информация </a>
3. При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку или закладку.
Пусть, например, необходимо осуществить переход из файла 1.htm к словам "Раздел 5" в файле 2.htm (файлы находятся в одной папке).
Прежде всего, необходимо создать в файле 2.htm следующий тэг:
<a name="aaa"> Раздел 5 </a>
Слова "Раздел 5" при этом никак не будут выделены в тексте документа. Затем в файле 1.htm можно определить переход на этот тэг:
<a href="2.htm#aaa"> Переход к разделу 5 </a>
4. Если пользователь совершит переход по ссылке:
<a href="mailto:user@mail.box"> Послать письмо </a>
то у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: (Куда) окна почтовой программы будет указано user@mail.box.
Изображения в HTML-документе. В HTML-документах используются графические файлы в формате *.gif или *.jpg. Для вставки изображения с именем picture.gif, находящегося в одной папке с HTML-документом, надо использовать тэг вида:
<img src="picture.gif">
Такой тэг может также включать атрибут alt="[текст]", например:
<img src="picture.gif" alt=" Картинка ">
Встретив такой тэг, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут alt может оказаться необходимым на случай, если у браузера отключена автоматическая загрузка изображений.
Цветовая гамма. Цвета всего HTML-документа определяются атрибутами, размещенными внутри тэга <body>: bgcolor − определяет цвет фона документа; text − определяет цвет текста документа; link − определяет цвет гиперссылки; vlink − определяет цвет ссылки на документ, который уже был просмотрен ранее; alink − определяет цвет ссылки, когда на нее указывает курсор мыши и нажата ее правая кнопка.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Например: bgcolor=#FFFFFF − цвет фона (здесь – белый), text=#000000 − цвет текста (здесь – черный), link=#FF0000 − цвет гипертекстовой ссылки (здесь – красный)
Тэг <body> может включать атрибут background="[ имяфайла ]", который задает изображение, служащее фоном для текста и других изображений. Фон должен быть представлен в формате gif или jpg. Браузеры заполняют множественными копиями изображения-фона все окно.
Цвет фона и изображение-фон не отображаются при выводе HTML -документа на печать, поэтому лучшене использовать текст белого цвета.
Пример 4.
| HTML-документ | Web - документ |
| <html> <head> <title>Пример 3</title> </head> <body> <h3> Минск - столица <a href="primer1.htm">Беларуси </a></h3> <p><img src="minsk.jpg"></p> <p>Щелкните по нижнему рисунку</p> <p><a href="pr.html"> <img src="chuch.jpg"></a></p> </body> </html> |
В этом примере используются файлы с рисунками minsk.jpg и chuch.jpg, которые хранятся в той же папке, что и исходный пример, а также устанавливается гиперсвязь с файлом primer1.htm, также хранящимся в этой же папке.
Страница может быть представлена в виде таблицы. Тогда в HTML -документе используются тэги <table> и </table>. Тэг может включать несколько атрибутов.
align − устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align = right (выравнивание вправо).
width − ширина таблицы. Ее можно задать в пикселах (например, width=400) или в процентах от ширины страницы (например, width=80%).
border − устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, border = 4). Если атрибут не установлен, таблица показывается без рамки.
cellspacing − устанавливает расстояние между рамками ячеек таблицы в пикселах.
Таблица может иметь заголовок (<caption>... </caption>),хотя он не является обязательным. Этот тэг также может включать атрибут ALIGN. Допустимые значения:
<caption align=top> (заголовок над таблицей) и <caption align=bottom> (заголовок под таблицей).
Каждая строка таблицы начинается с тэга <tr> и заканчивается тэгом </tr>. Он может включать атрибуты:
align − устанавливает выравнивание текста в ячейках (влево, по центру, вправо).
valign − устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign=top (выравнивание по верхнему краю), valign=middle (выравнивание по центру), valign=bottom (выравнивание по нижнему краю).
Каждая ячейка таблицы начинается с метки < td > и заканчивается меткой </td>. Тэг может включать следующие атрибуты:
nowrap – означает, что содержимое ячейки должно быть показано в одну строку.
colspan − устанавливает "размах" ячейки по горизонтали. Например, colspan=3 означает, что ячейка простирается на три колонки.
rowspan − устанавливает "размах" ячейки по вертикали. Например, rowspan=2 означает, что ячейка занимает две строки.
width − устанавливает ширину ячейки в пикселах.
height − устанавливает высоту ячейки в пикселах (например, height=40).
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект  . Ячейка таблицы может содержать в себе другую таблицу.
Для профессионального создания Web -страниц существуют специальные программы, которые называются гипертекстовыми редакторами. Одним из них является приложение FrontPage, которое входит в MS Office.
Окно редактора делится по вертикали на три части. Слева размещается панель переключателя режимов (Views). С помощью представленных в ней кнопок можно выбрать один из вариантов представления Web -сайта. На панели Folder List (Список папок) показана иерархическая структура папок и файлов, входящих в состав издания. Основную часть рабочего окна занимает «Панель представления», в которой отображается выбранный элемент структуры Web -сайта, обычно одна из страниц, которая входит в состав данного узла.
Web -сайт может быть представлен в следующих режимах.
− Режим страницы (Page). Здесь можно редактировать любую выбранную страницу, изменять размещенный на ней текст и рисунки, вводить новые тэги, задавать гиперссылки. Для переключения режимов просмотра страницы в нижней части панели представления имеются три вкладки: Normal, HTML и Preview.
− Кнопка Folders (Папки) включает режим анализа структуры папок и файлов, входящих в Web -сайт.
− В режиме Reports (Отчеты) в рабочем окне представлен отчет о текущем состоянии Web -сайта.
− Кнопка Navigation (Навигация) отображает в рабочем окне программы структуру сайта с гиперссылками, позволяющими перемещаться как внутри данного сайта, так и на страницы других сайтов.
− Кнопка Hyperlinks (Гиперссылки) в графической форме представляет все гиперссылки, переводящие на текущую страницу, и с текущей страницы на другие страницы узла.
− Кнопка Tasks (Задачи) переводит рабочее окно в режим, напоминающий записную книжку. В нем в рабочем окне отображается список задач, намеченный пользователем для выполнения в будущем.
FrontPage включает в себя все необходимое для работы с Web –свйтом: программу FrontPage Explorer для навигации по Web -сайту, редактор Web -страниц FrontPage Editor; средства для работы с графикой; средства для публикации документов и прочее.
Панели Стандартная и Форматирование используются обычным образом. Кроме того, нп панели Стандартная имеется кнопка Web -публикация, которая осуществляет публикацию разработанного Web -сайта в сети по определенному адресу.
Пример создание Web-страницы в редакторе FrontPage. Надо открыть приложение и выбрать режим создания новой страницы − File/New Page. Набрать в окне некоторый текст. Установить шрифт (Format/Font), стиль, размер, цвет.
Далее можно открыть вкладку HTML и просмотрить HTML -код созданной страницы, на вкладке PREVIEW посмотреть, как будет выглядеть страница в окне броузера.
Используя вкладку NORMAL можно изменить размер, цвет, начертание введенного текста.
Для добавления таблицы на страницу служит Table/Insert/ Table.
Одну из строк текста можно сделать бегущей. Для этого надо ее выделить и выполнить Insert/Component/Marquee.
Для вставки рисунка служит команда Insert/Picture, а с помощью Insert/Data and Time можно вставить дату и время.
Чтобы сделать текст гиперссылкой надо его выделить и выполнить Insert/Hyperlink. В появившемся окне в строке URL ввести адрес сайта, на который будет происходить переход.
|
|
|
|
Дата добавления: 2014-01-20; Просмотров: 414; Нарушение авторских прав?; Мы поможем в написании вашей работы!