WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Pages:     || 2 |
Факультет информационных технологий Кафедра прикладной информатики Создание web-страниц Новокузнецк 2007 Федеральное агентство по образованию Государственное образовательное учреждение высшего профессионального образования «Сибирский государственный индустриальный университет» Кафедра прикладной информатики Создание web-страниц Методические указания к выполнению лабораторных работ по дисциплине «Вычислительная техника и сети» для студентов специальности 190701 «Организация перевозок и управление на транспорте (автомобильном)» заочной формы обучения Новокузнецк 2007 УДК 004.738.1 (07) С 582 Рецензент Кандидат технических наук, доцент кафедры систем информатики и управления, СибГИУ М.В. Ляховец С 582 Создание web-страниц: Метод. указ. / Сост.: А.В. Степанов, Ю.В. Дмитриев: СибГИУ. – Новокузнецк, 2007. – 26 с.

Рассмотрены основные понятия Интернет и всемирной паутины (World Wide Web), принципы создания web-страниц.

Задания, снабженные пошаговыми указаниями по их выполнению, знакомят с наиболее популярным web-редактором Macromedia Dreamweaver.

Предназначены для студентов специальности 190701 «Организация перевозок и управление на транспорте (автомобильном)» заочной формы обучения.

Содержание Введение............................................................................................4 1. Основные понятия........................................................................5 2. Создание web-страниц с использованием Macromedia Dreamweaver....................................................................................10 Библиографический список...........................................................25 3 Введение Компьютерные сети являются неотъемлемой частью современного мира. Любая сеть представляет собой ячеистую структуру, состоящую из узлов и связей. Если узлами являются компьютеры, то такая сеть называется компьютерной сетью.

Наибольший интерес у пользователей вызывают глобальная сеть Интернет и всемирная паутина.

Очень часто смешиваются такие понятия как «глобальная компьютерная сеть», «всемирная паутина» и «Интернет». Интернет не являются компьютерной сетью в строгом смысле слова.

Интернет – это сеть компьютерных сетей. Он объединяет между собой десятки тысяч различных компьютерных сетей, использующих единые правила передачи данных. Современный Интернет предоставляет множество различных сетевых сервисов, из которых наиболее популярными являются электронная почта и доступ к web-ресурсам. Совокупность web-ресурсов образует «всемирную паутину» Всемирная паутина, WWW (англ. World Wide Web, или просто web) – это распределенная система, предоставляющая доступ к множеству связанных между собой документов, расположенным на различных компьютерах, подключенных к Интернету. Эти документы обычно называют web-страницами. Для загрузки и просмотра web-страниц используются специальные программы – браузеры.

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

1. Основные понятия Всемирную паутину образуют более миллиона web-серверов.

Web-сервером называют компьютер, являющийся узлом глобальной сети снабженный соответствующим программным обеспечением. С точки зрения программного обеспечения, webсервер – это программа, запускаемая на подключенном к Интернету компьютере и использующая протокол передачи данных HTTP (англ. HyperText Transfer Protocol, протокол обмена гипертекстом).

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

Большинство информационных ресурсов всемирной паутины представляют собой гипертекст (англ. hypertext) – текст, содержащий в себе ссылки на другие части данного текста или на внешние ресурсы (другие тексты и т.п.). Термин гипертекст был введён Тедом Нельсоном в 1965 году для обозначения «ветвящегося текста». Примеры гипертекста можно найти в словарях или энциклопедиях, где встречаются сылки к другим частям данного текста.

Гипертекстовые документы, размещаемые во всемирной паутине, называются web-страницы (англ. web pages). Несколько web-страниц, объединенных общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же web-сервере, называются web-сайтом (англ. web site).

Запрашиваются, загружаются и просматриваются web-cтраницы с помощью специальной программы, называемой web-браузером (англ. web browser) или просто браузером. Таким образом, браузер является клиентом web-сервера.

Для создания web-страниц используют язык разметки гипертекста HTML (англ. HyperText Markup Language). Язык HTML был разработан британским учёным Тимом Бернерсом-Ли в 1991 году. За прошедшее время возможности HTML были значительно расширены. С помощью HTML стало возможным размещать на web-страницах не только форматированный текст, но и таблицы, графику, анимацию и даже видеоролики.

