Как создать сайт портфолио?

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1

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

Шаг 2

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

Что такое абсолютное позиционирование?

Когда вы размещаете HTML-элементы на странице (например<div>,<p>и т. д.), то у них есть естественная позиция, которая определена тем, что находится перед ним. Так, например, если Вы поместите вниз <p> </p> с каким-нибудь текстом в нем, и затем поместите другой <p> </p>, то естественно он появится ниже первого <p>. Это будет обычный поток относительно последнего элемента.

Абсолютное позиционирование отличается тем, что Вы указываете точное размещение объекта и извлекаете его из обычного потока элементов. Так, если Ваш первый <p></p> оставить так, как и прежде, но и для вашего следующего <p></p> Вы задали position:absolute ; left:500px; top:500px; тогда он появиться именно в этом месте, независимо от предыдущего

.

Вы сможете установить absolute position так:

Недостатки абсолютного позиционирования

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

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

Почему это полезно для нас сегодня?

Хорошее в абсолютном позиционировании заключается в том, что это действительно, действительно легко! Вы сообщаете браузеру, где расположить что-то и там это появится! В добавок ко всему, гораздо меньше проблем с совместимостью браузеров, хотя Вы помещаете вещи абсолютно. В конце концов 100px есть 100px и в Firefox,и в Internet Explorer, и в Safari.

Итак наша разметка

Таким образом способ, которым мы собираемся сделать наш веб сайт следующий:

Не волнуйтесь, если вам кажется, что в этом пока нет смысла, Вы увидите, что сайт обретает форму!

Шаг 3

Теперь посмотрим с точки зрения фоновых изображений: нам их нужно два. Одно из них будет гигантским, а на самом деле после того, как сохранить его как JPG, то его размер будет около 56Kb. Раньше это было слишком много, но в наши дни это не имеет большого значения.

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

(Обратите внимание, что логотип не должен быть показан ниже фонового рисунка, это был просто плохой скриншот, извините!)

Вы можете посмотреть на эти два изображения, которые я создал здесь и здесь.

Шаг 4

Хорошо, теперь займемся нашим HTML. Сначала мы заложим некоторые основы:

Как всегда лучше работать с внешней стороной разметки. Так что я сделал здесь три главных тега <div> . Первые два outside_container / container, а другой footer. Это требует небольшого пояснения:

Также вы увидите, что я добавил немного содержания в нижний колонтитул, это просто мини логотип и текст. Я обернул текст в тег <span>, чтобы я мог им управлять. Нет смысла давать тегу <img> идентификатор или класс, потому что мы можем лишь сказать #footer img и поскольку это единственное изображение там, мы можем управлять им так. Это делает наш HTML немного проще.

Шаг 5

Теперь CSS. Для нашего кода следующий:

Итак, идем по шагам:

Вот, где мы находимся сейчас…

Просмотр результата

Шаг 6

Завершим нижний колонтитул, добавив несколько дополнительных стилей следующим образом:

Итак, здесь я добавил несколько штрихов к нашему #footer классу и создал еще несколько классов. Давайте разберем всё это по шагам:

Вот как это будет выглядеть с добавлением Footer:

Шаг 7

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

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

Вот фрагмент нашего HTML-кода – только для части контейнеров:

Итак, в <div id=»container»> мы добавили пять вещей:

Поэтому, прежде чем начать ее стилизацию, стоит посмотреть, как выглядит страница со всем этим:

Как вы видите, мы собираемся сделать некоторые серьезные изменения, чтобы всё стало на свои места. Как вы помните, мы собираемся использовать абсолютное позиционирование, чтобы сделать это быстро и легко.

Шаг 8

Вот CSS, который мы добавляем, чтобы поставить наши элементы на свои места:

Снова рассмотрим каждый кусочек детально:

Итак, вот здесь мы находимся:

Шаг 9

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

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

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

Первые две части этого кода такие же как и раньше (хотя я скорректировал немного позиции, чтобы они смотрелись правее после разработки). Обратите внимание, что эти два определения являются отдельными, поскольку у них различное позиционирование, но после этого мы объединили их в один класс определения, т.к. сами пункты меню должны выглядеть одинаково. Формат для определения двух классов вместе:

.myClass, .myClass2 { … }

Это очень отличается от этого определения:

.myClass .myClass2 { … }

Поскольку второе определение говорит, все элементы класса = «myClass2» внутри элемента класса = «myClass».

Во всяком случае давайте вернемся назад и пройдем некоторые важные пункты:

И с этим, наша страница теперь смотреться неплохо!

Шаг 10

Теперь настало время добавить немного содержания! Сначала давайте добавим фиктивный текст и сделаем так, чтобы получились столбцы. Вот HTML:

OK, так в этой части кода, я добавил 3 новых <div> в области содержания. У каждого из них есть <h2> — заголовок и далее часть текста. Они имеют имена классов column1, column2 и column3. Чтобы показать вам кое-что о создании столбцов, я добавил весь дополнительный текст,

Сначала давайте добавим CSS, чтобы они появились как столбцы:

Как обычно я разбил наш новый бллок CSS с помощью комментариев. Затем я установил некоторые стили для #content. Обратите внимание, сколько там padding-top… 435px! Это, чтобы освободить место для всех ранее абсолютно позиционированных элементов. В отличие от тех элементов эта область информационного наполнения находится в нормальном потоке страницы.

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

Теперь три класса столбцов, обратите внимание, что у каждого установлены ширина и float:left. Это говорит им, что они должны идти слева от страницы, выровненные рядом с другим сдвинутым влево элементом. Я задал первым двум margin:right, чтобы они не прилипли друг к другу.

Floating элемент заставляет их смещаться влево или вправо, и говорит всему остальному обернуться вокруг его. Когда другие элементы также floated, они формируются в столбцы. В целом в любой момент вы видите колонку разметки, использующую floats.

К сожалению, есть одна странная проблема с floats. А именно, то, что у них проблема с их контейнерами. Вместо того, чтобы отодвинуть следующие элементы вниз, они просто оказываются поверх Floating элементов. Способ решения этой проблемы состоит в том, чтобы поместить какой-нибудь элемент со свойством clear:both после Floating элементов.

Clear свойство говорит, прекратить обтекание вокруг floating