Редактирование Версти

Ecashs · August 25, 2010

Добрый День! Делаю не важно какую страничку. Сначала все было нормально, но потом когда была выполнена уже треть проекта возникла проблема, слишком много у меня лишнего кода как в CSS так и в HTML, помимо этого я как чувствую что написана простая HTML и CSS страница уж очень не качественно, все сделано через одно место (Сам понять не могу как написал такой бред). Еще один минус в том что она на Narod.ru и их реклама не дает сайту отображаться правильно (Пока ее не закроешь). В общем я решил обратится к более опытным верстальщикам за помощью и выложить исходный код. Я не прошу что бы за меня делали страницу просто чтоб помогли избавить лишний код и исправить нужный.

<HTM>
<HEAD>
<BASE href="http://">
<BASEFONT face="Arial Black" color="Black" size="4">
<META>
<TITLE>Мой Текст</TITLE>
<STYLE type="text/css">
BODY {
background-color: #000080;
padding:0px;
margin:0px;
}
A {
text-decoration: none;
}
A {
color: 000080;
}
A:visited {
color: #000080;
}
A:active {
color: #808080;
}
P {
text-indent: 1.3em;
}
DIV {
background-color: #FFFFFF;
height: 2000px;
width: 750px;
}
.BLOCK {
background-color: #019b00;
height: 100px;
width: 750px;
text-align: justify;
</STYLE>
</HEAD>
<BODY>
<CENTER>
<DIV>
Добавить в избранное | 
Версия для печати 
 | Загрузить страницу | 
Подписка на рассылку 
<img src="Images/Logo.png" alt="Мой Текст">
<DIV CLASS="BLOCK">Текст в БЛОКЕ</DIV>
<DIV ALIGN="Justify">
Текст
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<A HREF="#Текст">Текст</A>
<DIV ALIGN="Center">
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
<A NAME="Текст"></A>Текст
</DIV>
</CENTER>
</BODY>
</HTM>

Edited August 25, 2010 by Ecashs

npofopr · August 25, 2010

я конечно не опытный но

первый раз вижу такое <HTM>

убрать <A NAME="Текст"></A>Текст

сделать это стилями.

зачем ссылки вообще? <A NAME="Текст"></A> или якаря ли.

закрыть открытый

и вообще закрыть все открытое.

прописать доктайп.

не надо делать сайты каким то левым софтом. тем более настолько плохим, который делает такой ужас.

Ecashs · August 25, 2010

Я все сам писал. Я софтом не пользуюсь. Я пользуюсь CMS, а в этот раз решил сам написать

Great Rash · August 25, 2010

Имена тегов должны быть в нижнем регистре.

Нет доктайпа.

Нет такого тега <htm>.

Тег <base> в вашем случае не нужен.

Атрибут align у дива можно с успехом заменить на CSS-правило.

Какие-то правила в CSS не закрыты.

Цвета всегда задаются с шарпом (#).

Все очень плохо.

Ecashs · August 25, 2010

Полностью с вами согласен, насчет регистра не знал. Но почему BASE не нужен? Насчет тега HTM я его перепутал с расширением (Не в том смысле что я не смог отличить тег от расширения, просто подумал что и HTM можно....)

Edited August 25, 2010 by Ecashs

swetlana · August 25, 2010

ну значит так.

Вычищать надо _все_ тэги . Их боле нет в современных спецификациях.

Тэга <center> также больше нет.

Ещё надо вычищать тэги и . Они не несут смысловой нагрузки, а служат только для оформления. А для этого есть css.

Очепяточка в корневом тэге: <htm>, когда надо <html>.

Пустой мета-тэг зачем? Не надо его.

<basefont>? нет, css!

Во втором блоке не закрыты тэги , а должны быть.

В коде также присутствуют четыре открывающих тэга <div>, но только два закрывающих. Мало какому браузеру такое понравится. Некорректность отображения при открытом баннере на народе может быть связана и с этим (хотя не знаю, не видя точно сказать не могу).

Ещё, как можно догадаться (хотя по коду это и сложно), здесь присутствуют два блока навигации. Их лучше выполнять списками.

Если лого будет в коде выше вспомогательной менюшки, будет логично. Также традиционно принято, чтобы лого было ссылкой на главную страницу.

Заголовки должны быть выделены семантичными тэгами <h1>,<h2> и т.д., а не просто бессмысленно оформлены.

Ну и ещё тэги и их атрибуты лучше писать в нижнем регистре. Это правильно по всем современным спецификациям, тогда как верхний регистр допускают отнюдь не все.

И ещё: доктайп указывать обязательно.

То есть, в результате должно получиться нечто вроде такого:

<!DOCTYPE html>
<html>
<head>
	<title>Мой Текст</title>
</head>
<body>
<header>
	<h1 class="logo">
		<a href="/"><img src="Images/Logo.png" alt="Мой Текст" /></a>
	</h1>
	<nav class="auxmenu">
		<ul>
			<li><a href="#">Добавить в избранное</a></li>
			<li><a href="#">Версия для печати</a></li>
			<li><a href="#">Загрузить страницу</a></li>
			<li><a href="#">Подписка на рассылку</a></li>
		</ul>
	</nav>
	<div class="blocktext">Текст в блоке</div>
</header>
<h1>Текст</h1>
<nav class="contents">
	<ul>
		<li><a href="#text1">Текст</a></li>
		<li><a href="#text2">Текст</a></li>
		<li><a href="#text3">Текст</a></li>
	</ul>
</nav>
<section class="content">
	<p><a id="#text1"></a>куча текста</p>
	<p><a id="#text2"></a>куча текста</p>
	<p><a id="#text3"></a>куча текста</p>
</section>
</body>
</html>

В таком разобраться уже гораздо проще, не так ли?

Теперь надо привести css в соответствие задумке.

Для начала совершенно обязательно сделать обнуление стилей, чтобы не удивляться потом, откуда берутся непонятные отступы.

В данном случае можно просто обнулить отступы всем элементам:

* {
	padding: 0;
	margin: 0;
}

Насколько я поняла, задача документ сделать фиксированной ширины и повесить по центру.

Это делается просто:

html {
	background: #000080;
}
body {
	width: 750px;
	margin: 0 auto;
	background: #fff;
}

Менюшки делаются горизонтальными крайне просто:

	nav.auxmenu li {
		display: inline;
	}

Тогда их можно и по центру выравнять:

nav.auxmenu {
	text-align: center;
}

Шрифт лучше всего определить один основной, а все остальные определять в процентах.

В общем, css дожен быть тоже чем проще, тем лучше. Примерно так:

* {
	padding: 0;
	margin: 0;
}
nav li {
	list-style: none;
}
html {
	background: #000080;
}
body {
	width: 750px;
	margin: 0 auto;
	background: #fff;
	font: bold 18px Arial,sans-serif;
	font-style: italic;
}
.logo,
.logo img {
	float: right;
	width: 73px;
	height: 20px;
}
nav.auxmenu {
	text-align: center;
}
	nav.auxmenu li {
		display: inline;
	}
		nav.auxmenu li a {
			font-style: italic;
			font-size: 72%;
			color: #000;
		}
			nav.auxmenu li:nth-child(even) a{
				color: #019b00;
			}
.blocktext {
	height: 100px;
	background: #019B00;
	color: #fff;
	font-size: 90%;
}
.contents,
.content {
	padding: 1em;
}
	nav.contents a {
		font-style: normal;
		color: #000;
	}
	.content p {
		text-align: center;
	}

Vlad · August 25, 2010

Светлана, ссылку на стилевой файл забыла добавить в своем коде.

Searcher · August 25, 2010

swetlana - Вам огромный плюс! )) Вот только рамки у картинок еще надо убрать.

