Для начинающих

firetrap

Активный пользователь
Пользователь
9 Фев 2005
988
11
18
1. Программинг для начинающих. Первые шаги:

http://firststeps.ru/

2. Русскоязычный сайт о веб-ориентированном программировании:

http://xpoint.ru
 
Последнее редактирование модератором:

firetrap

Активный пользователь
Пользователь
9 Фев 2005
988
11
18
CSS
  1. Чтобы был абзацный отступ?
  2. Как подавить подчеркивание ссылок в некоторых местах?
  3. Как сделать неподчеркнутые ссылки везде?
  4. Чтобы при наведении мышки на текст с ссылкой он поменял цвет или стал подчеркнутым?
  5. Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана?
  6. Чтобы задать фоновую картинку для ячейки таблицы?
  7. Как сделать так. чтобы фон странички оставался неподвижным при прокрутке?
  8. Как сделать так, чтобы при наведении мышки какой-либо отличный от ссылки элемент (скажем, ячейка таблицы) поменял оформление (например, фоновый цвет)
  1. Чтобы был абзацный отступ?
    HTML:
    p { 
    	margin-top: 0; 
    	text-indent: 5em; 
    }
    Raoul & Natalia Nakhmanson-Kulish
  2. Как подавить подчеркивание ссылок в некоторых местах?
    HTML:
    <head> 
    <style type="text/css"><!-- 
    	a.noneline {text-decoration: none;} 
    --></style> 
    </head>
    После чего применяем этот стиль:
    HTML:
    <a href="ссылка" class="noneline">
    Raoul & Natalia Nakhmanson-Kulish
  3. Как сделать неподчеркнутые ссылки везде?
    HTML:
    <head> 
    <style type="text/css"><!-- 
    	a:link { 
    		text-decoration:none; 
    	} 
    	a:visited { 
    		text-decoration:none; 
    	} 
    	a:active { 
    		text-decoration:none; 
    	} 
    --></style> 
    </head>
    Raoul & Natalia Nakhmanson-Kulish
  4. Чтобы при наведении мышки на текст с ссылкой он поменял цвет или стал подчеркнутым?
    HTML:
    <head> 
    <style type="text/css"><!-- 
    	a:hover { 
    		color:#RRGGBB; 
    		text-decoration:underline; 
    	} 
    --></style> 
    </head>
    Этот код не будет работать в NN4.x.
    Raoul & Natalia Nakhmanson-Kulish
  5. Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана? В стилях документа нужно прописать
    HTML:
    <style type="text/css"><!-- 
    body{ 
    	background-image:url("...URL картинки..."); 
    	background-repeat:...параметр...; 
    } 
    --></style>
    Допустимые значения параметра:
    no-repeat - подавляет размножение
    repeat-x - размножение только по горизонтали
    repeat-y - размножение только по вертикали

    Для совместимости со старыми версиями браузеров рекомендуется
    пририсовать к фоновой картинке справа и/или снизу прозрачным (для GIF)
    или совпадающим со значением bgcolor в
    HTML:
    <body>
    монотонным (для JPG) фоном полосы, доведя разрешение картинки в нужном направлении как минимум до 2048 пикселов. "Вес" картинки при этом увеличится незначительно, поскольку монотонный фон хорошо сжимается.
    Raoul & Natalia Nakhmanson-Kulish
  6. Чтобы задать фоновую картинку для ячейки таблицы? Пользуемся стилями:
    HTML:
    <td style="background-image:url('bg.gif');">
    Если мы хотим, чтобы фон не "размножался" по вертикали или горизонтали, то добавляем в style параметр background-repeat, как описано в ответе на предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.

    Если внутри ячейки c фоном мы собираемся использовать таблицы, то в соответствующих тегах
    HTML:
    <table>
    нужно указывать background="" для совместимости с NN.
    Raoul & Natalia Nakhmanson-Kulish
  7. Как сделать так. чтобы фон странички оставался неподвижным при прокрутке? Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном выполняется медленнее.

    Если уж ни в какую без этого не обойтись, то вот пример странички с неподвижным фоном в IE3+, NN4+ и Opera:

    HTML:
    <html> 
    <head> 
    <title>Страничка с неподвижным фоном</title> 
    <style type="text/css"> 
    <!-- 
    	body { 
    		background-image:url('back.gif'); 
    		background-attachment:fixed; 
    		margin:0px; 
    		padding:0px; 
    	} 
    	#body { 
    		position:absolute; 
    		z-index:1; 
    		width:100%; 
    	} 
    --> 
    </style> 
    <script language="xXxXxXxXxXxXxXxXxXxX1.2"> 
    <!-- 
    	var oldScrollX=0; 
    	var oldScrollY=0; 
    	var NN=(((document.layers)?true:false) && 
    navigator.appVersion.charAt(0)=="4"); 
     
    function fixBg() { 
    	if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY) { 
    		document.layers['bg'].left=oldScrollX=window.pageXOffset; 
    		document.layers['bg'].top=oldScrollY=window.pageYOffset; 
    	} 
    } 
     
    function makeBg() { 
    	if (NN) { 
    		document.layers['bg'] = new Layer(window.innerWidth); 
    		document.layers['bg'].left = 0; 
    		document.layers['bg'].top = 0; 
    		document.layers['bg'].height = window.innerHeight; 
    		document.layers['bg'].background.src = 'back.gif'; 
    		document.layers['bg'].visibility = 'show'; 
    		document.layers['bg'].zIndex = 0; 
    		document.layers['bg'].document.open(); 
    		document.layers['bg'].document.write('<table width="100%" '+ 
    		'height="105%" border="0" cellspacing="0" cellpadding="0">'+ 
    		'<tr><td>&nbsp;</td></tr></table>') 
    		document.layers['bg'].document.close(); 
    		setInterval("fixBg();",100); 
    	} 
    } 
    //--> 
    </script> 
    </head> 
    <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" 
    marginwidth="0" marginheight="0" background="back.gif" 
    bgproperties="fixed" onLoad="makeBg();"><script language="xXxXxXxXxXxXxXxXxXxX1.2"><!-- 
    	if (NN) document.write('<div id="body">') 
    //--></script> 
    ... 
    ... 
    ... 
    Baш HTML 
    ... 
    ... 
    ... 
    <script language="xXxXxXxXxXxXxXxXxXxX1.2"><!-- 
    	if (NN) document.write('</div><table height="NNNN">'+ 
    	//Здесь пишем высоту странички в пикселах при разрешении 640x480 
    	'<tr><td>&nbsp;</td></tr></table>'); 
    //--></script> 
    </body> 
    </html>
    Raoul & Natalia Nakhmanson-Kulish
  8. Как сделать так, чтобы при наведении мышки какой-либо отличный от ссылки элемент (скажем, ячейка таблицы) поменял оформление (например, фоновый цвет) Категорически не рекомендуется пользоваться скриптами типа
    HTML:
    <td onMouseOver="...">
    В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и
    к любому другому элементу. о, к сожалению, IE не поддерживает эту
    возможность. Поэтому поступаем так - пишем в стилях:

    HTML:
    td { 
    /* работает в IE4+ */ 
    	td {...styles...; 
    	behavior:url('td.htc'); 
    } 
    /* стандарт CSS2, работает в NN6/Mozilla */ 
    td:hover { 
    	background-color:#RRGGBB; 
    }
    И создаем файл td.htc, в котором пишем:

    HTML:
    <public:attach event="onmouseover" onevent="color()"/> 
    <public:attach event="onmouseout" onevent="restore()"/> 
    <script language="xXxXxXxXxXxXxXxXxXxX" type="text/xXxXxXxXxXxXxXxXxXxX"><!-- 
    function color() { 
    	runtimeStyle.backgroundColor='#RRGGBB'; 
    } 
    function restore() { 
    	runtimeStyle.backgroundColor=''; 
    }
    Теперь все ячейки таблиц при наведении мышки будут подсвечиваться.

    Разумеется, можно использовать td.className:hover и td#idName:hover
    для подсветки ячеек определенного стиля или конкретной ячейки.
    Raoul & Natalia Nakhmanson-Kulish
 

Sorcerer

Активный пользователь
Пользователь
9 Фев 2005
293
0
16
http://validator.w3.org в обязательном порядке нужен всем.

// firetrap: сомневаюсь, что он нужен всем, тем более в обязательном порядке :smile:
 
Последнее редактирование модератором:

Alexxz

Модератор
Модератор
9 Июл 2005
1.441
0
36
36
кантима
alexxz.fatal.ru
В связи с тем, что аттачи на форуме регулярно удаляют, первые посты в теме потеряли актуальность. Поэтому просьба:

Народ, все кто, что-либо аттачил в этой теме, забросьте ко мне сюдаftp://upload:[email protected]
пусть это у меня на фтп лежит.

А также в связи с нестабильной работой хостинга manual.ru, предлагаю локальные копии сделанные год назад оффлайн эксплорером. В ближайшее время сделаю обновление до текущего состояния этих сайтов.

css.manual.ru http://10.10.120.48/css
html.manual.ru http://10.10.120.48/html

самоучитель по ЖабаСкрипту http://10.10.120.48/js (IE может тут глючить, так что лучше оперой)

Материалы в итоге регулярно будут доступны ftp://web:[email protected]/
 
Последнее редактирование модератором:

Sorcerer

Активный пользователь
Пользователь
9 Фев 2005
293
0
16
Sorcerer сказал(а):
http://validator.w3.org в обязательном порядке нужен всем.

// firetrap: сомневаюсь, что он нужен всем, тем более в обязательном порядке :smile:
Из этих сомнений и возникают потом сайты, которые просматриваются только одним браузером. Нужно соблюдать стандарты, и если начинающий привыкнет к этому сразу, то и потом будет делать нормальные сайты, а не глючные поделки, которых и так уже достаточно.
 

Petrovich

Активный пользователь
Динозавры
Пользователь
27 Мар 2005
616
0
16
Это паника, Sorcerer :smile:
You will be devoured, resistance futile. Microsoft
 

Alexxz

Модератор
Модератор
9 Июл 2005
1.441
0
36
36
кантима
alexxz.fatal.ru
Headlesz сказал(а):
а что для этого надо знать?
для того чтобы была зоть какая-то реакция на нажатие кнопки (подразумевается элемент <fоrm>) необходимо знать или JavаScript (для того чтобы что-то произошло на странице пользователя).
Если нужна реакция на сервере то необходимо чтобы сервер мог обрабатывать данные формы, а для это необходимо знание php или других технологий (Java, ASP, cgi, etc)
 

wext

Король пиратов
Пользователь
11 Фев 2005
3.768
21
0
31
grand line
madfrager.ru
Народ, накачал тут из инета книжечек МБайт так на 400, кому надо?
ЗЫ А ваще хочу сделать фтп "все для начинающего вэб дизайнера", пока имеется парочка скриптов (не в них дело), шаблончики, всякие картинки и прочая лабуда...
 

Banker

Пользователь
Пользователь
30 Май 2005
509
0
0
www.hfk.net.ru
Народ, накачал тут из инета книжечек МБайт так на 400, кому надо?
ЗЫ А ваще хочу сделать фтп "все для начинающего вэб дизайнера", пока имеется парочка скриптов (не в них дело), шаблончики, всякие картинки и прочая лабуда...


Да, было бы не плохо, чтобы ты такую тему организовал.
Я ЗА.
 

bimer

падонАк
Пользователь
9 Фев 2005
1.775
18
38
36
дорога
Народ, накачал тут из инета книжечек МБайт так на 400, кому надо?
ЗЫ А ваще хочу сделать фтп "все для начинающего вэб дизайнера", пока имеется парочка скриптов (не в них дело), шаблончики, всякие картинки и прочая лабуда...
Для шаблончиков и скриптов не плохо было бы зделать портальчик, ну и книжечки туда добавить!
 

wext

Король пиратов
Пользователь
11 Фев 2005
3.768
21
0
31
grand line
madfrager.ru
Для шаблончиков и скриптов не плохо было бы зделать портальчик, ну и книжечки туда добавить!
Просто шаблончики с нета сворованные, да и книжечки, если найдут, орать же будут )
Да и времени у меня нету, да + к тому на сайте будет всего 10 юзеров. Если конечно заняться сайтов серьезно, то можно побольше всего скачать.
 

