Jump to content

Для желающих получить опыт верстки

Dimitry Wolotko

By Dimitry Wolotko,
in Practise Templates

 Share

Recommended Posts

sigma77 Explorer

sigma77

Posted
Posted
В том то и дело, что нельзя. Не могу разобраться почему.

Все разобрался. Просто поставил 32 битный каннал, а надо было 8 bit. Переделовать теперь надо все.

Зачем переделывать?

Image -> Mode -> 8bit/Channel :ph34r:

Link to comment
Share on other sites
  • Replies 146
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Kray Storm
Kray Storm

Верстаю по фото. Вывожу из табличной зависимости. Снимаю порчу IE6. Недорого )) art-ajn Если макет совсем простой, то можно и по "фото". А так используются графические редакторы, вроде Фотошопа и т.д.

  • 2 weeks later...
Rustick Explorer

Rustick

Posted
Posted

Здравствуйте, в верстке как и в фотошопе новичок. Решил попробовать сверстать данный макет.

В шапке есть чернильница, сверсток и бабочка. По сути это множество слоев, объединенных в одну группу. Каким образом можно скопировать группу слоев в новый документ, чтобы потом сохранить как картинку и при верстке вставить.

Обычно, когда в фотошопе нужно было копировать слой, то просто выделял, копировал в новый документ и сохранял. А целую группу таким образом скопировать не удается. Подскажите каким образом это сделать?

Link to comment
Share on other sites
  • 3 months later...
Red Planet Explorer

Red Planet

Posted
Posted

Нет, единственный вопрос, который я могу задать пока что такой: "Как все это делается?"

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

Буду благодарен за полезную ссылку.

Link to comment
Share on other sites
Red Planet Explorer

Red Planet

Posted
Posted
Сначала сюда: http://stepbystep.htmlbook.ru/

Great Rash, вы не поняли моей проблемы: теги HTML, синтаксис CSS я знаю, сейчас моя задача - это научиться применять знания и поставить верстку на конвейер, добиться того, чтобы я мог браться за любой макет. Применение, а не изучение базовых понятий - вот что мне нужно.

Link to comment
Share on other sites
  • 1 month later...
pattaya Explorer

pattaya

Posted
Posted

Здравствуйте, взялся за верстку макета, и остановился в самом начале, помогите пожалуйста оторвать от верхней части в блоке header_up содержимое. И еще в шапке я сделал фон на всю высоту картинкой-по центру с красной полосой, а с верху и с низу наложил другой цвет фона, так FF показывает красную полоску, а в IE нет?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
	<!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
  <style>

  * {
	margin: 0;
	padding: 0;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
}

#wrapper {
	width: 100%;
	min-width: 1000px;
	margin:0;
	padding:0;
}


/* Header
—————————————————————————--*/
#header {background-image:url(../img/%D0%91%D0%B5%D0%B7-%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-4.png);

	z-index:1;
	position:relative;
	width:100%;
}

.header_up {background-color:#e3e3e3;
			position:relative;
			z-index:2;
			width:100%;
			height:130px;
			color:#900202;
			font-family:Arial, Helvetica, sans-serif;
			font-size:18px;
			text-align:center;
}

.header_up_span  { font-size:29px;


}

.header_up p	 {margin:20px 0;

}




.header_center   { width:100%;
				   height:146px; 
				   }

.header_down	 {width:100%;
				  background-color:#e3e3e3;
				  position:relative;
				  z-index:2;
				  height:124px;
}				  

/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	height: 1%;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;

	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 290px 0 255px;
}


/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	float: left;
	width: 235px;
	margin-left: -100%;
	position: relative;
	background: #B5E3FF;
}


/* Sidebar Right
—————————————————————————--*/
#sideRight {
	float: left;
	margin-right: -3px;
	width: 270px;
	margin-left: -270px;
	position: relative;
	background: #FFACAA;
}


/* Footer
—————————————————————————--*/
#footer {
	height: 100px;
	background: #BFF08E;


</style>

</head>

<body>

