Интернет-технологии.
Создание сайта
Далее необходимо определить, где будет расположено описание стилей — список Rule Definition. При выборе New Style Sheet File таблица стилей будет сохранена в отдельном файле, ссылка на который будет вставлена особым образом в заголовок создаваемого HTML-документа (если с редактируемой страницей уже связаны какие-либо файлы с описанием стилей, то их имена будут перечислены в списке). При таком… Читать ещё >
Интернет-технологии. Создание сайта (реферат, курсовая, диплом, контрольная)
Интернет-технологии. Создание сайта
Методические указания к выполнению лабораторной работы для студентов очной формы обучения специальности 50 501 — «Профессиональное обучение (информационные системы и технологии)»
Брянск 2010
УДК 004.415.2.045:004.738.5(075)
Интернет-технологии. Создание сайта: методические указания к выполнению лабораторной работы для студентов очной формы обучения специальности 50 501 — «Профессиональное обучение (информационные системы и технологии)». — Брянск: БГТУ, 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 задаются интервалы между строками текста, отступы, цвета, используемые для текста и фона, размер и стиль шрифтов и другое оформление).
Существует несколько основных тэгов HTML, которые должны присутствовать в тексте любой web-страницы. Каждая web-страница обязана содержать тэг, располагаемый в самом начале (каждый из тэгов имеет открывающую (например,) и закрывающую части (например,
)). Этот тэг описывает документ как web-страницу, выполненную в формате HTML. Непосредственно за тэгом обычно следует тэг, который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней. В раздел HEAD обычно вложен тэгПример HTML-документа:
Текст сайта
Любой текст разделяется на последовательность абзацев. Для того чтобы начать новый абзац (при редактировании страницы в режиме дизайна), как и в большинстве текстовых редакторов, достаточно нажать клавишу Enter. При этом в исходный текст HTML-документа автоматически вставляются открывающий и закрывающий теги <�Р>. Для создания принудительного перехода на новую строку используется комбинация клавиш Shift+Enter. В исходный код в этом случае будет добавлен тег
.
Как правило, текст документа должен содержать заголовки. Причем это будет не просто выделенный крупным шрифтом, цветом или каким-либо другим образом текст, а именно структурная единица — заголовок. В языке HTML существует шесть уровней заголовков: тег
задает наиболее важный (заголовок первого уровня) и
— наименее важный (заголовок шестого уровня). При использовании этих элементов следует соблюдать их иерархию.
Общим заголовком документа должен быть заголовок первого уровня. Не следует пропускать уровни, используя для заголовков разделов сразу заголовки третьего или четвертого уровня.
Для каждого блока текста можно установить его тип, то есть сделать этот текст заголовком любого уровня или форматированным текстом. Проще всего это делать, используя панель свойств объекта (рис. 3). Если панели нет на экране, то можно ее открыть, выполнив команду Window=>Properties (кроме того, указать тип блока текста (абзаца) можно в меню Text=>Paragraph Format или в разделе Paragraph Format контекстного меню, появляющегося при щелчке правой кнопкой мыши в поле документа).
Рис. 3. Панель свойств объектов Выделив блок текста или просто установив курсор в любое место абзаца, можно выбрать его тип в поле Format. В соответствии с элементами языка HTML возможны следующие варианты: Paragraph — обычный абзац (ограничен тегами <�Р>), Heading 1…6 — заголовки соответствующего уровня (ограничены тегами <�Н1>…
), Preformatted — предварительно форматированный текст (тег
) или None — блок текста перестает быть абзацем.
Использование тегов визуального форматирования является нежелательным.
В Dreamweaver для форматирования текста можно использовать каскадные таблицы стилей (CSS, Cascade Style Sheet). Преимущество CSS — удобство редактирования дизайна всего сайта путем изменения всего одного файла CSS и сокращения объема сайта из-за выноса оформления в отдельный файл CSS.
Таблица стилей (CSS) состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений обрамляется фигурными скобками и состоит из набора свойств и их значений. Схематически это можно показать так:
селектор {
свойство1: значение;
свойство2: значение;
…
свойствоn: значение;
}
Dreamweaver позволяет редактировать правила CSS с использованием специальных панелей и диалоговых окон, которые представляют правила в наглядной форме.
Для отображения панели стилей нужно выполнить команду Window=>CSS Styles или нажать на кнопку CSS Styles в навигаторе панелей (рис. 4).
Рис. 4. Панель стилей Для создания нового стиля (правила) надо нажать кнопку New CSS Rule на панели стилей или выбрать команду New… из контекстного меню, появляющегося при щелчке правой копкой мыши в любом месте панели стилей.
В открывшемся диалоговом окне (рис. 5) необходимо указать тип создаваемого стиля — список Selector Type. Class (can apply to any HTML element) создает именованный стиль, который может быть применен к различным блокам текста. При этом в поле Selector Name необходимо указать имя — идентификатор стиля (CLASS). Оно должно начинаться с символа точка, являющегося идентификатором класса. Tag (redefine an HTML element) переопределяет параметры форматирования определенного тега, который необходимо выбрать в списке Tag. ID (applies to only one HTML element) позволяет определить форматирование для тегов, содержащих особый идентификатор. Идентификаторы используются аналогично именованным стилям, но предназначены для форматирования элементов, требующих индивидуальной обработки. В остальных случаях предпочтительным является использование именованных стилей (CLASS).
Далее необходимо определить, где будет расположено описание стилей — список Rule Definition. При выборе New Style Sheet File таблица стилей будет сохранена в отдельном файле, ссылка на который будет вставлена особым образом в заголовок создаваемого HTML-документа (если с редактируемой страницей уже связаны какие-либо файлы с описанием стилей, то их имена будут перечислены в списке). При таком подходе одна и та же таблица стилей может использоваться в различных документах. Это особенно удобно, когда надо определить элементы форматирования, общие для всех страниц сайта. Во втором случае (This Document Only) описание стилей будет сохранено непосредственно в редактируемом документе (и соответственно может быть использовано только в его пределах). Такой вариант удобен для создания стилей, специфичных для данной страницы.
Рис. 5. Создание нового стиля После того как все параметры определены, можно нажать ОК, после чего откроется диалоговое окно определения параметров нового стиля (рис.6). В левой его части в списке Category можно выбирать группы параметров форматирования, которые необходимо определить.
Type — параметры форматирования шрифта. В поле Font-family можно задать гарнитуру шрифта. Поле Font-size позволяет определить размер шрифта. Он может быть задан числовой величиной, тогда в соседнем поле необходимо указать единицы измерения (наибольший интерес здесь представляют пиксель — pixels и традиционная типографская единица измерения пункт — points). Кроме того, размер может быть задан при помощи одной из предопределенных относительных единиц измерения или в процентах от унаследованного размера.
Рис. 6. Диалоговое окно определения параметров нового стиля В поле Font-style можно выбрать один из вариантов начертания шрифта: normal — обычное (используется по умолчанию), italic — курсив, oblique — наклонное. Параметр Line Height позволяет задать расстояние между базовыми линиями смежных строк текста — интерлиньяж. Свойство Text-decoration применяет к тексту подчеркивание (underline), надчеркивание (линия над текстом, overline), зачеркивание (line-through), эффект мигания (blink), none используется по умолчанию для обычного текста.
Параметр Font-weight задает вес, или жирность, шрифта. Свойство Font-variant используется для отображения элемента маленькими прописными буквами (значение small-caps). Параметр Text-transform оказывает влияние на использование заглавных букв в элементе (capitalize — отображает первую букву каждого слова в верхнем регистре, uppercase — отображает все символы в верхнем регистре, lowercase — отображает все символы в нижнем регистре). Параметр Color используется для задания цвета текста.
Background - параметры свойства фона, применяемые к «холсту» позади элемента. Background Color и Background Image определяют соответственно цвет фона и фоновое изображение элемента. Если задано фоновое изображение, то свойство Repeat определяет, как оно будет повторяться (repeat — в вертикальном и горизонтальном направлениях, repeat-x — только по горизонтали, repeat-у — только по вертикали, no-repeat — без повторов, один раз). Параметром Attachment определяется, будет ли прокручиваться фоновое изображение вместе с документом (по умолчанию, scroll) или нет (fixed). Свойства Horizontal Position и Vertical Position определяют начальное положение фонового изображения относительно прямоугольника, окружающего содержимое элемента.
Block — параметры выравнивания и взаимного расположения фрагментов текста в элементе. Свойство Word Spacing задает интервал между словами. Letter Spacing определяет размер интервала между символами. Параметр Vertical-alignment влияет на вертикальное выравнивание элемента. Text-align задает горизонтальное выравнивание текстовых элементов. Свойство Text-indent определяет размер отступа перед первой строкой текста элемента. Параметр Whitespace определяет, каким образом используются пробелы, заданные в исходном документе: normal — трактует текст обычным образом, заменяя множественные пробелы на один; pre -аналог тега
в HTML (но при этом не используется шрифт с фиксированной шириной); nowrap — предотвращает перенос элементов текста на следующую строку, если не задан тег
.
Параметры из раздела Border позволяют управлять выводом и параметрами рамок вокруг элементов.
List — параметры форматирования списков.
Positioning — параметры позволяют преобразовать тег или выделенный блок текста в слой. Использование ограничено тем, что эти свойства поддерживаются только Internet Explorer.
Extensions — параметры, не поддерживаемые большинством браузеров.
После того как все необходимые параметры стиля определены, он появится в списке в панели стилей. Выбранный в списке стиль применяется к текущему выделенному элементу документа.
Чтобы включить созданные стили в HTML-страницу, необходимо в разделе
поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:
где «styles.css» — имя файла с созданными стилями CSS.
2.2.3 Создание гипертекстовых ссылок