Agent Smith

Пользователь
Пользователь
20 Дек 2005
425
0
0
32
Краснуха
www.unilans.ru
Чуваки, помогите разобраться?!
В общем, сделал веб-страничку(естественно через "Блокнот":smile:) и не могу вставить фон(свою картинку, просто закрасить я могу), весь инет облазил в поисках тэга, но что-то не нашёл. Тут нашёл тэг: background-image:url("...URL картинки..."); Но этот тэг какой-то хитрожпый, картинка не вставляется, наверно не для "Блокнота", или я делаю что-то не правильно.
Помогите разобраться не знающему человеку!!!
 

invisible

Активный пользователь
Пользователь
4 Июл 2005
244
0
16
в таким виде это нужно указывать в css
если ты там указывал то странно что у тя не отобразилось - учи css
если в теге боди то
<body background='/background.gif'>
 

Agent Smith

Пользователь
Пользователь
20 Дек 2005
425
0
0
32
Краснуха
www.unilans.ru
в таким виде это нужно указывать в css
если ты там указывал то странно что у тя не отобразилось - учи css
если в теге боди то
<body background='/background.gif'>
Ура!!! Спасибо за попощь!!! Но вот ещё вопрос появился. Всё сделал, картинка стоит, но вот только она размножилась на 4 части, как сделать чтоб всё было норм?