ВНИМАНИЕ! Новое расписание 1 курса! Подробнее
Toggle Bar

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

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

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

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

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

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

I. Подготовительная работа: сбор и упорядочивание работ.

1) Создайте в своей папке дерево папок, приведенное ниже. Все папки внутри папки portfolio должны быть записаны маленькими латинскими буквами без пробелов.

Дерево папок

2) В созданные папки скопируйте работы, созданные в соответствующих программах. Например, в папку word — все работы, созданные в Word’e в формате *.doc, в папку writer— все работы, созданные в Writer’e в формате *.odt.

3) Все работы и папки должны быть переименованы с использованием маленьких латинских букв без пробелов, причем, если используются цифры, то первой должна быть буква. Например, файл Турбаза нужно переименовать в turbaza, 13 ноября в november13, папку Итог в itog и т.д.

4) Работы, созданные в программе Photoshop, нужно пересохранить в *.jpg формате с помощью команды Файл/Сохранить для Web. И так же не забывать задавать имена файлов маленькими латинскими буквами без пробелов. Вместо Photoshop можно воспользоваться программой Gimp, которая также поддерживает формат *.psd и *.jpg. Для пересохранения в Gimp нужно выбрать команду Файл/Экспортировать.

5) Работы, созданные в программе CorelDRAW, также пересохраняются в *.jpg формате. Для этого:

а) Загрузите CorelDRAW;

б)Откройте созданное вами изображение (например, «Снеговик») и выделите только ваше изображение без образца;

в) Выберите команду File/Export;

г)Имя запишите маленькими латинскими буквами без пробелов. Папку выберите coreldraw;

д) В строке Save as type выберите JPG-JPEG bitmaps;

е) оставьте флажок Selected Only для того, чтобы сохранялись только выделенные объекты, а не все изображение;

ж) Нажмите кнопку Export;

з) В строке Resolutions установите разрешение 72 dpi;

и) Единицы измерения поставьте pixels (пиксели), а размер измените так, чтобы он не превышал размеры окна, т.е. не более 1024х768, иначе изображение будет слишком большим. Нажмите ОК.

6) Работы, созданные в программе Flash должны быть экспортированы в формат swf для этого:

а) Выполнить команду File → Export → Export Movie.

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

7) Работы, созданные в программе Inskape, пересохраняются в PNG формате. Для этого:

а) Загрузите Inskape;

б) Откройте созданное вами изображение;

в) Выберите команду Файл →Экспортировать в растр;

г) Указываем разрешение растрового изображения 72 dpi. Ширину и высоту программа укажет сама после щелчка мышью по соответствующему полю;

д) В поле имя Имя файла с помощью кнопки Выбрать указываем папку inskape и даем имя файлу маленькими латинскими буквами без пробелов, а потом нажимаем кнопку Экспорт.

II. Оформление портфолио в виде web-сайта

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

Главная страница, имеющая название index.html, должна содержать краткую информацию об авторе портфолио и ссылки на другие страницы, посвященные одной компьютерной программе или теме. Эти страницы должны иметь название совпадающее с именем программы, которой посвящены, например, word.html, coreldraw.html и т.д. На каждой странице должны располагаться ссылки к файлам конкретных работ.

Создавать web-сайты можно с помощью разных Web-редакторов (например: Dreamweaver, FrontPage, Kompozer). Рассмотрим пример создания портфолио с помощью программы FrontPage.

Способ 1. Создание с нуля

Шаг 1: Проделайте подготовительную работу (сбор и упорядочивание работ), описанную в п. I данной статьи.
Должна получиться примерно такая структура:

Структура портфоило

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

Шаг 2: Создайте в папке portfolio папку с именем images. Она нам понадобиться для рисунков и фонов, которые мы будем использовать при оформлении портфолио.

Шаг 3: Запустите программу Microsoft FrontPage (Пуск →Программы → Microsoft Office →Microsoft Office Front Page).

