| » Меню сайта |
Разделы сайта
Шаблоны
Скрипты
Статьи
Графика
|
|
Главная » 2008 » Сентябрь » 10 » В этом уроке я расскажу, как сделать HTML-код страницы
В этом уроке я расскажу, как сделать HTML-код страницы | 10.Сен.2008 | 17:45:23 |
В этом уроке я расскажу, как сделать HTML-код страницы, если вы полностью нарисовали её в Photoshop’е.
P.S: Прошу сильно не ругать, т.к. это мой первый урок.
Первое – это собственно нарисовать(найти/скачать) .psd файл будущей страницы.
p.s:
не рекомендую строить код, имея JPEG картинку сайта. Низкое качество
сильно усложнит задачу. Используйте только высококачественные материалы.
Оригинал, над которым я работал:
(шаблон сайта от talk-mania)
Шаблон предоставил некий XuT , за что ему огромное спасибо и +
Самой первое, что нужно сделать – это конечно же фон. Как видно из картинки, фон залит точечной(2x2) текстурой.
Выделяем добротный “кусок” текстуры фона
(x2 zoom)
P.S:
Не делайте картинку фона слишком маленькою, т.к. понадобится много
времени браузеру, чтобы залить картинкой весь фон. Лучше сделать
картинку побольше и потерять лишние 200-300 байт, но выиграть по
производительности.
Далее начинаем писать HTML и CSS-код
Файл index.htm:
HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> <!--Привязка CSS стиля style.css-->
</head>
<body>
</body>
</html>
Файл style.css:
HTML body {
background: url('background.gif');
}
Теперь у нас есть страница, залита фоном. Теперь приступим к главному.
Как
мы видим, основное содержание сайта размещается по центру. Делаем
центровое выравнивание, а делать мы это будем следующим путем:
Все элементы стиля будут помещены в тег div, который будет отцентрован на странице.
HTML …
<body>
<div id="main"> <!--параметр id указывает на привязку к стилю main -->
</div>
</body>…
Также, добавляем CSS код
HTML body {
background: url('background.gif');
text-align: center;
}
#main {
margin: 0 auto
}
“text-align: center” - параметр стиля для отцентровки содержимого.
“margin: 0 auto”
- параметр, выставляющий поля. Верхнее поле – 0, все остальные auto.
Нужно для работоспособности отцентровки в браузерах Netscape, Opera,
Firefox.
Теперь у нас уже есть страница с фоном и центрованием. Идем дальше…
Самой тяжелой частью страницы является большая картинка сверху. Её мы сейчас и будем добавлять в сайт.
Выделяем эту картинку вместе из лучами света, исходящими от “планеты”.
Сохраняем это в отдельный GIF файл под именем main.gif. При сохранении, используйте следующие установки:
Пишем HTML…
HTML …
<div id="main">
<img src="main.gif"/>
</div>
…
Сохраняем,
смотрим, и что мы видим? А мы видим, что фоновое изображение не
сходится с только что сохраненным, но это пока мы оставим.
(x4 zoom)
Также
мы видим, что верх нашей картинки находится чуток ниже верха самой
страницы. Для этого добавляем ещё один параметр в таблицу стилей.
HTML body {
margin: 0 0 0 0;
background: url('background.gif');
…
Дальше перейдем к основному, контентному блоку.
Добавляем HTML код:
HTML …
<img src="main.gif"><div id="content">
</div>
</div>
...
CSS:
HTML #content {
background: #919191;
width: 556px;
}
Для
определения числа, которое нужно написать после width, выделите
контентный блок по ширине и посмотрите число “W” на вкладке “info”
P.S: Для того, чтобы число “W” отображалось в единицы “пиксели”, необходимо в настройках указать соответствующий тип линейки.
Для того, чтобы немного расширить по вертикали контентную часть(для наглядности), добавьте в тег:
HTML …
<img src="main.gif"><div id="content">
<br/><br/><br/><br/><br/><br/>
</div>
…
На данном этапе, у вас должно быть что-то похоже на это:
Сейчас мы наблюдаем ещё одно несходство, которое заключается в том, что контентная часть не сходится с рисунком.
P.S: В Oper’е и Firefox если контентный блок не стоит по центре, добавьте в CSS:
HTML #content {
margin: 0 auto;
background: #919191;
Займемся исправлениями. Первым делом, немножко поровняем рисунок. Для этого внесем некие поправки в HTML и CSS
HTML:
HTML … < div id=" main"> <img id=”top_image” src=" main.gif">< div id=" content"> …
CSS;
HTML #top_image {
margin-right: Xpx;
}
Вместо X поставьте 1 и постепенно увеличивайте пока рисунок не станет на место.
Но тут мы опять видим несходство в разных браузерах.
P.S: Возможно различия проявятся не у всех.
Для этого, чтобы исправить нужно:
Если вы ровняли рисунок(увеличивали X) и он ровно стоит в Oper’e, тогда напротив текущей “margin-right: Xpx;” добавьте “!important”.
Над этой строчкой введите новую “margin-right: Xpx;” меняйте в ней X и ровняйте рисунок опираясь на Internet Explorer
Если
вы ровняли рисунок(увеличивали X) и он ровно стоит в Internet
Explorer’e, тогда продублируйте строчку “margin-right: Xpx;” и
в нижней добавьте “!important”, меняйте в ней X и ровняйте рисунок опираясь на Oper’у или Firefox.
ПРОДОЛЖЕНИЕ СЛЕДУЕТ.
|
|
Категория: Статьй и уроки |
Просмотров: 655 |
Добавил: CorsaR
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
Копирование материалов разрешено,