|
|
21.11.2013, 11:53
|
|
Михаил
Зарегистрирован:
2011-03-12
Сообщений: 45
|
Здравствуйте.
Переверстывал сайт с таблиц на блоки. Поскольку делал, то первый раз нужно мнение профессионала о результате. Интересует в первую очередь кроссбраузерность примененных приемов верстки и пригодность к последующему расширению. Верстка совсем короткая. Может кто подскажет более надежные и простые приемы - буду благодарен.
Еще раз, спасибо, всем ответившем.
index.html
Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Противопожарные работы | Компания «Противопожарные работы» - Челябинск</title>
<link rel="stylesheet" rev="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class=wrapper>
<div class="logo">
<img src="http://www.ogne-zashita.ru/ognetush/images/logo.png" width="138" height="130" alt="Логотип Компании «Противопожарные работы»">
</div>
<div class=block-top>
<div class="menu">
<span class="item-menu">
<a href="#" title="О компании">О компании</a>
<a href="#" title="Услуги">Услуги</a>
<a href="#" title="Каталог товаров">Каталог товаров</a>
<a href="#" title="Доставка товара">Доставка товара</a>
<a href="#" title="Контакты">Контакты</a>
<a href="#" title="Справочник">Справочник</a>
</span>
<span class="empty"></span>
</div>
<div class="info">
<div class="service">
<div class="basket">
Ваша корзина пуста
</div>
<div class="contacts">
<h1>(351) 729-88-78</h1>
<p>Адрес: Челябинск, ул. Белорецкая, 60а</br>
E-mail: ognetush@mail.ru</p>
</div>
</div>
<div class="company">
<h1>Компания «Противопожарные работы»</h1>
<p>Добро пожаловать на официальный сайт компании «Противопожарные работы». Мы специализируемся на выполнении работ и услуг в области пожарной безопасности, реализации огнезащитных составов и материалов. У нас можно приобрести широкий спектр оборудования: огнезащитные и антисептические составы, огнетушители и пожарные рукава, противопожарные двери и люки, знаки безопасности и планы эвакуации.</p>
<p>Компания «Противопожарные работы» - это многолетний опыт работы, профессионализм, гарантия качества, передовые технологии, оптимальное решение, надежность.</p>
<a href="#" title="Справочник">Подробнее о нас</a>
</div>
</div>
</div>
<div class="clear"></div>
<div class="block-left-center">
<div class="price">
<a href="#" title="Скачать прайс-лист">
<img src="http://www.ogne-zashita.ru/netcat_files/512/828/price_title.png" width="85" height="85" alt="Скачать прайс-лист">
</a>
<h3>
<a href="#">Скачать прайс-лист</a>
</h3>
</div>
<div class="payment">
<h2 style="color:white; margin:10px 0 20px 0;">Способы оплаты:</h2>
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/visa.png" width="50" height="30" alt="visa">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/mastercard.png" width="50" height="30" alt="mastercard">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/sberbank.png" width="50" height="30" alt="sberbank">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/qiwi.png" width="50" height="30" alt="qiwi">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/webmoney.png" width="50" height="30" alt="webmoney">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/yandexmoney.png" width="50" height="30" alt="yandexmoney">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/svayznoi.png" width="50" height="30" alt="sms">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/mailru.png" width="50" height="30" alt="mailru">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/cash_rub.png" width="50" height="30" alt="cash_rub">
<p>
<a href="#">и другие...</a>
</p>
</div>
</div>
<div class="block-center">
<div class="showcase">
<div class="product">
<a href="#">
<img src="http://www.ogne-zashita.ru/ognetush/images/ogon-ico.png" width="150" height="135">
<p>Огнетушители</p>
</a>
</div>
<div class="product">
<a href="#">
<img src="http://www.ogne-zashita.ru/ognetush/images/bochka-ico.png" width="150" height="135">
<p>Огнезащитные составы</p>
</a>
</div>
<div class="product">
<a href="#">
<img src="http://www.ogne-zashita.ru/ognetush/images/door-ico.png" width="150" height="135">
<p>Противопожарные двери</p>
</a>
</div>
<div class="product">
<a href="#">
<img src="http://www.ogne-zashita.ru/ognetush/images/anti2-ico.png" width="150" height="135">
<p>Антискользящие покрытия</p>
</a>
</div>
<div class="product">
<a href="#">
<img src="http://www.ogne-zashita.ru/ognetush/images/plan-ico2.png" width="150" height="135">
<p>Система экстренной эвакуации</p>
</a>
</div>
<div class="empty"></div>
</div>
<div class="news">
<h1>Новости</h1>
<div class="column-news">
<div class="date">30 сентября 2013 г.</div>
<a href="#">Запуск сервиса онлайн оплаты</a>
</div>
<div class="column-news">
<div class="date">01 сентября 2013 г.</div>
<a href="#">Акция! Автономное средство пожаротушения для автомобиля Подкова 01 со скидкой 40%</a>
</div>
</div>
</div>
<div class="clear"></div>
<div class="block-bottom">
<div class="advertising">
Рекламма от Google
</div>
<div class="partners">
<img src="http://www.ogne-zashita.ru/ognetush/images/payments/visa.png" height="30" alt="visa">
</div>
</div>
</div>
</body>
</html>
style.css
Код:body {
background:#792100 url('http://www.ogne-zashita.ru/ognetush/images/bg.jpg') top center no-repeat;
color:#ffffff;
font-family:Arial;
font-size:12px;
line-height:133%;
margin:0px;
padding:0px;
}
h1{
color:white;
font-size:24px;
font-weight:normal;
height:24px;
margin:5px 0;
padding:0px;
}
.content h1{
color:#792100;
font-size:24px;
font-weight:normal;
height:24px;
margin:5px 0;
padding:0px;
}
h2{
color:#792100;
font-size:16px;
font-weight:bold;
margin:20px 0 10px 0;
padding:0px;
}
a{
color: #fdfa00;
}
a:hover{
text-decoration:none;
}
.wrapper{
padding:0 3% 10px 3%;
min-width:1150px;
}
.clear{
clear:both;
}
/*Логотип*/
.logo{
float:left;
padding:45px 0 0 0;
width:185px;
text-align:center;
margin:0 3% 0 0;
}
/*Верхний блок*/
.block-top{
overflow:hidden;
}
/*Верхнее меню*/
.menu{
background:#671C00;
border-radius:0 0 20px 20px;
height:38px;
margin:0 auto;
text-align:justify;
width:100%;
}
.item-menu{
padding:0 4%;
}
.menu a{
display:inline-block;
padding:10px 10px;
color:#fdfa00;
font-size:15px;
font-weight:bold;
}
.empty{
width:95%;
display:inline-block;
}
/*Информационный блок*/
.info{
margin:50px 0 0 0;
}
.service{
width:280px;
float:right;
}
.basket{
border-radius:20px;
border:1px solid #995300;
height:50px;
margin:0 0 20px 0;
padding:10px 0 0 30px;
width:230px;
}
.contacts{
border-radius:20px;
border:1px solid #995300;
padding:10px 0 0 30px;
width:230px;
}
.contacts p{
font-size:11px;
}
.company{
overflow:hidden;
padding:0 20px 0 10px;
text-align:justify;
}
/*Центральный блок*/
.block-center{
overflow:hidden;
}
/*Тавары на титульную*/
.block-left-center{
width:185px;
float:left;
margin:0 3% 0 0;
}
.price{
text-align:center;
width:165px;
margin:20px 0 0 0;
}
.payment{
background:#611a00;
margin:50px 0 0 0;
padding:10px;
text-align:center;
width:165px;
border-radius:20px;
}
.showcase{
background:url("http://www.ogne-zashita.ru/ognetush/images/bg-star.png") repeat-x scroll left bottom #FCF500;
border-radius:20px;
margin:50px 0 0 0;
padding:25px 30px 9px 30px;
text-align:justify;
}
.product{
vertical-align:top;
text-align:center;
width:170px;
display:inline-block;
}
.product a{
line-height:1.2em;
color:#932600;
font-size:16px;
}
/*Новости*/
.news{
margin:30px 0px 0px 26px;
}
.column-news{
display:inline-block;
vertical-align:top;
width:48%;
}
.date{
margin:10px 0;
color:#C38300;
}
/*Нижний блок*/
.block-bottom{
margin:30px 0 0 0;
}
.advertising{
background:#671c00;
padding:10px;
margin:0 3% 0 0;
height:50px;
width:165px;
float:left;
border-radius:20px;
}
.partners{
background:#671c00;
padding:20px 25px;
height:30px;
border-radius:20px;
overflow:hidden;
}
|
|
|
21.11.2013, 12:27
|
|
ipm
Ильин Павел
Зарегистрирован:
2012-10-12
Сообщений: 386
|
1. Думаю лучше верстать по стандартам html5 и css3.
2. Размеры изображений лучше указать в стилях.
3. Все пути в ссылках лучше писать без домена, т.е. не так: mysite.ru/about/, а вот так: /about/. Так пути не будут завязаны на домене и в случае его замены или переноса сайта будет меньше гемороя.
4. В стилях сократите место, уберите лишние пробелы, там где повторы перечисляйте классы через запятую.
Это как минимум.
Знание может быть лишь у того, у кого есть вопросы. Ханс Георг Гадамер
|
|
|
22.11.2013, 16:07
|
|
Nexwich
Панасин Александр
Зарегистрирован:
2011-04-05
Сообщений: 1037
|
Возьмите за правило
• Всегда соблюдайте иерархию документов. Храните по отдельным папкам а не в одной. Для одного, двух файлов папку создавать не обязательно.
(А то бывает залезешь на проект и все css от разных шаблонов лежат в папке style)
• В будущем подключайте файл js (application.js) даже если он и пустой. Понадобится чтобы вписывать, инициализировать скрипты. У Меня каждый проект имеет скрипты даже самый простой просят отправку форм аяксом.
• Не забывайте ставить комментарии в верстке и параллельно в css. Может они и не пригодятся но это будет говорить о более высоком уровне для заказчика.
Насчет стилей.
• Подключите обнуление стилей (первым файлом стилей чтобы он не перекрывал ваши стили).
• Селекторы лучше выписывать в одну строку. Настройте ваш редактор. Это сейчас у вас мало селекторов а представьте что у вас их 500.
• Группируйте их и указывайте вложенность не используйте уникальные значения для классов, для этого есть id.
#block-top, #block-left-center {} группирование не до фанатизма.
#block-top .menu .item-menu a {} вложенность до фанатизма.
#block-top .menu a {}
#block-top .info a {}
будут иметь разные стили
Понятие коскадность вам не позволит смешать стили.
• Все что касается дизайна шаблона в одну папку и положить в одно место.
например обозвать "ognetush" и положить http://www.ogne-zashita.ru/template/ognetush/
• Все пути в ссылках лучше писать "от документа" который обращается к файлу
например
У вас изображение находится http://www.ogne-zashita.ru/ognetush/images/bg.jpg
А css файл который обращается http://www.ogne-zashita.ru/ognetush/style.css
То в этом случаи ссылки должны выглядеть "images/bg.jpg"
В этом случаи при переносе всего дизайна не придется где либо что то менять
При использовании /about/ можно всегда переносить только css что не является преимущественным методом в отличии от about/ в этом случаи можно переносить всю папку ognetush куда угодно и когда угодно.
По верстке.
• Вот такие моменты лучше выписывать в одну строку.
Код: <div class="logo">
<img src="http://www.ogne-zashita.ru/ognetush/images/logo.png" width="138" height="130" alt="Логотип Компании «Противопожарные работы»">
</div>
• <span class="empty"></span> мне трудно представить для чего нужен пустой контейнер.
• <div class=wrapper> забыли указать кавычки.
• Не забывайте про валидатор. Он найдет ошибку если она есть.
• В середине кода нарушен табуляция. (Пишите красивый код)
• Табуляцию заменяйте на пробелы (в этом случаи у всех будет выглядеть одинаково)
Модуль "Почтовые уведомления" – настройка email уведомлений на вашем сайте без программирования. Бесплатно. http://netcat.ru/products/CatStore/solution_242.html
|
|
|
28.11.2013, 22:31
|
|
Гость
Гость
|
Касаемо HTML5, я согласен с Павлом, но прежде чем переверстывать сайт, я бы поставил счетчик с целью узнать сколько посетителей на сайт заходит с ИЕ 7 и мобильных устройств, в эксплорере есть стандартное расширение, которое позволяет просматривать документы в режиме совместимости со всеми версиями этого замечательного браузера. Советовал бы также присмотреться к css фреймворкам наподобие twitter bootstrap, это позволит быстро и качественно верстать. Удачи!
|
