Веб-ресурс СМИ "ECO News" (на материале английского языка)

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение высшего образования

Ульяновский государственный технический университет

Дисциплина WEB- дизайн

Курсовой проект

Тема: Веб-ресурс СМИ "ECO News" (на материале английского языка)

Выполнил студент

Л.Н. Пономарева

Руководитель

к.т.н. Степчева Зоя Валерьевна

Ульяновск 2017



Оглавление

Введение

Глава 1. Теоритические основы веб-дизайна. Основные понятия

1.1 Основы создания сайта

1.2 Помещение графических изображений на Web - страницу.

1.3 Добавление звуковых и музыкальных фрагментов к Web - странице.

1.4 Использование таблиц стилей для размещения элементов Web - страниц.

1.5 Создание всплывающих кнопок

1.6 Проверка орфографии Web - страницы

1.7 Удаление файлов Web - сайта с Web - сервера

Глава 2. Разработка веб-ресурса СМИ «ECO News»

2.1 Техническое задание к проекту

2.2 Разработка структуры сайта

2.3 Краткое описание основных этапов разработки проекта

2.4 Верстка веб-страниц

Заключение

Список литературы



Введение

В 1994 году началась революция - World Wide Web. Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, которые содержат в себе разную информацию в зависимости от тематики Web сайта. Полезность Internet повышалась вместе с развитием вычислительной техники с запаздыванием примерно в 10 лет. В конце 80-х годов появление персональных компьютеров перенесло информатику из царства знатоков к широкой публике. Internet в ходе своего развития и повсеместного распространения занимается именно таким переносом.

Среди большого множества средств и программных продуктов было очень сложно ориентироваться. Каждая компания разработчик пыталась ввести нечто новое в свои средства. Это очень сильно отражалось на пользователе, который порой даже не мог отобразить Web документ на своём компьютере. Постоянно существовала необходимость устанавливать всё новое программное обеспечение для просмотра и работы с Web документами, которые были созданы при помощи нового языка программирования для Web. Также они не могли справиться с поставленными задачами, и приходилось смешивать некоторые средства разработки для Web.

В 1992 году Тим Бернерс-Ли и другие исследователи создали Web, который позволил «просматривать» ресурсы Internet, не прибегая к помощи сложных команд. За несколько лет существования Web браузеры - программы, предназначенные для просмотра Internet, - сделали Web еще простым и одновременно мощным.

Слово Web используется в двух разных смыслах. Обычно под словом «Web» подразумевают World Wide Web - всемирную «паутину», однако в применении к FrontPage под Web подразумевается набор страниц, созданных в этом приложении для Web - сайта.

В основу Web был положен гипертекст (hypertext) - метод связывания блоков, или «страниц», данных, придуманный еще в шестидесятых годах. Однако только в девяностых годах Бернерс-Ли и его сотрудники перенесли концепцию гипертекста в Internet, создав HTTP - Hypertext Transfer Protocol (протокол передачи гипертекста). С появлением HTTP родился и World Wide Web.

Если в основу World Wide Web были положены протокол HTTP и гипертекст, то Web основан на HTML - Hypertext Markup Language (Язык описания гипертекстовых документов).

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

Кроме описания формата текста и положения графики на странице язык HTML используется и для других целей. Гиперссылка дает команду Web - браузеру перейти к новой странице в Internet и отобразить ее содержимое на экране.

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

Цель работы заключается в разработке и выделении особенностей дизайна современных СМИ.

интернет сайт дизайн



Глава 1. Теоритические основы веб-дизайна. Основные понятия

1.1 Основы создания сайта

Интернет - глобальная информационная сеть, части которой логически взаимосвязаны друг с другом посредством единого адресного пространства, основанного на протоколе TCP/IP. Интернет состоит из множества взаимосвязанных компьютерных сетей и обеспечивает удаленный доступ к компьютерам, электронной почте, доскам объявлений, базам данных и дискуссионным группам.

Веб-дизайн - дизайн сайтов и их отдельных элементов, создание графических рекламных материалов в Internet. Обычно услуги веб-дизайна предоставляют студии веб-дизайна.

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

