Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.117.166.215
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: Hawk  
Форум общения - Logical-portal » WEB-мастеру » Интересная информация » Вёрстка макета на ucoz
Вёрстка макета на ucoz
Сообщение оставлено 05.07.2011 в 18:46:54 | Сообщение #1
Итак. Вы уже нарисовали макет и собираетесь приступить к вёрстке. Для объяснения всего я тоже буду верстать шаблон, но только для примера, а потому и простейший.

Как видите, макет двух колоночный, фиксированной ширины.

Сначала нужно нарезать ваш макет. В зависимости от его устройства, это делается по-разному. Мой макет вообще можно не резать, а задавать все цвета, рамки и прочее кодом, т.к. на моём нет графики. Но всё-таки нарежем его. У меня получились такие куски: шапка сайта, футер, шапка блока и основа блока. В полноценных макетах обычно частей больше, но от этого суть не меняется.

Не забывайте оптимизировать ваши изображения при сохранении. Для этого сохраняйте их в фотошопе через Файл -> Сохранить для Web, далее выбираете один из форматов (jpg, png, gif), требующий меньше памяти при сохранении, но в котором качество изображения не портится (вес будущего файла можно посмотреть снизу).

Отдельная тема - нарезка блоков, потому что блоки бывают разные. Есть несколько способов верстки:

* Шапка блока и основная часть блока отдельной картинкой. Тогда основная часть делается пикселей 600 в высоту, и, при кодировании блока, контент блока располагается внизу картинки, а верх обрезается. Такой способ я и буду использовать при вёрстке в этом уроке, т.к. он наиболее непонятен при устном объяснении.
* Блок режется на 3 части - верх, центр и низ. Тогда центр оказывается примерно 20 пикселей в высоту и повторяется по вертикали, а сверху и снизу к нему присоединяются остальные 2 части.
* и ещё куча вариантов.

Один из них использован при создании моего блога: весь блок состоит из 3-х полосок, между которыми стоят заглавие и контент блока.

Называем мы наши картинки header.jpg footer.png blockhead.png blockcontent.png (обратите внимание на blockcontent, его высота = 600 px)

Загружаем картинки на сайт в папку img с помощью файлового менеджера или FTP (инструкция)

Открываем ваш любимый html редактор (я предпочитаю Notepad++, также хорош Adobe Dreamweaver, можно открыть просто блокнот) и приступаем к кодированию.

Перед этим на сайте, на котором вы будете проверят шаблон, поставьте # 971 стандартный шаблон. Всё-таки не писать же с 0 весь css файл, а возьмём стандартный и переделаем его. Так гораздо рациональнее и быстрее.
Code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[TITLE]</title>
< ?$META_DESCRIPTION $?>    
<link type="text/css" rel="StyleSheet" href="/_st/my.css">
</head>

Это самое начало нашего макета. Честно сказать, я не знаю, что значит код < ?$META_DESCRIPTION$? >, но он встречается в шаблонах и по названию его можно подумать, что это что-то связанное с метатегами. Мне кажется, что это код ещё не введённой функции uCoz, ну хуже от него точно не будет.

[TITLE] – зарезервированный код uCoz, система сама ставит заголовок. Там где - указание котировки, - ссылка на css.
Далее
Code
<body>
$ADMIN_BAR$
<!-- <header> -->
<table border="0" cellpadding="0" cellspacing="0" class="header" align="center">
<tr><td></td></tr>
</table>
<!-- </header> -->  

