"Разработка сайта с использованием языка html"

Введение 3

Глава 1. Создание web – сайта 4

1.1 Описание предметной области 4

1.2 Разработка дизайна Web-страниц сайта 4

ГЛАВА 2. Постановка задачи 7

2.1 Информационная структура web-сайта 8

2.2. Код сайта 10

Заключение 26

Список использованной литературы 27

Приложение 28

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

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

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

Целью работы является формирование теоретических знаний по проектированию web-сайта и практических навыков по его разработке.

Для выполнения курсового проекта были поставлены следующие задачи:

проанализировать содержание сайтов для выявления актуальных потребностей пользователей Интернет;

познакомится с основными теоретическими понятиями разработки web-сайта;

научится проектировать и разрабатывать web-сайт.

1. Описание предметной области

На первом этапе проектирования web-сайта необходимо выполнить анализ предметной области, т.е. определить объекты предметной области и связи между объектами.

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

В предметном подходе объекты предметной области определяются с таким расчетом, чтобы их можно было использовать при решении множества разнообразных, заранее не определенных задач

1. Разработка дизайна Web-страниц сайта

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

Большинство дизайнеров рекомендуют разрабатывать страницы в формате 640x480, чтобы при просмотре пользователям не пришлось применять горизонтальную прокрутку. Горизонтальная прокрутка всегда затрудняет восприятие, поэтому дизайнеры традиционно ее отвергают.

Все большее число разработчиков считает стандартным разрешение 800x600. И совсем единицы разрабатывают страницы для еще более высоких разрешений. Конечно, ваше решение будет, в первую очередь, зависеть от аудитории. Например, если сайт ресурсов для дизайнеров графики, то считаем, что они имеют дисплеи, по крайней мере, с разрешением 800x600 или выше, в соответствии с чем и разрабатывается страница. Если сайт предназначен специально для WebTV или какого-то другого устройства отображения, следует ориентироваться на это конкретное устройство.

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

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

Многие люди с проблемами зрения используют текстовые браузеры (такие как Lynx) вместе с программным обеспечением, которое громко читает содержимое страницы. В любом случае основное внимание уделяется структуре документа и его тексту. Графическое содержимое может быть просто утеряно.

Исходя из данных выше правил, дизайн сайта будет следующим.

Рисунок 1.1 Шаблон дизайна сайта

Рисунок 1.2 Дизайн сайта.

Постановка задачи - это важнейший этап создания сайта, который позволяет разработчику сайта минимизировать трудозатраты, сократить время, и уменьшить количество возможных ошибок и недоработок при создании сайта.

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

Данный этап можно так же назвать "А зачем и для чего нужен сайт?". Обычно для того чтобы постановка задачи была наиболее полной, заказчику необходимо понять и ответить на следующие вопросы:

Цель создания сайта:

Сайт создается для автоматизации некоторой работы сотрудников телевидения. Для получения отзывов о работе, получение заказов поздравлений по существующей форме, и привлечение новой аудитории. На сайте будут так же показываться новости района и фотоотчеты с мероприятий.

Целевая аудитория:

В основном, аудиторией будет являться молодые люди школы. Так как пожилые люди не пользуются сетью Интернет.

Необходимые ресурсы:

Такими ресурсами могут быть тексты, фотографии, аудио-видео материалы, прайс-листы, логотип, базы данных и т.д.

Определение сроков:

Сайт создается в течении месяца.

Как же выглядит информационная иерархия на web-странице? Один из вариантов может быть таким:

Логотип

Название сайта

Слоган

Название страницы

Заголовки

Навигация

Выделенный текст

Простой текст

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

Логотип- "опознавательный знак" сайта. В деловом интернете это элемент связи между реальным и виртуальным представлением той или иной организации.

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

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

Название страницы предназначено для определения текущего местоположения посетителя на сайте.

Заголовки служат для краткого описания содержания информационного блока, к которому они относятся, или используются как рекламные фразы для привлечения внимания.

Навигация предназначена для быстрого перехода от одной информации

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

Выделенный текст предназначен для акцентирования внимания посетителей на нем.

Простой текст служит в качестве носителя информации.

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

Графически информационную структуру сайта можно представить в виде независимых вложенных информационных блоков, оформленных различным способом и размещенных на плоскости.