Веб-страница - самостоятельная часть веб-сайта; документ, снабженный уникальным адресом (URL). Веб-страница может иметь статическое или динамическое построение. Обычно веб-страницы организуется в виде гипертекста с включениями текста, графики, звука, видео или анимацию. В сети Интернет просмотр веб-страниц осуществляется посредством браузера.

Главная страница - начальная страница веб-сайта. Обычно главная станица несет основную презентативную и навигационную нагрузку.

Личные страницы - веб-страницы, которые принадлежат физическим лицам. Содержание и оформление личной страницы зависит только от ее автора.

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

На каждом Web - сайте существует одна особенная Web - страница, называемая домашней или главной страницей (homepage).

Все посетители сайта сначала попадают на эту страницу. Щелкнув на той или иной гиперссылке, пользователи смогут попасть и на другие страницы сайта.

Web - страницы, на которые указывают гиперссылки, могут быть расположены и на том же самом компьютере, где размещена домашняя страница, и на любом другом компьютере, подключенном к Internet.

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

Гиперссылка состоит из двух частей: самой гиперссылки и адреса назначения (target), определяющего путь к Web - странице, которая загрузится после щелчка на гиперссылке. Когда пользователь помещает указатель мыши на гиперссылку, он принимает форму указывающей руки. Такая форма указателя сообщает пользователю, что объект (графическое изображение или текст), расположенный под ним, представляет собой гиперссылку.

Браузер - от английского слова Browser (окно просмотра или обозреватель), т.е. программа-обозреватель Internet - Internet Explorer, Opera или любая другая.

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

Web - сайт размещается на Web - сервере (Web - server) - компьютере, предоставляющем доступ к Web - страницам посетителям сайта. Однако можно создать Web - сайт непосредственно в файловой системе компьютера, а затем, когда он будет готов, опубликовать его на Web - сервере. Обычно Web - сервер подключен к Internet, что позволяет просматривать Web - страницы, размещенные на нем, в World Wide Web. Многие компании и организации устанавливают Web - серверы и в интранет - сетях. На таких серверах лучше всего размещать Web - сайты, содержащие внутри корпоративную информацию, предназначенную только для сотрудников компании. К некоторым страницам интернет - сайта может быть открыт доступ и из World Wide Web, в то время как остальные страницы будут доступны только из локальной сети компании.

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

Затем необходимо определить, как Web - страницы сайта будут связаны друг с другом. Очевидно при помощи гиперссылок.

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



1.2 Помещение графических изображений на Web - страницу

Существуют два основных типа графических изображений: фотографии и рисунки. Файлы, содержащие фотографические изображения, могут быть разных форматов, но для Web - браузеров чаще всего используются либо GIF (Graphics Interchange Format - формат обмена графическими данными), либо JPEG (Joint Photographic Group - формат объединенной экспертной группы по фотографии). В форматах GIF и JPEG используются алгоритмы сжатия изображений, что дает возможность хранить изображения в файле меньшего размера, чем в случае других форматов. Файлы изображений в этих форматах будут загружаться быстрее.

1.3 Добавление звуковых и музыкальных фрагментов к Web - странице

Большая часть Web - страниц несет в себе какую-либо информацию, однако информация - не единственное, ради чего стоит создавать страницы. Нужно сделать так, чтобы Web - сайт было просто приятно просматривать. Один из способов сделать сайт более привлекательным - добавить на домашнюю страницу фоновое звуковое оформление. Фоновый звук будет воспроизводиться все время, пока страница будет открыта в Web - браузере. Но так же просто можно помещать на страницы и видеоклипы. Когда посетитель Web - сайта загружает страницу с встроенным видеоклипом, будут одновременно воспроизводиться видео и звук. Также можно создавать гиперссылки к файлам, содержащим видеоклипы.

1.4 Использование таблиц стилей для размещения элементов Web - страниц

Одним из привлекательных, но не очень простых приемов является возможность контролировать внешний вид Web - страниц при помощи таблиц стилей (style sheets). Таблица стилей Web - страницы представляет собой отдельный текстовый файл, в котором задаются различные элементы страницы.

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

