Главная | Регистрация | Вход | RSSСуббота, 22/Сен/2018, 13:57

МБОУ "СШ №36"

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум Школы №36 » Программирование » Web - программирование » WEB дизайн (html для новичков)
WEB дизайн
BeNДата: Пятница, 14/Дек/2007, 17:56 | Сообщение # 1
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
С чего начинать?
Для начала Вам нужно выбрать редактор. Cyщecтвyeт двa типa peдaктopoв: WYSIWYG (What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм.
Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep:
Front Page, Word
В это случае я вам помочь ни чем не могу, читайте HLP-файлы этих программ.
Ecли хотите научиться paбoтaть c HTML-кoдoм нaпpямyю, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь -
HTMLPad2000, Notepad, Bred2
Лично я выбрал Bred2.1.8, которым заменил стандартный Notepad Windows. Bred2 в отличии от стандартного Notepad`а обладает множеством разных настроек - ToolBar, StatusBar, MultiUndo, есть подсветка HTML тегов, автозамена, автоматическая регистрация расширений (*.txt, *.ini, ...), а лимит текста - не менее 1Mb. И это далеко не все его возможности. Вашему вниманию предлогаеться русская версия.
С чего же начинать? Во-первых попробуйте сделать следующее...
Откройте Блокнот и скопируйте в него:
Примечание: Все, что выделено красным Вы исправляете, а мои комментарии, выделеные черным, - удаляете. Последнее делаеться по желанию, т.к. Обозреватель игнорирует комментарии.

<!--Пример HTML документа.-->
<html>
<head>
<!--Следующая строчка - кодировка.-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ваш заголовок</title>
</head>
<body>
<!--Теперь указываем название шрифта (лучше два, можна и больше, через запятую), его размер и цвет.-->
<font face="Verdana,Sans-serif" size="2" color="#000000">
<b>Название Вашего раздела</b><p>
Здесь Ваш текст.
<p>
<!--Далее встраиваем графический файл в документ. И будет он у нас по центру.-->
<center>
<img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку">
</center>
</font>
</body>
</html>
Сохраните документ как htm файл (например, 001.htm) и запустите. Вы создали первую свою страницу. Поздравляю!
Теперь расскажу немного о тегах - знаках, распологающихся в скобках. Большинство тегов имеют открывающийся элемент <> и закрывающийся </>. Между ними и находяться коды, которые распознает Обозреватель. HTML-документ всегда начинаться отрывающимся тегом <HTML> и заканчиваться закрывающим </HTML>. Дальше идет заголовок <HEAD></HEAD>. Между этими тегами всегда должна находиться информация о кодировки страницы, в нашем случае <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">, и теги опредиляющие название страницы <TITLE></TITLE>. Только теперь между тегами содержимого документа <BODY></BODY> можно распологать свою информацию, рисунки, видеофайлы, аудиофайлы...
Размеры графического файла (в пикселях) по горизонтали и по вертикали, а также выпадающую подсказку можно не указывать, но тогда страничка грузиться дольше, не забывайте об этом. И еще - большие картинки Обозреватель может игнорировать, если Вы не укажите их размеры.


Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
BeNДата: Пятница, 14/Дек/2007, 18:02 | Сообщение # 2
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
Цвет и фон.
Цвет и фон страницы выбираються по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.
Итак сначала про цвет. Для его вставки в строку с тегом <BODY> Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатиричный вид. Данные два примера заполняют страницу документа красным цветом.
<BODY BGCOLOR="RED"> (использовано название цвета)
<BODY BGCOLOR="#FF0000"> (использован шестнадцатиричный вид цвета)
Тепер о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:
<BODY BACKGROUND="images.gif">

Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологаеться, что графический файл рассположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.
На два уровня вниз.
Параметр="Folder_1/Folder_2/images.gif"
На два уровня вверх.
Параметр="../../images.gif"
Подобное указание путей применяется для разных элементов, например, ссылок, рисунков, файлов.
По своему опыту знаю, что использование фонового цвета более рационально с соображений быстрой загрузки сайта, рисунки вообще грузяться дольше, даже самые маленькие.
Тег <BODY> может также иметь параметры отступов в документе (определяются числовым значение).
leftmargin - отступ слева
rightmargin - отступ справа
topmargin - отступ сверху
bottom margin - отступ снизу
<BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">
В данном теге могут присутствовать и другие параметры, например, какие-то функции JavaScript, задание цветов текста и ссылок. О них будет рассказано в других статьях.


Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
BeNДата: Пятница, 14/Дек/2007, 18:03 | Сообщение # 3
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
Изображения.

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

В таблице находится описание каждого параметра данной конструкции:

SRC Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь. Вы можете перейти на закладку, в которой идет речь о путях.

ALIGN Выравнивание изображения в документе:
left - по левому краю.
right - по правому краю.
top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

BORDER Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).

WIDTH Ширина изображения в пикселях.

HEIGHT Высота изображения в пикселях.

HSPACE Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.

VSPACE Вертикальный отступ в пикселях. Не обязательный параметр.

ALT Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.

NAME Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.

LOWSRC Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Пример обычной вставки изображения в электронный документ Вы можете наблюдать ниже. Вместо названия файла я вставил изображения папки. Подведите курсор к рисунку, чтобы увидеть подсказку.

<IMG SRC=" " BORDER="0" ALT="Папка" WIDTH="17" HEIGHT="16">

Всегда задавайте размеры картинки в параметрах height и width, резервируя тем самым место в окне Обозревателя еще до загрузки изображения. Параметр alt можно не указывать, но вдруг у человека не загрузилась картинка, он хоть будет знать, что она собой представляет.


Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
ex1kДата: Пятница, 14/Дек/2007, 18:09 | Сообщение # 4
¤Администратор + модератоР¤
Группа: Администраторы
Сообщений: 243
Репутация: 19
Статус: Offline
зачёт!=)

________________0ооо___
___ооо0________(___)____
__(___)_________) _/_____
___\_ (_________(_/______
____\_)_________________
 
BeNДата: Пятница, 14/Дек/2007, 18:10 | Сообщение # 5
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
Изображения-карты.
Карты - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие.
В данном примере изображения-карты Вы можете безобоязненно щелкать по ссылкам, они никуда не ведут, а выводят сообщения о том, какие ссылки были нажаты. Кнопки на этом изображении я нарисовал только для того, чтобы можно было видеть ссылки, а не искать их наугад по всему рисунку.
Здесь приводится HTML код данного примера. В нем исключены ссылки на script, который использовался в примере для вывода сообщений.
<IMG SRC="Map_example.jpg" BORDER="0" WIDTH="200" HEIGHT="160" ALT="Пример изображения-карты" USEMAP="#Map_example">
<MAP NAME="Map_example">
<AREA SHAPE="rect" COORDS="11,11,70,24" TITLE="Ссылка 1" HREF="URL">
<AREA SHAPE="rect" COORDS="70,72,128,83" TITLE="Ссылка 2" HREF="URL">
<AREA SHAPE="rect" COORDS="190,136,128,149" TITLE="Ссылка 3" HREF="URL">
Как видите, чтобы создать карту нужно вставить в тег <IMG SRC=""> атрибут USEMAP="#name", где name - имя карты (значок # обязателен). В примере использовалось название Map_example. Я пропускаю остальные атрибуты в этом теге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущей статье
Далее описываем активные области карты. Начинаем с открывающегося тега <MAP NAME="name"> (здесь повторяется имя, но уже без значка #), а заканчиваем закрывающимся тегом </MAP>.
Между этими тегами помещаем описание каждой активной области изображения: <AREA SHAPE="форма" COORDS="координаты" HREF="адрес" TITLE="альтернативный текст">. Элемент <AREA> имеет следующие аттрибуты и их значения:
SHAPE Описывает форму выделяемой области, возможные значения:
RECT - прямоугольник
CIRCLE - круг
POLY - многоугольник
DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой.

COORDS Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута SHAPE:
RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).

NOHREF Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца

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

TITLE Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

TARGET Значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ

Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit.
Прикрепления: 4822873.bmp(93.8 Kb)


Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
BeNДата: Пятница, 14/Дек/2007, 18:14 | Сообщение # 6
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
Стили (CSS).

CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.

Вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.

Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :

Описываем стили под именем Example :
<STYLE><!--
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
--></STYLE>
Здесь вызываем описания стилей :
<div class="Example"> Пример </div>

Если Вы распологаете стили в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:

<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">

Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся теги <STYLE></STYLE>. Например:

У нас есть файл Example.css, содержажий такие параметры (подчеркиваем ссылки только при наведении на них курсором):
<!--
A { text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }
-->

Ссылка на него в HTML документе будет выглядить так:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">

Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.

<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>

В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.

Свойства шрифта:
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
Пример:
P {font-family: Verdana, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный)
Пример:
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах.
Примеры использования для тегов H1, H2, H3:
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}


Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
BeNДата: Пятница, 14/Дек/2007, 18:16 | Сообщение # 7
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
Свойства текста:

text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста
Пример использования для тега Н4:
H4 {text-decoration: underline;} (подчеркивание)
H4 {text-decoration: line-through;} (зачеркивание)
text-align Определяет выравнивание элемента.
Пример:
P {text-align: left} (выравнивание по левому краю)
P {text-align: right} (выравнивание по правому краю)
P {text-align: justify} (выравнивание по ширине)
P {text-align: center} (выравнивание по центру)
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
Пример использования для тега H1:
H1 {text-indent: 60pt;}
line-height Управляет интервалами между строками текста.
Пример:
P {line-height: 50 %}
Цвет элемента и фона:

color Определяет цвет элемента I {color: yellow;}
Пример использования для тега H3:
H3 {color: #0000FF;}
background-color Устанавливает цвет фона для элемента.
Пример использования для тега H3:
<H3 style=”background-color:gold; color:brown;”> Пример </H3>

Пример
Свойства границ:
margin-left (слево)
margin-right (справо)
margin-top (сверху)
margin-bottom (снизу) Устанавливают значения отступов вокруг элемента.
Пример использования для рисунка:
IMG { margin-left: 20pt}
IMG { margin-right: 20pt}
IMG { margin-top: 20pt}
IMG { margin-bottom: 20pt}
Единицы измерения:
px Пиксели
cm Сантиметры
mm Миллиметры
pt или % проценты


Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
BeNДата: Пятница, 14/Дек/2007, 18:16 | Сообщение # 8
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
Мета-теги.

Мета-теги - информация для Обозревателя и поисковых машин. В HTML документе всегда размещаются между тегами <HEAD></HEAD>. Большинство мета-тегов являются не обязательными, поэтому решайте сами какие использовать. Приведены самые полезные.

Кодировка. (обязательный мета тег) Указав его, Обозреватель будет правильно отображать текст страницы.
<meta http-equiv="content-type" content="text/html; charset=Кодировка">
Пример: <meta http-equiv="content-type" content="text/html; charset=Windows-1251">

Показ дополнительного файла перед основным. Вы можете использовать этот мета-тег для переадресации, не прибегая к навороченным скриптам.
<Meta name="Refresh" Content="число (в секундах); Url=имя файла с расширением">
Пример: <Meta name="Refresh" Content="10; Url=INDEX.HTM">
Данный пример загружает документ INDEX.HTM через 10 секунд.

Указание имени автора. Впишите свое имя или Nickname.
<Meta name="Author" Content="имя автора">
Пример: <Meta name="Author" Content="Владимир Дригалкин">

Описание документа. Текст, который Вы укажите в этом теге, будет отображаться поисковиками. Длинна описания не должна превышать 200 символов.
<Meta name="Description" Content="описание">
Пример: <Meta name="Description" Content="Все про взлом программного обеспечения. Инструменты, вирусы, исходники.">

Ключевые слова для поисковиков. Укажите поисковикам, по каким словам им осуществлять поиск информации, содержащейся на Вашей странице. Не пишите в этом тэге одних и тех же слов. Длинна списка до 800 символов.
<Meta name="Keywords" Content="слова через запятую или пробел">
Пример: <Meta name="Keywords" Content="crack cracking взлом">

Указание E-Mail.
<Meta name="Reply-to" Content="адрес E-Mail">
Пример: <Meta name="Reply-to" Content="Lenin@INC.net">

Дата создания сайта.
<Meta Name="Date" Content="месяц, число, год и время через пробел">
Пример: <Meta Name="Data" Content="May 28 1999 15:34 Am">


Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
ex1kДата: Суббота, 15/Дек/2007, 22:44 | Сообщение # 9
¤Администратор + модератоР¤
Группа: Администраторы
Сообщений: 243
Репутация: 19
Статус: Offline
хорошая инфа...для новичков 100% пригодится!

________________0ооо___
___ооо0________(___)____
__(___)_________) _/_____
___\_ (_________(_/______
____\_)_________________
 
КатёнкаДата: Четверг, 20/Мар/2008, 04:14 | Сообщение # 10
Турист
Группа: Пользователи
Сообщений: 82
Репутация: 3
Статус: Offline
ага,у меня в 10 классе был крутой сайт про наркоманию...=))))ну конечно,я про Женьку молчу biggrin
 
BeNДата: Вторник, 08/Апр/2008, 03:17 | Сообщение # 11
Профи
Группа: Пользователи
Сообщений: 147
Репутация: 6
Статус: Offline
Я видел, а мне понравилось! Главное что актуально!

Дружба, вообще нужна ли это понятие
Что бы лишний раз понять,
Что друг может быть предателем,
Наверно нужно
Ведь кроме того как подставлять,
Дружба учит ещё и прощать…
 
Форум Школы №36 » Программирование » Web - программирование » WEB дизайн (html для новичков)
  • Страница 1 из 1
  • 1
Поиск:


Copyright MyCorp © 2018
Бесплатный конструктор сайтов - uCoz