Интернет-технологии. Создание сайта

Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
Краткое сожержание материала:

Размещено на

Размещено на

Интернет-технологии. Создание сайта

Методические указания

к выполнению лабораторной работы

для студентов очной формы обучения

специальности 050501 - «Профессиональное обучение (информационные системы и технологии)»

Брянск 2010

УДК 004.415.2.045:004.738.5(075)

Интернет-технологии. Создание сайта: методические указания к выполнению лабораторной работы для студентов очной формы обучения специальности 050501 - «Профессиональное обучение (информационные системы и технологии)». - Брянск: БГТУ, 2009. - 24 с.

Разработал: С.М. Рощин, канд. техн. наук, доц.

Е.В. Довыденко

Рекомендовано кафедрой «Компьютерные технологии и системы» БГТУ (протокол № 3 от 16.12.09)

Научный редактор Ю.М. Казаков

Редактор издательства Л.И. Афонина

Компьютерный набор С.М. Рощин, Е.В. Довыденко

С.А. Егоренков

Темплан 2010г., п.19

Подписано в печать Формат 60х84 1/16. Бумага офсетная. Офсетная печать. Усл. печ. л. 1,39 Уч. - изд. л. 1,39 Тираж 40 экз. Заказ Бесплатно

Брянский государственный технический университет.

Брянск, бульвар 50-летия Октября, 7, тел. 58-82-49.

Лаборатория оперативной полиграфии БГТУ, ул. Институтская, 16

1. Цели работы

Целями лабораторной работы являются:

1. Изучение методики создания сайтов.

2. Овладение практическими навыками в работе с программой Adobe Dreamweaver.

3. Создание HTML страниц.

Продолжительность работы - 10 ч.

2. Теоретическая часть

В основу всемирной паутины положена идеология и технология гипертекста, технически реализованная при помощи языка HTML. HTML (от англ. HyperText Markup Language, язык гипертекстовой разметки) представляет собой язык, разработанный специально для создания web-документов. HTML-документы представляют собой обычные текстовые ASCII-файлы. Помимо текстового содержания, они включают в свой состав специальные управляющие конструкции языка - так называемые теги. При отображении документа в браузере сами теги на экран не выводятся. Они определяют структурные единицы внутри документа, задают параметры форматирования, включают в состав документа новые элементы (встроенные изображения, Java-апплеты и т.п.) и позволяют создавать гипертекстовые ссылки на другие документы и ресурсы сети Internet.

Для создания и редактирования HTML-документов достаточно простого текстового редактора, например Блокнот Windows. На практике обычно используют средства редактирования, разработанные специально для написания HTML - редакторы WYSIWYG (от англ. what you see is what you get, что видишь, то и получаешь) или, как их еще называют, средства визуального редактирования. Такие программные продукты имеют графические интерфейсы, делающие написание HTML-кода подобным работе с программой редактирования текстов и разметки страниц. Подобные программные продукты позволяют повысить эффективность и значительно сократить время разработки, особенно если речь идет о средних и крупных сайтах. Специализированные HTML-редакторы также работают с исходным кодом web-страницы, но располагают различными вспомогательными инструментами, ускоряющими и упрощающими процесс редактирования документов, и дополнительными средствами для выполнения повторяющихся операций. Кроме того, наиболее мощные из них включают в свой состав средства автоматизации процесса разработки (работа с шаблонами, стилями и библиотеками элементов) и средства размещения файлов сайта на web-сервере. К данной группе редакторов относится большое количество программных продуктов, в том числе и распространяемых бесплатно.

2.1 HTML-редактор Adobe Dreamweaver

Dreamweaver HTML-редактор разработан и поддерживался компанией Macromedia в версиях до 8-й (2005 год). Следующие версии (начиная с Dreamweaver CS3 (2007)) выпускает Adobe. Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире. У данного редактора имеется и русскоязычный интерфейс. На сегодняшний момент последней версией является Dreamweaver CS4.

Создатели программы Dreamweaver постарались сделать удобный и простой в использовании инструмент, облегчающий процесс создания HTML-страниц, их редактирования и управления большим количеством связанных друг с другом документов.

Каждый новый HTML-документ открывается в новой закладке. Для более удобной работы с программой предусмотрены система меню и набор палитр инструментов.

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

Все основные действия при создании и редактировании HTML-страницы выполняются в поле документа. Как известно, кроме текстовой информации, HTML-документ может содержать различные графические и мультимедийные элементы. Для удобства вставки таких элементов предназначена панель объектов Вставка (рис. 1). С помощью кнопок, расположенных на этой панели, можно быстро вставить различные объекты (изображения, таблицы, Flash-анимация) в редактируемый документ.

Рис. 1. Рабочее пространство Dreamweaver:

(A. Панель объектов; B. Панель инструментов; C. Поле документа; D. Панель вкладок; E. Выбор HTML-тегов; F. Панель свойств объекта)

Любой HTML-документ можно представить как совокупность таких элементов, как слово, абзац, изображение, ячейка таблицы и других. Все они имеют некоторые общие свойства (например, выравнивание), но в то же время каждый объект обладает присущими только ему свойствами, параметрами и настройками. Для быстрого доступа к редактированию параметров объекта предназначена панель свойств Свойства (рис. 1). В зависимости от текущего выделенного объекта она изменяет свой внешний вид - предлагается просмотреть и при необходимости изменить набор свойств именно этого объекта.

2.2 Создание сайта

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

2.2.1 Создание заглавной страницы

Для создания страницы необходимо открыть новый, пустой документ. Это можно сделать различными способами, например, выбрав команду File=>New в главном меню, а затем выбрав HTML из списка. Первое, что необходимо сделать после создания документа, сохранить файл с необходимым именем (иначе при создании гипертекстовых ссылок, вставке изображений и т.п. могут быть использованы неверные адреса). Главная страница сайта должна иметь специальное имя - index.html (или index.htm). После того как странице присвоено имя и она сохранена, можно приступать к наполнению ее информационным содержанием. Начать следует с установки параметров страницы. Для этого необходимо из главного меню выбрать команду Modify=>Page Properties…. Основное, что необходимо задать в открывшемся диалоговом окне, это название (заголовок) страницы - поле Title в категории Title/Encoding (рис. 2). Каждая страница сайта должна иметь продуманное, кратко и четко сформулированное название. Визуально оно будет отображено в заголовке окна браузера и, кроме того, будет использоваться поисковыми системами и т.п.

Кроме заголовка, в категории Appearance этого диалогового окна можно установить следующие параметры страницы:

* Background image - изображение, которое будет использовано в качестве фона страницы (графический файл с изображением можно выбрать, нажав кнопку Browse…);

* Background / Text - соответственно цвета фона страницы и текста, расположенного на ней (можно выбрать цвет из палитры, нажав на кнопке рядом);

* Links / Visited links / Active links - соответственно цвета ссылок / посещенных ссылок / активных ссылок;

* Left margin / Top margin / Margin width / Margin height - задают отступы (поля) по бокам и в начале, и конце страницы.

Рис. 2. Настройка параметров HTML-страницы

2.2.2 Форматирование HTML-страниц

В HTML-документе необходимо разделять данные документа и их представление. Содержание документа задается в виде тэгов HTML. Для определения же визуального представления документа следует использовать таблицы стилей (CSS - Cascading Style Sheets) (через CSS задаются интервалы между строками текста, отступы, цвета, использ...