1.5 Создание всплывающих кнопок

Видеоклипы не являются единственным типом анимации, которая доступна при работе с FrontPage. Еще один популярный мультимедийный эффект - всплывающая кнопка (hover button), внешний вид которой изменяется, когда посетитель сайта наводит на нее указатель мыши.

Всплывающая кнопка представляет собой Java - апплет (программу), создаваемый FrontPage. Можно использовать всплывающую кнопку для перехода к другой Web - странице. Когда посетитель Web - сайта наводит указатель мыши на всплывающую кнопку, она реагирует на это, например, меняет цвет или принимает вид нажатой кнопки. Когда посетитель щелкнет на такой кнопке, на экране откроется страница, на которую была задана ссылка с данной кнопки.

1.6 Проверка орфографии Web - страницы

Прежде опубликовать Web - сайт на сервере, неважно, в Internet или в локальной сети, необходимо сделать его как можно более совершенным. Ошибки, допущенные по невнимательности, могут произвести отрицательное впечатление о сайте.

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

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

1.7 Удаление файлов Web - сайта с Web - сервера

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

Файлы можно удалять самостоятельно, однако удаление папки лучше оставить системному администратору.



Глава 2. Разработка веб-ресурса СМИ «ECO News»

2.1 Техническое задание к проекту

Назначение данного проекта-хранение, получение, передача и распространение информации о происходящих событиях во всем мире. Территорией разработки данного веб-ресурса укажем город Веллингтон, Новая Зеландия.

Разрабатываемый курсовой проект должен удовлетворять следующим требованиям:

Технические требования

Объем веб-ресурса не менее 20 html-страниц;

Применение стандарта HTML 4.01 или HTML 5;

Создание внешнего файла CSS;

Применение блочной верстки;

Применение сценариев JavaScript;

Применение meta-информации: язык, кодировка, ключевые слова.

Использовать средства SEO-оптимизации.

Формирование файловой структуры

Применение элементов форм

Вставка мультимедиа объектов (Видео, Звук)

Требования по организации «внешнего интерфейса»

Формирование контента веб-проекта согласно типичной структуре веб-ресурса по заданной тематике;

Система навигация:

глобальное меню (основные разделы веб-ресурса, в том числе список используемых ресурсов), локальное меню, служебное меню (информация о веб-ресурсе и разработчике);

Подготовка графических объектов, в том числе логотипа веб-проекта, в графическом редакторе;

Наличие карты сайты;

Соблюдение основных принципов эргодизайна текста и его компонентов.

2.2 Разработка структуры сайта

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

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

Известны такие типы организации Web-сайтов.

Все файлы в одном каталоге. Маленькие сайты с несколькими HTML-страничками и несколькими изображениями могут позволить себе хранить все свое содержимое в одном каталоге. Одним из самых больших достоинств такой системы является то, что в локальных ссылках не нужно указывать путей. Недостаток состоит в том, что такая система оказывается перегруженной, если сайт разрастается: в этом одном каталоге, как на какой-то свалке, невозможно ничего найти. Обновлять такой сайт непросто.

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

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

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

В главном каталоге сайта при этом будет только index.html прочие каталоги могут содержать, например, все изображения сайта, HTML-странички, скачанные файлы и т.д. Главным достоинством такого подхода является то, что файлы при обновлении необходимо заменять только один раз. Например, если одна и та же картинка используется на нескольких страницах, достаточно будет заменить ее только в одном месте: там, где хранятся изображения.

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

Для создания сайта может быть использовано несколько методов. Наиболее распространенные - текстовый редактор (блокнот), язык описания гипертекстовых документов HTML, программа Microsoft FrontPage2003, специальные программы - скрипты, написанные на таких языках Microsoft VBScript или JavaScript.

При помощи Microsoft VBScript или JavaScript можно управлять форматированием, выводом изображений, воспроизведением мультимедиа - в этом скрипты похожи на программы, созданные при помощи других языков программирования. На сегодняшний день самым мощным средством, позволяющим управлять выполнением скриптов, является DHTML - Dynamic HTML (динамический HTML). DHTML позволяет создавать простые анимации и многие другие эффекты.

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