По сути, web-страница – это документ, в котором форматирование текста и включение в документ объектов мультимедиа (изображения, анимация, видео, аудио и т.д.), хранящихся в отдельных файлах, осуществлено с помощью HTML.

Если открыть такой документ в текстовом редакторе, то можно увидеть набор различных конструкций – элементов языка HTML.

Совокупность всех элементов образуют HTML-код web-страницы.

Элементами web-страницы могут быть заголовки, списки, рисунки, таблицы и т.д. Браузер, при отображении web-страницы, осуществляет обработку HTML-кода, осуществляя при этом форматирование текста, размещение на web-странице таблиц и объектов мультимедиа. Таким образом, пользователь, открывая web-страницу в браузере, видит документ таким, каким его задумал автор.

Элементы web-страницы снабжаются специальными указателями, называемыми тегами (англ. tags). Теги определяют границы элементов и отделяют элементы друг от друга. В HTMLкоде web-страницы теги обрамляются угловыми скобками:

открывающей «<» и закрывающей «>», за которыми без пробела идёт имя тега. Например:

. Теги бывают двух видов:

парные и непарные.

Парные теги обычно охватывают какой-то фрагмент текста, образуя элемент web-страницы. Поэтому существует открывающий и закрывающий теги, которые соответственно начинают и заканчивают элемент. Перед именем закрывающего тега всегда ставится слеш (наклонная черта). В общем виде элемент webстраницы, сформированный парными тегами, выглядит, к примеру, следующим образом:

<имя_тега> фрагмент текста Примеры элементов, сформированных парными тегами:

– ограничивает параграф;

– определяет параметры шрифта;





– формирует таблицу.

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

выделенный текст Элемент, находящийся между тегами другого элемента, навывают вложенным. При этом следует обращать внимание на последовательность открывающих и закрывающих тегов. Порядок расположения закрывающих тегов должен быть обратным порядку расположения открывающих тегов.

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

<имя_тега> Примеры элементов, сформированных непарными тегами:

– внедряет графику в web-страницу;


– создает горизонтальную линию;


– разрывает строку текста.

Некоторые теги могут иметь параметры, называемые атрибутами. Атрибуты служат для изменения или уточнения свойств элемента web-страницы. Каждый атрибут имеет имя и может принимать значение из определенного набора. Значения атрибутов заключаются в кавычки. Любой тег может иметь один или несколько атрибутов, которые указываются только внутри начального тега и отделяются друг от друга пробелами:

<имя_тега имя_атрибута="значение_атрибута">… Следует обратить внимание на то, что указывать атрибуты у тега, закрывающего элемент, не нужно. Если у тега какой-либо атрибут и его значение не указаны явно, то браузер при отображении web-страницы устанавливает значение такого атрибута по умолчанию.

Например, для создания абзаца на web-странице используются теги

и

. По умолчанию браузер выравнивает текст абзаца по левому краю. Способ выравнивания можно изменить, установив соответствующее значение атрибута align в теге

:

текст выровнен по левому краю

текст выровнен по центру

текст выровнен по правому краю

текст выровнен по ширине

Для создания гипертекстовой связи на web-страницах располагаются элементы, представляющие собой указатели (ссылки) на части данного документа, другие web-страницы или объекты во всемирной паутине. Эти указатели называются гиперссылки (англ. hyperlinks) или просто ссылки. Гиперссылкой может являться не только некоторая часть текста, но и картинка или ее часть. Главным отличием гиперссылок на web-страницах от обычных ссылок, встречающихся в «бумажных» изданиях, является то, что пользователь может следовать по ссылке, просто щелкнув по ней мышью, при этом web-страница, на которую указывает ссылка, автоматически загружается и отображается в окне браузера.

В гиперссылках для указания местонахождения ресурса во всемирной паутине используется универсальный указатель ресурса URL (англ. Uniform Resource Locator). К примеру, URL указывающий на web-страницу имеет вид:

http://kpi. si bsi u.ru/kafedra/hi story/i ndex.html где http – протокол передачи данных;

kpi.sibsiu.ru – имя web-сервера;

/kafedra/history/ – путь к файлу;

index.html – имя файла.

Для создания web-страниц обычно используют специальные программы, которые называются web-редакторы. Web-редакторы делятся на два класса: визуальные и невизуальные.

