сайт Валентины Захаркиной      
кафедра информационных систем
в искусстве и гуманитарных науках
факультета искусств СПбГУ
     
   

шаблон Joomla

шаблон Joomla

шаблон Joomla

шаблон Joomla

шаблон Joomla

шаблон Joomla

шаблон Joomla

 

Домашнее задание по CSS >  Подумайте, из каких блоков компонуется типичный сайт, и как эти блоки выглядят 

После долгого перерывам предлагаю вам вспомнить основные элементы HTML и сформулировать для себя основные приемы их применения для верстки типичных по структуре и функциональности документов.

  • Понятно, что в любом документе должны быть заголовки, абзацы, гиперссылки и т.д.  
  • Но не менее очевидно, что HTML используется и для компоновки страницы, то есть для описания взаимного расположения графических и текстовых элементов друг относительно друга (пусть это иной раз и противоречит концепции "разделения описания структуры и внешнего оформления").
  • Для компоновки могут быть использованы, например, таблицы или фреймы. Что лучше и почему?
  • Какие особые структурные элементы (отсутствующие в HTML) могут встретиться в вашем сайте? Может быть, эпиграфы, термины, примечания и т.д.  Очевидно, они должны быть по-особому оформлены. Как? С помощью CSS при правильном применении селекторов (мы об этом уже говорили).

Начните собирать коллекцию скриншотов удачных (или просто типичных), на ваш взгляд, сайтов. Ваше внимание может привлечь оформление, удобство использования, функциональные возможности. Кстати, в сети предлагаются тысячи платных и бесплатных "шаблонов" для  CMS . Можно, скажем, посмотреть, что предлагают для популярных CMS: Drupal, Joomla, Bitrix и т.д.  Для этого попробуйте задать в поисковой системе "Drupal template", "шаблон Joomla" и т.д.  Несколько миниатюр скриншотов шаблонов Joomla из моей коллекции вы видите слева. Это вовсе не "лучшие" шаблоны (не мне судить), а просто типичные и, очевидно, профессионально исполненные.

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

  • Подумайте о том, какие элементы HTML и с какими атрибутами можно использовать для верстки ваших любимых шаблонов.
  • Какие функциональные зоны вы бы выделили: декоративная "шапка", зона основной навигации, зона основного содержимого, ..., зона новостей, и т.д.
  • Можно ли достичь идеала: чтобы сайт отлично смотрелся в любом браузере и при любом разрешении экрана? Какие варианты компоновки можно предложить?
  • Каких выразительных возмжностей (очевидно, отсутствующих в HTML) вам не хватает для оформления?
  • Какие функциональные возмжности (тем более отсутствующие в HTML) нужны для разработки вашего сайта?

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

На очном занятии мы рассмотрим и прочие - очень важные - свойства CSS. А можете прочитать о них, не дожидаясь встречи. И сделать выводы.