Кроме описания формата текста и положения графики на странице язык HTML используется и для других целей. Гиперссылка дает команду Web-браузеру перейти к новой странице в Internet и отобразить ее содержимое на экране.

Для написания кода веб-ресурса по выбранной теме был использован текстовый редактор Notepad++. Для него характерны следующие преимущества:

· Поддерживает несколько десятков языков программирования

· Цветная разметка и подсветка синтаксиса текста

· Автопрописывание тегов и автозавершение слов

· Система переключения между файлами

· Смена и редактирование кодировки

· Работа с двумя и более документами

· Неограниченное количество шагов как назад, так и вперед

· Возможность маркировать определенные строки кода

2.3 Краткое описание основных этапов разработки проекта

Разработка веб-ресурса в рамках курсового проекта состоит из следующих этапов:

1. 1.Определение тематики веб-проекта.

2. Разработка структуры веб-ресурса;

3. Прототипирование страниц веб-ресурса;

4. Создание графических макетов;

5. Вёрстка веб-страниц;

6. Интегрирование сценариев.

Определение тематики веб-проекта. Тема проекта: Веб-ресурс СМИ «ECO New». Под средствами массовой коммуникации принято понимать каналы, способы, материальные носители, «приспособления» для фиксирования, хранения и распространения информации для, через или от массовой аудитории СМК, связанные не только с техническим процессом получения, хранения и передачи информации, но и с технологиями представления и распространения информации. Основными СМК в современном обществе, являются СМИ - это газеты, радио, телевидение. Информационная революция изменила их, а также формы и содержание медиапродукции и медиа-среды, способствовала появлению принципиально нового канала коммуникации - Интернета.

Разработка структуры веб-ресурса. Веб-ресурс включает в себя следующие элементы:

· Контейнер;

· Логотип сайта;

· Навигация и контент:

Глобальное меню содержит следующие разделы:

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

Business - описание главных событий и новостей в сфере «Бизнес», переход осуществляется с помощью локального меню.

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

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

Politics - содержит актуальную информацию из мира «Политика», переход осуществляется с помощью локального меню.

Travel - содержит актуальную информацию о тур-операторах и новостях о популярных мест для отдыха, переход осуществляется с помощью локального меню.

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

Contact us - информация об авторе проекта, контактные данные.

Follow us - информация об источниках, где можно поделиться понравившейся информацией.

