ВНИМАНИЕ! Опубликовано расписание занятий на 2017-2018 уч. год Подробнее
Toggle Bar

БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

MS SharePoint 2007. Портфолио

Основные правила, которых следует придерживаться при создании портфолио:

1. Сайт не должен быть перегружен большим количеством элементов, особенно графикой.
2. В портфолио главным и основным должны быть ваши работы, домашнее задание, курсовые.
3. Вы должны показать те работы, которые более сложные или более удачные.
4. Все страницы портфолио должны быть оформлены одинаково.

Разработка макета сайта

I вариант. Создание макета для страницы с вертикальным меню.

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

Примеры страниц с вертикальным меню

II вариант. Создание макета для страницы с горизонтальным меню.

Создадим еще одну таблицу, теперь с горизонтальным меню:

Первая ячейка для банера.
Вторая - для меню.
Третья - для размещения основной информации.
Четвертая - для дополнительной информации.

Примеры горизонтального меню


Дизайн сайта

Однозначного ответа на вопрос, что первоначально создается - дизайн или структура сайта, - не существует.

Графические элементы

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

Разработка меню

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

В любом случае структура должна быть одинаковой: любой набор элементов меню необходимо заключить в отдельный блок.

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

Для того, чтобы вставить меню необходимо выполнить следующее:

Для вертикального меню, т.е. для вставки меню в I вариант таблицы.

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

Вложенная таблица должна обладать такими свойствами:

количество столбцов-1
количество строк - по количеству кнопок, в нашем случае 3
ширина-100%
выравнивание в ячейках- по середине, по центру.

Таблица примет вид:

Теперь можно размещать текст или кнопки.
После создания меню его необходимо протестировать в браузере (просмотреть все ли отображается).

Для горизонтального меню, т.е. для вставки меню во II вариант таблицы.

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

Вложенная таблица должна обладать такими свойствами:

количество столбцов-по количеству кнопок, в нашем случае 3
количество строк - 1
ширина-100%
выравнивание в ячейках- по середине, по центру.

Таблица примет вид:

Теперь можно размещать текст или кнопки.
После создания меню его необходимо протестировать в браузере (просмотреть все ли отображается).

Создание дополнительных страниц

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

ГЛАВНАЯ СТРАНИЦА, которая должна иметь имя index.htm. На ней располагается информация об авторе портфолио.

На второй странице - перечень изученных программ и ссылки на работы.

На третьей - ваши достижения вне "ТУРБО" или ваши фотографии.

Для того чтобы не создавать заново весь дизайн, можно поступить так: скопировать файл index.htm и задать ему другое имя, наприме list_1.htm, work_1.htm, pab.htm.

Примеры оформления портфолио

Пример I. Вертикальное меню с текстовым оформлением.
Пример II. Вертикальное меню с графическим оформлением.
Пример III. Горизонтальное меню с текстовым оформлением.
Пример IV. Горизонтальное меню с графическим оформлением.
Добавить комментарий
  • Гость - гость

    как привязывать страницы к кнопкам меню?

  • Гость - vfhz

    Спасибо, полезный урок.

 
Our website is protected by DMC Firewall!