Введение в сайтостроение
реклама
Введение в сайтостроение План работы Тема Количество часов Введение. Виды сайтов; Пр/р Создать визитку 2ч Графика, создание прозрачного фона, гиперссылки Творческая работа 2ч + 2ч(дом) Списки, таблицы, фреймы, скрипты 2ч Использование редакторов сайтов. Macromedia Dreamweaver 2ч CSS, динамический HTML (использование слоев) 2ч Информационное наполнение сайта 2ч Размещение сайта в сети интернет 2ч CMS системы. Joomla 2ч Зачетное занятие 1ч Виды сайтов Корпоративные сайты Бизнес сайты, предоставляющие информацию для потребителей о компании, контактные телефоны и адрес, для заключения сделки или оказания услуг. Пример: http://alfabank.ru/krasnoyarsk/ Персональные сайты Персональные сайты, принадлежащие физическим лицам, с их личным профилем Пример: Владлен фото- МОИ ПУТЕШЕСТВИЯ -Vladlen foto.htm Сайты электронной коммерции Позволяют вам совершать покупки за границами вашего дома. Пример: http://www.ebay.com/ Социальные сети Некоторые примеры: Facebook, “В контакте”, “Одноклассники” и т.д. Сайты обмена фотографиями и картинками Пример: Радикал-Фото - создай фотоальбом на любимом форуме бесплатный хостинг фотографий.htm Блоги Это форма сетевого журнала. Такие типы сайтов очень популярны, потому что обеспечивают индивидуальную прямую связь с читателями Пример: http://blog.ru/ Официальный блог - Google Россия.htm Новостные веб-сайты Пример: http://lenta.ru/ Правительственные и муниципальные веб-сайты Пример: http://kremlin.ru/ Сервисы Пример: http://google.ru/ http://joomlaportal.ru/ Flash сайты Вместе с текстом, они позволяют размещать видео. Flash-сайты развиты в графике и представляют собой отличный способ Интернет маркетинг Пример: YouTube - Broadcast Yourself.htm Основы HTML ТЭГИ, СТРУКТУРА С чего начинается HTML Надо соблюсти "правило первой строки": <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Структура документа <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> Текст документа </BODY> </HTML> Заголовок HEAD Определяет начало и конец заголовка документа TITLE Определяет имя всего документа, которое отображается в заголовке окна браузера BASE Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Заголовок STYLE Используется для вставки в документ таблицы стилей CSS LINK Описывает взаимосвязь документа с другими объектами META Используется для вставки метаданных Атрибуты Base HREF - определяет базовый адрес (URL) текущего документа. TARGET - определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Пример: <HEAD> <BASE href="http://www.igf.ru/other/index.html"> <TITLE>Руководство по эксплуатации</TITLE> </HEAD> ... <A href="../list.html">Список</A> ... <!-- http://www.igf.ru/list.html --> CSS – таблица стилей <HEAD> <TITLE>Пример использования таблицы стилей</TITLE> <STYLE TYPE="text/css" TITLE="Cool table"> </STYLE> </HEAD> Body – тело документа BACKGROUND - определяет изображение для "заливки" фона; BGCOLOR - определяет цвет фона; TEXT - определяет цвет текста; LINK - определяет цвет гиперссылок в документе. Пример <BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050“ > ... Текст документа. ... </BODY> </HTML> Основы HTML ФОРМАТИРОВАНИЕ FONT Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тегами Атрибуты FONT SIZE - определяет размер шрифта. Возможные значения: от 1 до 7; COLOR - определяет цвет текста. FACE - определяет используемый шрифт. Times New Roman, Arial, Tahoma, Courier, Courier New. Пример: <FONT SIZE="+2" COLOR="#AA0000"> Увеличенный красный шрифт </FONT> <FONT SIZE="3" FACE="Courier New" COLOR="Magenta"> Моноширинный фиолетовый текст 3 размера </FONT> Выделение текста <I>курсив</I> <EM>логическое выделение курсивом</EM> <B>Полужирным</B> <STRONG>сильный</STRONG> <U> Подчеркнутый текст </U> <S,STRIKE>Перечеркнутый</S,STRIKE> <BIG>увеличенное слово </BIG> <SMALL>уменьшенное слово</SMALL> Выделение текста <SUP>Верхний индекс</SUP> <SUB>Нижний индекс</SUB> <CODE> текст как формула</CODE> <KBD> текст, который нужно набрать на клавиатуре</KBD> <VAR>обозначение переменной</VAR> <CITE> Оформляет текст как цитату или ссылку на источник </CITE> Текстовые блоки H1,H2,...H6 Используются для создания заголовков текста Атрибут ALIGN - определяет способ выравнивания заголовка по горизонтали. Возможные значения: left, right, center, justify. Пример <H1 ALIGN="center">Самый большой заголовок посередине</H1> <H2>Заголовок поменьше</H2> ... <H6 ALIGN=“right"> маленький заголовок справа</H6> P – для разметки параграфов <P ALIGN="center">Это центрированный параграф.<BR> Текст располагается в центре окна браузера</P> <P ALIGN="right">А это параграф, выровненный по правому краю.</P> DIV – выделение блока текста ...Текст документа... <DIV ALIGN="center"> ...Текст, таблицы, изображения. Выравнивание по центру. </DIV> ...Текст документа... ADDRESS – почтовый адрес Пишите по следующему адресу: <ADDRESS> Москва. ул. Академика Королева, 13 <BR> Мурзилке </ADDRESS> BLOCKQUOTE - для длинных цитат Редакция журнала "Домосед" выражает благодарность Бухаресту Магарычу Шницелю за замечательное стихотворение: <BLOCKQUOTE> Синели красные ромашки,<BR> Желтели в небе облака,<BR> Синицы в теплый край летели,<BR> К истоку двигалась река.<BR> </BLOCKQUOTE> BR – перенос строки Атрибуты CLEAR - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения : all - завершить обтекание изображения текстом. left - завершить обтекание текстом изображения, выровненного по левому краю. right - завершить обтекание текстом изображения, выровненного по правому краю. Пример <Img …> <BR CLEAR=“all”> HR – вставляет горизонтальную линию Атрибуты WIDTH - определяет длину линии; SIZE - определяет толщину линии; ALIGN - определяет выравнивание ; NOSHADE - определяет способ закраски линии как сплошной. Без данного атрибута линия отображается объемной; COLOR - определяет цвет линии. Пример Текст, разделенный <HR NOSHADE WIDTH="50%"> сплошной горизонтальной линией. Создайте страничку «Визитка», используя изученные тэги