а в css пихаем
Code
.header {width:1000px; height:200px; background:url('/img/header.png') no-repeat #000000; }

и - указание системе, где у нас код шапки.

Далее код центральной части, вместе с блоками.
Code
<!-- <middle> -->
<table cellpadding="0" cellspacing="0" class="middle" align="center">
<tr>
<td width="750" valign="top">     
<div class="content">
[BODY]
</div>
</td>
<td width="250" valign="top" class="blocks">     
<!-- <container> -->
<!-- <block> -->
<div class="block">
<div class="blockheader"><div style="padding-top:20px;"><strong>TITLE</strong></div></div>
<div class="blockcontent"><div style="padding:10px;">CONTENT</div></div>
</div>
<!-- </block> -->
<!-- </container> -->
</td>
</tr>
</table>
<!-- </middle> -->

TITLE и CONTENT – зарезервированные коды для блоков, а [BODY] – для основной части сайта.

При таком шаблоне у вас будет работать конструктор блоков.
В css добавляем ещё несколько строчек:
Code
.middle {width:1000px; background:#e0e0e0;  }
.content {color:#000000; margin:10px; padding:0px;}
.blocks {alogn:center; background:#e9e9e9; margin:0px; padding:0px;}
.block { vertical-align:top; }
.blockheader {width:203px; height:45px; background:url('/img/blockhead.png') no-repeat; padding:0px; margin:10px 10px 0px 20px; text-align:center;}
.blockcontent {width:203px; background:url('/img/blockcontent.png') bottom no-repeat; text-align:left; padding:0px; margin:0px 10px 10px 20px;}  

в стиле .blockcontent, как видите, картинка задана с параметром bottom. Это значит, что картинка прижимается к нижнему краю блока.

И почти последняя часть коде – футер:
Code

<!-- <footer> -->
<table border="0" cellpadding="10" cellspacing="10" class="footer" align="center">
<tr>
<td width="30%"></td>
<td align="left" style="text-align:center">design by Ваш Ник | $POWERED_BY$ <br> [COPYRIGHT]
<td align="right">$COUNTER$</td>
</tr>
</table>
<!-- </footer> -->
</body>
</html>

И снова пишем в css:
Code
.footer {width:1000px;height:150px;background:url('/img/footer.png') no-repeat; }

Остаётся только один небольшой кусок кода – описание всплывающих окон (окна ЛС, профиля и пр). Код добавляется в конце документа, уже после , и для него так же зарезервированы коды [TITLE] и [BODY]. В нашем шаблоне код будет выглядеть так:
Code
<!-- <popup> -->    
<div align="center"><h4>[TITLE]</h4></div>
<br>
[BODY]
<!-- </popup> -->

Всё! Макет готов, вот его окончательный код:
Code
<html>    
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[TITLE]</title>

<link type="text/css" rel="StyleSheet" href="/_st/my.css">
</head>
<body>
$ADMIN_BAR$
<!-- <header> -->
<table border="0" cellpadding="0" cellspacing="0" class="header" align="center">
<tr><td></td></tr>
</table>
<!-- </header> -->
<!-- <middle> -->
<table cellpadding="0" cellspacing="0" class="middle" align="center">
<tr>
<td width="750" valign="top">     
<div class="content">
[BODY]
</div>
</td>
<td width="250" valign="top" class="blocks">     
<!-- <container> -->
<!-- <block> -->
<div class="block">
<div class="blockheader"><div style="padding-top:20px;"><strong>TITLE</strong></div></div>
<div class="blockcontent"><div style="padding:10px;">CONTENT</div></div>
</div>
<!-- </block> -->
<!-- </container> -->
</td>
</tr>
</table>
<!-- </middle> -->
<!-- <footer> -->
<table border="0" cellpadding="10" cellspacing="10" class="footer" align="center">
<tr>
<td width="30%"></td>
<td align="left" style="text-align:center">design by Ваш Ник | $POWERED_BY$ <br> [COPYRIGHT]
<td align="right">$COUNTER$</td>
</tr>
</table>
<!-- </footer> -->
</body>
</html>

<!-- <popup> -->
<div align="center"><h4>[TITLE]</h4></div>
<br>
[BODY]
<!-- </popup> -->


Источник
 
 
   
Сообщение оставлено 22.07.2011 в 12:04:20 | Сообщение #2
234
Спасибо за урок. Лови плюсик happy
 
 
   
Сообщение оставлено 23.07.2011 в 02:49:32 | Сообщение #3
Хороший урок спасибо happy
 

Продам Steam-аккаунты по низким ценам, писать в ЛС
 
   
Сообщение оставлено 03.10.2011 в 23:10:13 | Сообщение #4
0
прошу администрацию сайта либо удалить данный урок, либо поставить правильную и индексируемую ссылку на источник, а точнее на мой блог blweb.ru

а ТС как я вижу уже забанен
 
 
   
Сообщение оставлено 03.10.2011 в 23:23:02 | Сообщение #5
NewLogPro, доказательства что урок твой?
 
 
   
Сообщение оставлено 04.10.2011 в 17:06:27 | Сообщение #6
0
Wonk, нужно - могу заскринить исходник макета.

впрочем по-моему того факта, что в указанном источнике такой статьи нет вполне достаточно.

Добавлено (04.10.2011, 17:06:27)
---------------------------------------------
ап

 
 
   
Сообщение оставлено 04.10.2011 в 18:24:48 | Сообщение #7
Quote (NewLogPro)
Wonk, нужно - могу заскринить исходник макета.

Какого? здесь обучение вёрстке + у тебя в твоем блоге я его не нашел
 
 
   
Сообщение оставлено 04.10.2011 в 19:43:36 | Сообщение #8
0
Wonk, молодцы, удалили источник и рисунок
вот тут в моём блоге
 
 
   
Сообщение оставлено 04.10.2011 в 20:07:59 | Сообщение #9
NewLogPro, Извиняюсь. Готово wink
 
 
   
Сообщение оставлено 04.10.2011 в 20:28:53 | Сообщение #10
0
спасибо
 
 
   
Сообщение оставлено 01.11.2011 в 11:28:28 | Сообщение #11
164
в каком разрешении рисовать шаблон в Photoshop?
 
 
   
Сообщение оставлено 06.11.2011 в 14:44:01 | Сообщение #12
0
Спасибо полезный урок.
 
 
   
Сообщение оставлено 13.11.2011 в 02:47:33 | Сообщение #13
Благодарю, очень полезный урок, буду учится верстке
 
 
   
Сообщение оставлено 13.11.2011 в 02:51:13 | Сообщение #14
Quote (fantomdeni95)
в каком разрешении рисовать шаблон в Photoshop?

1280x1600
 

// Разработка профессионального ВебДизайна. Программирование на различных языках.
// Продажа дедиков;
// Продажа STEAM и ORIGIN аккаунтов;
// Продажа ICQ номеров;
 
   
Сообщение оставлено 20.11.2011 в 13:20:57 | Сообщение #15
Урок отменный,редко такие найдешь уроки !
 
 
   
Форум общения - Logical-portal » WEB-мастеру » Интересная информация » Вёрстка макета на ucoz
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика