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