Переход от таблицы . (Часть 1 - Создание макета) 24 октября 2008 Брэди Feiereisel · 3 Комментария
Хорошо, что мы будем здесь выполнении заботится о твоем Photoshop макет и отображение его с CSS - дел, вместо того чтобы по умолчанию в Photoshop HTML - таблиц. Для того, чтобы быть успешным в этом уроке вы должны уже знаем, верстка, и некоторый опыт CSS Полезно также.
Давайте начнем с основ. Вместо того чтобы использовать HTML и использования ячеек таблицы провести нашу фоновых изображений для формирования макета, мы будем использовать с <div> ", который может действовать так же, но гораздо легче редактировать и форматировать для каждого <div> мы будет подключение идентификатор, поэтому они знают, как веб-сайт для форматирования ячейки. Так формате верстка теперь <div id="idname here"> </ DIV>. Теперь мы добрались до набора параметров ячейки, совпадает идентификатор имя, это идет внутри <head>.
Начиная его, я установил цвет фона и изображения. Для этого я решил использовать
который находится на http://urbanm.net/blog/bg.jpg, CSS кодирования для этого является
тело {
фонового изображения: URL (http://urbanm.net/blog/bg.jpg);
фон-повторить: повторять-х;
фонового цвета: # 010066;
}
То, что это делает, установка любой HTML аспект, который был закодирован с <body> иметь фоновое изображение повторяться себя горизонтально, пока не заполняет весь браузер, а также фоновое изображение, чтобы соответствовать нижней части градиент положить по образу Нашему, так, чтобы она имеет гладкую передачу.
Вы должны иметь что-то вроде ЭТО
Теперь мы должны беспокоиться о фактическом содержании сайта. Я обычно все держать по центру, так что вам придется выравнивание по центру все, что в вашем <body> элемента. Вы можете добавить <center> после <body>. Так что теперь ваше тело HTML должен выглядеть следующим образом:
<body>
<center>
</ CENTER>
</ Body>
Время поставить наш баннер на сайт. Мы должны создать ячейку, которая будет содержать баннер, между ур теги <center> позволяет войти в нашу первую ячейку, поставив <div id="banner"> </ DIV> там. Без настройки параметров идентификатор с надписью "баннер" ничего не появится, поэтому мы должны установить параметр этой ячейке с CSS. Я буду с этим изображением, как мой баннер.
# {Баннер
фонового изображения: URL (http://urbanm.net/blog/banner.png);
высота: 200px;
Ширина: 800px;
}
Что выше говорит, что любой HTML-объект, который имеет идентификатор меткой баннер будет выше фонового изображения, и он также будет иметь высоту и ширину баннера образ, который, случается, 200px на 800px. Наш сайт набирает сейчас должна выглядеть примерно так ЭТО .
Теперь я, как правило, положить на панели навигации, но я буду обсуждать этот шаг в Части 2 данного руководства.
Пропуск панель навигации, мы перейдем к содержанию коробки, которая будет содержать всю информацию, наши. Делая свой образ, помните, что ваша будет сращивания его в 3 разных местах, верхняя часть, которая будет содержать заголовок, для меня, я болею за закругленными краями. Второй сращивание у вас будет будет содержание изображение, которое будет повторяться вертикально для того, чтобы заполнить пространство вы заполнили всю информацию на. Третий сращивания является подвал, еще раз я фанат закругленными краями. Вот три изображения я использовал для этой части. Заголовок - Содержимое Repeater - Footer .
Когда это все вместе взятые он образует это поле. Теперь мы должны создать HTML-кодирования, так что она позволяет формировать изображения окна правильно. Мы будем использовать четыре общего числа клеток формировать наше содержание коробки. Первая из четырех намерен провести три другие клетки внутри него. Цель этой ячейки, вы поймете позже с большим пониманием, но это будет в основном позволяет изменять стили текста на разных страницах вы будете делать, если необходимо. Так давайте начнем HTML, это новый HTML.
<body>
<center>
<div id="banner"> </ P>
<div id="indexcontent">
<div id="header"> </ P>
<div id="contentrepeater"> </ P>
<div id="footer"> </ P>
</ P>
</ CENTER>
</ Body>
Теперь у нас есть клетки создали, как мы хотим, но теперь мы должны установить идентификатор параметров для каждой этикетке. Это должно выглядеть примерно так.
# {Indexcontent
Дисплей: блок;
Ширина: 600px;
}
# Indexcontent # {заголовок
высота: 35px;
Ширина: 600px;
фонового изображения: URL (http://urbanm.net/blog/header.png);
фон-повторить: не повторять;
}
# Indexcontent # {contentbg
фонового изображения: URL (http://urbanm.net/blog/content.png);
фон-повторить: повторять-у;
высота: 150px;
Ширина: 600px;
}
# Indexcontent # {нижний колонтитулы
фонового изображения: URL (http://urbanm.net/blog/footer.png);
фон-повторить: не повторять;
высота: 37px;
Ширина: 600px;
}
Ух ты - то есть много делать в один шаг не так ли? Позвольте мне объяснить это для вас и помочь вам.
Начиная с № indexcontent, мы устанавливаем ширину его на 600px что и мои изображения содержание коробки. Мы не ставим высоту, так что он может разворачивать и сворачивать в зависимости от того, сколько у вас есть содержание в клетках внутри него. Мы установить дисплей на блоке, так что клетка будет расширяться и правильное количество пикселей по высоте.
Затем мы получили indexcontent # # заголовка, размеры устанавливаются в соответствии с размером и у нас есть фоновое изображение устанавливается в нужное место.
Чем мы # # indexcontent contentbg, у нас есть правильное изображение, выбранное в качестве нашего фонового изображения, и мы должны установить его повторить-у, так что она повторяет себя вертикально, чтобы соответствовать размеру ячейки. Я выбрал 150px для его высота, именно так вы, ребята, видите повторять эффект, вы должны изменить это, чтобы соответствовать всем содержанием у вас есть в нем.
Наконец, мы имеем # # indexcontent подвал, который так же, как заголовок.
К этому моменту вы должны иметь ваш основная схема создана для Вас, чтобы закончить!
Оставайтесь с нами, часть 2, чтобы объяснить, как сделать панель навигации.
Комментарии
3 Ответа на "Переход от таблицы . (Часть 1 - Создание макета) "
Найти TutorialBlog учебники по ...
Социальное доказательство
24 октября 2008 Брэди Feiereisel · 3 Комментария
Хорошо, что мы будем здесь выполнении заботится о твоем Photoshop макет и отображение его с CSS - дел, вместо того чтобы по умолчанию в Photoshop HTML - таблиц. Для того, чтобы быть успешным в этом уроке вы должны уже знаем, верстка, и некоторый опыт CSS Полезно также.
Давайте начнем с основ. Вместо того чтобы использовать HTML и использования ячеек таблицы провести нашу фоновых изображений для формирования макета, мы будем использовать с <div> ", который может действовать так же, но гораздо легче редактировать и форматировать для каждого <div> мы будет подключение идентификатор, поэтому они знают, как веб-сайт для форматирования ячейки. Так формате верстка теперь <div id="idname here"> </ DIV>. Теперь мы добрались до набора параметров ячейки, совпадает идентификатор имя, это идет внутри <head>.
Начиная его, я установил цвет фона и изображения. Для этого я решил использовать
который находится на http://urbanm.net/blog/bg.jpg, CSS кодирования для этого является
тело {
фонового изображения: URL (http://urbanm.net/blog/bg.jpg);
фон-повторить: повторять-х;
фонового цвета: # 010066;
}
То, что это делает, установка любой HTML аспект, который был закодирован с <body> иметь фоновое изображение повторяться себя горизонтально, пока не заполняет весь браузер, а также фоновое изображение, чтобы соответствовать нижней части градиент положить по образу Нашему, так, чтобы она имеет гладкую передачу.
Вы должны иметь что-то вроде ЭТО
Теперь мы должны беспокоиться о фактическом содержании сайта. Я обычно все держать по центру, так что вам придется выравнивание по центру все, что в вашем <body> элемента. Вы можете добавить <center> после <body>. Так что теперь ваше тело HTML должен выглядеть следующим образом:
<body>
<center>
</ CENTER>
</ Body>
Время поставить наш баннер на сайт. Мы должны создать ячейку, которая будет содержать баннер, между ур теги <center> позволяет войти в нашу первую ячейку, поставив <div id="banner"> </ DIV> там. Без настройки параметров идентификатор с надписью "баннер" ничего не появится, поэтому мы должны установить параметр этой ячейке с CSS. Я буду с этим изображением, как мой баннер.
# {Баннер
фонового изображения: URL (http://urbanm.net/blog/banner.png);
высота: 200px;
Ширина: 800px;
}
Что выше говорит, что любой HTML-объект, который имеет идентификатор меткой баннер будет выше фонового изображения, и он также будет иметь высоту и ширину баннера образ, который, случается, 200px на 800px. Наш сайт набирает сейчас должна выглядеть примерно так ЭТО .
Теперь я, как правило, положить на панели навигации, но я буду обсуждать этот шаг в Части 2 данного руководства.
Пропуск панель навигации, мы перейдем к содержанию коробки, которая будет содержать всю информацию, наши. Делая свой образ, помните, что ваша будет сращивания его в 3 разных местах, верхняя часть, которая будет содержать заголовок, для меня, я болею за закругленными краями. Второй сращивание у вас будет будет содержание изображение, которое будет повторяться вертикально для того, чтобы заполнить пространство вы заполнили всю информацию на. Третий сращивания является подвал, еще раз я фанат закругленными краями. Вот три изображения я использовал для этой части. Заголовок - Содержимое Repeater - Footer .
Когда это все вместе взятые он образует это поле. Теперь мы должны создать HTML-кодирования, так что она позволяет формировать изображения окна правильно. Мы будем использовать четыре общего числа клеток формировать наше содержание коробки. Первая из четырех намерен провести три другие клетки внутри него. Цель этой ячейки, вы поймете позже с большим пониманием, но это будет в основном позволяет изменять стили текста на разных страницах вы будете делать, если необходимо. Так давайте начнем HTML, это новый HTML.
<body>
<center>
<div id="banner"> </ P>
<div id="indexcontent">
<div id="header"> </ P>
<div id="contentrepeater"> </ P>
<div id="footer"> </ P>
</ P>
</ CENTER>
</ Body>
Теперь у нас есть клетки создали, как мы хотим, но теперь мы должны установить идентификатор параметров для каждой этикетке. Это должно выглядеть примерно так.
# {Indexcontent
Дисплей: блок;
Ширина: 600px;
}
# Indexcontent # {заголовок
высота: 35px;
Ширина: 600px;
фонового изображения: URL (http://urbanm.net/blog/header.png);
фон-повторить: не повторять;
}
# Indexcontent # {contentbg
фонового изображения: URL (http://urbanm.net/blog/content.png);
фон-повторить: повторять-у;
высота: 150px;
Ширина: 600px;
}
# Indexcontent # {нижний колонтитулы
фонового изображения: URL (http://urbanm.net/blog/footer.png);
фон-повторить: не повторять;
высота: 37px;
Ширина: 600px;
}
Ух ты - то есть много делать в один шаг не так ли? Позвольте мне объяснить это для вас и помочь вам.
Начиная с № indexcontent, мы устанавливаем ширину его на 600px что и мои изображения содержание коробки. Мы не ставим высоту, так что он может разворачивать и сворачивать в зависимости от того, сколько у вас есть содержание в клетках внутри него. Мы установить дисплей на блоке, так что клетка будет расширяться и правильное количество пикселей по высоте.
Затем мы получили indexcontent # # заголовка, размеры устанавливаются в соответствии с размером и у нас есть фоновое изображение устанавливается в нужное место.
Чем мы # # indexcontent contentbg, у нас есть правильное изображение, выбранное в качестве нашего фонового изображения, и мы должны установить его повторить-у, так что она повторяет себя вертикально, чтобы соответствовать размеру ячейки. Я выбрал 150px для его высота, именно так вы, ребята, видите повторять эффект, вы должны изменить это, чтобы соответствовать всем содержанием у вас есть в нем.
Наконец, мы имеем # # indexcontent подвал, который так же, как заголовок.
К этому моменту вы должны иметь ваш основная схема создана для Вас, чтобы закончить!
Оставайтесь с нами, часть 2, чтобы объяснить, как сделать панель навигации.
Комментарии
3 Ответа на "Переход от таблицыНайти TutorialBlog учебники по ...
Социальное доказательство
У людей все еще используют тег? Почему бы не использовать CSS в центр содержания?
^ Это должно быть в центре метки.
Сообщение действительно имеет смысла для меня ..., но если вы попытаетесь проверить некоторые мои видео-уроки в связи с этим CSS ... наверняка, вы узнаете больше ... из него ...