| | Структура таблицы `data`
--
CREATE TABLE `data` (
`id` int(5) NOT NULL auto_increment,
`title` varchar(255) NOT NULL,
`description` text NOT NULL,
`istok` text,
`mini_img` varchar(255) NOT NULL,
`text` text NOT NULL,
`date` date NOT NULL,
`view` int(7) NOT NULL,
`cat` int(1) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=cp1251 AUTO_INCREMENT=2 ;
--
-- Дамп данных таблицы `data`
--
INSERT INTO `data` VALUES (1, 'Кодирование стильного сайта с нуля Часть II (верстка +Photoshop) ', 'В этой второй части обучающего урока мы будем кодировать наш дизайн в стильный сайт, который понимает каждый браузер xHTML, CSS, и расположение JavaScript/jQuery.', '<a class="text_link" href="http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-a-slick-website-from-scratch-–-part-ii" target="blank">net.tutsplus.net</a>', 'files/19.09.10/mini.jpg', 'В этой второй части обучающего урока мы будем кодировать наш дизайн в стильный сайт, который понимает каждый браузер xHTML, CSS, и расположение JavaScript/jQuery. <table width="200" border="0" align="center">\r\n <tr>\r\n <td valign="top"><img src="images/AllDay.ru_13.png" width="80" height="80"><br>\r\n Демо </td>\r\n <td valign="top"><img src="images/AllDay.ru_15.png" width="80" height="80"><br>\r\n Скачать </td>\r\n </tr>\r\n</table>\r\n<div class="text_naz">Шаг Один – Что Мы будем Делать</div>\r\nВы думаете, что мы просто будем использовать наши ранее сверстанный дизайн в качестве основы , а затем кодировать гораздо менее сложный дизайн, но это не так! В конце этого урока, это то, что у Вас будет отображаться в браузере: <p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img1.1.jpg" width="600" height="450"></p>\r\nОбратите внимание, что это не версия Photoshop однако на самом деле результат в Firefox. \r\n<div class="text_naz">Шаг Два –Требования </div>\r\nДаже если я постараюсь быть столь же ясным и краткими на сколько возможно на протяжении всего этого урока, сказав, что полный новичок может последовать и понять, это было бы выдавать желаемое за действительное. Конечно, копировать и вставлять можно, но, чтобы понять все разъяснения, вам нужно иметь некоторые знания веб-технологий: \r\nОсновательное знания HTML и CSS, но Вам, вероятно, удастся следовать зная, основы, а также \r\nВажно знать о том, как работает JavaScript, а точнее JQuery \r\nЕсли вы ничего не знаете о тех вещах, которые говорилось выше, Вы всегда можете пройти дальше и узнать их. <br>\r\n<div class="text_naz">Шаг Третий – Установка нашей среды для дальнейшей работы </div>\r\nВ этой части урока, я просто попытаюсь объяснить мой способ ,с чего я начинаю свою работу , когда я кодирую веб-сайт. Первое и, вероятно, самая главная вещь - инструменты. Какие приложения вы собираетесь использовать для кодирования, отладки, чтобы проверить? \r\nВ моем случае, Dreamweaver является лучшим выбором для кодирования. \r\nСледующее, что мы должны выбрать - браузер. Мы нуждаемся в браузере с большим инструментом одалживания. Даже хотя я злостной пользователь OPERA в повседневной жизни, я использую Firefox во время кодирования и дизайна из-за его выдающийся инструмента Firebug. Конечно, Опера Dragonfly, а также Safari поставляется с некоторыми большими инструментами, как хорошо, но Firebug еще один шаг вперед, и это заставляет меня выбрать Firefox в качестве моегоосновного браузера. Вы должны быть уверены использовать стандартные-совместимый браузер в любом случае. Иными словами, не используйте Internet Explorer в качестве основной среды тестирования. Даже если мой выбор Firefox для тестирования в процессе разработки, так у меня все последние браузеры установлены на компьютере, чтобы убедиться, что все прекрасно работает на всех из них. Поэтому я их испытания в Firefox, Opera , Safari, Chrome и Internet Explorer . Таким образом, они должны быть корректно отображается примерно 95% интернет-пользователей. \r\nХорошо, когда у нас есть инструменты для работы, мы также должны посмотреть структуру каталогов. Для того, чтобы сохранить ясность, я решил создать новый "сайт" на моем локальном сервере, только путем создания новой папки в WWW / папки. Я использую WAMP, как мой локальный. В этом месте, мы должны создать три папки, JS /, CSS / и IMG /. Думаю, что имена очень нуждается в пояснениях. Я говорю что названия говорят сами за себя.\r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img 1.2.jpg" width="624" height="520"></p>\r\n<div class="text_naz">Шаг Четвертый– XHTML </div>\r\nЧто мы должны делать теперь подумайте о том, как мы будем строить наши дизайн, который теги мы будем использовать, как мы будем индефицировать и т.д. Вот что я придумал: \r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img1.3.jpg" width="624" height="520"></p>\r\nТеперь, когда мы знаем, что мы собираемся создавать, давайте начнем с определения основы нашего документа! \r\n<div class=" text_abzac"> Основа </div>\r\nЯ уже сказал вам, что мы будем использовать строгий XHTML . Это означает, что мы должны сохранить нашу структуру логики отдельно от макета логики. Для того, чтобы сказать браузеру, какую "грамматику" мы используем, мы должны определить так называемых DTD или определение типа документа. XHTML 1.0 Strict Doctype выглядит следующим образом: <br>\r\n<pre class="code"><! DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> </pre>\r\nЭтот кодек должен быть первым во всех ваших HTML файлах. Отсутствие такого определения приведет к неудачной проверки. \r\nДалее, нам просто нужно определить основы нашей страницы: верхнюю часть и контент. Лучше разместить тег заголовка, в верхней части, чтобы показать правильное название в строке заголовка окна браузера, а не что-то вроде "Без названия 1"(Untitled 1). Я решил поставить некоторые мета-теги, а также для SEO, хотя все мы знаем, что они не так полезно сегодня. \r\n<div class="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <br> <head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" /> <br><meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" /> <br><meta name="author" content="Felix Boyeaux" /> <br> <meta name="robots" content="all" /> <br><title>Roadside Studio</title> <br> </head> <br><body> <br> <!-- The content will go here --> <br></body> <br></html>\r\n</div>\r\nКак только это будет сделано, мы можем начать кодировать строку состояния. <br>\r\n<div class="text_abzac">Строка состояния </div>\r\nПомните, как я говорил вам создать целую кучу групп слоев и переименуйте их к тому, что отражает их функции? Хорошо вы сейчас поймете почему. Посмотрите на эту палитру слоев: \r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.4.jpg" width="504" height="281"></p>\r\nВы видите, что я имею в виду сейчас? Действительно, это дает нам структуру нашего HTML: у нас есть папка, которая называется Строка статуса, в которую мы вложили папки. Эти папки представляют собой блочную модель нашей страницы! Тем не менее, это не верный. Однако этот способ показывает, что нам нужно еще несколько блоков папок для того, чтобы центрировать содержание страницы строки и все еще иметь возможность растянуть фон строки на <strong>100% </strong>в ширину. Мы также нуждаемся в обертке вокруг Панели приветствия, и строки меню для того, чтобы разместить поле поиска справа. <br>\r\nЭто то, на что на что должен быть похож ваш код:\r\n<div class="code"><div id="status-bar"> <br> <div id="status-bar-content"> <br> <form action="#search" method="post" id="search-form"> <br><p> <br> <input type="text" name="query" value="Search" /> <br><input type="submit" name="submit" value="Search!" /> <br> </p> <br> </form> <br><div id="status-bar-commands"> <br><p id="welcome">Welcome, Guest</p> <br><p id="action-bar"> <br><a href="#login" title="Login">Login</a> <br><a href="#sitemap" title="Sitemap">Sitemap</a> <br><a href="#license" title="License">License</a> <br></p> <br></div> <br></div> <br></div> \r\n </div>\r\n Тег Div с <strong>ID="status-bar"</strong>- наш блок. Блок <strong>Status-bar</strong> необходим нам для размещения содержимого по центру этой строки. Обратите внимание на тег <strong><p></strong> внутри тегов<strong> <form></strong> . Это необходимо для утверждения XHTML 1.0 Strict. <br>\r\nПоследняя важная вещь, что мы не заметили это тег <strong><p></strong> , который заключен в тег <strong><div></strong>. Это то, что веб дизайнеры называют семантическим кодированием. Параграф должны всегда быть завернут в тег для того чтобы его можно удобно читать. Это также облегчает жизнь чтения для скрин-редакторов.<br>\r\nЗамечательно! Это было для строки Статуса. Не так сложно, да? Ключевой особенностью является то что мы должны не нарушать логические действия, которые вытекают из слоя в нашей иерархии PSD для того, чтобы правильно построить нашу разметку . Это нам нужно для того, чтобы сохранить ваш HTML симпатичным. \r\n<div class="text_naz">Шаг Пятый- Шапка </div>\r\nНам нужно будет посмотреть на палитру слоев, чтобы иметь представление о том, как ее построить. Это то, что у нас есть для шапки: \r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.5.jpg" width="600" height="489"></p>\r\nТеперь давайте переведем эту структуру в код. Нам понадобиться контейнер, блок логотип, и два текстовых блока: один для заголовка, и еще один для подзаголовка. Однако в этом случае мы не будем использовать теги <strong><p>.</strong><br>\r\n Почему нет?<br>\r\n Хорошо просто потому, что мы можем быть еще больше, чем симпатичны, используя теги заголовка. Поскольку текст заголовка первый заголовок в нашем документе, мы обернем его в <strong>h1</strong> тег. Подзаголовок будет <strong>h2 </strong>теги учесть, что это второй заголовок в нашем документе.\r\n<div class="code"><div id="header"> <br><div id="logo"> <br> <h1><a href="#home" title="Home Page">Roadside</a></h1> <br> <h2>Studio</h2> <br></div> <br></div> </div>\r\nОдна вещь, которую мы сделали здесь была добавлена ссылка на главную страницу в логотипе. Эта связка которую, использует почти каждый веб-дизайнер. Кроме того, хорошо известно среди пользователей, не было бы этой связи могло привести к некоторой путанице среди пользователей. Кроме того что сказано выше нечего больше говорить об этой части дизайна , так что давайте просто перейдем к части с контентом. \r\n<div class="text_abzac">Вкладки</div>\r\nПрежде, чем начать работать со вкладками вкладки, нам нужно добавить общий контейнер Div <strong>id="content"</strong>, и туда же поместим блок твиттера, блок модуля. Сделав это, мы должны думать немного о меню и как она будет структурирована. Как только это будет сделано мы должны будем подумать как лучше разместить код с меню. Лучшим способом кодирование меню вероятно является, маркированный список, даже если мы хотим сделать горизонтальном меню. Почему список? Ну список хороши для отображения пунктов с таким же значением, не выделяя их друг на другом. Это именно то, что нам надо. В каждом элементе списка, мы добавили тег- якорь. На самом деле эта якорная ссылка ни куда не ведет, она нам нужна для обучающего урока.\r\n<div class="code"><div id="content"> <br><ul id="tabs"> <br><li id="previous"> <br><a href="#previous" title="Previous">&lt;</a> <br></li> <br><li id="home" class="current"> <br><a href="#home" title="Home">Home</a> <br></li> <br> <li id="portfolio"> <br> <a href="#portfolio" title="Portfolio">Portfolio</a> <br></li> <br><li id="about"> <br> <a href="#about" title="About">About</a> <br> </li> <br><li id="contact"> <br><a href="#contact" title="Contact">Contact</a> <br> </li> <br> <li id="next"> <br> <a href="#next" title="Next">&gt;</a> <br></li> <br> </ul> <br></div> </div>\r\nВы должны заметить, что мы не помещали наши вкладки в отдельный блок Div с Id вкладок, просто потому, что тег <strong><ul></strong> выполняет это для нас уже. Вы должны всегда пытаться убирать , как можно больше ненужных блоков Div для того, чтобы сделать страницу быстрее и чище. Вы можете также спрашивать себя какую функцию выполняют, < &lt; > и < и &gt; >и что означают. Ну, это означает "меньше чем", и "больше чем" и это просто HTML значения <и>. <br>\r\n Не беспокойтесь слишком много о том, что наше горизонтальные меню со вкладки представляет собой вертикальный список на данный момент, и мы позаботимся, о том чтобы это будет выглядеть правильно, когда мы будем кодировать его в CSS. \r\n<div class="text_abzac">Центральный блок</div>\r\n"Центральный блок"- то, что я называю это блоком со слайд-шоу и приветствием. Мы создадим Div с<strong> id= "wrape-page"</strong>, чтобы убедиться, что поле будет определено корректно. Этот Div конечно, вложен в основной блок div, который мы создали для контента<strong>(id=’content’</strong>). <br>\r\n Теперь нам нужно написать код для слайд-шоу . Мы создадим контейнер с<strong> id ="slaideshow"</strong>. Внутри этого, мы создаем Div называем его "слайды"(<strong>id="slaides"</strong>), который будет содержать все изображения которые мы хотим чтобы повторялись. Имеется также ссылка , которая должна перенаправить пользователя в раздел портфолио. Div с <strong>id= "slaideshow-commands"</strong> содержит кнопки предыдущей и следующей ,и название текущего слайда. \r\n <div class="code"><div id="page-wrapper"> <br><div id="slideshow"> <br><div id="slides"> <br><a href="#portfolio.work1" title="See details" class="thumb default-slide"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" /></a> \r\n <a href="#portfolio.work2" title="See details" class="thumb"> \r\n<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> \r\n</a> <br> <a href="#portfolio.work3" title="See details" class="thumb"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /> <br></a> <br></div> <br><div id="slideshow-commands"> <br> <a href="#previous" title="Previous" id="previous-slide">&lt;</a> <br><a href="#next" title="Next" id="next-slide">&gt;</a> <br><h4> <br><a href="#portfolio.work1" title="See details" id="slide-title"> <br>Flex Engine Web Design <br> </a> <br></h4> <br></div> <br></div> <br></div> </div>\r\nВажную вещью является способ которым мы добавляем все наши изображения-слайды в наш контейнер, для того чтобы сделать просмотр легче. Однако, у нас должен быть один слайд по умолчанию. В этом случае, я добавил класс <strong>"default slide"</strong> к якорю, изображения по умолчанию . Чтобы сделать дизайн легче, просто добавить класс <strong>"thumb"</strong> к тем же изображение также. Несколько классов могут быть установлены на один элемент, разделяя их пробелом. Атрибут Alt изображения является обязательным для правильного кода. Это также будет важно для нашего слайдшоу, так как это –то, где мы пропишем название слайда. <br>\r\n Следующим шагом <strong>"page-wrapper" </strong>является отображаения сообщение и контактной информации. Это будет сделать довольно легко. Мы нуждаемся заголовке, которая будет <strong>h3</strong>, потому что это наш третий заголовок на странице, тег<strong> <p> </strong>содержащий само сообщение, и также содержащий контактную информацию. \r\n <div class="code"><div id="message"> <br><h3>We build great websites!</h3> <br><p> <br>Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus. <br>Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing, <br>metus sed luctus condimentum, quam turpis interdum tortor, <br>in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna, <br>ultricies vitae, porttitor ut, dignissim vitae, elit. <br></p> <br><p id="contact-info"> <br><span id="phone">+33 1 23 45 67 89</span> <br><span id="address"> <br>34, Avenue des Champs-<br /> <br>Elysées, 75006, Paris,<br /> <br>France <br></span> <br></p> \r\n</div> </div>\r\nТолько заметьте, как мы ставим теги <span> вокруг номера телефона и адреса, чтобы иметь возможность оформлять их по отдельности. \r\nКак только это будет сделано, пришло время для небольшой перерыва, чтобы взглянуть на то, что мы сделали: \r\n<div class="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" /> <br><meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" /> <br><meta name="author" content="Felix Boyeaux" /> <br><meta name="robots" content="all" /> <br><title>Roadside Studio</title> <br></head> <br><body> <br> <!-- STATUS BAR --> <br>\r\n<div id="status-bar"> <br><div id="status-bar-content"> <br><form action="#search" method="post" id="search-form"> <br><p> <br> <input type="text" name="query" value="Search" /> <br><input type="submit" name="submit" value="Search!" /> <br></p> <br></form> <br> <div id="status-bar-commands"> <br><p id="welcome">Welcome, Guest</p> <br><p id="action-bar"> <br><a href="#login" title="Login">Login</a> <br> <a href="#sitemap" title="Sitemap">Sitemap</a> <br> <a href="#license" title="License">License</a> <br> </p> <br></div> <br></div> <br></div> <br><!-- HEADER --> <br><div id="header"> <br><div id="logo"> <br><h1><a href="#home" title="Home Page">Roadside</a></h1> <br><h2>Studio</h2> <br></div> <br></div> <br>\r\n <!-- CONTENT --> <br><div id="content"> <br>\r\n <!-- TABS --> <br>\r\n<ul id="tabs"> <br><li id="previous"> <br><a href="#previous" title="Previous">&lt;</a> <br></li> <br><li id="home" class="current"> <br><a href="#home" title="Home">Home</a> <br> </li> <br><li id="portfolio"> <br><a href="#portfolio" title="Portfolio">Portfolio</a> <br></li> <br><li id="about"> <br><a href="#about" title="About">About</a> <br> </li> <br><li id="contact"> <br><a href="#contact" title="Contact">Contact</a> <br></li> <br> <li id="next"> <br><a href="#next" title="Next">&gt;</a> <br></li> <br></ul> <br>\r\n <!-- PAGE WRAPPER --> <br>\r\n <div id="page-wrapper"> <br>\r\n <!-- SLIDESHOW --> <br>\r\n<div id="slideshow"> <br><div id="slides"> <br><a href="#portfolio.work1" title="See details" class="thumb default-slide"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" />\r\n</a> \r\n<a href="#portfolio.work2" title="See details" class="thumb"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" />\r\n</a> \r\n<a href="#portfolio.work3" title="See details" class="thumb"><br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /></a> \r\n</div> <br><div id="slideshow-commands"> <br><a href="#previous" title="Previous" id="previous-slide">&lt;</a> <br><a href="#next" title="Next" id="next-slide">&gt;</a> <br> <h4> <br><a href="#portfolio.work1" title="See details" id="slide-title"> <br>Flex Engine Web Design <br></a> <br></h4> <br></div> <br></div> <br>\r\n <!-- MESSAGE --> <br><div id="message"> <br><h3>We build great websites!</h3> <br><p> <br>Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus. <br>Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing, <br>metus sed luctus condimentum, quam turpis interdum tortor, <br>in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna, <br>ultricies vitae, porttitor ut, dignissim vitae, elit. <br></p> <br><p id="contact-info"> <br><span id="phone">+33 1 23 45 67 89</span> <br><span id="address"> <br>34, Avenue des Champs-<br /> <br>Elysées, 75006, Paris,<br /> <br>France <br></span> <br></p> <br></div> <br></div> <br></div> <br></body> <br></html> </div>\r\nХорошо, теперь мы можем приступить к кодированию модулей. \r\n<div class="text_abzac"> Блог Модуль </div>\r\nКод является здесь достаточно простым. Нам нужно, чтобы добавить блок Div с <strong>id= "blog" </strong>и class "module", чтобы иметь возможность работать с этими двумя модулями вместе, так как они очень похожи друг на друга. Заголовок будет h4, тогда как посты будут<strong> h5</strong>. Это позволит сделать четкие очертания с твердой иерархии в нашем документе. Последнее, что нужно рассмотреть здесь сколько строк будет в каждой записи блога. Мы поместим ее в теги <strong>"blockquotes"</strong>. Почему? Хорошо даже при том что это не является правильной цитатой это все еще текст, взятый из другой части веб-сайта -, таким образом, фактически уместно использовать <strong>«blockquotes»</strong>. Мы просто поместим ссылку<strong> "читать дальше"</strong>, обернутую в тег <strong><p></strong> . \r\n<div class="code"><div class="module" id="blog"> <br><h4 class="module-header-bar">Latest entries from the blog</h4> <br><div class="blog-entry"> <br><h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5> <br><p class="meta">By Jonathan Davidson - 05 / 08 / 09</p> <br><blockquote class="content"> <br><p> <br>Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus. <br></p> <br></blockquote> <br></div> <br><div class="blog-entry"> <br><h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a> <br></h5> <br> <p class="meta">By The Team - 05 / 01 / 09</p> <br><blockquote class="content"> <br><p> <br>Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit. <br></p> <br></blockquote> <br></div> <br><div class="blog-entry"> <br><h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5> <br><p class="meta">By Nicholas Denman - 05 / 01 / 09</p> <br><blockquote class="content"> <br><p> <br>Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem. <br></p> <br></blockquote> <br></div> <br> <p id="read-more-wrapper"> <br><a href="#blog" title="Read More"> <br> Read More <br></a> <br></p> <br></div> </div>\r\nВы должны увидеть, что мы добавили теги <p> в пределах<strong> «blockquotes»</strong> . Каждая запись, обернута в свои Div, чтобы сделать интервал легче. \r\n <div class="ext_abzac">-Модуль Twitter</div>\r\nМодуль Twitter будет похож на блог модуль, так что я пойду по этому быстрее. Просто помните, что структура HTML позади, которую мы кодируем, определяется палитрой слоев в PSD . В этом случае, например, это то, на что похожа группа слоя модуля Twitter: \r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.6.jpg" width="508" height="519"></p>\r\nНам понадобится блок заголовка, и контейнеры для каждого Twitter, а также блок содержащий кнопку . Это то, какой код должен быть: \r\n<div class="code"><div class="module" id="twitter"> <br> <h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/1.png" alt="Jonathan Davidson" /> <br><h5><a href="#@JonathanDavidson" title="Jonathan Davidson">Jonathan Davidson</a></h5> <br> <blockquote> <br><p> <br>Proin et libero. Curabitur molestie mauris eu massa. <br></p> <br></blockquote> <br></div> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/2.png" alt="Nicholas Denman" /> <br>h5><a href="#@NicholasDenman" title="Nicholas Denman">Nicholas Denman</a></h5> <br><blockquote> <br><p> <br>Etiam felis ligula. <br></p> <br></blockquote> <br></div> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/3.png" alt="Jessica Marshall" /> <br><h5><a href="#@JessicaMarshall" title="JessicaMarshall">Jessica Marshall</a></h5> <br><blockquote> <br> <p> <br>Pellentesque est massa, posuere eu. <br></p> <br></blockquote> <br></div> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/4.png" alt="Ann De Wever" /> <br><h5><a href="#@AnnDeWever" title="Ann De Wever">Ann De Wever</a></h5> <br><blockquote> <br><p> <br>Nulla facilisi. Nam lacinia tristique ante. <br></p> <br></blockquote> <br></div> <br><p id="get-tweets-wrapper"> <br> <a href="#twitter"> <br>Get More Tweets! <br></a> <br></p> <br></div></pre>\r\nНичего удивительного здесь, мы все еще используем <strong>«blockquotes» </strong>для контента <strong>Twitter</strong> . Мы также связываемся со страницей , через ссылку <strong>Twitter h5</strong>. Мы также используем тот же синтаксис для <strong>" Get More Tweets "</strong> что и для ссылки <strong>"Read More"</strong>.\r\n<div class="ext_naz">Шаг Пятый – Футер</div>\r\n В последней части нашего документа HTML будет нижний блок. Это будет очень легко построить. Нам просто нужно обертку с id "footer", внутри которого содержится блок Div для изображения, а также <p>для копирайтера.\r\n<div class="code"><div id="footer"><br><div id="footer-image"></div><br><p id="footer-text"><br>Copyright © 2009 Roadside Studio<br /><br>All Rights Reserved<br></p><br></div></div>\r\nХорошо, ну хотите верьте, хотите нет, но мы действительно закончили с нашей разметкой. Вы понял, что это фактически нет тут ни чего сложного создавать правильный и действительный HTML код просто следовать следующим группам слоев. Секрет заключается в том что вы должны действовать логически и медленно, чтобы убедиться, чтобы ничего не пропустить. \r\nЭто код, который мы сделали: \r\n<div class="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" /> <br><meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" /> <br><meta name="author" content="Felix Boyeaux" /> <br><meta name="robots" content="all" /> <br><link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css" /> <br><title>Roadside Studio</title> <br></head> <br><body> <br> <!-- STATUS BAR --> <br>\r\n<div id="status-bar"> <br><div id="status-bar-content"> <br><form action="#search" method="post" id="search-form"> <br><p>\r\n<input type="text" name="query" value="Search" /> <br><input type="submit" name="submit" value="Search!" /> <br></p> <br> </form> <br> <div id="status-bar-commands"> \r\n<p id="welcome">Welcome, Guest</p> <br><p id="action-bar"> <br><a href="#login" title="Login">Login</a> <br> <a href="#sitemap" title="Sitemap">Sitemap</a> <br><a href="#license" title="License">License</a> <br> </p> <br> </div> <br></div> <br></div> <br>\r\n <!-- HEADER --> <br>\r\n<div id="header"> <br><div id="logo"> <br><h1><a href="#home" title="Home Page">Roadside</a></h1> <br> <h2>Studio</h2> <br></div> <br></div> <br>\r\n <!-- CONTENT --> <br>\r\n<div id="content"> <br>\r\n <!-- TABS --> <br>\r\n<ul id="tabs"> <br><li id="previous"> <br> <a href="#previous" title="Previous">&lt;</a> <br></li> <br><li id="home" class="current"> <br> <a href="#home" title="Home">Home</a> <br></li> <br><li id="portfolio"> <br><a href="#portfolio" title="Portfolio">Portfolio</a> <br></li> <br><li id="about"> <br> <a href="#about" title="About">About</a> <br></li> <br><li id="contact"> <br><a href="#contact" title="Contact">Contact</a> <br></li> <br><li id="next"> <br><a href="#next" title="Next">&gt;</a> <br></li> <br></ul> <br>\r\n <!-- PAGE WRAPPER --> <br>\r\n<div id="page-wrapper"> <br>\r\n <!-- SLIDESHOW --> <br><div id="slideshow"> <br><div id="slides"> <br><a href="#portfolio.work1" title="See details" class="thumb default-slide"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" />\r\n</a> \r\n <a href="#portfolio.work2" title="See details" class="thumb"> <br> <img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/2.png"alt="Concept Labs Portfolio" class="slideshow-image" /> \r\n</a> <br><a href="#portfolio.work3" title="See details" class="thumb"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /> <br></a> <br></div> <br><div id="slideshow-commands"> <br><a href="#previous" title="Previous" id="previous-slide">&lt;</a> <br><a href="#next" title="Next" id="next-slide">&gt;</a> <br><h4> <br><a href="#portfolio.work1" title="See details" id="slide-title"> <br>Flex Engine Web Design <br></a> <br></h4> <br></div> <br></div> <br>\r\n <!-- MESSAGE --> <br><div id="message"> <br><h3>We build great websites!</h3> <br><p> <br>Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus. <br>Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing, <br>metus sed luctus condimentum, quam turpis interdum tortor, <br> in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna, <br> ultricies vitae, porttitor ut, dignissim vitae, elit. <br></p> <br><p id="contact-info"> <br><span id="phone">+33 1 23 45 67 89</span> <br><span id="address"> <br>34, Avenue des Champs-<br /> <br>Elysées, 75006, Paris,<br /> <br>France <br></span> <br></p> <br></div> <br></div> <br>\r\n <!-- BLOG MODULE --> <br>\r\n<div class="module" id="blog"> <br><h4 class="module-header-bar">Latest entries from the blog</h4> <br><div class="blog-entry"> <br><h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5> <br><p class="meta">By Jonathan Davidson - 05 / 08 / 09</p> <br><blockquote class="content"> <br><p> <br>Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus. <br></p> <br></blockquote> <br></div> <br><div class="blog-entry"> <br><h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a></h5> <br><p class="meta">By The Team - 05 / 01 / 09</p> <br><blockquote class="content"> <br><p> <br>Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit. <br></p> <br></blockquote> <br></div> <br><div class="blog-entry"> <br> <h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5> <br> <p class="meta">By Nicholas Denman - 05 / 01 / 09</p> <br><blockquote class="content"> <br><p> <br>Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem. <br></p> <br> </blockquote> <br> </div> <br><p id="read-more-wrapper"> <br><a href="#blog" title="Read More"> <br>Read More <br></a> <br></p> <br></div> <br>\r\n <!-- TWITTER MODULE --> <br>\r\n<div class="module" id="twitter"> <br><h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/1.png" alt="Jonathan Davidson" /> <br><h5><a href="#@JonathanDavidson" title="Jonathan Davidson">Jonathan Davidson</a></h5> <br> <blockquote> <br><p> <br>Proin et libero. Curabitur molestie mauris eu massa. <br></p> <br></blockquote> <br></div> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/2.png" alt="Nicholas Denman" /> <br><h5><a href="#@NicholasDenman" title="Nicholas Denman">Nicholas Denman</a></h5> <br><blockquote> <br><p> <br>Etiam felis ligula. <br></p> <br></blockquote> <br> </div> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/3.png" alt="Jessica Marshall" /> <br><h5><a href="#@JessicaMarshall" title="JessicaMarshall">Jessica Marshall</a></h5> <br><blockquote> <br><p> <br>Pellentesque est massa, posuere eu. <br></p> <br></blockquote> <br></div> <br><div class="tweet"> <br><img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/4.png" alt="Ann De Wever" /> <br><h5><a href="#@AnnDeWever" title="Ann De Wever">Ann De Wever</a></h5> <br><blockquote> <br><p> <br>Nulla facilisi. Nam lacinia tristique ante. <br></p> <br></blockquote> <br></div> <br><p id="get-tweets-wrapper"> <br><a href="#twitter"> <br>Get More Tweets! <br></a> <br> </p> <br></div> <br></div> <br><div id="footer"> <br><div id="footer-image"></div> <br><p id="footer-text"> <br>Copyright © 2009 Roadside Studio<br /> <br>All Rights Reserved <br></p> <br></div> <br></body> <br></html></div>\r\n<div class="text_abzac">Шаг -CSS</div>\r\nCSS- язык один с чрезвычайно легким синтаксисом и поэтому легко научится. очень легко синтаксис и поэтому очень легко научиться. Однако прежде всего из за некорректного отображение в браузерах, это может показаться трудным. Мы постараемся использовать как можно более простой и понятный CSS, также постараться заставить его отображаться правильно во всех браузерах. Для этого есть одно понятие с которым мы должны справится. Я говорю о box модели. \r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.7.jpg" width="376" height="263"></p>\r\n Это стандартная модель W3C. Что важно понять вот то, что реальная ширина рамки не та которая определяется в свойствах ширины. Так скажем , у нас есть блок с шириной <strong>200px</strong>, <strong>25px</strong> отступы с обеих сторон и рамкой , которая <strong>5px</strong> толстые вокруг этого блока. Фактическая отображаемая ширина блока будет <strong>260px</strong> а не <strong>200px</strong>, как хотелось бы видеть. Но это хорошо, если мы хотим видеть блок, строго шириной<strong> 200px</strong>, мы только должны установить ширину в <strong>140px </strong>и все. Это избежит большого количества головной боли в дальнейшем. \r\nХорошо, теперь, когда Вы знакомы с понятием блока модулей W3C, мы должны кодировать наш дизайн сайта.\r\n<div class="text_abzac">Reset CSS</div>\r\nЯ говорю о браузерной изменчивости, которые сами меняют настройки браузера от края <strong>10px</strong> для каждого блока, некоторые установив ее на 15px.. Это, может очевидно, вызвать некоторые проблемы при кодировании, и мы можем очень долго копаться в нашем коде, искав при этом ошибки. Чтобы решить эту проблему и, следовательно, помочь нам будет использовать CSS Reset. Есть многие версии , но, по моему правильно будет использовать версию Эрика Мейера . Мне просто нравится, как она работает. После этого все работает. Вы можете взять его здесь: http://meyerweb.com/eric/tools/css/reset/. Я решил сделать это в свой CSS файл под названием reset.css и теперь добавим его в папку CSS в наш шаблон.\r\n<div class="code"> html, body, div, span, applet, object, iframe, <br>\r\n h1, h2, h3, h4, h5, h6, p, blockquote, pre, <br>\r\n a, abbr, acronym, address, big, cite, code, <br>\r\ndel, dfn, em, font, img, ins, kbd, q, s, samp, <br>\r\nsmall, strike, strong, sub, sup, tt, var, <br>\r\nb, u, i, center, <br>\r\n dl, dt, dd, ol, ul, li, <br>\r\n fieldset, form, label, legend, <br>\r\n table, caption, tbody, tfoot, thead, tr, th, td { <br>\r\n margin: 0; <br>\r\n padding: 0; <br>\r\n border: 0; <br>\r\n outline: 0; <br>\r\n font-size: 100%; <br>\r\n vertical-align: baselinebaseline; <br>\r\n background: transparent; <br>\r\n } <br>\r\n body { <br>\r\n line-height: 1; <br>\r\n } <br>\r\n ol, ul { <br>\r\n list-style: none; <br>\r\n } <br>\r\n blockquote, q { <br>\r\n quotes: none; <br>\r\n } <br>\r\n blockquote:before, blockquote:after, <br>\r\n q:before, q:after { <br>\r\n content: ''''; <br>\r\n } <br>\r\n /* remember to define focus styles! */ <br>\r\n :focus { <br>\r\n outline: 0; <br>\r\n } <br>\r\n /* tables still need ''cellspacing="0"'' in the markup */ <br>\r\n table { <br>\r\n border-collapse: collapse; <br>\r\n border-spacing: 0; <br>\r\n } </pre>\r\n Я просто проредактировал содержимое и удалил элементы, которые нам помешали пройти валидацию .<br>\r\n Если вы загрузите файл <strong>index.html</strong> в вашем браузере, вы увидите, что ничего не изменилось. Это связано с тем, что мы еще не добавили ссылку на таблицу стилей в нашем HTML. Мы не будем добавлять ссылку в тег <strong> <head></strong>, нашего сайта. Вместо этого, мы будем просто подгружать файл<strong> reset.css</strong> из нашего основного стиля с помощью команды <strong>@impor</strong>t, когда мы начинаем его построение.\r\n<div class="text_abzac"> Typography CSS </div>\r\nЯ обычно разделяю мой CSS на две части. Один, из которых контролирует структуру страницы, это мой основной стиль таблицы , и один контролирует оформление . Это включает в себя выравнивание текста, цвет шрифта, размер шрифта, расстояние между буквами, высоту строки и так далее. Это хорошая вещь, поскольку это дает вам больше гибкости в процессе кодирования. Допустим, вы хотите изменить в <strong>h1</strong> размер шрифта на<strong> 48px</strong> вместо <strong>36px</strong>, а вместо того чтобы начинать копать в <strong>style.css</strong> что, вероятно, несколько сотен строк, вы можете просто открыть ваш стиль Typography , найти стиль, связанный с тегом <strong>h1 </strong>, изменить размер шрифта, и все! <br>\r\n При кодировании нашей таблицей стилей оформления , наша разметка в Photoshopт будет чрезвычайно полезна. Мы можем взять <strong>Type Tool (T)</strong> в Photoshop, а также начать выделение различных текстовых блоков нашего дизайна. Таким образом, мы видим, что h1 будет иметь размер шрифта 48px, цвет <strong># 4d4d4d</strong>, и набор шрифтов для <strong>Myriad Pro</strong>. Этот последний пункт вызывает некоторые проблемы. Myriad Pro не стандартный шрифт в Сети, поэтому мы не можем определить семейство шрифтов, начиная с <strong>Myriad Pro</strong> не думаю, что все увидят наш дизайн так, как должно. Мы будем решать эту проблему в дальнейшем использовать некоторые более продвинутые методы в Сети, но сейчас мы просто определим семейство шрифтов начинающиеся с Myriad Pro включено и некоторые другие запасные шрифты в случае, если у пользователя не установлен <strong>Myriad Pro</strong> на его компьютере. <br>\r\n Если мы будем продолжать такое, сканирование через PSD, чтобы получить все сведения о шрифте, мы видим, что наши теги <strong>h3</strong> должны иметь размер шрифта <strong>24px</strong>, что наши теги <strong> h5</strong> должны быть цветом <strong># 6eb9cc</strong> и так далее. Если исходить логически, это то, что мы придумали:\r\n<pre class="code">h1 { <br>\r\n color: #4d4d4d; <br>\r\n font-family: "Myriad Pro", Helvetica, Arial, sans-serif; <br>\r\n font-size: 48px; <br>\r\n font-weight: normal; <br>\r\n} <br>\r\nh1 a { color: #4d4d4d; text-decoration: none; } <br>\r\nh2 { <br>\r\n color: #6ec9cc; <br>\r\n font-family: "Myriad Pro", Helvetica, Arial, sans-serif; <br>\r\n font-size: 12px; <br>\r\n letter-spacing: 28px; <br>\r\n text-transform: uppercase; <br>\r\n} <br>\r\nh3 { <br>\r\n color: #6ec9cc; <br>\r\n font-family: "Myriad Pro", Helvetica, Arial, sans-serif; <br>\r\n font-size: 24px; <br>\r\n font-weight: normal; <br>\r\n} <br>\r\nh4 { <br>\r\n color: #ffffff; <br>\r\n font-family: Arial, Helvetica, sans-serif; <br>\r\n font-size: 12px; <br>\r\n font-weight: normal; <br>\r\n text-align: center; <br>\r\n} <br>\r\nh4 a { color: #ffffff; text-decoration: none; } <br>\r\nh5 { <br>\r\n color: #6ec9cc; <br>\r\n font-family: "Myriad Pro", Helvetica, Arial, sans-serif; <br>\r\n font-size: 18px; <br>\r\n font-weight: normal; <br>\r\n} <br>\r\nh5 a { color: #6ec9cc; text-decoration: none; } <br>\r\n/* Paragraph styling */ <br>\r\np { <br>\r\n color: #525252; <br>\r\n font-family: Arial, Helvetica, sans-serif; <br>\r\n font-size: 12px; <br>\r\n} <br>\r\np.meta { color: #707070; font-size: 10px; text-align: rightright; } <br>\r\np#footer-text { text-align: center; } <br>\r\ndiv#message p { color: #4d4d4d; line-height: 20px; } <br>\r\n/* Link styling */ <br>\r\na { <br>\r\n color: #999999; <br>\r\n text-decoration: none; <br>\r\n} <br>\r\na:hover { text-decoration: none; } <br>\r\np#action-bar a { color: #ffffff; } <br>\r\np#action-bar a:hover { color: #6eb9cc; text-decoration: none; } </div>\r\nЯ не думаю, что есть то что я должен объяснить. Это только самая основная часть стиля. Обратите внимание, что я определяю стиль стандартным тегом <p> стандартными тегами-якоря, прежде чем начать определять появление более конкретных блоков текста, таких, как мета- параграфы, например. Это часть кодирования "Не повторяй Себя". Я решил использовать резервные шрифты, <strong>Helvetica и Aria</strong>l. Они не большие заменители для <strong>Myriad</strong>, но мы, вероятно, в них больше не нуждаемся, во всяком случае, как я потом объясню. Это просто чтобы быть уверенным. \r\nОдной вещью, о которой я хочу поговорить здесь о стиле кодирования. Конечно, отступы имеют важное значение для читаемости кода, но не только. На первый взгляд, вы можете думать, мой код выглядит немного грязным, но если вы посмотрите на него более внимательно, то заметите, что я придерживаюсь очень строгого синтаксиса. Первым пунктом , который необходимо разместить свойства в алфавитном порядке. Это очень помогает нахождению свойства, если вы будете изменять его в дальнейшем. Вторым пунктом , который необходимо сделать , выставить свои стили на одной линии, если вы не использую более трех . \r\nСамое главной вещью в кодировании является последовательность. Вам должен нравится ваш стиль кодирования. Я не говорю, мой путь является лучшим, я просто хотел таким образом призываю вас, однако, найти ваш собственный стиль в кодировании еще быстрым! \r\n<div class="text_abzac">Настройка наших основных стилей </div>\r\n Когда мы разбирались с reset, я вас просил не подключать его непосредственно в HTML файл с помощью ссылки, потому что мы уже собирались вызвать его из наших основного стиля. Вы могли бы, очевидно, включать все CSS файлы непосредственно в коде HTML, но я решил не делать этого, так как это сохраняет верхнею часть в чистоте. <br>\r\n Мы должны будем создать наш основной стиль. Я обычно называют ее <strong>style.css</strong>, но ее можно назвать main.css, master.css, screen.css или любой другой. В рамках этого стиля, мы должны включить первую нашу строку сброса, это наша reset.css. Для этого я использую правило <strong>@import</strong> . Ваши первые строчкой в <strong>style.css</strong> файле должно быть следующее:\r\n<div class="code">@import url(''reset.css''); <br>\r\n@import url(''typography.css''); </div>\r\nС учетом этих нескольких строк, мы включаем наши две таблицы стилей в файл style.css, и нам надо только подцепить только одну таблицу в верхнею часть странице . \r\n<div class="code"> <link rel="stylesheet" media="screen" type="text/css" title="Style" <br>href="Design%20and%20Code%20a%20Slick%20Website%20From%20Scratch%20–%20Part%20II%20_%20Nettuts%2B_files/style000.htm"> </div>\r\nЕсли мы посмотрим на наш веб-сайт в настоящее время, вот что мы увидим:\r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.8.jpg" width="624" height="459"></p>\r\n<div class="text_abzac">Основная часть(body) </div>\r\nМы только должны установить основной стиль для тега<strong> <body> </strong>включающий в себя центрирование дизайна, используя при этом margin:auto, устанавливая при этом фоновой цвет , и устанавливая ширину в 100%. \r\n<div class="code">\r\nbody { <br>\r\n background-color: #f8f8f8; <br>\r\n margin: auto; <br>\r\n width: 100%; <br>\r\n } \r\n</div>\r\n<div class="text_abzac">Строка состояния </div>\r\nКак всегда, мы будем просто начать сверху, и продвигать наш дизайн вплоть до футера. Мне нравится кодировать и разделять на блоки. Начнем например с заголовка, а затем сделать перерыв, проектирование контента и так далее. Это помогает мне в мотивации Этот подход включает полное завершение одного раздела и начинание другого. <br>\r\n Поэтому, прежде чем начать фактические CSS кодирования в строке состояния, давайте возьмем ннебольшую паузу и посмотрим, какие изображения у нас должны быть. Первым из них является фоновый рисунок, который представляет собой простой градиент, который будет повторяться по оси х. Второй представляет собой основу для строки действий по сайту: прямоугольник с закругленными углами.. Последнее изображение которое нам нужно - строка состояния и фон для окна поиска. \r\nДавайте начнем с фонового изображения. Как я уже сказал, мы будем повторять это изображение по оси х, так что нам понадобится изображение в <strong>1px</strong> в шириной. Это решительно сократить его размер. Итак, начнем, возьмите инструмент <strong>Column Marquee Tool</strong> в Photoshop, перейдите в группу слоев <strong>Статус Бар </strong>, скройте слой<strong> "Граница" </strong>, и объедините вместе слои<strong> "Фон" и "Тень"</strong>. Как только это будет сделано, выберите кусок этого недавно созданного слоя с выбранным инструментом, скопируйте ее и вставьте его в новый документ. Этот документ должен быть <strong>1* 50px</strong>. Из-за некорректной особенности блочной модели, мы должны уменьшить эту высоту до 40px. Просто уберите с верху <strong>10 пикселей</strong>, а затем сохранить его для <strong>веб и устройств(Web & Devices) (Alt + Shift + Ctrl + S) </strong>в 24 PNG, и назовите ее <strong>status-bar-bg.png</strong>.\r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.9.jpg" width="624" height="333"></p>\r\nТеперь перейдем к фону и меню.<br>\r\n Откройте группу слоев <strong>"Строка действий"</strong> и выберите слой, под называнием <strong>"Фон строки действий"</strong>. Выделите весь документ <strong>(Ctrl + A)</strong>, скопируйте слой и вставьте его в новый документ. Вам нужно растеризовать форму, чтобы скопировать ее правильно. Не забудьте установить снова прозрачность слоя до <strong>55%</strong>. Сохраните снова для <strong>веб и устройств(Web & Devices)</strong> , и называют его <strong>action-bar-bg.png.</strong>\r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.10.jpg" width="379" height="211"></p>\r\nЗаключительным этапом буде т преобразования в дизайн- изображения в поле поиска. Просто найдите группу слоев <strong>"поле поиска",</strong> выключите слой . <strong>«Поиск»</strong>, затем слейте слой <strong>«форма поиска»</strong> со слоем <strong>«лупа»</strong>. Опять же, выделить весь документ Ctrl + A, а также скопировать его на новый документ. Сохраните его в<strong> search-field.png.. </strong>\r\n<p align="center"><img src="скриншоты/дизайн сайта с нуля часть 2/img-1.12.jpg" width="347" height="209"></p>\r\nХорошо, теперь, что мы сделали все изображениями, мы можем приступить к кодированию. Первое, что мы должны сделать, это создать контейнер. Установите их ширину и высоту, а также фоновое изображение отступы. \r\n<div class="code">\r\n div#status-bar { <br>\r\n background: url(''../img/status-bar-bg.png'') repeat-x; <br>\r\n border-bottom: 2px groove #ffffff; <br>\r\n height: 40px; <br>\r\n width: 100%; <br>\r\n } \r\n</div>\r\nСтиль grove для рамок смотрится довольно хорошо так как мы его сделали в в Photoshop. Мы установили ширину <strong>40px</strong> хотя наш фон шириной в <strong>50px</strong>, это все из-за блочной модели. <br>\r\n Теперь мы хотим убедиться , что содержание этой строки находится по центру. Дело в том, что мы хотим, чтобы фоне растянулся шириной в <strong>100%</strong> , а содержание должно быть в центре. Именно поэтому мы использовали Div, которая содержит почти все элементы , что мы вставляем в нашу статусную строку. Мы должны применить к нему ширину<strong> 800px</strong>, а также некоторый отступ.\r\n<div class="code">\r\ndiv#status-bar-content { <br>\r\n margin: 10px auto 0px auto; <br>\r\n width: 800px; <br>\r\n } \r\n</div>\r\nДля того, чтобы поместить на этой статусной строки, слева и справа, правильно, мы установим свойства ширины и плавающий элемент(float).\r\n<div class="code">\r\n div#status-bar-commands { <br>\r\n width: 400px; <br>\r\n } <br>\r\n form#search-form { <br>\r\n float: rightright; <br>\r\n width: 200px; <br>\r\n } \r\n</div>\r\nТеперь нам нужно придать стиль меню в верхней части, для того чтобы отцентровать меню, мы должны дать приветственному сообщению оптикать с лева . Мы также должны придать фоновое изображение статусной строке.. Отступы и используются для того чтобы смотрелось все элементы как они и должны. Помните про блочную модель, которая устанавливается в свойствах! Это является причиной, почему мы устанавливаем высоту меню в <strong>14px</strong> вместо <strong><br>\r\n30px</strong>; у нас еще в запасе <strong>8px</strong>.\r\n<div class="code">\r\n p#welcome { <br>\r\n float:left; <br>\r\n padding-top: 7px; <br>\r\n width: 150px; <br>\r\n } <br>\r\n p#action-bar { <br>\r\n background: url(''../img/action-bar-bg.png'') no-repeat; <br>\r\n height: 14px; <br>\r\n margin-left:200px; <br>\r\n padding: 8px 28px; <br>\r\n width: 154px; <br>\r\n } <br>\r\n p#action-bar a:before { <br>\r\n content: ''| ''; <br>\r\n } <br>\r\n p#action-bar a[title="License"]:after { <br>\r\n content: '' |''; <br>\r\n } \r\n</div>\r\nМы добавляем "|" для отделения пунктов меню. Я решил сделать это, поскольку это более семантически правильно. Действительно, эти вставки не имеют ни какого отношение к нашему контенту, таким образом помещение их в HTML не было бы правильным . Обратите внимание на довольно сложный последний селектор, который выделяет последнею ссылку, и добавляет <I> как перед ней так и после нее.<br>\r\nПоследним пунктом будет стиль поле поиска и добавление фонового рисунок к нему. Нам нужно восстановить стиль по умолчанию, чтобы скрыть кнопку <strong>«submit»</strong> . Это может быть, не самое лучшее, когда мы говорим о доступности, но все же, в этом случае я решил поставить на первое место дизайн.\r\n<div class="code">\r\n form#search-form input[type="text"] { <br>\r\n background: url(../img/search-field.png) no-repeat; <br>\r\n border:none; <br>\r\n height:20px; <br>\r\n padding: 5px 0px 0px 30px; <br>\r\n & | |
