1 занятие
advertisement
Разработка Web-страниц Программа FrontPage предназначена для разработки Web-страниц и Web-сайтов, имеет знакомый интерфейс присущий офисным программам от корпорации Microsoft. Web-сайт, по своей сути, является электронной книгой, журналом или учебником, который может содержать как полезную для вас информацию, так и ту, что вас на данный момент совсем не интересует. Как и обычная книга, Web-сайт состоит из страниц, которые называются Webстраницами. Для перемещения между страницами сайта используются элементы Webстраницы, при щелчке мышью на которых, можно переместиться на другую страницу сайта. Эти элементы страницы называются гиперссылками и присутствуют на всех страницах входящих в состав сайта. В "классическом" случае, в качестве гиперссылок используют часть текста (слово или несколько слов) и графические изображения (рисунки и фотографии). Поскольку в первом случае для создания гиперссылок используется текст, то такая гиперссылка называется текстовой. Весьма часто текстовая гиперссылка представляет собой подчеркнутый текст синего цвета. Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно, но если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой". Вкладки «Код», «Просмотр» … Уже в процессе загрузки редактор FrontPage Express автоматически сгенерирует для вас код пустой web-страницы, включающий элементы <НЕАD> и <BODY>, в чем вы можете убедиться, открыв окно Просмотр или правка HTML. Перейдите по вкладке «Код» Вы увидите код своей страницы. Теги <html> и </html> говорят о том, что находящийся между ними текст является гипертекстовой страницей. Между тегами <head> и </head> заключается служебная информация о кодировке страницы, ключевых словах, используемых поисковиками и т.д. Те теги на которые Вам надо обратить внимание в этом разделе это тег отвечающий за кодировку: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> Ив нем обязательно должно стоять 1251. И тег <title>Моя первая страница</title>, отвечающий за отображение названия страницы в браузере. Между тегами <body> и </body> расположено непосредственно тело документа. Перейдите на вкладку «Конструктор». Все, что Вы сейчас напишите на этой странице, включая вставленные рисунки, таблицы и т.д., будет помещено между тегами <body> и </body>. Управление всеми элементами на странице происходит также, как и в других программах корпорации Microsoft. Создайте на сервере в своей папке папку «Site». В ней создайте папку «Img» в которой Вы будите хранить рисунки, в эту папку поместите несколько рисунков. 1. Вы можете задать фон Вашей страницы: «Формат» — «Фон» Поставьте галочку «Фоновый рисунок», нажмите «Обзор» и из Вашей папки «Img» выберите нужный рисунок, который хотите сделать фоном страницы. Рисунок «распространится» по всей странице, если Вы поставите галочку «Сделать подложкой». Задайте фон Вашей страницы. В этом же окне Вы можете за дать цвет шрифта и гиперссылок. Перейдите на вкладку «Код». Обратите внимание, что информация о фоне документа появилась в атрибуте тега <body bgcolor="#99CCFF" style="background-attachment: fixed"> Вывод: Все стили, относящиеся ко всему документу появляются как атрибуты тега <body> 2. Аналогично тому, как Вы создаете документы в Word создайте следующую страницу: По мере создания страницы не забывайте переходить на вкладку «Конструктор» и смотреть, какие теги добавляются и за что они отвечают. Все рисунки берите только из папки “Img”/ Когда Вы нарисуете таблицу, ее свойства можно менять вызвав окно: «Таблица» — «Свойства таблицы» — «Таблица» Ширина таблицы на экране Если это значение равно 0, то граница не видна на экране Теги, отвечающие за создание таблицы: <table border="1" width="70%" id="table1" bordercolorlight="#FF0000" bgcolor="#FFCCFF"> <tr> создаем строку <td>&nbsp;</td> делим ее на столбцы <td>&nbsp;</td> </tr> </table> Атрибуты тега <table> отвечают за оформление таблицы. Тег <img border="0" src="file:///D:/Sveta/Ris/Lkol.jpg" width="145" height="188"> отвечает за вставку изображения. Обратите внимание — закрывающего тега нет. Вставьте горизонтальную линию (за нее отвечает тег <hr>. Не забывайте переходить на вкладку «Просмотр» и проверять, как выглядит Ваша страница в браузере. 3. После того, как Вы создали страницу, сохраните ее непосредственно в Вашу папку «Site» с именем index.htm (или index.html). Здесь надо выбрать именно это!!! Таким образом, путь до Вашей страницы будет: ….\Site\index.htm 4. Создайте в Вашей папке «Site» еще одну папку «Техt». Создайте еще три страницы: srek.htm, kol.htm, pryan.htm и поместите их в эту папку. Не забывайте следить за кодировкой и задавать названия страницам. На этих страницах, соответственно, должна располагаться информация об описываемых персонажах. http://www.3sd.ru/kak-delat-site/index.php http://inf777.narod.ru/lessons/frontpage_lessons/hyperlink/hyperlink.htm
