Сегодняшнее учебное пособие научит вас, как использовать Div+CSS, чтобы сократить страницу PSD на HTML -страницы. Этот сайт всегда делал очень мало учебных пособий, и большинство из них относительно фрагментарны. В будущем мы постепенно публикуем и переведем больше учебников, подобных этому.
Сначала посмотрите на эффект
На рисунке ниже визуализации. После вырезания головы и дна могут быть шире ...
Создать новую папку
Для начала создайте папку на вашем компьютере. Я назвал это Zmool. Затем создайте новые изображения папок в папке и поместите все изображения веб -сайта. Затем откройте редактор кода (DreamWeaver) и создайте HTML -файл с именем index.html в корневом каталоге, который является нашим шаблоном домашней страницы. Теперь создайте новый файл CSS и назовите его файл style.css. Как показано на рисунке ниже:
Откройте файл index.html. В верхней части тега головы добавьте ссылку на свою таблицу стилей (style.css). Вы можете использовать следующий код.
<link href = style.css rel = stylesheet type = text /css />
Код заголовка заключается в следующем:
<! Doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = UTF-8/> <TITE> Modern Design Studio </title> <link href = style.css rel = stylesheet type = text/css/> </head> <body> </body> </html>
Создать структуру HTML
Теперь мы настроим структуру файла HTML. Установите 3 разделы (заголовок, контент, нижний колонтитул), как ниже:
<! Doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = UTF-8/> <Title> DOMONTED UNTITLED </title> <link rel = stylesheet type = text/css href = style.css/> </head> <body> <div id = заголовок> </div> <div = content> </div> <div id = looter> </div> </body> </html> </div> <div = looter> </div> </body> </html
Резка фон
Наш PSD -файл содержит много эффектов текстуры. Нам нужно вырезать все это, а затем добавить их на веб -страницу с кодом, чтобы сделать эффект страницы Div в соответствии с эффектом проектирования.
<body> <div id = заголовок> <div id = контейнер> </div> </div> <div id = content> <div id = container> </div> </div> <div id = нижний файл> <div id = container> </div> </div> </body>
Теперь откройте первоначально спроектированный слой в Photoshop, скрыть его, за исключением фонового слоя.
Теперь возьмите инструмент для нарезки, выберите фон, сохраните веб -формат веб -страницы (Alt + Shift + Ctrl + S). Затем сохраненный файл папки изображения называется Founal.jpg.
Установить стиль фонового стиля
Откройте файл style.css, установите основной стиль, стиль фона и ширину основной части следующим образом:
* {маржа: 0px; Padding: 0px;} body {founal: url (images/founal.jpg);}#incecuter {margin: auto; Ширина: 960px;}Разрезать голову
Вернитесь в Photoshop, скрыть так называемый слой, за исключением фона головы, и используйте тот же метод, чтобы разрезать фоновое изображение головки в веб-формат и сохранить имя файла в качестве Head.jpg.
Редактировать код фонового кода головы
Отредактируйте следующий код в файле style.css:
#Header {founale: url (images/header.jpg); высота: 124px;}Разрежьте логотип головы
В это время вырежьте слой логотипа и скрыть все слои, включая фоновый слой. Вырежьте слой логотипа как тот же метод, что и выше, чтобы сохранить его как логотип.png. Примечание. Сохраните его как изображение формата PNG.
Добавить, чтобы добавить логотип на странице
Теперь вернитесь в HTML и добавьте следующий код <div id = logo>…. </Div> в #header #container.
<div id = заголовок> <div id = container> <div id = logo> <a href =#> <img src = images/logo.png> </a> </div> </div> </div>
Теперь переключитесь на файл style.css ниже и напишите стиль #logo.
#logo {margin-top: 20px; граница: нет;}Редактировать код навигации
Ниже приведен код на странице. Заголовок включает в себя две части: логотип и навигация.
<div id = Header> <div id = container> <div id = logo> <a href =#> <img src = images/logo.png> </a> </div> <ul> <li> <a href =#> </a> </li> <li> <a href =#>#> </i> <li> <li> <a href =#> blog </a> </li> <li> <a href =#> contact </a> </li> </div> </div>
Стиль навигации выглядит следующим образом:
Теперь добавьте стили навигации в таблице CSS ~, UL, LI и свяжите стили:
#header li {color:#959595; Список-стиль: none; float: слева; ul {float: right; margin-top: -40px;}#заголовок li a: Hover {ancome:#202020; Color:#d2d2d2; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-bord-radius: 5px;}Теперь сделайте среднюю часть
Теперь мы добавляем два DOV в среднюю часть содержания страницы, как показано на рисунке ниже:
<div id = content> <div id = container> <div id = opture> </div> <div id = пункты> </div> </div> </div>
Переключитесь на страницу Photoshop PSD, отрежьте среднюю часть и назвайте ее. Следующий рисунок:
Добавьте следующий код на свою страницу HTML и некоторое введение текста:
<div id = content> <div id = container> <div id = opture> <a href =#> больше проектов </a> <p> <pran> Portfolio Project, 5 января 2010 г. </span> Вы когда -нибудь хотели создать чистый и хороший дизайн портфолио? В этом уроке я покажу вам, как разработать чистое синий портфолио. Вы когда -нибудь хотели создать чистый и хороший портфельный дизайн? В этом уроке я покажу вам, как разработать чистый синий макет портфеля в Adobe Photoshop. </P> </div> <div id = пункты> </div> </div> </div>
В файле PSD скрыть другие так называемые слои, оставьте только часть слоя кнопки, отрежьте часть кнопки, сохраните формат PNG и назовите кнопку его.
Теперь мы добавляем эти изображения на страницу, переключаемся на страницу файла CSS и добавляем следующий код, который включает в себя стиль фонового и кнопки.
#featured {founale: url (images/infure.jpg) без повторного перепора; {фон: url (images/button.png); высота: 30px; ширина: 124px; text-indent: -9999px; положение: абсолютное; маржинальный-330px; margin-left: 180px;}#Показанный a: Hover {founal Position: 0px 30px;}Теперь добавим несколько стилей DummyText:
.dummyText {color:#d2d2d2; ширина: 245px; Margin-top: 150px; позиция: абсолютно; font-family: arial, helvetica, sans-serif; font-size: 12px; линейная-180%; Margin-left: 290px;}. DummyText span {font-size: 16px; цвет:#191919; Font-Weight: Bold;}Следующее добавлено, чтобы добавить изображения для отображения следующего раздела введения категории
Кодовая часть страницы заключается в следующем.
<div id = пункты> <p> <pran> Beautiful </span> WebDesignfan - это блог, связанный с дизайном о веб -дизайне, Photoshop, бесплатных и учебных пособиях. Мы публикуем полезную информацию, посвященную веб -дизайнерам и разработчикам. Здесь вы можете найти бесплатные ресурсы, такие как векторы, темы WordPress и много вдохновения. </p> <p> <pran> Эффективный </span> webdesignfan - это блог, связанный с дизайном о веб -дизайне, Photoshop, бесплатных и учебных пособиях. Мы публикуем полезную информацию, посвященную веб -дизайнерам и разработчикам. Здесь вы можете найти бесплатные ресурсы, такие как векторы, темы WordPress и много вдохновения. </p> <p> <pan> функциональный </span> webdesignfan - это блог, связанный с дизайном о веб -дизайне, Photoshop, бесплатных и учебных пособиях. Мы публикуем полезную информацию, посвященную веб -дизайнерам и разработчикам. Здесь вы можете найти бесплатные ресурсы, такие как векторы, темы WordPress и много вдохновения. </p> </div>
Содержание в нашей средней части должно выглядеть так:
<div id = content> <div id = container> <div id = opture> <a href =#> больше проектов </a> <p> <pran> Portfolio Project, 5 января 2010 г. </span> Вы когда -нибудь хотели создать чистый и хороший дизайн портфолио? В этом уроке я покажу вам, как разработать чистое синий портфолио. Вы когда -нибудь хотели создать чистый и хороший портфельный дизайн? В этом уроке я покажу вам, как разработать чистый синий макет портфеля в Adobe Photoshop. Мы публикуем полезную информацию, посвященную веб -дизайнерам и разработчикам. Здесь вы можете найти бесплатные ресурсы, такие как векторы, темы WordPress и много вдохновения. </p> <p> <pran> Эффективный </span> webdesignfan - это блог, связанный с дизайном о веб -дизайне, Photoshop, бесплатных и учебных пособиях. Мы публикуем полезную информацию, посвященную веб -дизайнерам и разработчикам. Здесь вы можете найти бесплатные ресурсы, такие как векторы, темы WordPress и много вдохновения. </p> <p> <pan> функциональный </span> webdesignfan - это блог, связанный с дизайном о веб -дизайне, Photoshop, бесплатных и учебных пособиях. Мы публикуем полезную информацию, посвященную веб -дизайнерам и разработчикам. Здесь вы можете найти бесплатные ресурсы, такие как векторы, темы WordPress и много вдохновения. </p> </div> </div> </div>
Перейдите в свой файл CSS и добавьте следующий код.
#Pparacraphs span {font-family: myriad pro, helvetica, sans-serif; font-size: 22px; font-weight: 600; пересечение букв: -2px;}#Фаграммы {Margin-Lefft: 80px; font-family: arial, helvetica, sans-serif; color:#191919; Font-Size: 12px; Margin-top: 15px;}. Paragraph {width: 250px; margin-left: 15px; float: слева;}Это то, что мы сделали до сих пор:
Нижняя часть веб -сайта обрабатывается ниже
Теперь, когда мы закончили эту часть, мы начнем создавать нижний колонтитул.
Во -первых, в вашем PSD -файле скрыть другие слои, кроме слоев нижнего колонтитула и нижнего колонтитула, а затем нарежьте и сохраните папку нижней колонны в качестве нижней части.
Затем вырежьте его снова и вырежьте кнопку и птицу. Назовите его следуйте. PNG и Bird.jpg соответственно.
Изменить нижний код
Нижний нижний колонтитул включает в себя немного текста и изображение птицы по ссылке.
Так что добавьте следующий код на страницу HTML.
<div id = нижний файл> <div id = контейнер> <p> 2010? Вымышленная дизайнерская студия. Дизайн от WebDesignfan. </P> <a href =#> Следуйте за нами в Twitter </a> <img src = images/bird.jpg/> </div> </div>
Теперь отредактируйте код стиля нижнего колонтитула внизу следующим образом:
#footer {founal: url (images/cooler.jpg); высота: 71px; маржинальная топ: 191px;}#cooler p {font-family: arial, helvetica, sans-serif; font-size: 12px; color:#959595; позиция: Absolute; Margin-top: 30px; a {founal: url (image/plow.png); текстовый: -9999px; положение: абсолютно; высота: 27px; ширина: 124px; margin-left: 730px; щедро-стоп: 30px;}#looter img {float: right; margin-top: 10px;}Мы используем Tool.jpg в качестве фона нижнего колонтитула, а затем добавляем несколько стилей текста.
Для ссылки на изображение птицы внизу мы использовали тот же метод раньше, используя плавающий эффект, чтобы позиционировать его.
Окончательный эффект
Скачать файл (0,7 МБ)
Даже сейчас все кончено. Я не знаю, понимаете ли вы это. Если вы этого не понимаете, оставьте сообщение. Если вы этого не понимаете, я добавлю и изменю его снова, ха -ха ~