Jump to content
  • 0

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

Ecashs

Asked by Ecashs,

 Share

Question

Ecashs Explorer

Ecashs

Posted
Posted (edited)

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

  Quote
<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>

<FONT SIZE="2" COLOR="BLACK" FACE="ARIAL"><B><I>Добавить в избранное | </I></B></FONT>

<FONT SIZE="2" COLOR="#019b00" FACE="ARIAL"><B><I>Версия для печати </I></B></FONT>

<FONT SIZE="2" COLOR="BLACK" FACE="ARIAL"><B><I> | Загрузить страницу | </I></B></FONT>

<FONT SIZE="2" COLOR="#019b00" FACE="ARIAL"><B><I>Подписка на рассылку </I></B></FONT>

<img src="Images/Logo.png" alt="Мой Текст">

<DIV CLASS="BLOCK"><FONT SIZE="3" COLOR="WHITE" FACE="ARIAL"><B><I>Текст в БЛОКЕ</I></B></FONT></DIV>

<DIV ALIGN="Justify">

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<P><FONT SIZE="3" COLOR="BLACK" FACE="ARIAL"><B><A HREF="#Текст">Текст</A></B></FONT></P>

<DIV ALIGN="Center">

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

<P><A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

</DIV>

</CENTER>

</BODY>

</HTM>

Edited by Ecashs
Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
npofopr Trainee

npofopr

Posted
Posted

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

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

убрать <A NAME="Текст"></A><FONT SIZE="4" COLOR="BLACK" FACE="ARIAL"><B><I>Текст</I></B></FONT>

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

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

закрыть открытый <p>

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

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Ecashs Explorer

Ecashs

Posted
  • Author
Posted (edited)

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

Edited by Ecashs
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

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

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

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

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

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

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

<basefont>? нет, css!

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

В коде также присутствуют четыре открывающих тэга <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;
	}

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

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

ну вот…

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

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

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

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

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

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

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

Link to comment
Share on other sites
  • 0
Ecashs Explorer

Ecashs

Posted
  • Author
Posted (edited)

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

Edited by Ecashs
Link to comment
Share on other sites
  • 0
Ecashs Explorer

Ecashs

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

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

можно всё.

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

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

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

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

Link to comment
Share on other sites
  • 0
Ecashs Explorer

Ecashs

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

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

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
Answer this question...

×   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 question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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