50378 (Проектирование web-сайта "Бойцовые собаки – кто они?"), страница 5

2016-07-30СтудИзба

Описание файла

Документ из архива "Проектирование web-сайта "Бойцовые собаки – кто они?"", который расположен в категории "". Всё это находится в предмете "информатика" из 1 семестр, которые можно найти в файловом архиве . Не смотря на прямую связь этого архива с , его также можно найти и в других разделах. Архив можно найти в разделе "курсовые/домашние работы", в предмете "информатика, программирование" в общих файлах.

Онлайн просмотр документа "50378"

Текст 5 страницы из документа "50378"

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

В некоторых случаях сразу определить, сколько колонок содержит макет и впрямь затруднительно. В таком случае следует понимать, что колонки могут объединяться, а также содержать не только сплошной текст, но и графические вставки.

Наиболее распространенными модульными сетками являются:

  1. Одноколонная сетка

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

  1. Двухколонная сетка.

Это один из самых распространенных вариантов при использовании на сайтах. При такой модульной сетке используется две колонки — одна отводится под основной текст, а вторая используется для навигации и другой полезной информации. Принципиального значения не имеет, слева или справа располагается колонка с навигацией, встречается и тот и другой вариант.

В каком-то смысле двухколонная сетка стала стандартом де-факто для информационных сайтов из-за своего удобства. Действительно, все «под рукой» — и текст и ссылки, к тому же данная сетка не исключает подключения горизонтальной навигации, как это принято в одноколонной сетке.

Двухколонные сетки удобны при создании самых разнообразных сайтов и не требуют особых знаний по верстке веб-страниц. Единственный недостаток, который им вменяют, что подобные сайты выглядят достаточно однообразно. Но с другой стороны пользователям удобнее работать с сайтом привычного вида, без лишних «наворотов»

  1. Трехколонная сетка

Такие сетки часто применяются на главных страницах сайтов, где одновременно требуется показать пользователю множество возможностей, которые он обнаружит на данном сайте. Также трехколонная сетка используется и на внутренних страницах, если для размещения различной информации двух колонок уже не хватает. Одна из колонок отдается под навигацию, вторая, самая широкая — под основной текст, а в третью колонку добавляют рекламу, ссылки, текст и т.д.

Трехколонная сетка обеспечивает больше простора для дизайна, ведь в некоторых местах можно объединять колонки, разбивать материал на отдельные фрагменты и визуально отделять один блок от другого. Макет при этом может получиться достаточно сложным, но результат обычно того стоит. Возвращаясь к главной странице сайта deviantart.com, приведем более детальную модульную сетку. Отдельные блоки выделены разным цветом. К недостаткам трехколонной сетки относится достаточная сложность верстки макета. Чтобы получить нужный результат приходится иной раз затратить много времени на создание стилевого файла и отладку документа в разных браузерах.

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

Для своего сайта я выбрала двухколонную сетку, так как она наиболее приемлема для информационных сайтов. Навигацию я планирую расположить справа, так как давно известно, что человек читает справа на лево, таким образом, посетитель сначала увидит предлагаемые ссылки и ему будет удобнее во время работы на сайте. Данная сетка содержит пространство для каждого элемента моего сайта: для изображений, который будут располагаться по центру, в некоторых случаях, справа снизу; для текста, который будет располагаться чуть ниже центра; для ссылок на остальные страницы и для элементов навигации. Цветами я разграничила колонки сайта – светлым розовым я обозначила навигационный блок, сиреневым – основную часть. Сетка является гибкой, при необходимости можно добавить в каждую часть страницы новый элемент.

5.2 Разработка руководства по стилю

Идет время и меняется дизайн web-страниц, он становится смелее, ярче, интереснее.

  1. Стилизованная и негабаритная графика

Одна из тенденций - негабаритные, стилизованные логотипы или шапки, задачей которых является произвести неизгладимое впечатление на посетителя. Часто подобного вида графика используется в очень больших расширениях, иногда и на всю страницу, под которой скрывается контент, стоит только прокрутить страницу вниз. Эффект усиливает его удивление от увиденного после десятка “малографичных”, уже просмотренных сайтов. Идея: стилизованная, негабаритная графика заставляет гостя надолго запомнить посещенный ресурс.

  1. Эскизный / рисованный дизайн

