История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...
Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...
Топ:
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...
Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...
Интересное:
Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...
Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...
Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...
Дисциплины:
 2019-12-18 |
 133 |
из
5.00
|
Заказать работу |
Разработка структуры Web -сайта
Создавать сайт я решила в текстовом редакторе Блокнот, т.к. в процессе работы я смогу буду напрямую сталкиваться с применением тегов.
Свою работу я начала с определения тематики сайта. Я решила, что сайт будет посвящен Владимиру Высоцкому, т.к. мне нравится его творчество. Далее я стала разрабатывать структуру сайта [5]. Пришли к выводу, что мой сайт будет состоять из таких разделов, как:
· биография;
· творчество;
· дискография;
· жены;
· друзья;
· причина смерти;
· память о поэте.
Раздел «Биография» сообщает пользователю о самых главных этапах в жизни В. Высоцкого.
В разделе «Творчество» обсуждаются песни, стихи. Рассказывается о работе Высоцкого в театре и в кино.
Раздел «Дискография» посвящен информации об основных изданиях пластинок с записями выступлений В. Высоцкого.
В разделах «Жены» и «Друзья» обсуждаются взаимоотношения поэта с его родными и близкими. Дается оценка положения Высоцкого в кругу семьи.
«Причина смерти» - раздел, который раскрывает тайну гибели музыканта.
И, наконец, раздел «Память о поэте» рассказывает пользователю о том, какие награды получил Высоцкий за свою работу, какие достопримечательности разных городов носят его почетное имя.
В соответствии с разработанной структурой была спроектирована главная страница сайта (рис.3). Она содержит все основные структурные элементы, переход по которым осуществляется с помощью гиперссылок.
Рисунок 3 – Главная страница сайта.
Главная страница сайта выполнена через фрейм, то есть страница разделена на 3 части. Фрейм - элемент языка HTML версии 3.0 и выше. Фреймы позволяют разделить Web-страницу на несколько независимых окон и в каждом из них размещать отдельную Web-страницу. При этом допускаются ссылки из одного окна в другое окно. Обычно фреймы применяется для организации меню, постоянно находящихся на экране.
В качестве фона для всего сайта я выбрала песочный цвет. На мой взгляд, он не напрягает глаза пользователя и хорошо сочетается с цветами теста. Результата я добилась при помощи параметра <BGCOLOR> тега-контейнера <BODY> </BODY>.
Работа с текстом.
Как известно, основное наполнение Web-страниц - это все-таки текст. За редким исключением специальных сайтов-галерей. На самом деле, для того, чтобы в окне просмотра браузера отобразить текстовую строку, никаких тегов применять не требуется: Достаточно просто написать сам текст. Но, когда нужно уже разбить его хотя бы на абзацы, надо пользоваться тегами <Р> </Р>. При этом, тег <Р>, естественно, обладает параметром выравнивания ALIGN, который может принимать значения LEFT, RIGHT, CENTER и JUSTIFY (выравнивание текста по левому краю, по правому, по центру и по ширине).
Теги, использованные для форматирования текста:
· <B> </B> - используется для выделения текста полужирным шрифтом;
· <I> </I> -отображает текст курсивом;
· <U> </U> - позволяют подчеркнуть текст;
· <TT> </TT> - отображает текст, имитирующий стиль печатной машинки.
Для перехода на новую строку без вставки пустой строки существует тег <BR>.
По умолчанию цвет текста в HTML-документе черный. Изменить цвет текста можно с помощью тега <BODY> </BODY>. Для этого в этот тег надо добавить еще один атрибут TEXT. Например, <BODY TEXT ="#FFCC66">.
Задает цвет только отдельным отрезкам текста параметр COLOR тега <FONT>.
Также тег <FONT> обладает параметрами SIZE (размер шрифта) и FACE (тип шрифта). Например, <FONT COLOR=#8B8682" SIZE="8"> </FONT>.
Применив эти теги, я получила следующее отображение текста в браузере (рис.4):
Рисунок 4 –Отображение текста в окне браузера
По умолчанию цвет текста в HTML-документе черный. Изменить цвет текста можно с помощью тега <BODY></BODY>. Для этого в этот тег надо добавить еще один атрибут TEXT.
Задает цвет только отдельным отрезкам текста параметр COLOR тега <FONT>.
Также тег <FONT>.обладает параметрами SIZE (размер шрифта) и FACE (тип шрифта).
Создание таблиц
Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек. Каждая строка начинается тэгом <TR> и завершается тэгом </TR>. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> или <TH> и </TH>. Тег <TH> используется обычно для ячеек-заголовков таблицы, а <TD> — для ячеек-данных.
Таблица может иметь заголовок, который заключается в пару тегов <CAPTION> и </CAPTION>. Представление таблиц на странице моего сайта выглядит так (рис.5):
Рисунок 5 – Таблица на Web-странице
Создание списков
В языке HTML предусмотрен специальный набор тегов для представления информации в виде списков. Списки являются одним из наиболее часто употребляемых форм представления данных, как в электронных документах, так и в печатных.
В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный и список определений.
Для написания своего сайта я использовала маркированный список. Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности. Для создания маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа.
Каждый элемент списка должен начинаться тэгом <LI>. Тег <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.
<UL> может иметь параметр TYPE, который в свою очередь может принимать значения DISC (маркеры отображаются закрашенными кружочками), CIRCLE (маркеры отображаются незакрашенными кружочками), SQUARE (маркеры отображаются закрашенными квадратиками).
Рисунок 6 – Отображение списка в окне браузера
Графика
Графика важна для Web-документов. Без иллюстраций документ однообразен, вял и скучен. Графика делает его визуально привлекательнее и передает одну из основных идей документа.
Для встраивания изображений в HTML-документ следует использовать тег <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением.
При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тега <IMG> (рис.7, рис.8).
Рисунок 7 – Выравнивание изображения по левому краю
Рисунок 8 – Выравнивание изображения по правому краю
ЗАКЛЮЧЕНИЕ
В ходе выполнения курсовой работы был получен Web-сайт, удовлетворяющий всем требованиям и готовый к применению. С его помощью пользователи смогут получить необходимую информацию.
Таким образом, мы изучили возможности языка HTML для создания Web-страниц, узнали, какие HTML-редакторы лучше использовать в Web-дизайне, каковы преимущества и недостатки тех или иных программных пакетов.
Итак, поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации. Мы можем смело сказать, что Web-страницы, с их потенциалом могут применятся для различных целей.
Web-страница – это лицо той фирмы, того учреждения, того человека, который разместил ее в WWW. Именно поэтому сегодня Web-дизайну уделяется такое огромное внимание, ибо от него напрямую зависит популярность того или иного информационного ресурса Сети. Недаром сейчас профессия Web-дизайнера является одной из самых высокооплачиваемых.
Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего Web-дизайнера. Для того, чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.
Подводя итог всему выше сказанному, хочется отметить, что HTML стал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.
Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!