Основы сайтостроения Часть 1 1

Основы сайтостроения. Часть 1

1. Что такое сайт и как он устроен u Сайт – это набор из нескольких десятков, сотен или даже тысяч веб-страниц, связанных вместе единой темой, общим оформлением, взаимными гипертекстовыми ссылками и, как правило, близким по интернетовским меркам размещением (обычно в пределах одного доменного имени).

Другие термины: u «страница WWW» u «узел WWW» u «WWW-сервер»

Веб-страница это логическая единица Интернета, однозначно определяемая адресом (URL Uniform Resource Locator). u Веб-страница может состоять из нескольких частей (фреймов), может быть статической или динамически сгенерированной. Веб -страница может включать текст, гиперссылки, графические изображения, анимацию, звук, видеоизображение и скрипты. u

Структура связей страниц u Древовидная u Линейная

2. Классификация сайтов u 1. - Объем сайта Одностраничные Порталы

2. Классификация сайтов u 2. Характер информационного содержания

- развлекательные(юмор, галереи изображений, коллекции музыки и т. д. ).

-Информационные (поисковые системы или машины, каталоги, новостные ресурсы, периодические электронные издания).

-Образовательные

Коммерческие – все ресурсы, связанные с представлением в Интернете товаров и услуг.

Коммуникативные – форумы, чаты, гостевые книги, блоги.

2. Классификация сайтов u 3. Способ доступа -Открытые -Закрытые u 4. Широта аудитории (страничка группы/ google)

u 5. Частота обновления u 6. Технология выполнения структурных элементов

3. Дизайн сайта Общие требования к графическому дизайну вебсайта: § привлекательность § уникальность § запоминаемость.

3. 1. Цвет принцип единства и контраста u

3. 2. Шрифт u u u Times New Roman – классический шрифт с засечками. В типографическом наборе им принято давать большие объемы текста; используется в небольших кеглях (размерах); Arial – шрифт без засечек (гуманистическая гарнитура). В типографии им обычно даются заголовки; используется в больших кеглях; Verdana – современный шрифт, разработанный специально для отображения на мониторе компьютера (иногда вместо него используют очень похожий по начертанию шрифт Tahoma).

3. 2. Шрифт u Times используют на более консервативных сайтах, например, в интернет-версиях газет, Также Times хорошо воспринимается в кегле 9 pt и более, в мелком кегле засечки затрудняют восприятие. Поэтому для обычного текста при необходимости использования мелкого кегля он зачастую не применяется даже в классическом дизайне.

3. 2. Шрифт u Arial можно назвать нейтральным шрифтом. Он также получил широкое распространение на вебстраницах. Что же касается размера, Arial несколько проигрывает в мелком кегле, но при использовании в заголовках (12 -14 pt) зачастую смотрится лучше.

3. 2. Шрифт u Verdana, как было отмечено выше, – самый новый из рассмотренного семейства. Более гармонично смотрится с модерновым, "высокотехнологичным" дизайном. Большим преимуществом его использования является то, что этот шрифт уже при разработке предназначался для использования именно на веб-страницах и поэтому шрифт хорошо смотрится на экране даже в мелком кегле – при значении 7 pt текст еще не теряет читаемость.

3. 2. Шрифт u Правило шрифтов выбрать шрифт или сочетание максимум двух шрифтов

3. 2. Шрифт Tahoma и Verdana u Tahoma в силу несколько меньшей ширины символов и меньшего кернинга (разрядки) смотрится компактнее, что часто применяется в дизайне. Например, для обычного текста берется шрифт Verdana, а для заголовков – Tahoma.

3. 2. Шрифт u Жирный -больше подходит для заголовков -имеет иллюстративный и рекламный характер u Курсив -для выделения слов без изменения оптической равномерности полосы

3. 2. Шрифт u Гиперссылки принято обозначать подчеркиванием или выделять их по отношению к остальному тексту цветом. Выделять ссылки цветом желательно даже в тех случаях, когда используется подчеркивание. Зрительно пользователи быстрее определяют ссылки,

3. 3. Верстка текстовой информации u Колонки используются для организации текста и иллюстраций на странице и представляют собой важные элементы ее модульной структуры.

3. 3. Верстка текстовой информации u Ширина колонки определяет размер шрифта: узкие колонки смотрятся лучше, если набраны более мелким шрифтом. Слишком близко расположенные колонки делают документ "темным" и затрудняют восприятие текста, поскольку взгляд пользователя невольно переходит на соседние текстовые блоки.

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

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

3. 3. Верстка текстовой информации Иерархические таблицы стилей (CSS). Система CSS предоставляет в распоряжение дизайнеров набор обобщенных свойств (параметро в оформления), таких как имя шрифта, цвет элемента и фона под ним, ширина любого из четырех окружающих элемент полей. u

3. 3. Верстка текстовой информации

3. 4. Рисунки и фотографии u Оптимизация графики – это поиск компромисса между ее качеством и объемом файла, который сводится к выбору, во -первых, одного из двух форматов: GIF или JPEG, вовторых, параметров сжатия в выбранном формате.

3. 5. Представление на странице мультимедиаобъектов u рекомендуется ориентироваться на программное обеспечение для воспроизведения мультимедиа, разработанное, по меньшей мере, год назад. u лучше всего обеспечить возможность предварительного просмотра мультимедийной информации

3. 5. Представление на странице мультимедиаобъектов u рекомендуется указывать формат и объем файла u следует указывать продолжительность воспроизведения мультимедийного фрагмента u полезно приводить краткие аннотации, описывающие их содержание

3. 5. Представление на странице мультимедиаобъектов u http: //abiturient. tpu. ru/html/professi on. htm u http: //www. tsu. ru/Web. Design/tsu/c ore. nsf/structurl/news_video_abitur

3. 6. Адаптация дизайна страницы под различные разрешения монитора u никогда не использовать фиксированных размеров таблиц, фреймов или других элементов дизайна (исключение могут составлять, вероятно, тонкие линии внизу страницы)

Задание: u Проанализируйте произвольно выбранный веб-сайт по следующий критериям: – – привлекательность, уникальность и запоминаемость дизайна; корректность применения цветов, шрифтов; информационная организация текстового материала (верстка); адаптированность дизайна под различные разрешения экрана.