Разработка сайта «Интернет-магазин средств связи» средствами веб-программирования PHP, HTML 4.01, CSS, JavaScript
Контент представляет собой каталог товаров, в котором приведены фотографии и описание различных средств связи (мобильных телефонов). Браузер открыв окно предлагает пользователю «Главную» страницу, где имеется перечень товаров и доступ к дополнительным опциям, все эти же возможности продублированы в блоке «Меню», который расположен в левой части страницы. Перейдя по ссылке товара можно ознакомится… Читать ещё >
Разработка сайта «Интернет-магазин средств связи» средствами веб-программирования PHP, HTML 4.01, CSS, JavaScript (реферат, курсовая, диплом, контрольная)
Муниципальное образовательное учреждение высшего профессионального образования «Южно Уральский Профессиональный Институт»
Кафедра информатики и вычислительной техники Контрольная работа по дисциплине «Программирование»
Тема: Разработка сайта «Интернет-магазин средств связи» средствами веб-программирования PHP, HTML 4.01, CSS, JavaScript
Выполнил Мурашкин Антон Викторович, студент гр. ПСЗ-1−08,
специальность 230 105.65
" Программное обеспечение ВТ и АС Проверил Кириллова Светлана Николаевна, преподаватель ЮУПИ Челябинск- 2010
Содержание программирование сайт контент дизайн
- Введение
- 1. Техническое задание
- 2. Технология создания сайта
- 2.1. Разработка структуры сайта
- 2.2. Определение структуры и формирование контента сайта
- 2.3. Разработка системы навигации
- 2.4. Особенности дизайна сайта
- 3. Средства разработки сайта
- Заключение
- Список литературы
- Приложения
- Введение
- Значение и обзор современных средств веб-программирования
Системы программирования в современном мире доминируют на рынке средств разработки. Практически все фирмы-разработчики компиляторов поставляют свои продукты в составе соответствующей системы программирования в комплексе всех прочих технических средств. Отдельные компиляторы являются редкостью и, как правило, служат только узкоспециализированным целям.
Тенденция такова, что все развитие систем программирования идет в направлении неуклонного повышения их дружественности и сервисных возможностей. Это связано с тем, что на рынке в первую очередь лидируют те системы программирования, которые позволяют существенно снизить трудозатраты, необходимые для создания программного обеспечения на этапах жизненного цикла, связанных с кодированием, тестированием и отладкой программ. Показатель снижения трудозатрат в настоящее время считается более существенным, чем показатели, определяющие эффективность результирующей программы, построенной с помощью системы программирования.
В качестве основных тенденций в развитии современных систем программирования следует указать внедрение в них средств разработки на основе так называемых языков четвертого поколения 4GL (four generation languages), а также поддержка систем быстрой разработки программного обеспечения RAD (rapid application development).
Языки четвертого поколения 4GL представляют собой широкий набор средств, ориентированных на проектирование и разработку программного обеспечения. Они строятся на основе оперирования не синтаксическими структурами языка и описаниями элементов, а представляющими их графическими образами. На таком уровне проектировать и разрабатывать прикладное программное обеспечение может пользователь, не являющийся квалифицированным программистом, зато имеющий представление о предметной области, на работу в которой ориентирована прикладная программа. Языки четвертого поколения являются следующим (четвертым по счету) этапом в развитии систем программирования.
Описание программы, построенное на основе языков 4GL, транслируется затем в исходный текст и файл описания ресурсов интерфейса, представляющие собой обычный текст на соответствующем входном языке высокого уровня. С этим текстом уже может работать профессиональный программист-разработчик он может корректировать и дополнять его необходимыми функциями. Такой подход позволяет разделить работу проектировщика, ответственного за общую концепцию всего проекта создаваемой системы, дизайнера, отвечающего за внешний вид интерфейса пользователя, и профессионального программиста, отвечающего непосредственно за создание исходного кода создаваемого программного обеспечения.
В целом языки четвертого поколения решают уже более широкий класс задач, чем традиционные системы программирования. Они составляют часть средств автоматизированного проектирования и разработки программного обеспечения, поддерживающих все этапы жизненного цикла CASE-систем.
Предполагаемое назначение разрабатываемого сайта Данный сайт разрабатывался как практическое задание по дисциплине Web-програмирование, и соответственно имеет свои особенности в отличные от возможностей сайтов предназначенных для коммерчесого использования. Целью данной работы является показать уровень и качество полученных знаний в области разработки и применения информационно-коммуникационных средств.
1. Техническое задание В начале работы выбрать тип сайта, который будете создать. Тип сайта: Интернет-магазин. Далее определиться с тематикой сайта: Тематика сайтов: Интернет-магазин средств связи.
Кнопки управления (навигация сайта): определяются веб-дизайнером самостоятельно, с каждой страницы сайта должен быть обеспечен переход (установлена гиперссылка) на главную страницу сайта.
Блок схема сайта: определяется веб-дизайнером самостоятельно. Головная (начальная) страница сайта должна содержать гиперссылки, обеспечивающие переход с нее на не менее чем 95% страниц сайта, но не более чем 160 гиперссылок. Объём сайта: 100 Мб.
Минимальное разрешение монитора, на котором будет просматриваться сайт: 1024×768 пикселей. При указанном разрешении возможность просмотра страниц сайта без горизонтальной прокрутки браузера не предусматривается. Основной браузер, которым будет просматриваться сайт, и его минимальная версия: IE 7 и выше.
Цветовая палитра: основной режим мониторов, на которых будет просматриваться сайт: 15 разрядов цветов и выше (число цветов 65 536 и выше). При разработке сайта должен быть обеспечена возможность его просмотра при использовании безопасной цветовой палитры (разрядность цветов 8). Изменения оттенков цветов, при просмотре сайта с использованием безопасной цветовой палитры, не оговариваются.
Общий фон сайта: общий фон сайта светлый (белый). Допускается использование светлого фонового рисунка. Размер и вид шрифта сайта: размер шрифта сайта должен быть в пределах 10−12 для оформления текста. Размер шрифта для оформления заголовков, названия страниц и т. д. не оговаривается. Вид (название) шрифта не оговаривается.
Срок разработки сайта: с 15 сентября по 15 декабря 2009 года.
- 2. Технология создания сайта
- 2.1 Разработка структуры сайта
- Схема структуры сайта
- Рисунок 1-Схема: Главная страница
- Рисунок 2-Схема: Открытая ссылка
- Рисунок 3-Схема структуры сайта: Меню
- Рисунок 4-Схема структуры сайта: Главная
- Рисунок 5-Схема структуры сайта: Ссылка Звонок оператору
- Рисунок 6-Схема структуры сайта: Открытая ссылка
- Структурная схема сайта представлена в блочном варианте для облегчения прочтения и восприятия.
- Особенности структуры
- Данный сайт построен с использованием технологии фреймов. Благодаря технологии фреймов окно браузера делится на несколько частей (областей). Каждая часть по сути представляет собой отдельное окно, тем самым пользователю предлагается работать как-бы с несколькими окнами сгрупированными в единое целое. Естественно, это не могло не отразиться на структуре сайта пользователь переходя по ссылкам от страницы к странице всё время визуально как-бы находится на одном уровне, и не замечает степень углубления или поднятия в структуре сайта. Вершиной структуры (структурной схемы) является пункт «Меню» от которого происходит развевление структуры на различные ссылки, «Главная» страница, так же как группы товаров и связь с оператором является одним из пунктов. Далее происходит разветвление каждой ссылки, максимальное ветвление разумеется происходит на ссылке «Главная», которая дублирует в себе все остальные ссылки пункта «Меню» (группы товаров, звонок оператору). Ссылки относяшиеся к определённым товарам имеют более простую схему ветвления—это либо возврат на «Главную» страницу, либо на страницу «Звонок оператору». Ссылка «Звонок оператору» имеет ветвление подобное пункту «Меню», и обеспечивает переходы как на «Главную» страницу, так и к любому товару.
- 2.2 Определение структуры и формирование контента сайта
- Схема структуры контента
- Рисунок 7-Схема: Главная страница
- Схема структуры сайта
- Рисунок 8-Схема: Открытая ссылка
- Данный сайт построен с использованием технологии фреймов. Благодаря технологии фреймов окно браузера делится на несколько частей (областей). Каждая часть по сути представляет собой отдельное окно, тем самым пользователю предлагается работать как-бы с несколькими окнами сгрупированными в единое целое.
- Особенности и объем контента
- Контент представляет собой каталог товаров, в котором приведены фотографии и описание различных средств связи (мобильных телефонов). Браузер открыв окно предлагает пользователю «Главную» страницу, где имеется перечень товаров и доступ к дополнительным опциям, все эти же возможности продублированы в блоке «Меню», который расположен в левой части страницы. Перейдя по ссылке товара можно ознакомится с его характеристиками, и далее воспользовавшись встроенными кнопками ссылками либо вернуться на «Главную» страницу, либо получить данные для связи с оператором. Связаться с оператором возможно так же через специальный пункт «Меню». Сайт создан с помощью языка разметки гипертекста HTML. При производстве использована технология фреймов. В качестве графической составляющей использованы рисунки в формате .jpg, т.к. данный формат сохраняет рисунок с минимальным объёмом (размером), размером 15—100КБ, и безопасная цветовая палитра. Объём сайта составляет—6,7МБ в обычном виде и 5,32—ввиде архива Win.rar.
- Источники для формирования контента сайта
- В качестве источников формарования сайта использованы общедоступные бесплатные рисунки и фотографии средств связи (мобильных телефонов). Обзоры (описания) продукции получены из свободно распространяемых рекламно-информационных и позновательных проспектах (брошурах). Полученные исключительно на законных основаниях.
- Средства и способы форматирования контента
- Для форматирования контента использованы средства языка разметки гипертекста HTML. Файлы содержащие кодировку HYML написаны в текстовом редакторе «Блокнот» переведены в формат HTML путём сохранения докуиента с соответствующим расширением (.html). Все рисунки выполнены в формате .jpg.
- 2.3 Разработка системы навигаци
- Средства навигации
- Вся навигация сведена к минимизации лишних переходов, и реализуется с помощью ссылок на страницы. Ссылки выполнены как в текстовом, так и в графическом формате. В графическом формате ссылка представляет собой рисунок, либо ячейку таблицы выполненную ввиде кнопки.
- Особенности системы навигации
- Система навигации данного сайта создана с учётом возможности перехода из ооного пункта в любогой пункт за одно нажатие ссылки.
- Так как сайт пострен с использованием технологии фреймов часть элементов остаются неизменными при любой просматриваемой странице. Логотип и пункты меню остаются неизменными, изменяется только часть окна браузера. В которой можно просмаривать все страницы по-очерёдно, на каждой странице для удобства встроены дополнительные ссылки выполняющие функции наиболее уместные в данном пункте, и не создающие путаницы для пользователя.
- 2.4 Особенности дизайна сайта
- Описание средств для создания дизайна
- Для создания дизайна использованы средства языка разметки гипертекста HTML. Размеры рисунков (фотографий) задаются специальными командами (операторами, тегами), с их помошью также произведено распределение объектов на страницах сайта. В качестве основного разметочного инструмента использованы таблицы. Цветовые решения выполенные без рисунков (фотографий) созданы с использованием кодировки цветов безопасной палитры.
- Особенности дизайна сайта. Дизайн сайта выполнен в спокойных распологоющих к нему (сайту) тонах не заружающих зрение пользователя. Для таких пунктов, как рекламный слоган, номера оператора и цена товара выбран резкий тонизирующий цвет, который призван привлечь основную часть внимания пользователя. Основная задача резкого цвета заставить пользователя купить именно здесь.
- Использование библиотек
- Библиотека данного сайта состоит из общей папки К.р._веб-прогр._МурашкинАВ, в которую включены четыре управляющих HTML файла: index. html, logo. html, menu. html, content. html, sale. html; два рисунка: 1. jpg, a0001. jpg и архив из двадцати одной папки (1, 2, 3…21). Каждая папка из этого архива (1, 2, 3…21) содержит управляющий файл HTML (1.html, 2. html, 3. html…21.html) и коллекции картинок товаров. Например: папка-1: 1. html, 88001.jpg, 88002.jpg, 88003.jpg.
- 3. Средства разработки сайта
- Описание языка разметки или веб-программирования
Тег
—указывает программе просмотра страниц что это HTML документ.Тег
—определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин ТегТег
—служит для описания фрейма.Атрибуты:
cols="200,*,…, *" —производит вертикальное разделение окна,
rows="100,*,…, 100″ —производит горизонтальное разделение окна.
Тег
служит для описания фрейма. Закрывающий тег не требуется.Атрибуты:
Name—назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках,
Src—определяет исходный документ, содержащийся в фрейме,
Noresize—если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя,
Scrolling—создаёт либо убирает полосы прокрутки,
marginwidth="0″ marginheight="0″ —определяют ширину полей фрейма.
Тег
—определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов. Рекомендуется вместо нежелательных атрибутов использовать каскадные таблицы стилей. Начальный и конечный теги необязательны Атрибуты:Bgcolor—устанавливает цвет фона документа, используя значение цвета в виде RRGGBB—пример: FF0000—красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице
Background—указывает цвет фона документа,
Text—устанавливает цвет текста документа, используя значение цвета в виде RRGGBB — пример: 0 — черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице
,Link—устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB—пример: 00FF00—зеленый цвет, либо используя константы цвета, например для красного цвета, используемой на данной странице
,Vlink—устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB—пример: 333 333—серый цвет,
Alink—устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой
bgproperties=fixed—фоновое изображение прокручиваться не будет. Т. е. текст будет двигаться при нажатии PageDown, а фон—нет. Данный параметр поддерживается только Internet Explorer
Эти параметры можно объединять.
Тег вставка рисунка.
Атрибуты:
alt="нокиа-8800″ —всплывающая подсказка,
height="100″ —высота рисунка, может задаваться в %,
width="200″ —ширина рисунка, может задаваться в %,
border="0″ —обрамление рисунка.
Тег
—выключка по центру.Тег
Тег < Align right ></ Align right >—выключка по правому краю.
Тег —служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо href
Атрибуты: