Nadin Design  
EnglishFrenchGermanItalianDutchRussianPortugueseJapaneseKorean ArabicChinese Simplified Spain
Творческая мастерская профессора Трубочкиной Надежды Константиновны
 
Web-дизайн (WD)


   Задания по курсам "Web-дизайн" и "Web-технологии"

 

1. Выберите тему своего сайта (например, сайт фирмы "Software")

2. Разработайте структуру сайта (множество пар: станица-ссылка)

например:

Структура сайта

 

  • Главная - index.html
    Продукты - prod.html
    Обзоры - obz.html
    Загрузки - zagr.html
    Новости - news.html
    Контакты - contacts.html

 

Кнопки-ссылки Главная и Контакты обязательны для всех, названия остальных зависят от содержпния сайта.

3. В программе Photoshop создайте макет своего сайта (psd-файл), примерно такой, как показано на рисунке. Его каркас можно использовать для создания коллажа - визуализации своего собственного шаблона (здесь вам пригодятся 10 уроков Photoshop'a). Возможны авторские изменения.

Выможете выбрать аналог своего шаблона на сайте http://www.templatemonster.com в разделе Web-templates.

Шаблон должен включать:


  • Заголовок
  • Логотип
  • Подзаголовок (для страниц второго уровня и т.д.)
  • Главную навигацию (кнопки (ссылки) для страниц второго уровня)
  • Вспомогательную навигацию (не обязательно). Она нужна, когда структура у сайта большая
  • Фиксированные ячейками таблицы "места" для контента (текста, изображений, анимаций, видео и т.д.)
  • Копирайт ( Пример: © 1998-2014 ND). Структура копирайта: © Год создания - Текущий год Правовладелец
  •  

      Технология 1. Табличная (строчная, горизонтальная) верстка

     

    Написание кода из последовательности одностроковых таблиц с различным количеством столбцов, с ячейками конкретных размеров.
    Размеры определяются по шаблону Photoshop'a (смотрите на линейки и считайте).

     

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

    например, так:

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

    4. Используя любой текстовый или текстово-графический редактор либо напишите код страницы (html-шаблон), в качестве основных блоков для позиционирования контента (информации) используя таблицы. Размеры частей смотрите в Photoshop'e.

    Проще всего использовать программу Dreamweaver, ее дизайнерскую часть, панель тегов и палитру "Свойства", в основном, чтобы при верстке задавать размеры ячеек таблицы.

    Не забывайте, нажимая F12, просматривать страницу в браузере.

    Навигация (меню)

    5. Обязательно в html-шаблоне сделайте главную работоспособную навигацию - множество Кнопка-Ссылка.

     

    6. Когда будет создан html-шаблон - html-страница, включающая: заголовок, логотип, подзаголовок, главную навигацию (кнопки-ссылки для страниц второго уровня), вспомогательную навигацию (не обязательно), "места" для контента, копирайт, можно будет быстро создать работающий (навигация по ссылкам) сайт.

    Для этого в странице шаблона (index.html) необходимо:

    a. Изменить подзаголовок в странице шаблона в соответствии со структурой (например: Продукты).
    b. Сохранить измененную страницу под именем ссылки (в соответствии со структурой сайта это prod.html).

    c. Повторить а-б столько раз, сколько страниц в сайте -1.

    d. Заполнить контентом страницы (текст, графика, анимации, видео, звук).

    Чтобы сайт стал "красивым", как профессиональные СМИ, используйте CSS.

    CSS

    При вставке текстовой информации в ячейки таблиц, текст выглядит неряшливо:

    "рваный" правый край (по умолчанию align=left)

    "прилипание" к другим объектам (отступы нулевые)

    Эту проблему можно решить следующим образом: создать классы с конкретными параметрами и "приписать" эти классы объектам.

     

    Далее подробней о стилях CSS

     

     

 



 

 

© 1998-2015 ND  
Сделать стартовой Напечатать страницу Назад  
Добавить в избранное Закрыть окно Вперед
Яндекс цитирования Rambler's Top100