Применение методов макетирования при разработке web-страниц сайта
Структура HTML-документов. Вставка графического файла на web-cтранице. Проектирование макета сайта. Линейная, табличная и иерархическая структура. Язык маркировки гипертекста. Отображение заголовка, текстового поля, элементов навигации веб-сайта.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 16.12.2014 |
| Размер файла | 181,5 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Российский университет дружбы народов
Факультет физико-математических и естественных наук
Кафедра информационных технологий
Курсовая работа
Б2Б7 - Технология программирования
Применение методов макетирования при разработке web-страниц сайта
Выполнила
Студентка группы НИ-101
Полякова Маргарита Александровна
Руководитель
ст. преподаватель кафедры
Информационных технологий, к.ф.-м.н.
А.М. Мардашев
Москва 2014 г.
Оглавление
файл сайт гипертекст
1. Что такое HTML
1.1 Структура HTML-документов
1.2 Как вставить графический файл на web-cтранице
1.3 Гиперссылки
2. Проектирование макета сайта
2.1 Линейная структура
2.2 Табличная структура
2.3 Иерархическая структура
3. Мой сайт
Заключение
Используемая литература
1. Что такое HTML
HTML (HyperText Markup Language) - язык маркировки (разметки) гипертекста. HTML производит переход от одной части текста к другой, при этом части могут храниться на абсолютно разных компьютерах.
HTML создан специально для маркировки веб-страниц. Язык разметки дает нужные инструкции браузеру о том, как отображать заголовок, текстовое поле, элементы навигации веб-сайта и нижнюю часть веб-страницы на мониторе. А самое главное, что не только различные браузеры, но и различные версии браузеров могут совершенно по-разному отображать, а также воспринимать на экране код. Из этого следует, что некоторые элементы, которые правильно выглядят в браузере Google Chrome , могут выглядеть иначе в Internet Explorer и других браузерах.
1.1 Структура HTML-документов
HTML -- теговый язык разметки документов. Абсолютно любой документ на языке HTML представляет собой особый набор элементов, в котором начало и конец каждого элемента обозначается специальными пометками -- тегами. Теги заключаются в угловые скобки, а также они могут быть одиночными и парными.
Одиночный тег вызывает одноразовое действие в том месте в web-странице, в котором этот тег записан.
Тег <base> указывает полный web-адрес документа. У этого тега всего один атрибут href , значение которого является адресом страницы.
Тег <link> нужен для подключения внешних файлов, например, если вы будете использовать каскадную таблицу стилей, то её удобней всего хранить в отдельном файле, а затем подключать этот файл ко всем страницам web-сайта.
У тега <link> несколько атрибутов:
href - указывает URL -адрес присоединяемого файла.
rel - указывает на тип взаимосвязи данного документа к подключаемому.
type - указывает на тип и параметры присоединенной таблицы стилей.
Парные теги задают контейнер в web-странице (вся страница, заголовок страницы, абзац и т.д. и т.п.). Начало контейнера отмечают открывающим тегом (<тег>), конец - закрывающим тегом (</тег>).
В контейнере <HEAD>... </HEAD> находится заголовок документа, содержащий, помимо названия документа, инструкцию по отображению страницы, описание скриптов и внутренних таблиц стилей и т.д., также заголовок документа используется браузером для правильного её отображения.
Все элементы, которые отвечают за содержание страницы, помещаются в контейнер <BODY>... </BODY> (текст, бегущие строки, ссылки на графические и звуковые файлы, таблицы и т.д.).
У тега <body> обязательных атрибутов нет, также применение необязательных атрибутов не рекомендуются. Но так или иначе, основное количество атрибутов до сих пор поддерживается различными браузерами. Рассмотрим те, которые пока что поддерживаются всеми браузерами:
alink - устанавливает цвет активной ссылки в момент нажатия на неё, вместо него можно использовать псевдокласс: active
vlink - устанавливает цвет посещенной ссылки, т.е. той, на которую уже нажимали, а вообще этот атрибут устарел, и вместо него чаще используют псевдокласс: visited.
background - указывает на адрес изображения, использующегося в качестве фонового. Этот рисунок заполняет собой всю площадь окна. Если рисунок меньше окна браузера, то он будет повторяться до тех пор, пока не заполнит с собой всё окно. На стыке этих изображений возникают заметные переходы, так что к подбору фоновых рисунков следует подходить с большим вниманием.
bgcolor - задаёт фоновой цвет документа.
leftmargin - определяет пространство от левого края окна браузера до контента страницы.
topmargin - определяет пространство от правого края окна браузера до контента страницы.
bottommargin - определяет пространство от нижнего края окна браузера до контента страницы.
text - устанавливает цвет текста для всего документа для визуальных браузеров.
Для некоторых тегов факультативно задаются атрибуты, которые подробно описывают все действия над текстом или другими объектами. Теги могут записываться и прописными, и строчными буквами.
Атрибуты можно записывать в любом порядке и через пробел. Значения же атрибутов можно указывать и без кавычек.
Вид тега с атрибутами следующий:
<тег атрибут = “значение”, атрибут = “значение” . . . >
Заголовок страницы задается с помощью контейнера <TITLE>... </TITLE>, обязательных атрибутов у него нет, а также этот контейнер располагается в секции <head>:
В контейнер содержания страницы вставляются абзацы с текстом, ссылки, списки, изображения, таблицы, заголовки и т.п. Для каждого из элементов содержания предназначены свои теги и контейнеры.
Контейнеры <hn> … </hn> (n= 1, .. ,6) используются для создания заголовков в тексте. Размер шрифта для заголовков задаётся номерами n: от <h1> (самый большой и, желательно, должен использоваться на странице один раз) до <h6> (самый маленький). Также эти контейнеры могут содержать строчные элементы.
Контейнеры <P> … </P> служат для создания абзацев, при этом не допускается вложение в абзац абзаца, обязательных атрибутов у него нет.
С помощью атрибута ALIGN теги <P> и <hn> задают тип горизонтального выравнивания заголовка или абзаца внутри блока (left - по левому краю, right - по правому краю ,center - по центру, justify - по левому и правому краям одновременно).
Контейнеры с заголовками и абзацами принято помещать в контейнеры форматирования <FONT> … </FONT> для определения внешнего вида текста и расположения его на странице. Обязательных атрибутов у контейнеров нет, также они могут содержать строчные элементы. А вообще вместо <FONT> следует использовать таблицу стилей.
Параметр <FONT> используется для форматирования шрифта любого фрагмента текста. Например, параметр FACE позволяет задать гарнитуру шрифта (например, FACE= "Arial"), параметр SIZE - размер шрифта (например, SIZE=-1), параметр COLOR задаёт цвет шрифта (например, COLOR="green"). Значение параметра COLOR можно задать либо его шестнадцатеричным значением, либо названием цвета. Шестнадцатеричное представление использует RGB формат "#RRGGBB", где две первые цифры задают интенсивность красного, третья и четвёртая - интенсивность зелёного и две последние - интенсивность синего цветов. Минимальная интенсивность цвета задаётся шестнадцатеричным числом 00, а максимальная - FF.
1.2 Как вставить графический файл на web-странице
На каждую web-страницу можно поместить различное количество изображений. Можно использовать либо готовые графические изображения, либо изображения, сделанные самим. Посмотрим, как вложить в web-документ готовый набросок.
Графические изображения, которые можно вставить в web-документы, должны быть сделаны в графическом формате, который смог бы поддерживать браузер. Стандартные форматы графического изображения: JPG, GIF и PNG. Если сопоставить размеры их файлов с другими форматами, то мы заметим, что JPG, GIF и PNG настолько малы, что значительно ускоряет загрузку изображения.
С помощью атрибута ALIGN тэга <IMG>(у которого обязательные атрибуты: src и alt) можно задать расположение изображения относительно другого элемента: TOP - верхняя граница элемента, MIDDLE - центр элемента, BOTTOM - нижняя граница элемента, LEFT - левая граница элемента, RIGHT - правая граница элемента.
Если изображение находится на компьютере в том же каталоге, что и файл страницы, то в качестве значения атрибута SRC, определяющего адрес какого-либо элемента, достаточно указать имя файла:
<IMG SRC= "lalala.jpg">
Если же файл находится в другом каталоге на компьютере, нежели файл страницы, то значением атрибута должно быть полное имя файла, включая путь к нему в файловой системе:
<IMG SRC= "D:\ lalala\ lalala.jpg">
Если файл находится на удалённом сервере в Интернете, то должен быть указан адрес этого файла:
<IMG SRC= "http:// www.kukushka.ru / lalala.jpg">
Чтобы сэкономить время, некоторые пользователи интернета отключают в браузере загрузку изображений и читают только текст на страницах. Чтобы пользователь интернета имел представление, что показано на изображение, вместо картинки может выводиться текст, который поясняет содержимое изображения, с помощью атрибута ALT:
<IMG SRC= "lalala.gif" ALT = "Нога">
1.3 Гиперссылки
Когда создаётся сайт, создается также группа страниц, связанных между собой гиперссылками. Файлы с отдельными страницами сайта помещаются в папку сайта.
В HTML-документах текстовые ссылки по умолчанию выделяются синим цветом, а при клике на них в окне браузера изменяются, например, выделяются подчеркиванием или меняют цвет. Посещенные и непосещенные ссылки обычно отличаются друг от друга цветом. При навигации в браузере текстовые и графические ссылки выделяются пунктирной прямоугольной рамой.
В группе страниц выделяется домашняя страница, в которой содержится переход на другие страницы сайта, чтобы обеспечить навигацию по сайту, на страницу надо поместить гиперссылки на страницы. Домашняя страница чаще всего сохраняется в файле с именем index.htm.
Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки - это текст, который чаще всего выделяется подчеркиванием и цветом, или рисунок на Web-странице. Если активизировать гиперссылки, это вызовет переход на другие страницы.
Адресная часть гиперссылки содержит адрес документа, на который указывает ссылка. Адрес может быть абсолютным или относительным: абсолютный адрес указывает полный адрес к нужному нам документу.
Абсолютный адрес документа, находящегося на компьютере, будет включать в себя путь к файлу и имя файла: D:/Web-site/rabota.htm
Абсолютный адрес документа, который находится на удалённом компьютере в Интернете, будет представлять с собой имя сервера Интернета, путь к файлу и имя, например: http:// www.uslugi.ru/ Web-site/rabota.htm
Относительный URL-адрес указывает на местоположение документа относительно страницы, на которой расположена ссылка. Когда создаешь сайт, лучше помещать входящие web-страницы в одной папке и связывать их относительными ссылками, что позволит указывать в адресной части ссылки только имя файла.
rabota.htm
При перемещении папки, в котором находится web-сайт, в другой каталог компьютера или при публикации сайта в Интернете, гиперссылки не надо будет меняться.
Следует размещать гиперссылки в нижней части страницы, в отдельном абзаце и в одной строке, в которой эти гиперссылки разделены несколькими пробелами. Тогда получится удобная для пользования сайта панель навигации.
Панель навигации выглядит как абзац, в котором указатели гиперссылок разделены пробелами ( ):
<P ALIGN= "left">
[Ссылка 1]  
[Ссылка 2]
</P>
Гиперссылка создаётся с помощью контейнера </A>
Атрибут контейнера HREF создаёт адресную часть ссылки. Указатель гиперссылки задает её текст.
<A HREF= "parampam.htm">Непонятная штука</A>
2. Проектирование макета сайта
В первую очередь, чтобы создать сайт, нужно воспользоваться макетированием: макета сайта в целом, общего макета страниц, макетов отдельных страниц, создать навигационную панель и т.д.
Макет сайта задает количество и тематику отдельных страниц, иерархию страниц.
При разработке макета сайта желательно выполнить разбиение содержимого на отдельные страницы и объединить страницы в смысловые разделы. Также важно отметить связи по смыслу между страницами и их родственные отношения (предыдущая - следующая, родительская - дочерняя).
Можно выделить три схемы для макета сайта:
линейная,
табличная,
иерархическая.
Общий макет страниц задает общее для всех страниц разбиение на зоны. При разбиении страницы задаются персональная зона для размещения информации на странице, общие для всех страниц зоны со стандартными элементами: заголовок страницы, навигационная панель с гиперссылками для перехода на другие страницы, общая информация, доступная на всех страницах сайта. Общие зоны аналогичны колонтитулам в многостраничном текстовом документе.
Возможны следующие вариации разбиения страниц на зоны:
Чаще всего для разбиения страниц на зоны выбирается вариант 4:
2.1 Линейная структура
Линейная структура сайта - самая простая структура: web-страницы идут одна за другой, а пользователь должен просматривать их как слайд-шоу. В линейной структуре не бывает разделения контента на уровни. Все страницы при линейной структуре имеют равную значимость, и их увидит любой посетитель. Несмотря на то, что линейная структура сайта достаточно проста в реализации, недостатков у нее намного больше, чем достоинств. Поэтому её редко применяют, чаще всего на сайтах-презентациях, имиджевых сайтах и в онлайновых учебных пособиях.
Линейная структура предполагает перемещение по сайту на шаг вперед и назад:
Для удобства перемещения на страницах размещаются гиперссылки на соседние страницы и номер текущей страницы в общей последовательности страниц.
2.2 Табличная структура
Табличная структура лучше всего применять для сайтов, в которых частота просмотра информации, находящейся по вертикали структуры и по горизонтали структуры, совпадает. Чаще всего, за основу такой структуры берётся табличная форма классификации данных.
К примеру:
Также на сайте можно составить горизонтальную и вертикальную навигацию в соответствии таблицей. В подобном сайте можно смотреть информацию либо по выбранному процессору, либо по выбранной характеристике для всех процессоров:
Страница в табличном сайте выглядит следующим образом:
Навигационные гиперссылки, размещенные на странице, точно соответствуют табличной структуре сайта.
2.3 Иерархическая структура
Иерархическая структура является самой популярной структурой для создания сайта. Она включает в себя главную страницу, на которой размещена навигационная панель с гиперссылками на разделы сайта, расположенные на следующих страницах. Например, эти страницы соответствуют главам текстового документа. Иерархическая структура годится для создания, наверное, любых типов сайтов. Её принцип заключается в том, что пользователь интернета при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, есть ещё необходимые подразделы и т.д. Подобная структура применяется в создании социальных сетей.
Если все страницы сайта являются дочерними главной страницы, то гиперссылки на все страницы можно разместить на главной странице в виде горизонтального или вертикального меню. Если иерархия страниц имеет несколько уровней, то используются три типа меню: меню сайта, меню соседей по уровню, меню дочерних страниц. Меню сайта чаще всего расположено на главной странице, содержащей ссылки на все страницы сайта или на страницы первого уровня. Меню соседей по уровню чаще всего содержит гиперссылки для перехода на соседние страницы уровня («вперед», «назад»). Меню дочерних страниц служит для перехода на присоединенные к текущей странице дочерние страницы на следующем уровне иерархии:
3. Мой сайт
В процессе создания своей курсовой работы, я попробовала создать сайт. Естественно, без первоначального проекта макета не обошлось, ибо макетирование - это основа для создания любой web-страницы.
Использовала я табличную структуру сайта.
Верхний фрейм у меня выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
body {
background-color: #CFC;
}
</style>
</head>
<body>
<h2 align="center">Что такое программирование
</h2>
</body>
</html>
Нижний фрейм:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
body {
background-color: #FFC;
}
</style>
</head>
<body>
<p><strong>Программимрование</strong> -- процесс создания компьютерных программ.</p>
В узком смысле (так называемое <strong>кодирование</strong>) под программированием понимается написание инструкций (программ) на конкретном языке программирования (часто по уже имеющемуся алгоритму -- плану, методу решения поставленной задачи).
Соответственно, люди, которые этим занимаются, называются программистами (на профессиональном жаргоне -- кодерами), а те, кто разрабатывают алгоритмы -- алгоритмистами, специалистами предметной области, математиками.
В более широком смысле под программированием понимают весь спектр деятельности, связанный с созданием и поддержанием в рабочем состоянии программ -- программного обеспечения ЭВМ. Иначе это называется «программная инженерия» («инженерия ПО»).
Сюда входят анализ и постановка задачи, проектирование программы, построение алгоритмов, разработка структур данных, написание текстов программ, отладка и тестирование программы (испытания программы), документирование, настройка (конфигурирование), доработка и сопровождение.
<h2 align="center"> </h2>
<h2 align="center">Стадии прогр</h2>
<table width="958" height="245" border="1">
<tr>
<th scope="row">Анализ</th>
</tr>
<tr>
<th scope="row">Проектирование</th>
</tr>
<tr>
<th scope="row">Кодирование и компиляция</th>
</tr>
<tr>
<th scope="row">Тестирование и отладка</th>
</tr>
<tr>
<th scope="row">Испытание и сдача программ</th>
</tr>
<tr>
<th scope="row">Сопровождение</th>
</tr>
</table>
<h2 align="center">аммирования<br />
</h2>
<p align="center"> </p>
<p> </p>
</body>
</html>
Сам сайт:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<frameset rows="61,676" cols="*">
<frame src="Untitled-1.html" />
<frame src="UntitledFrame-1.html" />
</frameset>
<noframes><body>
</body></noframes>
</html>
Заключение
Итак, мы видим, что существует множество различных структур сайта. Мы рассмотрели только самые основные из них. Между тем, у них есть различные вариации. Чтобы выбрать структура для сайта, нужно учитывать, что лучше делать выбор с учетом будущих потребностей. В этом случае больше шансов сохранить свой сайт в порядке, не прибегая к коренной перестройке всего сайта.
Используемая литература
1. “Секреты создания недорогого Web-сайта” А. Мартинес.
2. “Энциклопедия создания сайта для начинающих. Версия 3”.
3. “HTML. Популярный самоучитель” Чиртик Александр.
4. http://www.tepka.ru/sitestroy/9.html.
5. http://www.smartincom.ru/html/.
6. http://myrusakov.ru/sozdanie-sajta-html.html.
7. http://sozdavaite-sait.ru/html_sites/sozdat-sajt-v-bloknote/207-maket-karkas-html-sayta.html.
Размещено на Allbest.ru
Подобные документы
Разработка сайта в приложении FrontPage. Программные средства и технологии, используемые при разработке сайта. Основная структура сайта и размещение исходных файлов. Создание графических страниц, элементов и рисунков. Размещение сайта в сети Internet.
курсовая работа [1,6 M], добавлен 13.06.2013Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.
курсовая работа [2,2 M], добавлен 16.04.2017Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011Рассмотрение основных этапов создания сайта. Использование вайрфреймов как документации по проекту. Использование мокапа и структура навигации сайта. Правильный выбор цветов для проекта. Использование модульной сетки и разработка дизайна сайта.
презентация [2,8 M], добавлен 01.09.2019Понятие сайта и их классификация - корпоративные, презентационные, тематические, интернет-магазины. Язык гипертекстовой разметки HTML и его средства разработки. Виртуальный web-сервер Denver и MySQL базы. Этапы разработки сайта и структура навигации.
дипломная работа [2,4 M], добавлен 13.01.2015Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009Проектирование web-сайта. Пользовательские персонажи, детальная концепция сайта. Разработка скелетной схемы страниц, информационной архитектуры. Создание прототипа web-сайта. Выбор среды разработки. CMS системы и их анализ. Стадии проектирования сайта.
курсовая работа [346,7 K], добавлен 18.09.2016Виды структур Web-сайтов: линейная, древовидная, решетчатая и произвольная. Структура и содержание сайта гостиничного комплекса "Воздвиженское", "Смоленск" и "Иртыш". Идеи сайта и целевая аудитория. Заполнение страниц информацией и тестирование сайта.
курсовая работа [1,7 M], добавлен 25.04.2015Структура сайта, выполненного при помощи HTML-кода и CSS-таблиц. Создание базы данных. Описание главной страницы. Форма для оформления заказа. Скрипт, выводящий дату и день недели. Проектирование CSS-документа (файла) для оформления страниц сайта.
курсовая работа [570,7 K], добавлен 30.12.2013Создание локальной версии Web-сайта компании, оказывающей услуги в сфере "Дизайн помещений". Логическая структура сайта – набор тематических рубрик с распределенными по разделам документами. HTML–коды Web-страниц. Теоретические аспекты создания сайта.
курсовая работа [94,0 K], добавлен 10.05.2011