Шаг 4: Создадим новый Web-узел и определим его в папку portfolio.
Для этого выполните команду Файл → Создать. На вкладке, расположенной справа выберите Одностраничный Web-узел и укажите папку portfolio (нажмите на кнопку Обзор) в качестве расположения.

Создание веб-узла

Шаг 5: При создании Web-узла программа FrontPage уже создала главную страницу сайта – index.htm. Двойным щелчком открываем ее для редактирования.

Шаг 6: Оформим главную страницу и создадим остальные страницы на ее основе.

1) Установим кодировку страницы Кириллица
Кодировка нужна для того, чтобы русские буквы отображались корректно. Чтобы настроить кодировку нужно выполнить команду Файл → Свойства, в открывшемся окне перейти на вкладку Язык и в поле Сохранить документ, используя указать Кириллица. Нажать ОК чтобы сохранить внесенные изменения.

Свойства страницы. Язык

2) Зададим заголовок страницы
Заголовок страницы отображается в левом верхнем углу страницы. Для того, чтобы настроить заголовок страницы нужно выполнить команду Файл → Свойства,перейти на вкладку Общие и в поле Название указать заголовок страницы.

Свойства страницы. Общие

3) Установим фоновый рисунок страницы
Выберите рисунок, который будет являться фоном и скопируйте его в папку images, которая располагается в папке portfolio. Переименуйте этот рисунок в fon. Не стремитесь выбирать слишком яркие и пестрые фоны – основной критерий выбора фонового рисунка – на нем должен хорошо читаться текст. О том, как лучше подобрать фон можно прочитать в статье Выбор фона.
Для примера был выбран вот такой фон

Фоновый рисунок

Чтобы установить фоновый рисунок страницы нужно выполнить команду Файл → Свойства, перейти на вкладку Форматирование, установить галочку Фоновый рисунок и с помощью кнопки Обзор указать нужный файл рисунка.

Свойства страницы. Форматирование

В этом же окне вы можете установить фоновый цвет страницы – в том случае если вы не хотите использовать рисунок в качестве фона.

4) Далее следует разместить информацию о себе, сделать ссылки на работы и оформить страницу на ваше усмотрение.
В данном примере для размещения информации на странице будет использоваться таблица, состоящая из 3 строк и 6 столбцов, выровненная по центру с нулевыми границами. Для того чтобы вставить таблицу нужно выполнить команду Таблица→Вставить→Таблица. В открывшемся окне указываем параметры создаваемой таблицы.

Вставка талбицы

Если необходимо некоторые ячейки объединить, то их выделяют, нажимают правой клавишей в выделенной области и выбирают Объединить ячейки.
В данном примере необходимо объединить все ячейки в первой и третьей строках.

5) В первой строке напишем Портфолио, выделяем и форматируем текст также как в программе Microsoft Word.

6) В третьей строке пишем о себе и при желании вставляем фотографию.
Для вставки фотографии нужно предварительно ее скопировать в папку images. А затем выполнить команду Вставка → Рисунок → Из файла.
В данном примере в третьей строке таблицы установлен фоновый цвет – голубой. Чтобы установить фоновый цвет в ячейке таблицы необходимо нажать правой клавишей в ячейке и выбрать Свойства ячейки. В открывшемся окне выбрать нужный цвет фона.

7) Во второй строке с помощью команды Вставка →Меняющаяся кнопка создадим следующие кнопки: Главная страница, Word, Excel, Gimp, FrontPage, CorelDraw.
Вот что получилось

Создание кнопки

8) Создадим остальные страницы сайта. Проще всего создать новую страницу из имеющейся. Для этого нужно выполнить команду Файл → Создать и в открывшейся справа вкладке выбрать Из имеющейся страницы, указать в качестве основы страницу index.htm.

9) Сохраняем созданную страницу с именем word.htm.

10) Удаляем из третьей строки информацию о себе и фотографию. Пишем названия работ по word. В данном примере получилось вот, что:

Страница портфолио. Word

11) Создаем ссылки к работам. Для этого нужно выделить название работы и выполнить команду Вставка→ Гиперссылка. В открывшемся окне открыть папку word и выбрать нужную работу. То же самое необходимо проделать для всех работ по теме word.

Для работ представляющих собой web-сайты, ссылку нужно делать на файл index.html, который располагается в папке с работой.

Добавление гиперссылки

Сохранить страницу.

12) Возвращаемся к 7-му пункту и аналогично создаем другие страницы: excel.htm, coreldraw.htm и т.д.

13) Когда все страницы созданы нужно настроить ссылки главного меню на всех страницах. Для этого открывают сначала страницу index.htm. Двойным щелчком на кнопке Главная страница в поле ссылка указывают файл index.htm.

Меняющиеся кнопки

Двойным щелчком на кнопке Word в поле ссылка указывают файл word.htm и т.д. Тоже самое проделывают с остальными страницами.

Шаг 7: Необходимо добавить в папку portfolio вашу фотографию.
Размеры фотографии: ширина – 120 пикселей, высота – 160 пикселей, разрешение – 72 пикс/дюйм, формат - jpg. Фотографию необходимо скопировать в папку portfolio и дать ей имя face.jpg.

Шаг 8: Теперь необходимо выгрузить портфолио на локальный сервер.
Для этого запускаем Internet Explorer и заходим в систему тестирования. Внизу страницы располагаются следующие ссылки:

Система тестирования

Нажать на ссылку Ваши файлы. В открывшуюся папку скопировать содержимое папки portfolio.

Обратите внимание не саму папку portfolio – а ее содержимое!

 

Способ 2. Создание на основании готового шаблона оформления

 Шаг 1: Проделайте подготовительную работу (сбор и упорядочивание работ), описанную в п. I данной статьи.

Должна получиться примерно такая структура:

Структура портфолио

Названия работ в папке frontpage могут отличаться от представленных на рисунке. Если вы изучали не FrontPage, а например Kompozer, то папка frontpage может называться Kompozer.

Если все уже готово, то можно приступать ко второму шагу.

Шаг 2: Выберите шаблон и скачайте его в папку portfolio. Нажмите правой клавишей на скачанном шаблоне и выберите Извлечь в текущую папку. При этом у вас в папке portfolio должны появиться страницы index.html, kurs_1.html, kurs_2.html, kurs_3.html и папка images, в которой располагаются картинки относящиеся к сайту.

Шаг 3: Запустите программу Microsoft FrontPage (Пуск →Программы → Microsoft Office →Microsoft Office Front Page).

Шаг 4: Создайте новый Web-узел и определите его в папку portfolio.

Для этого выполните команду Файл → Создать. На вкладке, расположенной справа выберите Пустой веб-узел и укажите папку portfolio (нажмите на кнопку Обзор) в качестве расположения.

Шаблоны веб-узлов

После этого у вас на экране должно появиться примерно следующее:

веб-узел

Шаг 5: Откройте файл index.html для редактирования (двойным щелчком). Исправьте содержимое страницы, написав о себе и своих увлечениях.

Если вы учитесь не на третьем курсе, то удалите лишние пункты меню.

Если вы хотите разместить в портфолио свою фотографию, то нужно предварительно ее скопировать в папку images. А затем выполнить команду Вставка → Рисунок → Из файла.

После внесения изменений сохраните страницу.

Например, у вас может получиться так:

Портфолио

Шаг 6: Откройте страницу kurs_1.html для редактирования.

Измените названия тем и названия практических работ.

После изменения в данном примере получилось вот что:

Портфолио. 1 курс

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

Для работ представляющих собой web-сайты, ссылку нужно делать на файл index.html, который располагается в папке с работой.

Добавление гиперссылки