Прототипирование страниц веб-ресурса и создание графических макетов. Для создания прототипов страниц веб-ресурса был использован сервис NinjaMock (https://ninjamock.com).

Прототип главной страницы ресурса Home



Прототип страницы раздела Business

Прототип страницы раздела Climate

Прототип страницы раздела Transport



Прототип страницы раздела Politics

Прототип страницы раздела Travel

Прототип страницы раздела Lifestyle



2.4 Верстка веб-страниц

Если говорить простым языком, то это процесс создания веб-страниц с помощью специальных языков, которые как раз для этого и предназначены. Для этого дела используется HTML, CSS и JavaScript.

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

HTML - это язык разметки гипертекста. С его помощью формируется сама структура, каркас сайта. Соответственно, без HTML верстка просто невозможна!

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>. В первом случае курсив задаётся явным образом, а во втором на текст производится логическое ударение, которое обычно отображается курсивом. Иными словами при первом подходе ориентируются на внешний вид, а во втором -- на логическое предназначение. Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц. Если придерживаться логической разметки, то можно использовать один и тот же вариант вёрстки для экрана, печати и КПК регулируя внешний вид с помощью отдельных файлов стилей.

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

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

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

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

Блочная вёрстка. Блочная вёрстка -- верстка с помощью тега <div> и описывающего их множество таблицы стилей (CSS). Тег появился вследствие сознательного отказа консорциума «CSS Positioning (CSS-P)» от тега <layer>, чтобы создать аналогичный тег, но с поддержкой CSS в духе остальных тегов. С помощью блочной верстки реализуют концепцию семантической вёрстки.

Благодаря этому тегу <div> HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Главная страница (index.html) веб-ресурса будет включать в себя следующие основные блоки:

· <div id="main_container">

· <div class="eco-logo"><img src="images/logo.png" width="150" height="80" border="0" >

· <div class="eco-main-menu"><ul id="menu">

· <div class="eco-banners">

· <div class="eco-content__news-row">

· <div class="eco-footer">

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

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

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

После этого в html файле, между тегами необходимо добавить следующие строчки:

<link rel="stylesheet" type="text/css" href="styles/jquery-ui.css">

<link rel="stylesheet" type="text/css" href="styles/styles.css">

<link rel="stylesheet" href="styles/owlcarousel/owl.carousel.min.css">

<linkrel="stylesheet" href="styles/owlcarousel/owl.theme.default.min.css">.

Наш CSS-код на практике будет выглядеть так:

Код главной html страницы (index.html):

<!DOCTYPE html>

<html>

<head>

<title>Eco News - Homepage</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=devicewidth" />

<meta http-equiv="Cache-Control" content="no-cache">

<!-- seo -->

<meta name="description" content="Eco friendly news to sustain our world" />

<meta name="keywords" content="energy,echo,thechnologies,renewable,hybrid,electro,new zealand" />

<!-- /seo -->

<!--подключение стилей из внеших файлов-->

<link rel="stylesheet" type="text/css" href="styles/jquery-ui.css">

<link rel="stylesheet" type="text/css" href="styles/styles.css">

<link rel="stylesheet" href="styles/owlcarousel/owl.carousel.min.css">

<link rel="stylesheet" href="styles/owlcarousel/owl.theme.default.min.css">

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

<script src="jquery-ui.js"></script>

<script src="owl.carousel.js"></script>

<script>

$(document).ready(function() {

//дата

// Making 2 variable month and day

var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];

var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// make single object

var newDate = new Date();

// make current time

newDate.setDate(newDate.getDate());

// setting date and time

//идентификатор контейнера;метом html записываем в контейнер данные

$('#today_date').html(dayNames[newDate.getDay()] + ', ' + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ', ' + newDate.getFullYear());

});

</script>

</head>

<body>

<div id="main_container">

<!-- header -->

<div class="eco-header">

<!-- date & icons -->

<div class="eco-header__date">

<div id="today_date" class="eco-date">&nbsp;</div>

</div>

<div class="eco-header__logotypes">

<!-- logo-->

<div class="eco-logo">

<a href="index.html">

<img src="images/logo.png" width="150" height="80" border="0" />

</a>

</div>

<!-- /logo-->

<!-- menu http://css-snippets.com/drop-down-navigation/ -->

<div class="eco-main-menu">

<ul id="menu">

<li> <a href="index.html" class="eco-main-menu__active-page">Home</a></li>

<li><a href="business.html">Business</a></li>

<li><a href="climate.html">Climate</a></li>

<li>Transport

<ul>

<li><a href="electro.html">Electro</a></li>

<li><a href="hybrid.html">Hybrid</a></li>

</ul>

</li>

<li><a href="politics.html">Politics</a></li>

<li>Travel

<ul>

<li><a href="russia.html">Russia</a></li>

<li><a href="vietnam.html">Vietnam</a></li>

<li><a href="bali.html">Bali</a></li>

<li><a href="philippines.html">Philippines</a></li>

<li><a href="croatia.html">Croatia</a></li>

<li><a href="australia.html">Australia</a></li>

<li><a href="canada.html">Canada</a></li>

</ul>

</li>

<li><a href="lifestyle.html">Lifestyle</a></li>

</ul>

</div>

<!-- /menu -->

</div>

<!-- banners -->

<div class="eco-banners">

<div class="eco-banners__scroller owl-carousel owl-theme">

<div class="eco-banner_plants">

<div class="eco-banners__banner-text">

<p>Protect the plants & trees</p>

</div>

<img src="images/banners/banner1_big.jpg" width="960" height="400" border="0" />

</div>

<div class="eco-banner_universe">

<img src="images/banners/banner2_big.jpg" width="960" height="400" border="0" />

</div>

<div class="eco-banner_auto">

<div class="eco-banners__banner-text">

<p>New eco-technologies</p>

</div>

<img src="images/banners/banner3_big.jpg" width="960" height="400" border="0" />

</div>

<div class="eco-banner_volcano">

<img src="images/banners/banner4_big.jpg" width="960" height="400" border="0" />

</div>

</div>

<!--запускает скроллер-->

<script type="text/javascript">

$('.eco-banners__scroller').owlCarousel({

loop:true, //позволяет бесконечную прокрутку

items:1, //отображает только одну картинку

mouseDrag:false, //отключает перемотку мышкой

nav:true, //кнопки навигации

dots:false //отключает точки перехода по беннерам

});

</script>

</div>

<!-- /banners -->

</div>

<!-- /header -->

<!-- content -->

<div class="eco-content">

<div class="eco-content__banners">

<div class="eco-content__banner-item">

<a href="#"><img src="images/banner_farming.jpg" width="150" height="150" border="0" /></a>

</div>

<div class="eco-content__banner-item">

<h3><a href="#">About the NZ Plant Conservation Network</h3></a>

<p>The Network was established in April 2003 and has since grown to more than 800 members worldwide...</p>

</div>

<div class="eco-content__banner-item">

<a href="#"><img src="images/banner_plant.jpg" width="150" border="0" /></a>

</div>

<div class="eco-content__banner-item">

<h3><a href="#">Ways To Save Water</h3></a>

<p>The world is at a stage where the amount of water that can be used is shrinking alarmingly...</p>

</div>

<div class="eco-content__banner-item">

<a href="#"><img src="images/banner_text.jpg" width="150" border="0" /></a>

</div>

<div class="eco-content__banner-item">

<h3><a href="#">Engineers develop floating solar fuels rig for seawater electrolysis</h3></a>

<p>In a single hour, more energy from the sun hits the Earth than all the energy used by humankind in an entire year...</p>

</div>

</div>

<div class="eco-content__main">

<div class="eco-content__header">

<div class="eco-content__header-latest">Latest articles</div>

<div class="eco-content__header-pagename">

<h2>Home page</h2>

</div>

</div>

<div class="eco-content__data">

<div class="eco-content__news-row"> <!-- строка; по 2 новости-->

<div class="eco-content__news">

<a href="#"><img src="images/content/business.jpg" width="320" height="180"/></a>

<h3><a href="business.html">Poundland owner Steinhoff sees its shares crash by 60%</a></h3>

<p>Poundland owner Steinhoff International has seen its shares fall 60% after it said it would launch a probe into accounting irregularities...</p>

</div>

<div class="eco-content__news">

<a href="electro.html"><img src="images/content/tesla_roadster.jpg" width="360" height="180"/></a>

<h3><a href="electro.html">Tesla's Next Gen Roadster is a beast: 0-60 in 1.9 sec., 620 miles of range</a></h3>

<p>Tesla CEO Elon Musk took the wraps off of the “something else” at the Tesla Semi event Thursday night, revealing the company's...</p>

</div>

</div>

<div class="eco-content__news-row">

<div class="eco-content__news">

<a href="hybrid.html"><img src="images/content/toyota_invest.jpg" width="360" height="180" /></a>

<h3><a href="hybrid.html">Toyota to invest $113 mln in hybrid car engine factory in Poland</a></h3>

<p>Japan's Toyota Motor Corp will invest $113 million in manufacturing a new combustion engine for hybrid vehicles in Poland...</p>

</div>

<div class="eco-content__news">

<a href="#"><img src="images/content/climate.jpg" width="360" height="180"/></a>

<h3><a href="climate.html">Despite city tree benefits, California urban canopy cover per capita lowest in US</a></h3>

<p>"The structure, function and value of urban forests in California communities," recently published online in Urban Forestry and Urban Greening....</p>

</div>

</div>

<div class="eco-content__news-row"> <!-- строка; по 2 новости-->

<div class="eco-content__news">

<a href="russia.html"><img src="images/content/russia.jpg" width="360" height="180"></a>

<h3><a href="russia.html">Baikal</a></h3>