Рисованный стиль не совсем новая тенденция в веб-дизайне, но мы все чаще замечаем ее проявление. Многие дизайнеры даже нишуются под рисованный стиль, восхищаясь им. Далеко не каждый дизайнер в совершенстве владеет карандашним рисованием. Конечно, не каждая работа заслуживает место в художественном музее, но подобный дизайн передают смысл фантазий и стирают грань между пользователем и ресурсом, тем самым делая его еще более уютным и особенным. Идея: скетч (рисованный стиль) с успехом внедряется в веб-дизайн и в дальнейшем станет его обычной частью.

  1. Заглавная и неоднотонная типографика

Заглавные шрифты являются относительно новыми в веб-дизайне, но они уже более 200 лет используются в средствах массовой информации. Раньше, склоняясь к правилам юзабилити, дизайнеры боялись использовать разновидность шрифтов, размер и все его заглавные буквы. Соответственно, здесь нет места хаосу, должен соблюдатся порядок и правила типографики, но согласитесь, сайт гораздо интересней и внушительней выглядит с правильно подобранными 2-3 заглавными шрифтами. Идея: данная тенденция используется для того, чтобы смело выражать контент и эффективно доносить до пользователя необходимые мысли.

  1. Типографика

Типографика является самой трудной тенденцией в плане реализации. Опять же, прибегая к юзабилити, веб-дизайнеры боятся переступить предел нормы и не используют новые и разные шрифты, хотя в правильном решении они дают потрясающий результат. Идея: типографика молода, но с каждым годом она укрепляется и усиливает свою роль в веб-дизайне.

  1. Одностраничный дизайн

Эта тенденция ставит задачу правильно преподнести необходимый контент. Чаще всего это личные сайты-визитки или реклама услуг или товаров. В 2010 году тенденция будет отходить от причудливой навигации и станет более минимальной в своем подходе. Обычно на одной такой странице, если рассматривать сайт-визитку, можно найти абсолютно все об интересующейся личности, при этом не используя трехступенчатую навигацию, удобно. Идея: дизайн сайта-визитки станет более личностный и упрощенный.

  1. Большие изображения

Рассматриваемая тенденция является близким родственником негабаритной графики. Большое изображение создает тот - же эффект – визуальное воздействие, которое посетители не скоро забудут. В отличии крупногабаритных заголовков сверху, огромные изображения не являются частью брендинга сайта. Вместо этого, эти изображения привлекают внимание если не на их содержание, так на их размер точно. Веб-дизайнеры найдут более удобный способ использования больших изображений в своих работах, чтобы передать нужный тон сайта и сделать его лучше. Идея: огромные изображения неизбежны в некоторых случаях и на мой взгляд, трудно будет отказаться от них в будущем.

  1. Фокусы с перспективой

Перспектива в веб-дизайне вымерла, но она обязательно возродится.. Можно продвинуть идею перспективы на новый уровень и дать возможность пользователю насладится сайтом с разных точек обзора. Идея: в силу вступят также перспективные штуки, которые превратят сайт в красивое и необычное место.

  1. Интерактивный / интуитивный дизайн

Были времена, когда флеш технологии сильно раздражали своей недоступностью, когда сайт не запускался в том же раздражающим флеш интерфейсе. На сегодняшний день обстоятельство изменились, флеш сейчас гораздо свободней и гораздо функциональней. Хоть некоторые дизайнеры предпочитают jquery формы и всплывающие окна, flash по-прежнему остается в веб-дизайне, особенно когда используется тонко и профессионально. Флеш также не имеет себе равных в интерактивности.

  1. Модальные окна

Тенденция модальных окон набирает обороты.. Модальные окна красиво и “чисто” выглядят, легко сливаются с дизайном и просты в использовании, что делает из идеальным решением для любого дизайнера, который делает основной акцент на юзабилити. Идея: модальные окна будут продолжать использоватся и не утеряют своей актуальности.

  1. Минимализм

Можно забыть обычное представление о минималистических сайтах. В этом году они хоть и сохранят свое обилие свободного пространства, но будут не так как обычно содержать большое количество шрифтов и необычные цветовые решения. Не все минималистичные веб-сайты смирятся с чёрно-белой простотой. Хотя минимализм, по сути своей, предполагает приглушённость цвета, в обиход войдут и свежие тона. От минимализма не веет холодом, он согревает, причём именно так, как надо. Идея: минимализм разделится на несколько типов и мы начнем наблюдать не обычный минимал в веб-дизайне.

Для своего сайта я не планирую создавать новомодные стили, как мне кажется, более подойдет обычный «консервативный»: без излишеств, яркой графики и больших изображений.