Ecashs · August 25, 2010

ОГРОМНОЕ СПАСИБО! Не ожидал настолько хорошей и доступной помощи! ecashs.narod.ru вот проект.

Edited August 25, 2010 by Ecashs

swetlana · August 25, 2010

Светлана, ссылку на стилевой файл забыла добавить в своем коде.

ну вот…

всякое бывает.

Ну уж ссылку на css понятно как добавить

swetlana - Вам огромный плюс! )) Вот только рамки у картинок еще надо убрать.

вообще на практике я обычно использую более обширный файл обнуления стилей, в котором и шрифты затронуты, и выравнивания, и display: block обозначен для некоторых новых элементов из html5, которые почему-то браузерами интерпретируются как инлайновые. Но тут простой пример, и городить в нём лишние 60 строк кода ни к чему.

Searcher · August 25, 2010

вообще на практике я обычно использую более обширный файл обнуления стилей, в котором и шрифты затронуты, и выравнивания, и display: block обозначен для некоторых новых элементов из html5, которые почему-то браузерами интерпретируются как инлайновые. Но тут простой пример, и городить в нём лишние 60 строк кода ни к чему.

Точно так! )) Просто тут как раз уже есть картинка, и она будет с рамкой...

Ecashs · August 25, 2010

А вот вообще если посмотреть на мой "код" и ваш, в моем коде основной проблемой является сложность и старость? Или незнание в доскональности языков разметки (Особенно CSS)?

Edited August 25, 2010 by Ecashs

Ecashs · August 25, 2010

Вот у меня еще один вопрос появился Вы уж меня извините. Нельзя ведь привести страничку написанную вами за меня (Огромное Спасибо!) в такой же вид как делал я? Ecashs.narod.ru Он еще не готов поэтому не считайте это рекламой

swetlana · August 25, 2010

почему ж нельзя?

можно всё.

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

Про значение display я уже упоминала, но есть ещё недобраузер IE, который эти тэги вообще игнорирует. Для него можно воспользоваться таким яваскриптиком:

<!--[if IE]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
</script>
<![endif]-->

хотя, конечно, если выносить скрипты и стили в отдельные файлы, то код будет чище и красивее.

Ecashs · August 25, 2010

Я и так вынес . Осталось только все это настроить так как мне надо.

А вот если Логотип будет выше вспомогательного меню то он ведь и отображаться будет выше? А мне надо чтоб он был внизу, поэтому мне надо его поставить после?

Searcher · August 25, 2010

Есть такое понятие "поток", т.е. каждый следующий элемент отображается после предыдущего. Но есть некоторые стилевые свойства, которые позволяют вывести элемент из потока: float и position.

Sign In

Редактирование Версти

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information