Оглавление Введение............................................................................................................. 2 1. Проектирование ........................................................................................... 3 1.1 Цели и задачи сайта. ........................................................................................... 3 1.2 IDEF – диаграмма ............................................................................................... 8 1.3 Описание интеллект карты .............................................................................. 11 1.4 Анализ программных продуктов .................................................................... 13 1.5 Анализ программных средств ......................................................................... 14 1.6 Создание плана-проекта Microsoft Project ..................................................... 23 2. Описание процесса выполнения, разработки ПП .............................. 26 2.1 Создание ............................................................................................................ 26 2.2 Готовый сайт ..................................................................................................... 33 Заключение ..................................................................................................... 38 Библиографический список ........................................................................ 39 2 Введение Современный человек не представляет своей жизни без техники и Всемирной паутины. Интернет стал неотъемлемой частью нашей жизни. Сегодня можно не выходя из дома оплатить коммунальные услуги, пополнить счет мобильного телефона, заказать продукты питания и различные товары с доставкой, общаться с друзьями, коллегами на расстоянии и многое другое. Однако для работы в интернете нужны как минимум три вещи: браузер, доступ в интернет и начальные навыки построения и структуры Web-сайтов. Первый в мире сайт info.cern.ch появился в 1990 году. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы серверов ибраузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты. Цель: Спроектировать и разработать сайт посвященный фильму «Пекло». Задачи: Провести анализ программных продуктов; Определить целевую аудиторию; Составить интеллект карту всей работы; Составить план работы в Microsoft Project; создание IDEF – диаграмм Провести поиск шаблона; Реализовать сайт. 3 1. Проектирование 1.1 Цели и задачи сайта. Цель разработчика: Своевременное и регулярное предоставление актуальной и достоверной информации по фильму «Пекло» Задачи разработчика: Разработка стильного дизайна, создание удобных, полезных или развлекательных сервисов для целевой аудитории, представление информации о фильме. Целевая аудитория Целевая аудитория - это люди, которые с наибольшей вероятностью купят рекламируемый товар или воспользуются предлагаемой услугой. Перед планированием рекламной кампании, одной из самых важных задач является определение целевой аудитории, написание "портрета" потребителя. Основными характеристиками целевой аудитории являются: пол, возраст и размер дохода. В дальнейшем, целевая аудитория может определяться и по социальному положению, образу жизни, привычкам, медиапредпочтениям и другим факторам, количество и виды которых зависит от специфики рекламируемого товара или услуги. Качественное определение целевой аудитории позволит выбрать именно те виды рекламы, которые смогут максимально эффективно воздействовать на выбранную аудиторию. Что, в дальнейшем послужит отправной точкой и для создания самих рекламных объявлений и для медиапланирования. Целевой аудиторией данного сайта является люди социального положения, образа жизни, любого возраста, увлекающиеся фильмами жанра фантастика, приключения, триллер. Макет Макет сайта - это видимая пользователю часть сайта, включающая в себя все элементы дизайна сайта. Те блоки, навигации, области сайта и др. Макет создается дизайнером, как правило, с использованием программы fotoshop и 4 предоставляется в формате .pdf. Макет сайта - это картинка, на основании которой, будет создаваться сайт, поэтому при его создании должны быть предусмотрены все области и элементы сайта. На основании макета создается верстка сайта, т. е. из картинки представленной дизайнером, верстается html - страница, полностью соответствующая по внешнему виду макету. Макет сайта рис. 1 Рисунок 1. Макет Помимо внешнего вида существует много нюансов, которые необходимо учитывать при создании макета 1) Макет не должен быть перегружен картинками, так как в итоге получится страница которая будет очень много весить (100 и более килобайт), 5 что приведет к длительной ее загрузке, что в свою очередь, как правило приводит к тому, что клиент просто не дожидается окончания загрузки. 2) Эстетический вид - неряшливо или неопрятно оформленный сайт не вызовет доверия посетителя. Поэтому не стоит употреблять шрифты слишком большого размера, огромные баннеры и т. д. 3) Использование флеш не рекомендуется, так как он плохо индексируется поисковиками, а ссылки с него и вовсе не индексируются, при необходимости лучше обойтись анимированным .gif. Так же к недостатку технологии флеш можно отнести достаточно большой его вес, что опять таки замедляет загрузку странницы. 4) При верстке макета должны быть учтены следующие элементы, которые встречаются на каждом сайте: Навигации, их уровень вложенности, активные и неактивные элементы навигации. Оформление картинок, размещаемых в тексте Заголовки, как минимум три уровня Активные и неактивные ссылки Выделения в тексте (всегда возможна ситуация, что клиент хочет выделить какую-то часть текста) Дизайн табличных данных (Заголовки, элементы) Логотип, если у клиента уже имеется свой логотип или фирменный стиль, то дизайн всего сайта должен находиться в той же цветовой гамме Иконка сайта (favicon.ico), это значек, который отображается слева от адресной строки браузера, также этот значек отображается в результатах выдачи поисковых машин слева от заголовка предлагаемой страницы 5) Эргономика сайта - области должны быть расположены таким образом, чтобы для вывода информации было достаточно места. Всегда лучше если все области необходимые клиенту обрисовываются именно на этапе создания макета, нежели добавляются уже после верстки и подключения сайта на систему управления. 6 6) Также на этапе создания макета желательно учесть все возможные расширения сайта, например: Дизайн поисковой формы Дизайн форм (например формы обратной связи или заявки) Типы макетов сайтов Макет с фиксированной ширины (rigid fixed) Примером такого макета является дизайн этого блога. Его основная часть имеет фиксированную ширину, фоновый рисунок распространяется на всю ширину окна браузера. Плюсы такого макета: Макет будет одинаково целостно смотреться вне зависимости от разрешения экрана, при меньшем или большем от самого популярного разрешения сайт всегда будет находиться в центре окна, и все элементы будут стабильно сочетаться между собой. Ввиду того, что сейчас набирают популярность широкоформатные мониторы с большой разрешающей способностью такие макеты становятся особо популярны. Основная часть сайта жестко зафиксирована по ширине, что избавляет от необходимости задавать минимальную или максимальную ширину окна браузера. Недостатки На больших мониторах может быть много свободного места, а сайт субъективно казаться сильно узким. В блок с содержимым сайта можно вставлять картинки (таблицы) предельных размеров, у резиновых сайтов диапазон размеров картинок (таблиц) более широк. Резиновый макет (adaptable fluid) Резиновый макет — это макет, у которого нет фиксированной ширины, или ширина макета равна 100% от ширины окна браузера. Резиновые макеты также бывают двух типов. Первый это когда элементы позиционируются 7 относительно сторон браузера, то есть при увеличении размеров окна структурные элементы разъезжаются в стороны. Второй, когда величины и позиции заданы в процентах, то есть при увеличении размеров окна, элементы расходятся пропорционально. Плюсы такого макета Гибкий макет. Можно подстроить макет под разные разрешения монитора, таким образом сделать макет более универсальным. Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы). Недостатки Главный недостаток резинового макета порождается из его плюса, при очень больших размерах экрана макет может смотреться не целостно и некрасиво Необходимо задавать максимальную ширину макета. Также необходимо задавать минимальную ширину, дабы избежать наложения друг на друга структурных элементов при маленьких размерах экрана. Эластичный макет (expandable elastic) При эластичном макете размеры главных структурных элементов задаются в em. Это позволяет пропорционально увеличивать размеры структурных элементов при масштабировании размера текста встроенной функцией браузера (зажать кнопку Ctrl и крутить колесико мышки). Плюсы такого макета Если все сделать правильно получается довольно гибкий макет, который можно легко подстраивать под нужный размер текста Недостатки макета Не любой дизайн можно хорошо реализовать в виде эластичного 8 1.2 IDEF – диаграмма Декомпозиции могут подвергаться функции моделей, записанные в нотации IDEF 0, DFD и IDEF 3. Хотя методологии создания диаграмм по различным нотациям различаются, но базовые предпосылки декомпозиции одинаковы. При декомпозиции диаграмм процессов ( IDEF 0) в диаграммы потоков ( IDEF 3) и/или DFD -диаграммы BPwin позволяет создавать диаграммы по смешанной методологии. При использовании методологии получения смешанных диаграмм IDEF 0-диаграммы всегда должны являться родительской функцией для любых смешанных диаграмм декомпозиции. В настоящий момент к семейству IDEF можно отнести следующие стандарты: IDEF0 - методология функционального моделирования. С помощью наглядного графического языка IDEF0, изучаемая система предстает перед разработчиками и аналитиками в виде набора взаимосвязанных функций (функциональных блоков - в терминах IDEF0). Как правило, моделирование средствами IDEF0 является первым этапом изучения любой системы; IDEF1 – методология моделирования информационных потоков внутри системы, позволяющая отображать и анализировать их структуру и взаимосвязи; IDEF1X (IDEF1 Extended) – методология построения реляционных структур. IDEF1X относится к типу методологий “Сущность-взаимосвязь” (ER – Entity-Relationship) и, как правило, используется для моделирования реляционных баз данных, имеющих отношение к рассматриваемой системе; IDEF2 – методология динамического моделирования развития систем. В связи с весьма серьезными сложностями анализа динамических систем от этого стандарта практически отказались, и его развитие приостановилось на самом начальном этапе. Однако в настоящее время присутствуют алгоритмы и их компьютерные реализации, позволяющие превращать набор статических диаграмм IDEF0 в динамические модели, построенные на базе “раскрашенных сетей Петри” (CPN – Color Petri Nets); 9 IDEF3 – методология документирования процессов, происходящих в системе, которая используется, например, при исследовании технологических процессов на предприятиях. С помощью IDEF3 описываются сценарий и последовательность операций для каждого процесса. IDEF3 имеет прямую взаимосвязь с методологией IDEF0 – каждая функция (функциональный блок) может быть представлена в виде отдельного процесса средствами IDEF3; IDEF4 – методология построения объектно-ориентированных систем. Средства IDEF4 позволяют наглядно отображать структуру объектов и заложенные принципы их взаимодействия, тем самым позволяя анализировать и оптимизировать сложные объектно-ориентированные системы; IDEF5 – методология онтологического исследования сложных систем. С помощью методологии IDEF5 онтология системы может быть описана при помощи определенного словаря терминов и правил, на основании которых могут быть сформированы достоверные утверждения о состоянии рассматриваемой системы в некоторый момент времени. На основе этих утверждений формируются выводы о дальнейшем развитии системы и производится её оптимизация. Рассмотрим IDEF диаграмму фильма рис. 2 Рисунок 2. Диаграмма фильма 10 В стандарте IDEF0 каждая процедура (операция) представляется в виде блока-действия и управляющих дуг. Блок-действие в IDEF0 имеет 8 управляющих дуги - вход (сценарий), выход (готовый фильм), Исполнителей (актеры, оператор, постановщик света, звукооператор), управление (продюсер, режиссер). Стрелки показывают отношения между несколькими подфункциями, образующими более общую функцию. Такая диаграмма - это "диаграмма связей", показывающая конкретное взаимодействие между подфункциями рис 3. Рисунок 3. Диаграмма связей На рис. 3 представлены 3 функции: 1) Съемка; 2) озвучка; 3) монтаж. На которые наложены связи, Термин "связь" означает, что функция использует входящие данные или предметы и, таким образом, оказывается "связанной" взаимодействием. Способ действия функции зависит от конкретных параметров (значение, количество и т.п.) стрелки-взаимодействия. 11 1.3 Описание интеллект карты Интеллект-карты — это инструмент, позволяющий: эффективно структурировать и обрабатывать информацию; мыслить, используя весь свой творческий и интеллектуальный потенциал. Интеллект-карты – очень красивый инструмент для решения таких задач, как проведение презентаций, принятие решений, планирование своего времени, запоминание больших объемов информации, проведение мозговых штурмов, самоанализ, разработка сложных проектов, собственное обучение, развитие, и многих других. Области применения Интеллект-карт: Обучение создание ясных и понятных конспектов лекций; максимальная отдача от прочтения книг/учебников; написание рефератов, курсовых проектов, дипломов. Запоминание подготовка к экзаменам; запоминание списков: что сделать/кому позвонить/… Презентации вы за меньшее время даете больше информации, при этом вас лучше понимают и запоминают; проведение деловых встреч и переговоров. Планирование управление временем: план на день, неделю, месяц, год… разработка сложных проектов: нового бизнеса Мозговой штурм генерация новых идей, творчество; коллективное решение сложных задач 12 Принятие решений четкое видение всех «за» и «против»; более взвешенное и продуманное решение Интеллект-карта по сайту рис. 4 Рисунок 4. Интеллект-карта Описание интеллект-карты: 1.Выбрать тему курсовой работы 2.Задать цели и задачи сайта 3.Задать цели и задачи разработчика 4.Сделать анализ подобных ПП 5.Сделать анализ программных средств 6.Выбрать макет 7.Определить целевую аудиторию сайта 13 8.Изучить теоретический материал 9.Изучить ПП 10.Разработать страницы 11.Протестировать в разных браузерах 12.Анализ ошибок и устранение их 13.Создать доклад 14.Защита курсовой 1.4 Анализ программных продуктов Процесс анализа существующих программных продуктов: а) находим подобные ПП б) сравниваем с функциями заданными заказчиком в) рассматриваем интерфейс, дизайн, аппаратные средства г) рассчитываем примерную стоимость собственной разработки и сравниваем д) делаем вывод и доказываем заказчику необходимость написания собственного ПП. 14 Сайт «CINEMAXI». Рисунок 5. Сайт Сайт сделан удобным и полезным. На сайте представлены только лучшие фильмы которые отбираются со всего рунета. 1.5 Анализ программных средств Анализ программных средств - поиск полного списка программных средств, необходимых для создания определенного программного продукта. Программные средства выбираются в зависимости от поставленной задачи. При анализе программных средств нужно обратить внимание на наличие или стоимости лицензии на срок разработки, на знание или наличие литературы, и на интерфейс. Например, это веб-сайт. Разделяем необходимые для его создания, на группы: все программные средства, 15 1. Граффические редакторы (Corel PHOTO-PAINT; Paint; Photoshop) 2. Программы для написания кода (Блокнот; MS Word) 3. Программы для составления структуры сайта (Microsoft Office FrontPage; Xara Webstyle; CMS SiteEdit) Основные программные средства сайта: 1) Corel draw; 2) Photoshop; 3) Блокнот; 4) Microsoft Office FrontPage GIMP GNU Image Manipulation Program или GIMP — растровый графический редактор, программа для создания и обработки растровой графики и частичной поддержкой работы в 1995 году Спенсером проект, в с векторной графикой. Кимбеллом и Питером настоящий момент Проект Маттисом как поддерживается группой основан дипломный добровольцев. Распространяется на условиях GNU General Public License. Изначально сокращение «GIMP» означало англ. General Image Manipulation Program, а в 1997 году полное название было изменено на «GNU Image Manipulation Program», и программа официально стала частью проекта GNU. Типичные задачи, которые можно решать при помощи GIMP, включают в себя создание графики и логотипов, масштабирование и кадрирование фотографий, раскраска, комбинирование изображений с использованием слоёв, ретуширование и преобразования изображений в различные форматы. Традиционно GIMP считается свободным аналогом ряда проприетарных редакторов (чаще всего называется Adobe Photoshop), хотя сами разработчики часто возражают против такой формулировки. Работа с фотографиями В GIMP присутствует набор инструментов цветокоррекции: 16 кривые; уровни; микшер каналов; постеризация; тон-насыщенность; баланс цветов; яркость-контраст; обесцвечивание. При помощи фильтров, инструментов, масок и слоёв с разными типами наложения (всего 22) можно: выравнивать заваленный горизонт; убирать искажения, вносимые оптикой; корректировать перспективу; выполнять клонирование объектов с учётом перспективы; кадрировать фотографии; удалять дефекты вроде пыли на матрице (штамп, лечебная кисть); имитировать использование различных цветофильтров; «вытаскивать» потерянную детализацию в тенях; многое другое. Реализовано управление цветом. Рисование несколько рисующих инструментов; свободно масштабируемые кисти; поддержка кистевой динамики; поддержка графических планшетов. Экранные фильтры Дополнительные возможности по коррекции изображений на протяжении всей работы реализованы в виде экранных фильтров. К ним относятся: 17 имитация разных типов дальтонизма (протанопия, дейтеронопия, тританопия); гамма-коррекция; коррекция контраста; управление цветом. Настраиваемый интерфейс плавающие палитры легко группируются и перегруппируются; возможна полная перенастройка клавиатурных комбинаций, действий мыши, а также устройств ввода вроде Griffin Powermate; любое меню можно превратить в свободно перемещаемое окно (Linux/UNIX). Автоматизация Отсутствие средств автоматической записи сценариев компенсируется в GIMP большим числом языков, на которых можно писать сценарии: TinyScheme, иначе Script-Fu (в комплекте с программой); Python (в комплекте с программой); Ruby; Perl; C#; Java (экспериментально, часть проекта gimp-sharp); Tcl (в настоящее время не поддерживается). С помощью этих инструментов можно писать как интерактивные сценарии и модули для GIMP, так и создавать изображения полностью автоматически, например, генерировать «на лету» изображения для вебстраниц внутри программ CGI или выполнять пакетную цветокоррекцию и преобразования изображений. Следует отметить, что для пакетной обработки изображений всё же лучше подходят пакеты наподобие ImageMagick. 18 Недочёты, их решение и пути обхода В настоящее время использование GIMP в коммерческом дизайне, полиграфии и фотографии сопряжено с рядом сложностей, а во многих случаях и вовсе невозможно: нет поддержки плашечных цветов (и палитры Pantone — по лицензионным соображениям); нет полноценной поддержки цветовых моделей, CIELAB и CIE нет поддержки режима 16 и более разрядов на цветовой канал; нет поддержки HDRi и операторов отображения тонов; нет процедурных (корректирующих) слоёв и эффектов (стилей) XYZ; слоёв. Многие из упомянутых недочётов планируется устранить на втором этапе перехода к использованию библиотеки GEGL. Существует расширение для экспорта в TIFF с цветоделением в CMYK и цветопробой. Архитектура Для построения элементов интерфейса GIMP использует GTK+. GTK+ изначально появился в составе GIMP как замена коммерческой библиотеке Motif, от которой зависели начальные версии GIMP. GIMP и GTK+ первоначально были разработаны для X Window System, работающей в операционной системе, подобной Unix, но с тех пор он был перенесён в Microsoft Windows, OS/2, Mac OS X и SkyOS. Photoshop Многофункциональный графический редактор, распространяемый фирмой Adobe Systems. В разработанный основном, и работает с растровыми изображениями, однако имее некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто 19 Photoshop (Фотошоп).Несмотря на то, что изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб-дизайне. В более ранней версии была включена специальная программа для этих целей — Adobe ImageReady, которая была исключена из версии CS3 за счёт интеграции её функций в сам Photoshop, а также включения в линейку программных продуктов Adobe Fireworks, перешедшего в собственность Adobe после приобретения компании Macromedia. Photoshop тесно связан с другими программами для обработки медиафайлов, анимации и другого творчества. Совместно с такими программами, как Adobe ImageReady (программа упразднена в версии CS3), Adobe Illustrator, Adobe Premiere,Adobe After Effects и Adobe Encore DVD, он может использоваться для создания профессиональных DVD, обеспечивает средства нелинейного монтажа и создания таких спецэффектов, как фоны, текстуры и т. д. для телевидения, кинематографа и всемирной паутины. Photoshop также прижился в кругах разработчиков компьютерных игр. Основной формат Photoshop, PSD, может быть экспортирован и импортирован всеми программными продуктами, перечисленными выше. Photoshop CS поддерживает создание меню для DVD. Совместно с Adobe Encore DVD, Photoshop позволяет создавать меню или кнопки DVD. Photoshop CS3 в версии Extended поддерживает также работу с трёхмерными слоями. Из-за высокой популярности Photoshop поддержка специфического для неё формата PSD была реализована во многих графических программах, таких как Macromedia Fireworks, Corel PHOTO-PAINT, WinImages, GIMP, Corel Paint Shop Pro и других. Photoshop поддерживает следующие цветовые модели или способы описания цветов изображения (в нотации самой программы — режим изображения): RGB LAB 20 CMYK Grayscale Bitmap Duotone Indexed Multichannel Поддерживается обработка изображений, как с традиционной глубиной цвета 8 бит (256 градаций на один канал), так и с повышенной 16 и 32 бит (65’536 и 4’294’967’296 градаций на канал соответственно). Возможно сохранение в файле дополнительных элементов, как то: направляющих (Guide), каналов (например, канала прозрачности — Alpha channel), путей обтравки (Clipping path), слоёв, содержащих векторные и текстовые объекты. Файл может включать цветовые профили (ICC), функции преобразования цвета (transfer functions), пропорции пиксела (Pixel Aspect Ratio). Расширенная версия программы Adobe Photoshop Extended предназначена для более профессионального использования, а именно — при создании фильмов, видео, мультимедийных проектов, трехмерного графического дизайна и веб-дизайна, для работы в областях производства, медицины, архитектуры, при проведении научных исследований. В программе Adobe Photoshop Extended современных версий (CS4, CS5) можно открывать и работать с 3D-файлами, создаваемыми такими программами, как Adobe Acrobat3D, 3ds Max, Maya и Google Earth. Photoshop поддерживает следующие форматы файлов 3D: U3D, 3DS, OBJ, KMZ и DAE. Возможно использовать трехмерные файлы для внедрения в двумерное фото. Доступны некоторые операции для обработки 3D-модели как работа с каркасами, выбор материалов из текстурных карт, настройка света. Также можно создавать надписи на 3D-объекте, вращать модели, изменять их размер и положение в пространстве. Программа включает в себя также команды по преобразованию плоских фотографий в трехмерные объекты определенной формы, такие как, например, банка, пирамида, цилиндр, сфер, конус и др. 21 Для имитации мультипликации, движения используя в Photoshop слои можно изображения. создавать Можно кадры создавать видеоизображения, основанные на одной из многих заданных пиксельных пропорций. После редактирования можно сохранить свою работу в виде файла GIF-анимации или PSD, который в последствии можно проиграть во многих видеопрограммах, таких как Adobe Premiere Pro или Adobe After Effects. Доступно открытие или импортирование видеофайлов и последовательности изображений для редактирования и ретуширования, создание видеоряда мультипликации и экспорт работ в файл формата QuickTime, GIF-анимацию или последовательность изображений. Видеокадры можно отдельно редактировать, трансформировать, клонировать, применять к ним маски, фильтры, разные способы наложения пикселов, на них можно рисовать, используя различные инструменты. Photoshop поддерживает файлы DICOM (Digital Imaging and Communications in Medicine) — цифровые изображения и коммуникации в медицине. Для открытого в Photoshop DICOM-файла, можно использовать любой инструмент Photoshop для коррекции и ретуширования изображений. И наконец, с помощью программы рассматривать MATLAB-изображения, Photoshop обрабатывать их Extended в можно программе Photoshop, комбинировать команды MATLAB с технологиями обработки изображений Photoshop. Как только устанавливается соединение с программой Photoshop из программы MATLAB и осуществляется ввод команд в командную строку MATLAB, эти управляющие воздействия незамедлительно выполняются в Photoshop. Файлы, подготовленные в программе MATLAB, имеют расширение m, fig, rpt, mat, mdl. Коммуникация между Photoshop и MATLAB использует MATLAB. интерфейс Photoshop JavaScript и библиотечный интерфейс 22 Блокнот Простой текстовый редактор, являющийся частью операционных систем Microsoft Windows, начиная с вышедшей в 1985 году Windows 1.0, и Windows NT. Блокнот использует оконный класс EDIT. Вплоть до вышедшей в 2000 году Windows Me поддерживались только самые базовые функции, многие функции были доступны только из меню, а максимальный размер файла составлял 64 килобайта (предел класса EDIT). В настоящее время редактор поддерживает контекстную замену, горячие клавиши (например, CtrlS для сохранения файла), снят предел в 64 Кбайт и добавлена поддержка Юникода. Кроме Windows, Блокнот способен выполняться также в ReactOS и Wine. Альтернативой Блокноту является текстовый редактор MS- DOS (EDIT.COM), который можно вызвать из командной строки в виде «edit». Блокнот не способен корректно работать с файлами в текстовом формате Unix, где символом переноса является байт с кодом 10, в отличие от Windows и DOS, где используются байты 13, 10 (см. статью Новая строка). Существует множество бесплатных более функциональных программ, заменяющих стандартный Блокнот, например: Bred,AkelPad, BDV Notepad, EditPad Lite, TED Notepad, Notepad++ и Notepad2. Они были особенно полезны в системах Windows версий 4.x, в которых функциональность Блокнота предельно ограничена. Microsoft Office FrontPage WYSIWYG-редактор HTML, входящий в состав пакета приложений Microsoft Office. Данное приложение при разработке страниц веб-узла пользуется движком Internet Explorer (Trident). В браузерах, использующих другие движки (например, Gecko), страницы, отображаться по-другому. созданные с помощью FrontPage могут 23 Программа обладает широким спектром возможностей, в частности, может автоматически отправлять изменения, внесённые разработчиком сайта в исходные тексты, в режиме реального времени. 1.6 Создание плана-проекта Microsoft Project Microsoft Project (илиMSP) — программа управления проектами, разработанная и продаваемая корпорацией Microsoft Microsoft Project создан, чтобы облегчить жизнь в разработке проекта, распределении ресурсов по задачам, отслеживании прогресса и анализе объёмов работ. Среди преимуществ Microsoft Project также можно назвать усовершенствованные средства групповой работы, что позволяют одному менеджеру одновременно управлять несколькими проектами с большим числом участников. По мнению Gartner Group, Microsoft Project - лучший выбор для организаций, где используется матричная схема управления, то есть проектные команды допускают взаимодействие сотрудников из разных департаментов . Новый файл проекта может быть создан «из нуля» или на основе существующего файла или шаблона. Можно также воспользоваться мастером создания проектов, в котором выполняются действия по настройке нового проекта. Можно создать новый проект, используя уже имеющийся файл проекта, похожего на текущий проект. Для создания проекта можно также воспользоваться шаблоном. При использовании существующего файла или шаблона не нужно вводить в проект ведомости, общие с другими аналогичными проектами Диаграмма Ганта является одним из представлений задач проекта. В Microsoft Project существует несколько представлений с использованием диаграммы Ганта: диаграмма Ганта, диаграмма Ганта с отслеживанием, 24 диаграмма Ганта с несколькими планами и подробная диаграмма Ганта. Каждое из них содержит таблицу, диаграмму и временную шкалу. Диаграмма Ганта представляет собой отрезки (графические плашки), размещенные на горизонтальной соответствует отдельной задаче шкале или времени. подзадаче. Каждый Задачи и отрезок подзадачи, составляющие план, размещаются по вертикали. Начало, конец и длина отрезка на шкале времени соответствуют началу, концу и длительности задачи. На некоторых диаграммах Ганта также показывается зависимость между задачами. Диаграмма может использоваться для представления текущего состояния выполнения работ: заштриховывается, часть отмечая прямоугольника, процент выполнения отвечающего задачи; задаче, показывается вертикальная линия, отвечающая моменту «сегодня». Назначение. Диаграмма Ганта позволяет редактировать календарный план проекта. Сетевой график – это ориентированный граф, в котором вершинами обозначены работы проекта, а дугами – временные взаимосвязи работ. На сетевом графике задачи изображаются блоками, соединенными стрелками в соответствии с взаимосвязями работ. На сетевом графике задачи обозначаются прямоугольниками, вехи – шестиугольниками, а фазы (суммарные задачи) – параллелограммами. Внутри фигур размещаются параметры задачи. Блок задачи, выполнение которой начато, зачеркнут одной линией. Блок завершенной задачи зачеркнут двумя линиями. В системе имеется два представления для сетевого графика: сетевой график и сетевой график с описанием. Отличаются они тем, что второй имеет внутри блоков информацию о ходе фактического выполнения задач. Назначение. Сетевой график позволяет создавать, редактировать и удалять задачи и связи между ними. Задача - Действия, имеющие начало и конец. Планы проектов состоят из задач. 25 Чтобы лучше организовать задачи, можно разбить список задач двумя способами. Для распределения задач по уровням переместите одни задачи на верхние уровни многоуровневого списка, создавая суммарные задачи, а другие задачи — на нижние уровни, создавая подзадачи. Суммарная задача - Задача, состоящая из подзадач, в которой суммируются результаты подзадач. используются структуры. Project Для создания автоматически суммарных определяет задач сведения, относящиеся к суммарной задаче (такие как длительность, затраты и т. д.) на основании сведений подзадач. Суммарные задачи позволяют формировать иерархическую структуру работы графика. Подзадача - Задача, являющаяся частью суммарной задачи. Информация подзадач консолидируется в суммарную задачу. Пользователь определяет подзадачи с помощью структур Project. Проект по сайту рис. 6 Рисунок 6. Проект по сайту 26 На рисунке 6. показан документ Microsoft Project. Самой главной задачей является курсовая работа, в которую входят два основных этапа: проектирование и разработка. В эти этапы были внесены задачи, которые необходимо выполнить точно в указанные сроки. 2. Описание процесса выполнения, разработки ПП 2.1 Создание Пару десятков лет назад, когда CMS движки для создания сайтов ещё не было "Веб-мастерам" редакторе(блокноте). приходилось Чтобы писать сайт воспользоваться в любом блокнотом, текстовом выполните следующие действия: нажмите правую кнопку мыши, затем выберите пункт создать, далее текстовый документ. Теперь зайдите в созданный файл, использую двойной клик мыши Или второй вариант. Кнопка ПУСК - > пункт программы - > стандартные - > блокнот. Теперь, когда вы находитесь в режиме блокнота, можно продолжить изучать инструкцию создания сайта. 2) Обратите внимание на код, приведенный ниже. Ваша задача скопировать его в блокнот, который вы открыли ранее. Для этого выделите код мышью, нажмите правую кнопку мыши, выберите пункт КОПИРОВАТЬ. Далее щелкните по рабочей области блокнота правой кнопкой мыши и выберите пункт ВСТАВИТЬ. Второй вариант. Вместо пунктов копировать и вставить, можно использовать сочетание клавиш клавиатуры: копировать – CTRL+C, вставить – CTRL+V. <html> 27 <head> <title>Название страницы моего первого сайта</title> </head> <body> Содержимое моего сайта.<br>Я прохожу уроки создания сайта. </body> </html> После того, как вы справились с этой задачей, переходите к следующему пункту инструкции создания сайта 3) В верхнем меню блокнота выбирает пункт ФАЙЛ - > сохранить как… рис. 7 Рисунок 7. Блокнот 28 В появившемся окне выбирает место на вашем компьютере, куда будет сохранен документ. Рекомендую заранее создать новую папку на диске С и назвать ее, например, web После того, как вы выбрали место для сохранения, напишите в строке «Имя файла» - название вашей первой страницы. Например, page.html. Заметьте, что наличие .html – обязательно, это расширение файла, которое показывает, что документ относится к HTML. Важное отступление. Не используйте в названии файла русские и заглавные буквы, а используйте только маленькие английские буквы, цифры, тире. Теперь жмем кнопку «сохранить». Стоит сделать маленькую оговорку. Ваш документ может сохраниться не как page.html, а как page.html.txt. Если это произошло, переименуйте файл в page.html. Но для этого понадобятся программы для работы с файлами, которых нет на вашем компьютере по умолчанию. Но их с легкостью можно найти в Интрнете, вот назнание этих программ «Total Commander» или «Windows Commander». 4) Теперь идем в ту директорию, куда был сохранен файл, и запускаем его, использую двойное нажатие левой кнопки мыши. Основные теги <html></html> Указывает программе просмотра страниц что это HTML документ. <head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. <body></body> Теги оглавления Определяет видимую часть документа 29 <base href="www.?"> Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью) Указание браузеру от какого базового окна в <base target="?"> котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра) <meta name="allow-search" Указание для поисковых роботов как следует сканировать данную страницу content="?"> <meta http-equiv="distribution" Указание для поисковых роботов относится ли данная страница к мировым content="?"> name="robots" Указание для поисковых роботов как следует <meta сканировать данную страницу content="?"> name="author" Указание автора странички <meta content="?"> <meta name="keywords" Описание содержащийся информации (для поисковых машин) content="?"> <meta http-eguiv="content-type" Указание браузеру в какой кодировке следует content="text/plain;churset="?"> подгружать страницу (Window-1251, KOI8-R, KOI8U, ISO-8859-5, UTF-8, UTF-16 и д.р.) Некоторые хостинги (восновном иностранные) автоматически перекодируют страници получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос. <meta name="description" Ключевые слова странички (для поисковых машин) content="?"> <title></title> Помещает название документа в оглавление программы просмотра страниц Атрибуты тела документа <body bgcolor="?"> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 красный цвет. <body text="?"> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 черный цвет. 30 Устанавливает <body link="?"> цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 зеленый цвет. Устанавливает цвет гиперссылок, на которых вы уже <body vlink="?"> побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет. Устанавливает цвет гиперссылок при нажатии. <body alink="?"> Теги форматирования текста Обрамляет <pre></pre> предварительно отформатированный текст. Создает самый большой заголовок <h1></h1> <h2></h2>, <h3>, Создает заголовоки промежуточных размеров </h3><h4></h4>, <h5>, </h5> <h6></h6> Создает самый маленький заголовок <b></b> Создает жирый текст (нерекомендованный) <i></i> Создает наклонный текст (нерекомендованный) <tt></tt> Создает текст - имитирующий стиль печатной машинки. (нерекомендованный) <kbd></kbd> Создает текст - имитирующий стиль печатной машинки. (рекомендованный) <var></var> Название переменных отображается курсивом <cite></cite> Выделение цитат курсивом <address></address> Отображается курсивом в виде отдельного абзаца <em></em> Наклонный текст (воспринимается посковыми роботами как выделение) <strong></strong> Жирный текст (воспринимается посковыми роботами, как особо сильное выделение) <font size="?"></font> Устанавливает размер текста в пределах от 1 до 7. <font color="?"></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB. Гиперссылки 31 <a href="URL"></a> Создает гиперссылку на другие сайты. <atarget="?"></a> Указывает в каком окне открывать гиперссылку. параметры Значение _Blank Загрузка содержимого страницы, заданной ссылкой, в новое пустое окно _Parent Загрузка содержимого страницы, заданной ссылкой, в окно, которое содержит ссылку _Self Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы _Top Загрузка содержимого страницы, заданной игнорируя ссылкой, в окно, использованные фреймы При использовании фреймов и вложенных фреймов значением может выступать имя фрейма или вложенной сетки фреймов, приэтом страница откроется в указаной части окна. <a href="NAME"></a> Создает гиперссылку на другую страницу. <a href="mailto:EMAIL"></a> Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. <a href="#name"></a> Создает гиперссылку на метку текущей страници. <a name="name"></a> Отмечает часть текста, как метку для гипперссылок на странице. 32 <a href="NAME#name"></a> Создает гиперссылку на метку другой страници. Форматирование <p></p> Создает новый параграф <p align="?"></p> Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center <nobr> Запрещает перевод строки. <wbr> Указывает где разбивать строку для переноса при необходимости. <br> Вставляет перевод строки. <blockquote></blockquote> Создает отступы с обеих сторон текста. <dl></dl> Создает список определений. <dt> Определяет каждый из терминов списка <dd> Описывает каждое определение <ol></ol> Создает нумерованный список <li> Определяет каждый элемент списка и присваивает номер <ul></ul> Создает ненумерованный список <li> Предваряет каждый элемент списка и добавляет кружок или квадратик. <div align="?"></div> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей 33 2.2 Готовый сайт После всех проделанных операций с кодами получается сайт рис. 8. Рисунок 8. Сайт «Пекло» На рисунке 8 показана страница сайта «Пекло». С лева выведены разделы «История, Сюжет, Галерея, Трейлеры». 34 Рисунок 9 . Вкладка история На рис. 9 В вкладке «История» описывается история создания фильма «Пекло» 35 Рисунок 10. Вкладка сюжет На рис 10. В вкладке «Сюжет» описывается сюжет фильма «Пекло». 36 Рисунок 11. Вкладка галерея На рис.11 В вкладке галерея представлены кадры из фильма. 37 Рисунок 12. Вкладка трейлеры На рис. 12 В вкладке трейлеры размещены ссылки трейлеров на сторонних ресурсах. 38 Заключение Таким образом, были изучены возможности языка HTML для создания Web-страниц, узнала, какие HTML и графические редакторы лучше использовать в Web-дизайне, каковы преимущества и недостатки тех или иных программных пакетов. Подводя итог хочется отметить, что HTML стал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML. 39 Библиографический список 1. Ларсон М.А. Создание web-страниц с помощью Word. - М.: БИНОМ, 2005 2. Пери Б.Л. Секреты World Wide Web - М.: ПРЕССКОМ, 2004 3. Рассохин С.В., Лебедев Г.Д. World Wide Web - глобальная информационная паутина в сети Internet - М.: ФЕНИКС, 2005 4. Лесничая И.Г. Информатика и информационные технологии - М.: ЭКСМО, 2005 5. Гласман А.В. Принципы построения web - страниц - СПб.: ДУКСНЕТ, 2006 6. Хеслоп А.П. HTML с самого начала - СП.; ФИЗМАТ, 2005.