Визуальные web-редакторы работают по принципу WYSIWYG (англ. What You See Is What You Get, что ты видишь, то ты и получишь). В подобных web-редакторах, в процессе создания web-страницы, разработчик формирует ее внешний вид (не заботясь о тегах) и сразу получает представление о том, как она будет выглядеть. При этом web-редактор автоматически создает элементы web-страницы, используя теги соответствующие заданному оформлению.

В невизуальном web-редакторе разработчик самостоятельно указывает теги для создания нужных элементов web-страницы. А результат просматривается внешней программой – браузером.

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





Среди них, наиболее популярным web-редактором является Macromedia Dreamweaver, технология работы с которым будет рассмотрена ниже.

2. Создание web-страниц с использованием Macromedia Dreamweaver Запустив web-редактор Dreamweaver, мы увидим главное окно программы, примерный вид которого приведен на рисунке 1.

Главное окно служит «вместилищем» для множества других окон, содержащих как открытые web-страницы, так и различные инструменты, предназначенные для работы с ними.

Рассмотрим назначение некоторых элементов интерфейса Dreamweaver, которые потребуются нам в дальнейшей работе.

Окно документа – окно, в котором отображается открытая для редактирования web-страница.

Группа панелей – объединенные в группы панели, содержащие различные инструменты, предназначенные для работы над web-страницами. Чтобы переключиться на нужную панель в группе, необходимо щелкнуть левой кнопкой мыши по вкладке, на которой написано название этой панели.

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

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

Панель Insert – содержит набор кнопок, при нажатии которых на web-страницу помещается соответствующий элемент. Эти кнопки расположены на нескольких вкладках. Для переключения между вкладками нужно нажать кнопку, на которой написано название вкладки, которая расположена в левой части инструментария, и выбрать нужную вкладку в появившемся меню.

Панель Document – содержит элементы, позволяющие изменять режим редактирования web-страницы, и его параметры.

Панель Properties – панель свойств, позволяет просматривать и редактировать свойства выделенного объекта.

Рисунок 1 – Главное окно Macromedia Dreamweaver Задание 1) Создать новый гипертекстовый документ.

Выполнение:

а) запустите Dreamweaver, используя главное меню Windows;

б) в разделе стартового окна Create New щелкните по пункту HTML.

Автоматически будет создан «пустой» гипертекстовый документ. Обычно он имеет следующий вид:

и . В элемент HTML помещены два обязательных элемента, соответствующие разделу заголовка и основному разделу. Раздел заголовка обозначается тегами и . Этот раздел содержит установки параметров webстраницы. Основной раздел находится между тегами и . В этом разделе размещаются элементы web-страницы.

2) Сохранить «пустую» web-страницу в папку своей группы.

Выполнение:

а) используя пункты главного меню программы File Save или сочетание клавиш CTRL+S, вызовите диалог сохранения файла;

б) откройте папку своей группы;

в) укажите имя файла, используя следующий образец: pc*.html.

Где вместо знака * необходимо указать номер своего компьютера.

Например: pc2.html;

г) нажмите кнопку Сохранить.

3) Изменить заголовок web-страницы.

Выполнение:

а) найти в разделе заголовка web-страницы строку 1 .

б) заменить Untitled Document на текст заголовка, содержащий ваше имя и фамилию. Например: Web-страница Ивана Иванова.

в) выполните просмотр web-страницы в браузере, последовательно нажимая на пункты главного меню программы File Preview in Browser IExplore 6.0 или нажав на клавиатуре клавишу F12. На вопрос о сохранении изменений Save changes to… ответьте утвердительно. В заголовке окна открывшегося браузера можно увидеть результат, пример которого изображен на рисунке 2.

г) закройте браузер.

Рисунок 2 – Измененный заголовок web-страницы 4) Изменить цвет фона web-страницы.

Выполнение:

а) найдите в HTML-коде web-страницы тег ;

б) добавьте тегу атрибут bgcolor. Для этого, после слова body поставьте пробел и напишите слово bgcolor и нажмите Enter.

В появившемся окне-палитре, приведенном на рисунке 3, используя мышь, выберите понравившийся цвет;

в) выполните просмотр web-страницы в браузере.

Pages:     || 2 |










© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.