<div id="wrapper">

	<div id="header">


		<div class="header_up">Круглосуточная консультация  по телефону:
							   <p><span class="header_up_span">(495) 123-45-67</span></p>
		</div>
		<!-- #header_up-->

		<div class="header_center">		</div><!-- #header_center-->

		 <div class="header_down"></div>
	</div>


<!-- #header-->

	<div id="middle">

		<div id="container">
			<div id="content">

			</div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar" id="sideLeft">
					</div>
	<!-- .sidebar#sideLeft -->

		<div class="sidebar" id="sideRight">
					</div>
	  <!-- .sidebar#sideRight -->

	</div><!-- #middle-->

	<div id="footer">

	</div><!-- #footer -->

</div><!-- #wrapper -->

</body>
</html>

Link to comment
Share on other sites
pattaya Explorer

pattaya

Posted
Posted
Моя первая попытка работы с PSD, подскажите, что выполнено и написано не правильно? ссылка на скачку : http://narod.ru/disk/25646706000/raira.rar.html . За ранее спасибо.

Нужна консультация профессионала.

Link to comment
Share on other sites
Vlad Explorer

Vlad

Posted
Posted

Надо было хотя бы через валидатор прогнать, ошибки мелкие и детские имеются. Потом, почему transitional доктайп, уже как-то несолидно.

Вот за <p> внутри <span> бьют канделябром! Это не просто преступление, это ошибка!

Link to comment
Share on other sites
  • 4 weeks later...
  • 2 months later...
Elord Explorer

Elord

Posted
Posted

Здравствуйте, это мой первый опыт вёрстки. В процессе возникли такие вопросы -

1.Как можно разместить чернильницу в хедере? Файл .psd у меня не скачался, поэтому все полностью в бекграунд убрать не получить, т.к вырезать не смогу.

2.как в IE лупу разместить над хедером?

3.Почему-то шрифт Монотайп Корсива у меня не отображаеться, его нужно качать отдельно?

