Содержание
| 1. Современные интернет технологии 1.1 История HTML разметки 1.2 Веб дизайн и браузеры. 1.3 Язык разметки гипертекстовых страниц HTML 1.4 Таблицы стелей, уровень CSS 1.5 Java Script 2. Компьютерные обработки 3. Разработка веб сайта интернет магазина женской одежды Заключение Список литературы Приложения |
Введение
HTML давно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.
HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства - WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.
Актуальность создания данного сайта состоит в том, разработка интернет магазин женской одежды. Сайт гораздо облегчит работу сотрудников телевидения и поможет быстрей справляться с поставленными задачами.
Бесчисленное множество новых технологий, вызванных бурным ростом информатизации общества, делает нашу жизнь невозможной без быстрого доступа к информации. В наше время очень легко получить информацию, одним из способов быстрого доступа к ней является сайт.
Создание сайтов на сегодняшний день, становится одной из наиболее актуальных и востребованных услуг. Именно поэтому, большинство компаний уже оценили все преимущества такого предложения как создание сайтов и позаботились о разработке подходящего ресурса.
Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Но может возникнуть и другая проблема - сайт может оказаться не интересным пользователю и та информация, которую он несет, окажется не востребованной. Именно поэтому важно, чтобы сайт отвечал всем требованиям пользователя.
Целью работы является формирование теоретических знаний по проектированию web-сайта и практических навыков по его разработке.
Для выполнения курсового проекта были поставлены следующие задачи:
- проанализировать содержание нескольких сайтов для выявления актуальных потребностей пользователей Интернет;
- познакомится с основными теоретическими понятиями разработки web-сайта;
- научится проектировать и разрабатывать web-сайт.
Современные интернет технологии
История гипертекстовой разметки HTML
Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2, в большинстве своем используются по сей день.
В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.
В 1996 году появился HTML 3.2 Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.
Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум), компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение - фреймы, не были включены в спецификацию 3.2 Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.
И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.
Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт - программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время браузерах.
В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.
Веб дизайн и браузеры.
Веб-обозреватель, или браузер (от англ. Web browser, броузер — неправильно) — программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), для их обработки, вывода и перехода от одной страницы к другой. Большинство браузеров также наделены способностями к просмотру оглавления FTP-серверов. Браузеры постоянно развивались со времён зарождения Всемирной паутины, и с её ростом становились всё более важной программой типичного персонального компьютера. Ныне браузер — комплексное приложение для обработки и вывода разных составляющих веб-страницы и для предоставления интерфейса между веб-сайтом и его посетителем. Практически все популярные браузеры распространяются бесплатно или «в комплекте» с другим приложением: Internet Explorer (неотъемлемая часть Microsoft Windows), Mozilla Firefox (бесплатно, свободное ПО), Opera (бесплатно, начиная с версии 8.50), Safari (совместно с Mac OS или бесплатно для Windows). По данным компании Net Applications, за май 2009 года рыночная доля Internet Explorer составляла 65,50 %, Firefox — 22,51 %, Safari — 8,43 %, Google Chrome — 1,80 %, Netscape — 0,74 %, Opera — 0,72 %, Mozilla — 0,10 %, Opera Mini — 0,08 %, PlayStation — 0,04 %, ACCESS NetFront — 0,03 %, Blazer — 0,02 %, Pocket Internet Explorer — 0,01 %, прочие — около 0 %.
Первым распространённым браузером с графическим интерфейсом был NCSA Mosaic. Исходный код этого одного из первых браузеров был открыт и некоторые другие браузеры (Netscape Navigator и Internet Explorer) взяли его за основу. Этот браузер имел свои недостатки, но почти все они были устранены в браузере Netscape Navigator (некоторые сотрудники компании Netscape были из NSCA и участвовали в разработке Mosaic). Netscape выпустила Netscape Navigator под разные операционные системы (UNIX, Windows, Mac OS) и добилась заметного успеха, в том числе и коммерческого. Это побудило компанию Microsoft выпустить свой браузер Internet Explorer.
В отличие от Netscape, Microsoft сразу выпускала локализованные версии IE. В 1995 году Microsoft выпустила операционную систему Windows 95, в ней не было встроенного браузера, но через некоторое время в обновление системы (Windows 95 OSR2) браузер (Internet Explorer 3.0) был встроен. За «агрессивную позицию в завоевании нового рынка и нечестные методы борьбы» Microsoft была оштрафована; за Windows 95 Microsoft брала с продавцов компьютеров 100 долларов, а за версию Windows 95 с IE — 97 долларов, таким образом продвигая IE на рынок браузеров.
Компания также отказывалась поставлять браузер отдельно от ОС, за что тоже была оштрафована; кроме того, название браузера и обозначение ярлыков даёт повод думать, что сеть Интернет и браузер Microsoft Internet Explorer — это одно и то же. К тому же, Microsoft добавляла в свой браузер несовместимые со стандартами расширения языка HTML, и это можно считать началом войны браузеров, закончившейся монополизацией (более 95 %) рынка браузером от Microsoft.
Из-за потери рынка доходы компании Netscape упали и её приобрела AOL, а исходный код браузера Netscape был выпущен под свободной лицензией MPL (Mozilla Public License). Название «Mozilla» изначально присутствовало в браузере от Netscape и означало сокращение слов Mosaic+killer. Однако этот код было решено не использовать и вместо него для Netscape 6 с нуля был написан новый движок (Gecko), изначально ориентировавшийся на полную поддержку стандартов, на основе которого позже были созданы входящие в комплект Mozilla Suite браузер, почтовый и irc-клиент и редактор веб-страниц.
В последствии в Mozilla Foundation было принято решение поставлять и развивать браузер отдельно от общего пакета и родился проект Mozilla Firefox. Firefox содержит много возможностей, отсутствующих в IE или других браузерах, и постепенно набирает популярность (на 2008 год — около 20, а в некоторых странах — и до 40 % рынка браузеров).
Монополизация рынка браузером IE имела и другие последствия — Microsoft почти перестала развивать браузер и он с 4-й до 6-й версии почти не менялся: хуже других браузеров поддерживал стандарты, отставал по удобству использования и по скорости работы и отображения страниц. Такое положение сподвигло Microsoft вновь заняться браузером и седьмая версия вышла с некоторыми изменениями (были добавлены закладки-табы, улучшена поддержка стандартов, поднята скорость работы). Однако, на текущий момент скорость прохождения тестов javascript (основа web 2.0) всё равно почти на порядок хуже, чем у других браузеров. Сейчас Microsoft переделывает свой браузер и готовит 8-ю версию, ещё лучше отвечающую стандартам и более быстро работающую.
В 1996 году появился браузер Opera. Долгое время этот браузер позиционировался как самый быстрый браузер. Он действительно был самым лёгким и в старте, и в загрузке из Интернета, и в отображении страниц, и в зависимости от ведущего в тот момент на рынке браузера была совместим с ним (или старался быть таковым). Первоначально Opera распространялась как условно-бесплатное ПО (shareware), но в 2005 году Opera также стала распространяться бесплатно.
Война браузеров была бы исключительно коммерческим делом корпораций, если бы основным приёмом в борьбе не стало добавление специфических, нестандартных возможностей к браузерам. Наибольшие различия возникали в поддержке JavaScript — языка сценариев, придающего интерактивность документам. В результате многие сайты «оптимизировались» под одни браузеры и плохо работали в других браузерах.
В Internet Explorer 8 Microsoft сначала предлагала ввести HTML?комментарий, который бы указывал браузерам, какие версии движков использовать (заголовок DOCTYPE при этом должен был быть отменён, как малоиспользуемый), что вызвало возмущение сторонников стандартов, так как указания на использование стандартов не предусматривалось. Позже было объявлено, что IE8 будет по умолчанию использовать «режим стандартов» (англ. standards mode), а не «режим совместимости» (англ. quirks mode), а при обнаружении соответствующего комментария использовать режим имитации предыдущей версии.
В локализованных версиях операционных систем семейства Microsoft Windows до 2008 года браузеры именовались обозревателями, обозревателями сети или веб-обозревателями.
Учитывая уменьшение доли IE на рынке браузеров (впервые за несколько последних лет доля Микрософт упала ниже 90 процентов), компания Google решила «помочь» конкуренции на рынке браузеров и выпустила свой браузер с открытым исходным кодом — Chrome. Браузер Chrome 1.0 содержит некоторые новшества (изоляция сбоев, режим «инкогнито» и т. д.). Пока выпущена версия только для Windows XP и Vista, для других ОС возможна только сборка из исходных текстов, однако готовые варианты браузера для других ОС компания обещает выпустить позже.
В начале 2009 Microsoft объявила, что разрабатывает новый браузер, который будет называться Gazelle. Новый браузер будет применять принципы разделения ресурсов, характерные для многопользовательских операционных систем, что, согласно Microsoft, повысит его безопасность.
Веб-дизайн (от англ. Web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры проектируют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации, а так же занимаются художественным оформлением веб-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами.
В настоящее время услуги веб-дизайна предоставляют как специальные компании, так и частные лица (фрилансеры веб-дизайнеры или веб-мастеры).
Сейчас под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей. Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств, а также кроссплатформенность вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в интернете (интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация. Таким образом визуальными средствами решаются самые разнообразные задачи, такие как, повышение продаж, укрепление доверия, создание определенного имиджа и другие.
Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно "дизайн страницы" представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.
При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект менеджером. Так же менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап так же заканчивается утверждением эскиза заказчиком.
Язык разметки гипертекстовых страниц HTML
Наиболее распространенным языком разработки сайта является Язык разметки гипертекстовых страниц (HTML - Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.
Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте #"justify">На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут, как входить, так и не входить в состав действующей спецификации HTML.
1.4 Таблицы стелей, уровень CSS
Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными. С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки). В завершение разговора об уровнях CSS следует добавить, что переход от одного уровня к другому, в основном, сопровождался некоторыми видоизменениями в структуре и в правилах стилевого оформления, технологическими дополнениями, а также попытками систематизировать применение CSS. Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей. Способы определения таблиц стилей. Как уже было сказано, любая таблица стилей CSS должна быть интерпретирована браузером для того, чтобы правила CSS, обозначенные для конкретных элементов электронного документа, вступили в силу. Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами: ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <link> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например: <LINK REL="stylesheet" TYPE="text/css" HREF="style. css"> Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS. Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела head HTML-документа; внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например: <STYLE TYPE="text/CS3"> <! - - BODY { font-family: Arial, Helvetica; } INPUT { background-color: ICECECE; } > </STYLE> Данная конструкция также должна присутствовать в разделе head. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS); включение в теговые конструкции. Любой отдельный HTML-элемент может быть подвергнут форматированию средствами CSS. Для этого необходимо задать определенное правило реализации того или иного тега, например: <Р ALIGN="justify" STYLE="color: 1000000; font-family: Verdana; "> Текст параграфа... В этом случае задано отдельное правило для конкретного параграфа. Также можно присваивать отдельному HTML-элементу определенный класс стилевого шаблона:<TABLE><TR><TD CLASS="header"X/TD><TD CLASS="text"X/TD></TR></TABLE>Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ):<STYLE TYPE="text/css"><! - -. header { font-weight: bold; color: gray; }. text { color: black; font-size: llpx; }></STYLE>В данном случае текст табличной ячейки класса. header будет отображаться жирным начертанием и серым цветом, а ячейки класса. text - обычным начертанием, черным цветом и размером шрифта 11 пикселов;импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:<STYLE TYPE-"text/css"><! - -@import: url (style. ess);></STYLE>Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1). Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTML-элементов - отдельные конструкции либо в теге <style>, либо в кодовых конструкциях самих тегов.Листинг. Совмещение различных способов определения стилевого шаблона CSS<HTML> <HEAD><Т1ТЬЕ>Совмещение различных способов определения CSS</TITLE><LINK REL="stylesheet" TYPE="text/css" HREF="style. css"> <STYLE TYPE="text/css"> <! - -P { text-align: justify; color: green; }. title { color: blue; font-weight: bold; font-size: 16px; } - ></STYLE> </HEAD><BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="|OOFFOO" ALINK="IOOFFOO" VLINK="blue"><FONT CLASS="title">Cnoco6bi определения шаблонов CSS</FONT>Ниже перечислены существующие способы определения стилевых шаблонов CSS, даны характеристики каждого способа, приведены примеры их использования.<UL><Ы>Ссылка на внешний файл<Ы>Внедрение в документ<Ы>Включение в теговые конструкции<Ы>Импортирование</UL></BODY></HTML>Также следует сказать, что использование каждого способа определения стилевых шаблонов CSS может быть связано с некоторыми минусами.В случае ошибки интерпретации HTML-кода браузером, плохой связи с сервером и пр. внешний файл CSS может не загрузиться, вследствие чего стиль для нужных элементов HTML не будет переопределен.Если внешний файл CSS включает слишком большое количество стилевых шаблонов (что отражается на конечном размере файла), то существует вероятность того, что браузер не сумеет полностью интерпретировать файл CSS или вообще исчерпает лимит времени по загрузке данных. В первом случае стили для части элементов не будут переопределены (браузер успеет "обнаружить" только те правила, которые размещены в верхней части CSS-файла). Во втором случае все элементы страницы останутся без изменения, загрузившись по умолчанию.При использовании способа включения стиля в сам документ наличие слишком большого количества шаблонов CSS заметно увеличит конечный размер HTML-страницы, что скажется на времени загрузки документа в браузере.CSS и Dynamic HTML - просто и привлекательно! 187
При сочетании различных способов определения стилевых шаблонов следует учитывать особенности браузеров. К примеру, Netscape "плохо относится" к использованию символа нижнего подчеркивания (_) в указании классов для элементов HTML (. news_titie,. _about и т.д.). Также ряд браузеров (и Netscape в том числе) не подключает стилевой шаблон класса, присвоенного ячейке таблицы <то>/<тн>: конструкция <то CLASS="text">TeKCT</TD> выведет текст по умолчанию, a <tdxfont CLASS="text">TeKCT</FONT></TD> отобразит текст заданным стилем.
1.5 Java Script
JavaScript - язык подготовки сценариев, позволяющий сделать Web-страницы более интерактивными и функциональными. После его изучения вы сможете заниматься разработкой Web-приложений на качественно новом уровне. Для написания сценариев JavaScript обязательно требуется знание языка HTML. В этой главе вы получите первое представление о JavaScript еще до того, как начнете создавать свой первый сценарий.Здесь приводится следующая информация: Q важность изучения JavaScript; а история JavaScript; а некоторые различия между языками подготовки сценариев и языками программирования; а инструменты, необходимые для написания сценариев JavaScript.
Полезно изучить JavaScript хотя бы из-за его широкого распространения в сети. Огромное количество Web-страниц сделано с использованием сценариев (по самым разным причинам), и сайты без них кажутся блеклыми и скучными. Каким бы интересным не было содержание сайта, некоторые посетители сразу захотят уйти. Конечно, нет смысла оспаривать важность текстового содержания для любой Web-страницы, однако использование JavaScript не только улучшит подачу материала, но и сделает вашу страницу более запоминающейся.