Подготовка графических материалов в векторной форме.
Экспорт векторных рисунков в растровый формат, оптимизация картинок.
Создание шаблонов web-страниц.
Сборка web-страниц и отладка кода.
Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и в различных броузерах.
Прежде чем браться за разработку любого web-сайта, это подумать оцелях, которые вы ставите перед собой, создавая новый проект. От выбора целей будут зависеть методы их достижения, в том числе и сам дизайн. От правильной постановки задач будет зависеть успех всего предприятия.
Вы создаете домашнюю страничку? Возьмите ручку, лист бумаги и прикиньте, какие тематические разделы должно включать ваше будущее творение, о чем именно вы хотели бы рассказать с его помощью прогрессивной общественности.
Вы решили создать некоммерческий информационный сайт? Определитесь, чему он будет посвящен. Если это развлекательный проект, после того как вы придумаете перечень соответствующих рубрик (например, «анекдоты», «карикатуры» или «юмористические рассказы»), необходимо подобрать для него подходящее дизайнерское решение, более или менее отвечающее содержанию. У посетителей, скорее всего, вызовет легкое недоумение развлекательный проект, выполненный в стиле серьезного информационного или новостного портала.
Быть может, вы хотите опубликовать ресурс, посвященный приготовлению домашних вин? Прогуляйтесь по Интернету, посмотрите, что уже создали ваши «коллеги», какие разделы есть на аналогичные сайтах, оцените, какой информации на них не хватает, а какой — наоборот, переизбыток, как эта информация «подается» потребителю, скучно ее читать или, наоборот, интересно и увлекательно.
У вас возникла необходимость разработать коммерческий сайт? В этом случае и перечень тематических разделов, и окончательное решение относительно применяемых вами дизайнерских приемов, таких как использование корпоративных цветов, специальных шрифтов или кнопок, стилизованных под общую концепцию проекта, будет принимать, скорее всего, заказчик сайта. Однако в любом случае вам придется предоставить ему несколько пробных вариантов, так называемых дизайн-проектов, показывающих возможные реализации будущего ресурса. Обратитесь к сайтам конкурирующих организаций, отечественных и зарубежных, посмотрите, какие рубрики составляют их web-сайт, какие данные предлагаются в каждом тематическом разделе.
После того как вы определились с количеством, названиями и содержанием всех разделов своего проекта, можно переходить к следующему этапу создания сайта — проектированию его логической и физической структуры.
Необходимо помнить, что и список рубрик, и количество представленных в них материалов, да и содержимое самих документов будет, скорее всего, неоднократно изменяться и дополняться. Какие-то разделы будут со временем удалены за ненадобностью, какие-то — наоборот, добавлены, какие-то web-страницы вы посчитаете уже неактуальными, а какой-то документ, напротив, необходимо будет переработать заново. Логическая и физическая структуры вашего проекта должны отвечать подобным требованиям «мобильности», у вас не должно возникать ни малейших проблем с организацией или реорганизацией гиперсвязей внутри проекта, если какой-либо составляющий его документ вдруг перестанет существовать. Подробно продумайте все гиперсвязи между страницами ресурса, разработайте структуру директорий и поддиректорий, в которые вы будете размещать документы. Только после этого можно обратиться непосредственно к вопросам дизайна.
Прикиньте и зарисуйте компоновку ваших будущих web-страниц. Карандашом. На бумаге. Учтите, что если логическая структура вашего сайта подразумевает наличие стартовых страниц разделов, или, как их еще называют, индексных файлов, дизайн этих страниц, а также стартового документа самого сайта будет, скорее всего, несколько отличаться от дизайна составляющих рубрику информационных страниц. Индексные файлы содержат обычно ссылки на документы, составляющие данную рубрику, иногда — краткие анонсы этих документов. Основное содержание самих информационных страниц составляет информационный текст и, по мере необходимости, иллюстрации.
Представив общую компоновку web-страниц, продумайте структуру невидимой таблицы, в которую затем будут включены их компоненты. Проектируя таблицу, необходимо учитывать, что между ее столбцами, содержащими различные элементы документа, желательно оставлять пустые колонки шириной один-два пиксела. Делается это с целью избежать эффекта «прилипания» колонок друг к другу, наблюдающегося, когда между элементами web-страницы отсутствует горизонтальный отступ, что заметно портит внешний вид документа.
Создание верстальной таблицы — это, пожалуй, одна из наиболее сложных процедур при разработке нового проекта. Начертить таблицу безошибочно с первой попытки практически невозможно. Навык, благодаря которому web-мастер, за несколько секунд, рисует все необходимые строки и столбцы «на глаз», приходит только с опытом. Здесь трудно дать какие-то конкретные советы, чтобы помочь начинающему дизайнеру. Научиться быстро проектировать верстальную таблицу для нового сайта можно только одним способом: загрузите несколько созданных другими авторами web-страниц во FrontPage Express или Macromedia Dreamweaver, посмотрите, какие таблицы применяются ими для отображения данных документов, внимательно изучите их, после чего попытайтесь создать свои.
Для построения сложных таблиц можно применять вложение одной таблицы в другую: например, первичная таблица шириной 640 точек задает горизонтальное разбиение страницы, в каждую из ее ячеек вкладывается еще одна, равная ей по ширине невидимая таблица, обеспечивающая вертикальное разбиение. Такой подход позволяет дробить различные участки web-страницы независимо друг от друга, создавая, к примеру, в одном ее поле четыре вертикальные колонки различной ширины, а в другом — две, оперируя при этом различными параметрами вложенных таблиц в пределах одного и того же документа — размером пространства между колонками, толщиной границ и т. д.
После того как будут скомпонованы основные элементы документа и размечена невидимая таблица, у вас должен получиться примерный эскиз будущего сайта. Теперь настала очередь подготовки контента:
Сначала рекомендуется набрать в любом редакторе все необходимые тексты, причем сохранять их лучше всего в формате plain text, то есть в файле с расширением .txt.
В векторном редакторе (например, в Corel-Draw) создать необходимые графические элементы, экспортировать их в растровый формат.
Обработать рисунки в редакторе растровой графики (Adobe Photoshop), придав картинкам необходимый размер и разрешение, после чего по мере необходимости оптимизировать их с помощью специальных компрессоров или других аналогичных средств.
Только после всех описанных выше процедур можно приступать непосредственно к сборке страницы: созданию ее макета в HTML-редакторе, написанию и окончательной отладке кода.
Поскольку дизайн всех документов, составляющих ваш будущий сайт, скорее всего, будет практически идентичным, в первую очередь рекомендуется создать так называемый шаблон. Шаблон представляет собой html-документ, содержащий невидимую таблицу, заголовок, все графические объекты, элементы навигации — все, за исключением непосредственного информационного наполнения.
Если впоследствии у вас возникнет необходимость включить в проект новый документ, вам будет достаточно открыть в html-редакторе готовый шаблон и импортировать в него текст и все необходимые иллюстрации. Советуется разработать и сохранить на диске два различных шаблона: для информационной страницы и индексного файла.
Когда страница будет готова, ее следует проверить на идентичность отображения в различных броузерах при различных экранных разрешениях и цветовых палитрах. Загрузите созданный вами html-документ в Microsoft Internet Explorer, установите значение цветовой палитры экрана равным 256 цветов, после чего последовательно измените экранное разрешение на 640x480, 800x600 и, наконец, на 1024x768 точек. Посмотрите, не меняется ли компоновка страницы, не «съезжают» ли ее элементы относительно друг друга. Проделайте ту же процедуру для Netscape Navigator. Если никаких существенных изменений вы не заметите, можно быть уверенным, что другие документы, созданные с использованием того же шаблона, с вероятностью 95 % будут отображаться столь же корректно. Задания для практического занятия: 1. Определите и запишите тему, цели и основные задачи вашего будущего веб-сайта.
2. Составьте и запишите список будущих тематических разделов сайта.
3. Разработайте логическую и физическую структуру ресурса.
4. Подготовьте эскиз дизайна, компоновки сайта, невидимой верстальной таблицы. Контрольные вопросы 1. Что называется логической структурой сайта?
2. Чем отличается логическая и физическая структура сайта?
3. Какие правила нужно соблюдать при создании физической структуры сайта?
5. Запишите последовательность действий (алгоритм) по разработке web-сайта.
Практическая работа № 15 «Составление технического задания на разработку web-сайта» Цель работы: научиться правильно составлять техническое задание на разработку web-сайта Образовательные результаты, заявленные во ФГОС третьего поколения:
Студент должен
уметь:
- создавать web-приложения.
знать:
- инструменты создания web-приложений. Краткие теоретические и учебно-методические материалы по теме практической работы Техническое задание – первый и самый важный шаг на пути создания сайта. Это документ на основе которого Исполнитель разрабатывает сайт, а Заказчик оценивает качество готового продукта.
Техническое задание является неотъемлемой частью договора на разработку сайта и не может быть подправлено в течение всего периода создания web-сайта.
Техническое задание разделяется на три части:
Назначение и цели создания сайта
Содержание сайта
Структура сайта
ОБРАЗЕЦ ТЕХНИЧЕСКОГО ЗАДАНИЯ НА РАЗРАБОТКУ WEB-САЙТА
Техническое задание на разработку Веб-сайта
1. Имя сайта (название домена). www._______.ru Если домен www._____.ru будет занят, возможна замена имени.
2. Название сайта. Сайт ООО "______________". Далее - Фирма.
3. Назначение сайта (цель создания сайта).
Представление Фирмы в Интернет: информация о Фирме, история Фирмы, партнёры Фирмы, Заказчики Фирмы, цены на оказываемые услуги, справочная техническая и юридическая информация, советы клиентам, сопроводительные графические рисунки, юридический адрес, почтовый адрес, схема проезда, контактная информация, банковские реквизиты, сведения об имеющихся вакансиях. Сайт должен способствовать привлечению клиентов и нахождению деловых партнеров. 4. Язык сайта. Русский 5. Основные ключевые слова, по которым сайт должны находить по запросам в поисковых системах и Интернет - каталогах. Согласно материалам Заказчика. Примечание: Перечень ключевых слов для Веб-дизайнера сайта носит справочный характер и не входит в число обязательных параметров, подлежащих проверке при приемке сайта. Занимаемые сайтом позиции в рейтингах, каталогах и поисковых системах не оговариваются. 6. Объём и состав текстовой и графической информации в электронном виде. Согласно материалам Заказчика.
7. Предполагаемая возрастная аудитория сайта. От 30 лет и старше. 7.1. Предполагаемое возрастное ядро аудитории от 35 до 50 лет. 7.2. Данная информация носит рекомендательный характер. Цифровые показатели контролю и проверке при приёмке сайта не подлежат.
8. Количество страниц сайта. Сайт должен содержать следующие html страницы: 1 - Главная (домашняя) страница; 2 - Прайс-лист; 3 - Фото (каталог) товаров; 4,5,6,7,8,9,10 - Справочная информация; 11 - О Фирме; 12 - Офис; 13 - Партнёры; 14 - Вакансии; 15 - Потребности; 16 - Сервисы. Количество html страниц сайта определяется Веб-дизайнером самостоятельно, исходя из объёма предоставленных материалов Заказчика. 9. Кнопки управления (навигация сайта). Определяются Веб-дизайнером самостоятельно. С каждой страницы сайта должен быть обеспечен переход (установлена гиперссылка) на главную страницу сайта. Сайт должен содержать страницу "Содержание" (карта сайта). 10. Блок схема сайта. Определяется Веб-дизайнером самостоятельно. Головная (начальная) страница сайта должна содержать гиперссылки, обеспечивающие переход с нее на не менее чем 95% страниц сайта, но не более чем 160 гиперссылок. 11. Объём сайта, Мб. Не оговаривается.
12. Оформление рисунков. Все рисунки объемом более 1 Кб должны быть выполнены с замещающим текстом. Рисунки размером более 15 Кб должны быть выполнены с предпросмотром. Формат всех рисунков gif или jpg (jpeg).
13. Пропускная способность линии связи. Среднее время загрузки страниц не должно превышать 28 секунд при скорости соединения 28.8 Кбит/сек. Допускается увеличение времени загрузки отдельных страниц до 36 секунд, но не более чем на 30% числа страниц сайта. Головная (начальная) страница должна иметь время загрузки не более 40 секунд. Примечание: Во всех случаях не учитывается время загрузки подгружаемых элементов (счетчики, баннеры, информеры и т.д.). 14. Основной диапазон разрешения мониторов, на которых будет просматриваться сайт. От 600х800 до 1240х1024 пикселей. Основное разрешение, на которое оптимизируется сайт: 1024х768 пикселей. 15. Минимальное разрешение монитора, на котором будет просматриваться сайт. 600 х 800 пикселей. При указанном разрешении возможность просмотра страниц сайта без горизонтальной прокрутки браузера не предусматривается.
16. Основной браузер, которым будет просматриваться сайт, и его минимальная версия. IE 5.5 и выше.
17. Цветовая палитра. Основной режим мониторов, на которых будет просматриваться сайт: 15 разрядов цветов и выше (число цветов 65536 и выше). При разработке сайта должен быть обеспечена возможность его просмотра при использовании безопасной цветовой палитры (разрядность цветов 8). Изменения оттенков цветов, при просмотре сайта с использованием безопасной цветовой палитры, не оговариваются.
18. Общий фон сайта. Общий фон сайта светлый (белый). Допускается использование светлого фонового рисунка.
19. Размер и вид шрифта сайта. Размер шрифта сайта должен быть в пределах 10-12 для оформления текста. Размер шрифта для оформления заголовков, названия страниц и т.д. не оговаривается. Вид (название) шрифта не оговаривается.
20. Регистрация сайта в каталогах, рейтингах, топах и пр. Оговаривается дополнительно.
21. Проведение рекламной кампании по раскрутке сайта. Раскрутка сайта определяется отдельным техническим заданием.В настоящем техническом задании раскрутка сайта не оговаривается и не входит в состав выполняемых работ (услуг).
22. Срок разработки сайта. Три недели со дня зачисления 70% предоплаты на расчётный счёт Веб-студии. 23. Порядок передачи сайта. Веб-дизайнер передает сайт на CD ROM, а также логин, пароль и название (код передачи данных) по протоколу ftp. Заказчик обязан проверить наличие грамматических и орфографических ошибок на сайте в течение трех рабочих дней. Обнаруженные ошибки Веб-дизайнер обязан устранить в течение трех рабочих дней.
24. Сопровождение сайта. Сопровождение сайта определяется отдельным техническим заданием.В настоящем техническом задании сопровождение сайта не оговаривается и не входит в состав выполняемых работ (услуг).
25. Дополнительные условия. Каждая страница сайта должна содержать логотип и название Фирмы. Внизу на каждой странице сайта должна быть указана контактная информация. Сайт должен содержать не менее двух счетчиков подсчета посетителей. Материалы предоставляемые Заказчиком:
Текстовая (формат Word) и графическая информация (формат jpeg и gif), представленные на CD ROM.
Примечание:
Задание на сайт может быть изменено с учетом конкретных требований.
Задание на сайт предназначено для русскоязычных сайтов, объемом не более 50 html страниц. Если сайт имеет версию на иностранном языке или версию для просмотра на мобильных устройствах, задание на сайт должно быть дополнено соответствующими пунктами.
Веб-дизайнер не несет ответственности за несоответствие сайта эстетическим ожиданиям Заказчика при условии выполнения технического задания на сайт.
Подписи Сторон:
Веб-студия Заказчик Задания для практического занятия: 1. Составьте техническое задание на разработку web-сайта по вариантам:
№ варианта
Название сайта (тематика)
1
Личный сайт
2
Сайт туристической фирмы
3
Сайт Интернет магазина
4
Сайт библиотеки
5
Сайт новостей
6
Сайт погоды
7
Сайт спортивного клуба
8
Сайт выставочного комплекса
9
Сайт концертного зала
10
Сайт инструментального ансамбля
11
Сайт железнодорожного вокзала
12
Сайт телеграфа
13
Сайт фотоателье
14
Сайт транспортной компании
15
Сайт поликлиники
16
Сайт института
17
Сайт центрального рынка
18
Сайт ресторана
19
Сайт парка культуры и отдыха
20
Сайт журнала
21
Сайт коммерческой фирмы
22
Сайт Интернет аукциона
23
Сайт архива
24
Сайт трамвайного маршрута
25
Сайт web-студии
26
Сайт кадрового агентства
27
Сайт кафе
28
Сайт газеты
29
Сайт молодежной одежды
30
Сайт театра
Контрольные вопросы 1. Что такое техническое задание?
2. Как выглядит в общем виде техническое задание на разработку web-сайта
Практическая работа № 16 «Синтаксис документа HTML» Цель работы: научиться определятьь основные теги HTML-документа, их артибуты Образовательные результаты, заявленные во ФГОС третьего поколения:
Студент должен
уметь:
- создавать web-приложения;
- создавать программный код на языке гипертекстовой разметки;
знать:
- инструменты создания web-приложений;
- принципы гипертекстовой разметки;
- структуру гипертекстового документа;
- основные теги языка гипертекстовой разметки и их свойства. Краткие теоретические и учебно-методические материалы по теме практической работы HTML-файл содержит один тип управляющих конструкций - теги (tags).
тег — единица разметки;
элемент — составная часть документа.
Назначение тегов:
- разделяютисходный неформатированный текст документа на элементы;
- создаютновые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты).
Виды тегов:
- парные, охватывающие какой-то фрагмент текста и/или другие теги,
<парный-тег>текст или другие теги
Парные теги должны вкладываться друг в друга без пересечений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А.
- непарные, стоящие в одиночестве:
<непарный-тег>
Атрибуты
Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега:
<тег атрибут1="значение" атрибут2="значение" ...>
Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут="значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами.
Подстановки
Чтобы ввести в документ символы, отсутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановкидвух видов:
1. мнемонические - имеют вид
& мнемонический код;
например:
è для ё < для <
для символа неразрываемого пробела
2.числовые – имеют вид
& # десятичный числовой код;
например:
б0; для символа неразрываемого пробела
Ссылки и привязки
тег А
Любая ссылка в HTML имеет два обязательных элемента:
источник - то изображение или фрагмент, который заключен между <А> и и щелчок по которому активизирует ссылку;
пункт назначения - URL-адрес документа, на который ведет ссылка.
Адрес назначения может указывать не только на весь документ в целом, но и на какое-то место (точнее, опять-таки, какой-то элемент) внутри документа, в том числе и внутри самого документа со ссылкой. Для этого пункт назначения должен быть помечен с помощью атрибута name тега А создателем того документа, на который делается ссылка. В свою очередь, в теге А в документе-источнике эта метка приписывается к адресу назначения через символ #.
Формы
тег FORM
Формы (forms), или бланки, предназначены для «обратной связи», т.е. отсылки информации от пользователя обратно на сервер. Набор органов управления HTML-бланков соответствует возможностям современных графических операционных систем и включает в себя поля для ввода текста (однострочные и многострочные), флажки, переключатели, выпадающие списки, списки с прокруткой и кнопки.
Тег FORM, объединяет группу связанных по смыслу элементов и указывает адрес той программы на сервере, которой будут посланы введенные пользователем данные из всех элементов формы. HTML-страница может содержать любое количество независимых друг от друга форм, в каждой из которых должна присутствовать «пусковая кнопка», отправляющая данные на сервер. Кнопке этой не обязательно быть стандартной интерфейсной кнопкой, в этой же роли может использоваться изображение, а для простых форм, состоящих из одного поля ввода или выпадающего списка, посылка данных может активизироваться нажатием Enter в поле ввода или операцией выбора элемента в списке.
Изображения и объект
Тег IMG
Тег IMG, предназначенный длявставки изображений, относится к тегам, создающим новые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG; этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в другом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атрибутов этого тега управляют форматированием изображения, устанавливая его размеры, поля, выравнивание и проч.
Таблицы
Тег TABLE
Тег TABLE чаще используется для визуального форматирования страницы, чем для представления табличного по своей природе материала.
Используются атрибуты height, width, cellspacing, cellpadding, border для форматирования внешнего вида таблицы. Задания для практического занятия: 1. Определите, с какого тега начинается HTML-код web-страницы, запишите его. Является ли он парным тегом?
2. Запишите все парные и непарные теги, имеющиеся в примере, что они означают.
3. Найдите и запишите все ссылки, имеющиеся в примере, подчеркните путь назначения ссылки.
4.Найдите и запишите 3 примера тегов с атрибутами.
5. Найдите все вставленные в web-страницуизображения.Запишите их код.
6. Имеются ли в коде примера формы? Если есть запишите его код.
7. Имеется ли в коде примера подстановки? Какие? Запишите их все. Что они обозначают?
8. Найдите и запишите коды всех имеющихся таблиц. Подчеркните атрибут border. Что он означает?
9. Имеются ли в коде каскадные таблицы стилей? Запишите их код. Вариант 1
Анкета – отраслевой 7swot-анализ Формирование набора ключевых выводов стратегической диагностики Республики Адыгея основывается на 7swot-анализе1 сильных и слабых...
1. Резюме проекта Анализ рынка. Оценка спроса и прогноз будущих продаж, сравнение нового продукта с уже существующими предложениями на рынке, соответствие...
Техническое задание на разработку веб-сайта Ресурс – разрабатываемая информационная система, представленная в виде web-сайта и онлайновой системы управления web-сайтом (cms),...