После настройки ссылок сохраните страницу.

Шаг 7: Так же настраивают остальные страницы (kurs_2.html и kurs_3.html).

Шаг 8: Необходимо добавить в папку portfolio вашу фотографию.

Размеры фотографии: ширина – 120 пикселей, высота – 160 пикселей, разрешение – 72 пикс/дюйм, формат - jpg. Фотографию необходимо скопировать в папку portfolio и дать ей имя face.jpg.

Шаг 9: Теперь необходимо выгрузить портфолио на локальный сервер.

Для этого запускаем Internet Explorer и заходим в систему тестирования. Внизу страницы располагаются следующие ссылки:

 Система тестирования

Нажать на ссылку Ваши файлы. В открывшуюся папку скопировать содержимое папки portfolio.

Обратите внимание не саму папку portfolio – а ее содержимое! 

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

О том, как использовать шаблоны при оформлении портфолио можно посмотреть в разделе Порядок создания портфолио.

 

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Скачать шаблон

Ошибки:

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

Ошибки:

  • Нет четкой структуры сайта
  • Текст на таком фоне не читается
  • В тексте ошибки

Ошибки:

  • Нет графического оформления
  • Нет информации об авторе
  • Много пустого места, которое не используется

Ошибки:

  • Нет графического оформления
  • Нет информации об авторе
  • Много пустого места, которое не используется
  • Нет меню
  • Вообще ничего нет!!!

Ошибки:

  • Сайт перегружен картинками, глаза разбегаются и не понятно, что и где искать
  • Текст не читается
  • Меню четко не выражено

Ошибки:

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

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

  • Анимация - одна из самых распространенных черт таких сайтов. Огромные анимированные изображения на главной странице, несколько бегущих строк перемещающиеся в 2 разные стороны и при этом резко мигающие вызывают мгновенный уход посетителя с такого сайта. Можно быть уверенным, что он не вернется.
  • Широкие изображения - большие по формату изображения медленно загружаются, особенно это понятно жителям стран СНГ, где быстрый доступ еще редкость.
  • Кнопки - начинающие веб-строители любят вешать на главную страницу до 10-20 кнопок - счетчики, топы, эмблемы каталогов, ссылки на дружественные сайты. Подумайте, может что-то из этого бесполезное увеличение обьема графики.
  • Длинные тексты - иногда видишь "сайт" целиком умещающийся в одном большом файле. Большая ошибка! Пользователь не должен прокручивать экран больше чем на 2,5-3 экрана.
  • Фон - классическая ошибка начинающих - это использование цветистых, а зачастую и разных типов фона в пределах сайта. Старайтесь создать единую атмосферу на сайте, и фон не должен выпячиваться вперед, показывая свою важность. Попробуйте использовать классику - черный текст на белом фоне.
  • Ошибки - всегда проверяйте свою орфографию. Ошибки зачастую прокрадываются незаметно и портят все впечатление от сайта.
  • Выпадающие окна - использование выпадающих окон является нарушением Интернет этикета. Самой обычной реакцией на появление таких окон при каждом клике на ссылке будет уход с такого сайта.
  • Горизонталь - часто при жестком дизайне (все расстояния указываются в пикселях) появляется горизонтальная полоса прокрутки, если веб-строитель имеет хороший монитор и видео-карту. Обязательно проверьте свой сайт при разрешении монитора 1024*768 пикселей.
  • Разные шрифты - при создании сайтов применяйте правило "Не более 5-ти шрифтов на странице" - при этом жирные шрифты считаются за отдельный шрифт, тоже касается и их размера.

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

Подкатегории

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

При создании портфолио нужно помнить, что существуют определенные требования, предъявляемые к сайтам, размещаемым в интернет. Эти требования связаны с особенностями работы поисковых систем, таких как Yandex и Google.

Требования к файлам и папкамlink

Требования к содержимому страницlink

Краткое содержание требований к портфолиоlink