И конечно кто какие ошибки увидит и скажет об этом - буду рад ) Спасибо.


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Раира</title>
<style type="text/css">
html,body{margin: 0;height: 100%;}
 body{font-family: Arial,Monotype Corsiva; font-size: 1.1em;color: #333333;font-weight: 500;}
 #wrapper{height: auto !important;height: 100%;min-height: 100%;min-width: 900px;}
 #header{z-index: 0;background-repeat: no-repeat;}
 #content{background-color:#e2e8e4;overflow: hidden;width: 100%;}
 #left{float: left; width: 200px;padding: 10px 0 0 30px;}
 #right{float: right; width: 250px; padding: 10px 20px 0 40px;color: #7f7f7f;}
 #center{margin: 0 250px 0 200px; padding: 10px 20px 0 50px;}
 #footer{height: 100px; background-color: #8d0101; background:url(raira/backfooter.gif) repeat-x;font-size: 0.7em;font-weight: 600;color: #d5b3b3;}
 #footerright,#footerleft{padding: 10px 0 0 30px;}
 #footerleft{float: left;width: 200px;}
 #footerright{margin-left: 220px;}
 #lupa{float: right; margin: -95px 0 0 0;position: absolute;right: -1px;}
 #rightmargintop{margin-top: 47px;}

 .adrfootleft{color: #d5b3b3;text-decoration: none;}
 .leftlinkarea{font-weight: 600; padding: 10px;}
 .headertop{height: 128px;width: 100%;background: url(raira/backheadup.gif);color: #900202;}
 .headertop p {font-size: 1.5em;}
 .headercenter{height: 148px;width: 100%;background-color: #a60000;}
 .headercenterlogo{padding: 10px 0 0 50px;}
 .headerbottom{height: 125px;width: 100%;}
 .rightfont{font-size: 0.8em;font-weight: 600;}
 .redline{color:#8d0101;font-size: 1.4em;}
 .redlinecurs,.redlinecurstop{color: #8d0101;font-family:Monotype Corsiva;font-size: 1.5em;}
 .redlinecurstop{padding: 0.5em 0 0 0;}
 .centrlist{list-style-image: url('raira/Butterfly.gif');}
 .headertoppadding{padding: 1em;}

 a{color:#8d0101;font-weight: 400;}
 a:active{color:#323232;font-weight: 600;}
 a.news{text-decoration: none;color: #7f7f7f;font-size: 0.8em;line-height: 1.2em;font-weight: 600;}


</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div class="headertop"><div align="center" class="headertoppadding">Круглосуточная консультация по телефону:<p>(495)123-45-67</p></div>
        </div>
        <div class="headercenter"><div class="headercenterlogo" align="center"><a href="#"><img src="raira/logo.gif" alt="Раира" border="0"></a></div>
        </div>
        <div class="headerbottom"><p align="center" class="redlinecurs">Страхование</p><div align="center"><a href="#" class="leftlinkarea">Автомобили</a><a href="#" class="leftlinkarea">Имущество</a><a href="#" class="leftlinkarea">Здоровье</a></div>
        </div>
    </div>
    <div id="content">
        <div id="lupa"><img src="raira/lupa.gif" alt=""></div>
        <div id="left"><p><a class="news" href="#">Очень интересные новости нашей компании и нашего сайта. Не теряя времени пройдите по ссылке.</a></p><p><a class="news" href="#">Очень интересные новости нашей компании и нашего сайта. Не теряя времени пройдите по ссылке.</a></p><br><table align="right" cellpadding="10"><tr align="right"><td><a class="leftlinkarea" href="#">ОСАГО</a></td></tr><tr align="right"><td><a class="leftlinkarea" href="#">ДСАГО</a></td></tr><tr align="right"><td><a class="leftlinkarea" href="#">КАСКО</a></td></tr><tr align="right"><td><a class="leftlinkarea" href="#">Оценка ущерба</a></td></tr></table>
        </div>
        <div id="right"><p id="rightmargintop"><span class="rightfont">Согласно Лицензии на оценочную деятельность №010257 от 24.11.2004г., мы оказываем следующие</span> <a href="#">услуги по оценке и экспертизе.</a></p><p><span class="redlinecurs">Скидки</span><br><span class="rightfont">каждому посетителю сайта на </span><a href="#">КАСКО</a><span class="rightfont"> и </span><a href="#">ОСАГО</a><span class="rightfont">(до 20%)</span></p><br><p><span class="redlinecurs">Наш адрес</span><br><span class="rightfont">Москва, метро Волжская (5 минут пешком) ул. Шкулёва, дом 17.</span></p><p><span class="rightfont">Посмотрите </span><a href="#">схему проезда</a><span class="rightfont"> и приезжайте в гости.</span></p>
        </div>
        <div id="center"><p><span class="redline">ООО "Раира"</span> является официальным представителем известнейших и надёжных страховых компаний Росии, заслуживших доверие и признание клиентов:<p><img src="raira/Rosgosstrah.gif" alt="РОСГОССТРАХ"> <img src="raira/Asto.gif" alt="АСТО"> <img src="raira/Soglasie.gif" alt="СОГЛАСИЕ"></p><span class="redline">Мы рады предложить Вам:</span><ul class="centrlist"><li class="centrlist">все возможные виды страхования</li><li>наиболее выгодные условия страховой сделки</li><li>самую подробную информацию о страховых продуктах и страховании вообще</li></ul><p>Если у Вас нет возможности приехать в наш офис наши агенты приедут в удобное для Вас время и место.</p><p>Помимо страхования ООО "Раира" занимается экспертизой и оценочной деятельностью.</p>
        </div>
    </div>    
    <div class="clear"></div>
    <div id="footer"><div id="footerleft">Раира,2007 год.<p>Адрес: Москва,м. Волжская, улица Улица, дом 3, офис 231 <a class="adrfootleft" href="#">(схема проезда)</a></p></div><div id="footerright"> Телефоны:<br>(495)432-34-54<p>Факс:(433) 434-43-34<br>E-mail: raira@raira.ru</p></div>
    </div> 
</div>

</body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept