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

создание сайта

От автора:Нет ничего подобного по созданию всего сайта, чтобы показывало вам хороший краткий обзор того, как должна работать разметка 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 так:

.className {

	position:absolute;
    top:0px;
    left:0px;

}

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

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

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

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

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

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

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

Большое фоновое изображение

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

Все наше информационное содержание появится в постоянном тэге <div> , но добавим ему такой padding-top, чтобы содержание сместилось вниз, где ему предназначается быть

Наш нижний колонтитул находится внизу

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

создание сайта

Шаг 3

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

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

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

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

создание сайта

Шаг 4

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>PSD vs NET</title>
	<link rel="stylesheet" href="step1_style.css" type="text/css" media="screen" />
</head>

<body>
<div id="outside_container">
	<div id="container">

		<!-- The Main Area -->

	</div>
</div>
<div id="footer">

	<img src="images/footer_logo.jpg" />

    <span id="footer_text">
        Made for a PSDTUTS and NETTUTS tutorial by Collis!
        See the <a href="http://psdtuts.com">Photoshop Tutorial</a>,
        see the <a href="http://nettuts.com">Web Tutorial</a>
    </span>

</div>
</body>
</html>

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

Я создал outside_container и container потому, что мне нужно двойной фоновое изображение. То есть мне нужно повторяющееся (тонкая полоска) фоновое изображение, а затем на верхней части того мне нужно то большое фоновое изображение. Таким образом, в outside_container я поставлю фоном тонкую полоску, а потом на container <div>, который появится сверху внешнего контейнера, у меня будет тот большой основной фон.

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

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

Шаг 5

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

body {
	margin:0px; padding:0px;
	background-color:#11090a;
	font-family:Arial, Helvetica, sans-serif;
}
#outside_container {
	background:url(images/background_slice.jpg) repeat-x #000000;
}
#container {
	background:url(images/background_main.jpg) no-repeat;
	min-height:800px;
}
#footer {
	border-top:1px solid #3f2324;
	padding:30px 50px 80px 50px;
}

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

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

Затем у нас есть тег с классом outside_container. Я придам ему фон (узкую полоску), и повторю это только вдоль оси X (то есть слева направо) и везде, где нет никакого фонового изображения, мы увидим прямую черную (#000000). Так, если страница становится более длинной, фон не будет повторяться вниз, потому что мы сказали повторить только слева на право, вместо этого мы получим черный фон. Это идеальный вариант, потому что наша тоненькая полоса исчезает на черном!

Затем у нас есть container. Здесь у нас есть большое фоновое изображение, которое не должно повторяться– так как оно появляется только один раз. Обратите внимание, что мы не определяли цвет фона, если бы он у нас был, то он охватывал бы наш outside_container. Это объясняется тем, что этот тег <div> находится внутри предыдущего и автоматически будет растягиваться во всю его ширину. Таким образом, наше фоновое изображение появляется в верхней части и затем за пределами этой области, Вы увидите outside_container, показывающий фон.

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

Нижний колонтитул это в основном только единственная линия границы и padding. Нет необходимости задавать цвет фона, потому что мы установили его в <body> ранее. Помните с определением padding, это происходит следующим образом: padding: top right bottom left (по часовой стрелке!)

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

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

Шаг 6

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

/*
	Footer
*/
#footer {
	border-top:1px solid #3f2324;
	padding:30px 50px 80px 50px;
	color:#674f5d;
	font-size:9px;
	line-height:14px;
}
#footer img {
	float:left;
	margin-right:10px;
}
#footer span {
	display:block;
	float:left;
	width:250px;
}
#footer a {
	color:#9e8292;
	text-decoration:none;
}
#footer a:hover { color:#ffffff; }

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

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

В #footer я добавил цвет шрифта, размер шрифта и высоту строки. Высота строки является полезным текстовым атрибутом, поскольку она помогает Вам определять интервалы между вашими строками. Без высоты строки текст может смотреться сгруппированным и тяжело читаться. Слишком большая высота строки — и между строками будут настолько большие интервалы, что это будет выглядеть странно. Таким образом, вы можете поэкспериментировать, чтобы найти правильную высоту для разных шрифтов и размеров. Здесь 14px кажутся подходящими.

Затем я установил #footer img и #footer span float:left. Поскольку им обоим установлено float left, то они окажутся в колонках рядом друг с другом. Я расскажу больше о свойстве float и столбцах чуть далее в этой статье.

Наконец, мы говорим браузеру, что делать с тегами <a> (т.е., ссылками), которые появляются в нижнем колонтитуле. В частности, они не должны быть подчеркнуты, и должны изменять цвет при наведении курсора мыши.

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

создание сайта

Шаг 7

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

создание сайта

создание сайта

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

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

<div id="outside_container">
	<div id="container">

		<a href="#"><img src="images/logo.jpg" id="logo" /></a>

        <ul id="menu">
        	<li><a href="#">Retouching</a></li>
        	<li><a href="#">Digital Effects</a></li>
        	<li><a href="#">Web Work</a></li>
		</ul>

        <ul id="right_menu">
        	<li><a href="#">About</a></li>
        	<li><a href="#">Contact</a></li>
        </ul>

        <img src="images/panel_home.jpg" id="panel" />

		<div id="content">

        	<!-- THE CONTENT GOES IN HERE -->

        </div>

	</div>
</div>

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

Наш логотип: связанный, поэтому щелкнув по нему, Вы перейдете на главную страницу, и ID = «Logo»

Главное меню: простой неупорядоченный список с ID = «Меню»

Меню правой стороны: это то же как меню, просто здесь ID = «right_menu»

Большую картинку с текстом — это наш главный заголовок, сохраненный как изображение, id=»panel»

Content Div: И это — то, куда мы собираемся поместить все наше информационное содержание страницы в дальнейшем. Я оставил его пустым сейчас, за исключением комментариев HTML.

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

создание сайта

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

Шаг 8

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

#container {
	background:url(images/background_main.jpg) no-repeat;
	min-height:800px;
	width:1000px;
	position:relative;
}

/*
	Logo / Menu / Panel Positioning
*/

#logo { position:absolute; top:58px; left:51px; }

#panel { position:absolute; top:165px; left:51px; }

ul#menu {
	margin:0px;	padding:0px;
	position:absolute; top:145px; left:75px;
}
ul#right_menu {
	margin:0px;	padding:0px;
	position:absolute; top:145px; right:75px;
}

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

Прежде всего, Вы увидите немного нашего старого кода — container. Я показал, как я добавил еще две строки к нему. У него теперь width:1000px и position:relative. Это важно, потому что, когда Вы устанавливаете контейнеру position: relative, то все теги внутри него, которым назначено position: absolute, позиционируются относительно этого контейнера. Это означает, что я могу помещать вещи в этот блок, используя факт, что я знаю, что его ширина 1000px. А именно, я буду использовать это для right_menu.

Затем, поскольку это новый набор CSS, я разделил его комментариями.

Лого и панели я присвоил position:absolute. Как мне узнать, какие цифры использовать? Просто вернуться к исходному документу Photoshop и взять оттуда, где они должны быть! Вы можете увидеть, что это на самом деле обычное определение класса, поэтому абсолютное позиционирование является таким простым.

Затем с двумя меню, они также абсолютно позиционированы, но здесь я также задал им margin:0px; padding:0px;, чтобы уберать любые заданные по умолчанию отступы, которые имеют неупорядоченные списки.

Далее обратите внимание на right_menu, я определил position:absolute; right:75px. Это означает, что оно появится в 75px от правой стороны его контейнера. В обычной ситуации это было бы окном браузера, но поскольку, помнится ране я установил контейнеру position:relative, это значит, что он будет на расстоянии в 75px от правой стороны <div id=»container»></div>.

Теперь вы наверно подумали, а какой смысл, разве я не могу размещать что-нибудь, используя только left? Что ж, вы можете, но с нашим меню, если вам понадобится добавить дополнительный пункт в меню, вам необходимо будет перемещать его снова и снова, так чтобы было 75px от правой стороны. Тогда как с помощью right дополнительные пункты меню покинут поток, при добавлении их. Попробуйте это и увидите!

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

создание сайта

Шаг 9

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

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

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

ul#menu {
	margin:0px;	padding:0px;
	position:absolute; top:138px; left:75px;
}
ul#right_menu {
	margin:0px;	padding:0px;
	position:absolute; top:138px; right:110px;
}
ul#menu li, ul#right_menu li {
	margin:0px;	padding:0px;
	list-style:none;
	margin-right:10px;
	font-size:9px;
	text-transform:uppercase;
	display:inline;
}
ul#menu li a, ul#right_menu li a {
	text-decoration:none;
	color:#bd92b2;
}
ul#menu li a:hover, ul#right_menu li a:hover {
	text-decoration:none;
	color:#ffffff;
}

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