<p>In the width of a thinly populated wildness lies the foremost natural wonder - lake Baikal. It's the oldest lake in the world...</p>

</div>

<div class="eco-content__news">

<a href="croatia.html"><img src="images/content/croatia.jpg" width="360" height="180" /></a>

<h3><a href="croatia.html">Vis Archipelago Nominated for UNESCO Geopark Status</a></h3>

<p>An application for the `Vis Archipelago' to become a protected UNESCO geopark has been made with UNESCO by the Croatian Ministry...</p>

</div>

</div>

<div class="eco-content__news-row">

<div class="eco-content__news">

<a href="politics.html"><img src="images/content/politics.jpg" width="360" height="180" /></a>

<h3><a href="politics.html">Peter Dunne urges new generation in Parliament to turn New Zealand into republic</a></h3>

<p>Former United Future leader Peter Dunne has challenged the millennial generation in Parliament to "seize the moment" and begin a process...</p>

</div>

<div class="eco-content__news">

<a href="lifestyle.html"><img src="images/content/lifestyle.jpg" width="360" height="180" /></a>

<h3><a href="lifestyle.html">Balanced lifestyle</a></h3>

<p>New Zealand has the work-life balance just right. It's why we consistently lead international quality-of-life surveys....</p>

</div>

</div>

</div>

</div>

</div>

<!-- /content -->

<!-- footer -->

<div class="eco-footer">

<div class="eco-footer__column">

<div class="eco-logo">

<a href="index.html">

<img src="images/logo_footer.png" width="150" height="80" border="0" />

</a>

</div>

<div class="eco-logo__text">

Eco News provides “as it happens” environment news, from an Australian perspective. Make it your daily source of environmental information.

</div>

</div>

<div class="eco-footer__column eco-follow">

<h3>Follow us</h3>

<!-- icons-->

<div class="eco-icons">

<div class="eco-icons__item">

<a href="http://www.faceboook.com/"><img src="images/fb.png" width="64" height="64" border="0" /></a>

<div><a href="http://www.faceboook.com/">Faceboook</a></div>

</div>

<div class="eco-icons__item">

<img src="images/instagram.png" width="64" height="64" border="0" />

<div><a href="http://www.instagram.com/">Instagram</a></div>

</div>

<div class="eco-icons__item">

<img src="images/twitter_letter.png" width="64" height="64" border="0" />

<div><a href="http://www.twitter.com/">Twitter</a></div>

</div>

</div>

</div>

<div class="eco-footer__column eco-contact">

<h3>Contact us</h3>

<div class="eco-contact__address">

<p>9 Macdonald Cres</p>

<p>Wellington 6011</p>

<p>New Zealand</p>

</div>

<div class="eco-contact__gmaps"> <!-- как вставить гугл карту на сайт -->

<a href="https://goo.gl/maps/MURYmp6raru" target="_blank"><img src="images/gmaps.png" width="80" height="80" border="0" /></a> </div>

</div>

</div>

<!-- /footer -->

</div>

</body>

</html>

В результате получаем такой слайдер из изображений:

:

Так выглядит следующий код для перемотки изображений:



Заключение

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

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



Список литературы

1. Антипов Д.В. Соколов А.В. Internet как среда глобального общения - Москва 1996.

2. Клименко С. Уразметов В. INTERNET - среда обитания информационного общества. Москва 1996.

3. Хоникат Использование Internet 2-е изд. Издательство: К.: Диалектика

4. Рассохин Д. и Лебедев А. World Wide Web - всемирная информационная паутина в сети Internet - Москва 1997.

5. Перри Секреты World Wide Web Москва 1996.

6. Нольден. Знакомьтесь: World Wide Web Москва 1996. Издательство: К.: BHV

7. Ахметов Microsoft Internet Explorer 4.0 для всех Москва 1997. Издательство: М.: КомпьютерПресс

8. HTML 4.0 - Сергеев А.О.: БХВ - Санкт - Петербург, 1999.

9. Web-сайт своими руками - И. Шапошников: БХВ - Санкт-Петербург, 2000.

10. https://webformyself.com/

Размещено на Allbest.ru

...