2.2. Код сайта
	Школа - Начало
	//fonts.googleapis.com/css?family=PT+Sans:700|Roboto+Condensed:700|Open+Sans:regular,italic,600,700&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'
	https://dss4hwpyv4qfp.cloudfront.net/designs/_shared/fonts/?family=Oswald:400,400italic&v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/designs/_shared/css/layout-shared.css?v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/designs/_shared/css/menu-bones.css?v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/designs/tradition-red/css/layout.css?v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/designs/tradition-red/css/editable.css?v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/designs/tradition-red/css/theme-red.css?v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/mozello.ico" rel="shortcut icon"
	https://dss4hwpyv4qfp.cloudfront.net/backend/css/backend.css?v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/backend/css/common.css?v=1.232" type="text/css" /
	https://dss4hwpyv4qfp.cloudfront.net/libs/js/spectrum/spectrum-mozello.css" type="text/css" /
	https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
	https://dss4hwpyv4qfp.cloudfront.net/libs/js/rangy/rangy-core.js"
	https://dss4hwpyv4qfp.cloudfront.net/libs/js/rangy/rangy-cssclassapplier.js"
	https://dss4hwpyv4qfp.cloudfront.net/libs/js/rangy/rangy-textrange.js"
	https://dss4hwpyv4qfp.cloudfront.net/cache/backend-ru.1.232.js"
	var MOZELLO_CDN = 'https://dss4hwpyv4qfp.cloudfront.net'; var MOZELLO_VERSION = '1.232';
	#top, #submenu li:hover a, #submenu li.selected a { background-color : #4e4c4c }
	#title .mz_wysiwyg { color : #000000 }
	#menu ul li a, #submenu li:hover a, #submenu li.selected a, #languages li a { color : #000000 }
	#menu ul li a:hover, #menu ul li.selected a, #languages li a.selected, #languages li a:hover { color : #969696 }
	#sidebar .sidebox { background-color : #f5f5f5 }
	#submenu a { color : #333333 }
	#submenu { background-color : #eeeeee }
	a, .mz_editable a { color : #000000 }
	a:hover, .mz_editable a:hover { color : #858585 }
	.moze-form .moze-formbutton, .moze-button, .moze-button-large { background-color : #96ca2d }
	.moze-form .moze-formbutton:hover, .moze-button:hover, .moze-button-large:hover { background-color : #858585 }
	#bottom #social a { color : #96ca2d }
	#bigbar-overlay { background-color : hsla(0, 0%, 0%, 0.73) }
	.bigbar-h1 .mz_wysiwyg, .bigbar-h2 .mz_wysiwyg { color : #ffffff }
	.mz_editable h1, .mz_editable h1.moze-megatitle, .mz_editable h1 a { color : #333333 }
	.mz_editable h2, .sidebox h2 { color : #333333 }
	.mz_editable h3 { color : #333333 }
	body { background-color : #333333 }
	#bottom .mz_wysiwyg { color : #cccccc }
	#bottom a { color : #ffffff }
		#bottom a:hover { color : #cccccc }
Страницы Блог / Новости Дизайн Сменитьдизайн Изменитьцветовуюсхему Изменитьшрифтовуюсхему Адрес Настройки Просмотр Запустить Выйти Дополнительно» « Цветовыесхемы « Назад Далее» « Назад Далее» Сбросить Закрыть data-type="lngselect" /"RUS Добавитьязык"   data-type="wysiwyg" data-premium="" data-role="title" data-toolbar="1" "moze-wysiwyg-editor" contenteditable="true" https://historytime.ru/wp-content/uploads/2017/03/pamiatnik.jpg" class="moze-img-left" style="width: 412px;" style="letter-spacing: normal;"Муниципальноеобщеобразовательноеучреждение «Многопрофильныйлицей №5» им.А.С.Пушкина                /" Начало /novosti/" Новости /informacija/" Информация /galereja/" Галерея /kontakty/" Контакты Страницы Добавить /libs/js/jquery/jquery.unveil.js" $(document).ready(function() { $(".moze-gallery img").unveil(300); }); var webformFx = function (form) { this.gatherData = function () { var result = {}; $(form).find('[name^="moze-webform-ctrl-"]').each(function () { if ($(this).attr('type') == 'checkbox') { result[$(this).attr('name')] = $(this).is(':checked') ? 1 : 0; } else { result[$(this).attr('name')] = $.trim($(this).val()); } }); return result; }; this.validateForm = function () { var requiredCtrls = form.find('[data-required]'); var result = true; requiredCtrls.removeClass('moze-formerror'); $.each(requiredCtrls, function () { var subresult; var validator = $(this).data('required'); switch (validator) { case 'textbox': subresult = $(this).val() !== ''; break; case 'multiline': subresult = $(this).val() !== ''; break; case 'checkbox': subresult = $(this).is(':checked'); break; case 'combobox': subresult = $(this).val() !== ''; break; case 'email': subresult = $.trim($(this).val()).match(/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-] +(.[a-z0-9-]+)*(.[a-z]{2,4})$/i) !== null; break; } if (subresult === false) { $(this).addClass('moze-formerror'); } result = result && subresult; }); return result; }; if (this.validateForm()) { var componentID = $(form).parent('div.mz_form').data('cid'); mozLive({ src: {id: componentID}, dest: null, action: 'webform-submit', task: 'redirect', parameters: { data: this.gatherData(), href: '/galereja/params/submitted/' + componentID + '/' }, errors: { maintenance: 'Мы сейчас не можем обработать ваш запрос. Повторите попытку позже.' } }); } else { alert($(form).data('failuremsg')); } return false; }; data-name="wysiwyg-gallery-group_2bf8ec42e0f830417e546330a8ad3114" data-type= "wysiwyg" data-premium="" data-role="editor" data-toolbar="1" contenteditable="true" Галерея "gallery_2bf8ec42e0f830417e546330a8ad3114" data-type="gallery" "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0111.JPG?2087077" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0138.JPG?2087097" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0188.JPG?2087098" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0111-1.JPG?2087099" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0124.JPG?2087100" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0125.JPG?2087105" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0140.JPG?2087106" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0225.JPG?2087108" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0223.JPG?2087109" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0224.JPG?2087110" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0227.JPG?2087113" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0259.JPG?2087119" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0266.JPG?2087121" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0267.JPG?2087122" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/20170327_140023.jpg?2113525" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/20170327_125130.jpg?2113527" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0001.JPG?2113683" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_9439.JPG?2113851" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0504.JPG?2113865" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0565.JPG?2113869" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0146.JPG?2113871" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0171.JPG?2113875" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_0104.JPG?2113887" alt="" Редактировать"  Удалить"  "//site-481956.mozfiles.com/files/481956/galleries/10284327/thumb/IMG_9957.PNG?2113916" alt="" Редактировать"  Удалить"  thumb/IMG_9400.PNG?2113917" alt="" Редактировать"  Удалить"  galleries/10284327/thumb/IMG_9963.JPG?2113918" alt="" Редактировать"  Удалить"  galleries/10284327/thumb/IMG_0245.JPG?2113919" alt="" Редактировать"  Удалить"  JPG?2113920" alt="" Редактировать"  Удалить"  PNG?2113977" alt="" Редактировать"  Удалить"  Добавитьизображение Создатьгруппу Изменитьразметкустраницы Редактироватьмакет data-type="wysiwyg" data-premium="1" data-role="footer" data-toolbar="1" class="moze-wysiwyg-editor" contenteditable="true" Сайтсоздансhttp://www.mozello.ru/" target="_blank" rel="nofollow" rel="nofollow" Mozello - самымудобнымонлайнконструкторомсайтов. "Настройкапрофилейсоциальныхсетей"  #" data-href= "/m/social-edit/params/social/10284335/" #" data-href="/m/social-edit/params/social/10284335/" #" data-href="/m/social-edit/params/social/10284335/" javascript:void(0);" onclick="location.reload();" rel="nofollow"Отмена /meduspods/" . -80% Курсы дополнительного образования Создание динамических веб-страниц с помощью PHP и MySQL Продолжительность 72 часа Документ: Cвидетельство о прохождении курса 4000 руб. 800 руб. Подробнее Получите комплекты видеоуроков + онлайн версии Информатика 8 класс ФГОС Информатика 7 класс (Россия) Информатика 5 класс (Россия) Основы алгоритмизации и... Информатика 11 класс ФГОС Электронная тетрадь по информатике 9... Творческие задания в Sсratch 5-6 классы Информатика и ИКТ 11 класс (к учебнику... Скачать разработку Сохранить у себя: "Разработка сайта с использованием языка html" (4.95 MB) Уроки по информатике 10 класс 0 612 8   Нравится 0 Добавить эту разработку в избранное Похожие файлы Создание информационного сайта по изучению языков программирования (дипломная работа) Методы и средства создания и сопровождения сайта Программа по информатике 8 - 9 класс (Угринович) Сетевые технологии. Интернет. Основы языка HTML. Форматирование HTML-документа Знакомство с языком HTML Комментарии 0 Чтобы добавить комментарий зарегистрируйтесь или войдите на сайт Скачивание сейчас начнётся... Не забудьте поделиться материалом в социальных сетях с Вашими коллегами Вы смотрели "Разработка сайта с использованием языка html" Урок литературного чтения "Болтливая баба" Методическая разработка: «Правила цитирования». Контрольная работа №1 по биологии Рабочая программа по математике 9 класс Зарегистрироваться Электронная почта Такой пользователь уже существует, вы можете войти или восстановить пароль Пароль Повторите пароль Я ученик Я учитель Я родитель Регистрируясь Вы соглашаетесь с пользовательским соглашением и политикой конфиденциальности, а также даёте согласие на получение информационных и рекламных писем от ООО “Мультиурок” на указанный Вами e-mail. Отказаться от рассылки Вы сможете в любой момент, кликнув на ссылку "отказаться от рассылки", которая будет в каждом письме. Или войти с помощью аккаунта в соцсети Войти в профиль Электронная почта Пароль Оставаться в системе Вспомнить пароль Войти в кабинет ученика Или войти с помощью аккаунта в соцсети Зарегистрироваться Восстановление пароля Введите вашу электронную почту, чтобы восстановить пароль!