.myClass, .myClass2 { … }

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

.myClass .myClass2 { … }

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

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

Мы установили <ul> элементам margin и padding в 0, и positioning: absolute, поскольку мы обсуждали это ранее

Затем мы сказали, что у всех элементов <li> внутри элементов <ul>, не должно быть list-style (то есть никакого оформления), мы хотим, чтобы у них был размер шрифта 9px, все они в верхнем регистре, и важно, они, чтобы они были display:inline. Inline display означает ,что вместо того, чтобы быть блоками, которые появятся один под другим, они появятся рядом друг с другом!

Следующее определение говорит, что для связанных тегов <a> , которые появляются внутри

  • тегов, что находится внутри <ul id=»menu»> или <ul id=»right_menu»>, они должны быть определенного цвета и не подчеркнуты.

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

    Шаг 10

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

    <div id="outside_container">
    	<div id="container">
    
    		<a href="#"><img src="images/logo.jpg" id="logo" /></a>
    
            <ul id="menu">
            	<li><a href="#">Retouching</a></li>
            	<li><a href="#">Digital Effects</a></li>
            	<li><a href="#">Web Work</a></li>
    		</ul>
    
            <ul id="right_menu">
            	<li><a href="#">About</a></li>
            	<li><a href="#">Contact</a></li>
            </ul>
    
            <img src="images/panel_home.jpg" id="panel" />
    
    		<div id="content">
    
            	<div class="column1">
    
                	<h2>a sleek design</h2>
    
                    <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
    				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
                    <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
    				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    
                </div>
                <div class="column2">
    
                    <h2>tutorials</h2>
    
                    <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
    				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    				<p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
    				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    
                </div>
                <div class="column3">
    
                	<h2>recent work</h2>
    
                    <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
    				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    				<p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
    				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    
                </div>
    
            </div>
    
    	</div>
    </div>
    

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

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

    /*
    	Content
    */
    
    #content {
    	padding-top:435px;
    	padding-left:85px;
    	width:815px;
    	color:#674f5d;
    	font-size:13px;
    	line-height:20px;
    }
    .column1 { float:left; width:230px; margin-right:30px; }
    .column2 { float:left; width:230px; margin-right:30px; }
    .column3 { float:left; width:270px; }
    

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

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

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

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

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

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

    . Это немного сложно объяснить, так что давайте посмотрим, что происходит с clear:both и без него.

    Без clear:both

    Вот как выглядит разметка:

    создание сайта

    Посмотрите, как колонны поплыли поверх нижнего колонтитула и в нижний колонтитул сам начала обтекать вокруг них. Это не правильно!

    С clear:both

    Решение является достаточно простым, мы должны добавить <div> после трех столбцов следующим образом:

    <div id="content">
    
        <div class="column1">
    
            <h2>a sleek design</h2>
    
            <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
            <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
            <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
            <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    
        </div>
        <div class="column2">
    
            <h2>tutorials</h2>
    
            <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
            <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
            <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
            <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    
        </div>
        <div class="column3">
    
            <h2>recent work</h2>
    
            <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
            <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
            <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
            <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    
        </div>
    
        <div style="clear:both"></div>
    
    </div>
    

    Видите <div style=»clear:both»></div> внизу? Это просто пустой <div> что, говорит очистить три столбца. И он решает наши проблемы.

    Несколько слов о Floats и их Clearing.

    Вы могли бы задаться вопросом, почему я не поместил «clear:both» в определение <div id=»footer»>, но, к сожалению, это не будет работает из-за фона, который мы используем … Вот скриншот:

    создание сайта

    По-видимому, существует решение, не связанное с вставкой бесполезного

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

    Шаг 11

    Хорошо, уже почти всё. Основная разметка вся видна и все, что мы должны сделать, добавить и разработать наше содержание. Вот HTML для этого:

    <div id="content">
    
        	<div class="column1">
    
            	<h2>a sleek design</h2>
    
                <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
    <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
    
            </div>
            <div class="column2">
    
                <h2>tutorials</h2>
    
                <p>Psdtuts and nettuts provide tutorials on the following topics (sorta):</p>
    
                <img src="images/adobe.jpg" />
    
            </div>
            <div class="column3">
    
            	<h2>recent work</h2>
    
            	<ul class="work">
                	<li>
                    	<a href="">
                        	<img src="images/work_1.jpg" />
                            <h4>Working Within Limitations to Achieve Great Designs</h4>
    			Sean Hodge
                        </a>
                    </li>
                    <li>
                    	<a href="">
                        	<img src="images/work_2.jpg" />
                            <h4>Create a Slick Tabbed Content Area using jQuery</h4>
    			Collis Ta’eed
                        </a>
                    </li>
                    <li>
                    	<a href="">
                        	<img src="images/work_3.jpg" />
                            <h4>Creating a PayPal Payment Form</h4>
    			Collis Ta’eed
                        </a>
                    </li>
                </ul>
    
            </div>
    
            <div style="clear:both"></div>
    
        </div>
    

    Это практически та же самая структура, как и ранее, кроме третьей колонки, я создал <ul> элемент в ней с классом work. Обратите внимание, что этот <ul> элемент я настроил так, чтобы была ссылка (тэга <a>) , оборачивающая изображение, заголовок и текст. Таким образом, все это станет блочной ссылкой. Это означает, что если вы наведите курсор на изображение, то текст, связанный с ним изменит цвет.

    Итак, вот CSS для нашего содержания:

    #content h2 {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	color:#dbaa70;
    	margin:0px 0px 20px 0px;
    	font-weight:normal;
    }
    
    ul.work {
    	margin:0px; padding:0px;
    }
    ul.work li {
    	list-style:none;
    	margin:0px; padding:0px;
    	clear:both;
    }
    ul.work li a {
    	color:#e0b882;
    	display:block;
    	padding:5px 10px 5px 10px;
    	text-decoration:none;
    	font-size:10px;
    }
    ul.work li a img {
    	float:left;
    	margin-right:20px;
    	margin-bottom:20px;
    }
    ul.work li a h4 {
    	color:#674f5d;
    	margin:0px;
    	font-weight:normal;
    	font-size:13px;
    }
    ul.work li a:hover, ul.work li a:hover h4 { color:#ffffff; }
    

    Давайте пройдем по классам один за одним:

    Сначала мы пересматриваем все <h2> , которые появляются внутри <div id=»content»>. Мы могли, просто пересмотреть все <h2>, но вы никогда не знаете, где может использоваться еще какой-нибудь <h2>. Так что, назначать подобные классы таким образом (#content h2 ) — это хорошая привычка. Все, что я сделал здесь, это изменил цвет, шрифт, толщину и отступы, чтобы это выглядело, как мне нужно.

    Затем у нас есть определения <ul class=»work»>. Первое <ul> определение просто заставляет избавиться от margin и padding.

    Тогда <li> определение говорит, что там не должно быть никакого list-style (то есть без маркеров). Тоже самое говорит clear:both. Как Вы помните из последнего шага, это должно очистить floating элементы. И если Вы посмотрите немного ниже, то Вы заметите, что у img определения есть float. Поэтому здесь мы говорим, что каждый новый элемент списка <li> должен быть очищен и не обтекать последнего.

    Затем в <a> части, мы говорим, что <a> тэг должен отобразиться как блок. То есть мы хотим, чтобы наши ссылки были большим блоком, который включает изображение и текст. Мы даем ему padding, чтобы конкретизировать блок и установить некоторые стили для текста, который должен появиться.

    Затем мы говорим, что <img> в наших <a> должны быть сдвинут влево с некоторыми отступами.

    Наконец мы определяем цвет текста у <h4>.

    И вот и всё! Мы это сделали!

    Готово!

    Домашняя страница сайта завершена. Создание сайта портфолио с нуля — сделано. Вы можете скачать ZIP of the site files , чтобы посмотреть , содержащийся HTML-код для разных этапов этой статьи и, конечно, можно увидеть окончательный документ HTML:

    Просмотр финальной страницы

    Автор: Collis Ta’eed

    Источник: http://net.tutsplus.com

    Хотите узнать, что необходимо для создания сайта?

    Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

    Смотреть видео

    Метки: , ,

    Комментарии Вконтакте:

    Комментарии Facebook:

    Комментарии (1)

    1. Елена

      Замечательная Прекрасная статья!!! СПАСИБО!!!

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    Я не робот.

    Spam Protection by WP-SpamFree