Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Основы сайтостроения. Часть 1
Содержание
- 1. Основы сайтостроения. Часть 1
- 2. 1. Что такое сайт и
- 3. Другие термины:«страница WWW»«узел WWW» «WWW-сервер»
- 4. Веб-страница это логическая единица Интернета, однозначно определяемая адресом
- 5. Слайд 5
- 6. Структура связей страницДревовиднаяЛинейная
- 7. 2. Классификация сайтов 1. Объем сайта ОдностраничныеПорталы
- 8. 2. Классификация сайтов 2. Характер информационного содержания
- 9. - развлекательные(юмор, галереи изображений, коллекции музыки и т.д.).
- 10. -Информационные (поисковые системы или машины, каталоги, новостные ресурсы, периодические электронные издания).
- 11. -Образовательные
- 12. Коммерческие – все ресурсы, связанные с представлением в Интернете товаров и услуг.
- 13. Коммуникативные – форумы, чаты, гостевые книги, блоги.
- 14. 2. Классификация сайтов 3. Способ доступа -Открытые-Закрытые 4. Широта аудитории (страничка группы/ google)
- 15. 5. Частота обновления 6. Технология выполнения структурных элементов
- 16. 3. Дизайн сайта Общие требования к графическому дизайну веб-сайта:привлекательность уникальностьзапоминаемость.
- 17. Слайд 17
- 18. 3.1. Цвет принцип единства и контраста
- 19. Слайд 19
- 20. 3.2. Шрифт Times New Roman – классический шрифт
- 21. 3.2. ШрифтTimes используют на более консервативных сайтах, например,
- 22. 3.2. ШрифтArial можно назвать нейтральным шрифтом. Он также
- 23. 3.2. ШрифтVerdana, как было отмечено выше, –
- 24. 3.2. ШрифтПравило шрифтоввыбрать шрифт или сочетаниемаксимум двух шрифтов
- 25. 3.2. Шрифт Tahoma и VerdanaTahoma в силу несколько
- 26. 3.2. Шрифт Жирный-больше подходит для заголовков-имеет иллюстративный
- 27. 3.2. Шрифт Гиперссылки принято обозначать подчеркиванием или
- 28. 3.3. Верстка текстовой информации Колонки используются для организации
- 29. 3.3. Верстка текстовой информацииШирина колонки определяет размер
- 30. 3.3. Верстка текстовой информацииЗаголовки Действенной может
- 31. 3.3. Верстка текстовой информации Подзаголовки Подзаголовки,
- 32. 3.3. Верстка текстовой информацииИерархические таблицы стилей (CSS).
- 33. 3.3. Верстка текстовой информации
- 34. 3.4. Рисунки и фотографии Оптимизация графики – это
- 35. 3.5. Представление на странице мультимедиаобъектов рекомендуется ориентироваться
- 36. 3.5. Представление на странице мультимедиаобъектов рекомендуется указывать
- 37. 3.5. Представление на странице мультимедиаобъектов http://abiturient.tpu.ru/html/profession.htm http://www.tsu.ru/WebDesign/tsu/core.nsf/structurl/news_video_abitur
- 38. Слайд 38
- 39. Слайд 39
- 40. Слайд 40
- 41. 3.6. Адаптация дизайна страницы под различные разрешения
- 42. Задание:Проанализируйте произвольно выбранный веб-сайт по следующий критериям:привлекательность,
- 43. Скачать презентанцию
1. Что такое сайт и как он устроен Сайт – это набор из нескольких десятков, сотен или даже тысяч веб-страниц, связанных вместе единой темой, общим оформлением, взаимными гипертекстовыми ссылками и,
Слайды и текст этой презентации
Слайд 2 1. Что такое сайт и как он устроен
Сайт – это набор из нескольких десятков, сотен или даже тысяч
веб-страниц, связанных вместе единой темой, общим оформлением, взаимными гипертекстовыми ссылками и, как правило, близким по интернетовским меркам размещением (обычно в пределах одного доменного имени). 
Слайд 4Веб-страница
это логическая единица Интернета, однозначно определяемая адресом (URL Uniform Resource Locator)
.
Веб-страница может состоять из нескольких частей (фреймов), может быть
статической или динамически сгенерированной. Веб-страница может включать текст, гиперссылки, графические изображения, анимацию, звук, видеоизображение и скрипты. 
Слайд 10-Информационные (поисковые системы или машины, каталоги, новостные ресурсы, периодические электронные издания).
Слайд 142. Классификация сайтов
3. Способ доступа
-Открытые
-Закрытые
4. Широта аудитории
(страничка
группы/ google)
Слайд 163. Дизайн сайта
Общие требования к графическому дизайну веб-сайта:
привлекательность
уникальность
запоминаемость.
Слайд 203.2. Шрифт
Times New Roman – классический шрифт с засечками. В типографическом
наборе им принято давать большие объемы текста; используется в небольших
кеглях (размерах);Arial – шрифт без засечек (гуманистическая гарнитура). В типографии им обычно даются заголовки; используется в больших кеглях;
Verdana – современный шрифт, разработанный специально для отображения на мониторе компьютера (иногда вместо него используют очень похожий по начертанию шрифт Tahoma).
Слайд 213.2. Шрифт
Times используют на более консервативных сайтах, например, в интернет-версиях газет,
Также Times хорошо воспринимается в кегле 9 pt и более,
в мелком кегле засечки затрудняют восприятие. Поэтому для обычного текста при необходимости использования мелкого кегля он зачастую не применяется даже в классическом дизайне.
Слайд 223.2. Шрифт
Arial можно назвать нейтральным шрифтом. Он также получил широкое распространение
на веб-страницах. Что же касается размера, Arial несколько проигрывает в мелком кегле,
но при использовании в заголовках (12-14 pt) зачастую смотрится лучше.
Слайд 233.2. Шрифт
Verdana, как было отмечено выше, – самый новый из
рассмотренного семейства. Более гармонично смотрится с модерновым, "высокотехнологичным" дизайном. Большим
преимуществом его использования является то, что этот шрифт уже при разработке предназначался для использования именно на веб-страницах и поэтому шрифт хорошо смотрится на экране даже в мелком кегле – при значении 7 pt текст еще не теряет читаемость.
Слайд 253.2. Шрифт
Tahoma и Verdana
Tahoma в силу несколько меньшей ширины символов и
меньшего кернинга (разрядки) смотрится компактнее, что часто применяется в дизайне.
Например, для обычного текста берется шрифт Verdana, а для заголовков – Tahoma.
Слайд 263.2. Шрифт
Жирный
-больше подходит для заголовков
-имеет иллюстративный и рекламный характер
Курсив
-для
выделения слов без изменения оптической равномерности полосы
Слайд 273.2. Шрифт
Гиперссылки принято обозначать подчеркиванием или выделять их по отношению
к остальному тексту цветом. Выделять ссылки цветом желательно даже в
тех случаях, когда используется подчеркивание. Зрительно пользователи быстрее определяют ссылки, выделенные синим цветом.
Слайд 283.3. Верстка текстовой информации
Колонки используются для организации текста и иллюстраций на
странице и представляют собой важные элементы ее модульной структуры.
Слайд 293.3. Верстка текстовой информации
Ширина колонки определяет размер шрифта: узкие колонки
смотрятся лучше, если набраны более мелким шрифтом. Слишком близко расположенные
колонки делают документ "темным" и затрудняют восприятие текста, поскольку взгляд пользователя невольно переходит на соседние текстовые блоки.
Слайд 303.3. Верстка текстовой информации
Заголовки
Действенной может быть лишь такая
верстка, где заголовки четко отделены от основного текста. Следует набирать
их не только более крупным кеглем, но использовать гарнитуру, отличную от основного текста. Длинный заголовок должен занимать не более трех строк.
Слайд 313.3. Верстка текстовой информации
Подзаголовки
Подзаголовки, размещаемые непосредственно
между заголовком и основным текстом ,улучшают внешний вид страницы за
счет создания плавного перехода от одной темы к другой. Подзаголовок должен быть тесно связан с текстом, к которому он относится. Для этого отбивка от текста сверху должна быть больше, чем снизу.
Слайд 323.3. Верстка текстовой информации
Иерархические таблицы стилей (CSS).
Система
CSS предоставляет в распоряжение дизайнеров набор обобщенных свойств (параметров оформления), таких как
имя шрифта, цвет элемента и фона под ним, ширина любого из четырех окружающих элемент полей.
Слайд 343.4. Рисунки и фотографии
Оптимизация графики – это поиск компромисса между ее
качеством и объемом файла, который сводится к выбору, во-первых, одного
из двух форматов: GIF или JPEG, во-вторых, параметров сжатия в выбранном формате.
Слайд 353.5. Представление на странице мультимедиаобъектов
рекомендуется ориентироваться на программное обеспечение для
воспроизведения мультимедиа, разработанное, по меньшей мере, год назад.
лучше всего
обеспечить возможность предварительного просмотра мультимедийной информации 
Слайд 363.5. Представление на странице мультимедиаобъектов
рекомендуется указывать формат и объем файла
следует указывать продолжительность воспроизведения мультимедийного фрагмента
полезно приводить краткие аннотации, описывающие
их содержание 
Слайд 373.5. Представление на странице мультимедиаобъектов
http://abiturient.tpu.ru/html/profession.htm
http://www.tsu.ru/WebDesign/tsu/core.nsf/structurl/news_video_abitur
Слайд 413.6. Адаптация дизайна страницы под различные разрешения монитора
никогда не использовать
фиксированных размеров таблиц, фреймов или других элементов дизайна (исключение могут составлять,
вероятно, тонкие линии внизу страницы)
Слайд 42Задание:
Проанализируйте произвольно выбранный веб-сайт по следующий критериям:
привлекательность, уникальность и запоминаемость
дизайна;
корректность применения цветов, шрифтов;
информационная организация текстового материала (верстка);
адаптированность дизайна под
различные разрешения экрана.