Таблица2 - Графические стили текста:

Для чего

Стиль

Цвет

Размер

Код

Заголовки и подзаголовки

Antikvar Shadow

красный

7

Основной текст

Arial

бежевый

4

Врезки

Antikvar Shadow

красный

3

6. Оптимизация контента сайта

Существует несколько источников получения контента: копирование материалов с аналогичных по тематике ресурсов; перевод тематических материалов с других языков; разработка схем, таблиц, графиков, иллюстраций; размещение в сети Интернет сканированных книг, статей, аналитических выкладок (охраняется законом об авторском праве);подготовка авторских материалов; пересказ уже размещенных в сети Интернет материалов.

Уникальным считается только тот Контент, который не имеет копий в Интернете. Для проверки уникальности существуют специализированные сервисы. Контент, который не является уникальным, не представляет практической ценности для посетителя и ранжируется поисковой системой на последних местах выдачи.

При размещении копированных и переводных материалов необходимо проставлять ссылки на источник информации, что приводит к возникновению ряда неблагоприятных факторов:

      • контент не ранжируется высоко поисковой системой;

      • уменьшается удельный вес страницы за счет большого количества исходящих ссылок;

      • доверие посетителя падает, сайт в его глазах перестает быть источником уникальной информации.

Размещение сканированных материалов допускается только при наличии письменного, нотариально удостоверенного разрешения на публикацию в сети от автора. В противном случае может быть спровоцировано судебное разбирательство, в ходе которого автор может потребовать не малую сумму компенсации материального вреда.

Этапы подготовки контента

Вся работа по подготовке контента может быть условно подразделена на этапы:

  • определение целей и задач;

  • подготовка семантического ядра;

  • сбор информации и анализ конкурентов;

  • написание статей и их форматирование для улучшения восприятия;

  • разработка таблиц, иллюстраций;

  • перелинковка материалов между собой с целью улучшения навигации по сайту.

Каждый этап имеет свои сложности и правила. Наиболее эффективно проводить работу по подготовке контента с участием маркетолога, сео-оптимизатора, дизайнера. Только командная подготовка контента может дать положительные результаты.

Определение целей и задач, которые должен выполнять контент — это основа его разработки. С учетом реальных потребностей пишется сама статья. Использование различных маркетинговых схем и приемов обеспечивает рост продаж, увеличение конвертации посетителей в реальных потребителей товаров и услуг.

Правильно подобранное семантическое ядро — это набор ключевых фраз, по которым материал в поисковой системе будет находить потенциальный посетитель. Для этого используются специальные сервисы Яндекса, Гугла и Рамблера, которые показывают статистику частоты запросов определенного словосочетания. При подборе ключевых слов необходимо проводить анализ их конкурентности.

На этапе сбора информации следует анализировать огромное количество параметров в зависимости от поставленных перед автором текста задач. Если необходимо подготовить контент, который мотивирует посетителя на совершение определенных действий, нужно вычленить психологические мотивы и использовать их при написании статьи.

7. Верстка

7.1 Разработка логической и физической структуры сайта

На предыдущих этапах Web-сайт уже разделен был на несколько тематических рубрик и распланированы гиперссылки между его частями. Теперь пора задуматься о физической структуре.

Физическая структура подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.

Свежие статьи
Популярно сейчас
Как Вы думаете, сколько людей до Вас делали точно такое же задание? 99% студентов выполняют точно такие же задания, как и их предшественники год назад. Найдите нужный учебный материал на СтудИзбе!
Ответы на популярные вопросы
Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
Отзывы студентов
Ставлю 10/10
Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
Лучшая платформа для успешной сдачи сессии
Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
Студизба ван лав ❤
Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
Отличный сайт
Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
Маленький отзыв о большом помощнике!
Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
Студ. Изба как крупнейший сборник работ для студентов
Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
Спасательный островок
Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
Всё и так отлично
Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
Отзыв о системе "Студизба"
Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
Отличный помощник
Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
Спасибо за шикарный сайт
Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
Популярные преподаватели
Нашёл ошибку?
Или хочешь предложить что-то улучшить на этой странице? Напиши об этом и получи бонус!
Бонус рассчитывается индивидуально в каждом случае и может быть в виде баллов или бесплатной услуги от студизбы.
Предложить исправление
Добавляйте материалы
и зарабатывайте!
Продажи идут автоматически
5076
Авторов
на СтудИзбе
455
Средний доход
с одного платного файла
Обучение Подробнее