|
| новости сайта |страничка Веронички |мульт-парад Диснея | картинки к открыткам | русская кухня | избранная поэзия | диетическая | страницы судеб |звездная | комната смеха| просто красивая| гостевая |
|
| Начало
Итак, Вы решили создать свой сайт. С чего же начать? А начнем вот с чего: если Вы действительно загорелись этим делом, то -наберитесь терпения. Перед тем,как оставить свой след на просторах интернета, давайте сделаем Ваш сайт только Вашим, нешаблонным, неповторимым. Конечно, существуют серверы, где сайт можно сделать *за 60секунд*, используя шаблоны страниц, но это не будет столь Вашим личным творением, ежели Вы сами создадите его. Ниже, я расскажу о том, как я создавала мой первый сайт, не будучи профессионалом и даже любителем. Начиналось всё с нуля. Все мои уроки создания страниц
сайта я рекомендую людям, которые
хотят сделать свой сайт, не вникая
в подробности языка HTML(HyperText Markup
Language- язык разметки гипертекста, язык Всемирной
паутины, язык построения Web-страниц). Замечания:
Теперь,когда Вы ознакомились с рекомендациями,
настроились на работу..............идем далее
Желаю Вам успехов в начинании, немного терпения и - у Вас все получится! |
| Вернуться к другим страницам сайта |
HTML язык-школа |
|
| Урок1: Первая страница(основа) Итак, мы будем использовать редактор *Netscape*. Вы имеете такой редактор? Отлично! Начинаем творить :) Теперь последовательно выполните следующее: -открываем *My computer*;-выбираем диск (С:)(local disc), открываем его; -на панели управления документом(в самом верху)нажимаем кнопку*File*; -открылось новое окно, наводим курсор на *New*; -вновь появляется новое окно с всевозможными форматами документов и файлов, выбираем *Mozilla Hypertext Markup Language Document* и нажимаем - на Вашем диске(С:) в самом низу появился новый документ под названием *New Mozilla...*; -открываем наш документ(кликаем по этому новому документу дважды),перед Вами белый экран, а в строке поиска документа Вы видите его адрес и название: file:///C:/New%20Mozilla%20Hypertext%20Markup%20Language%20Document.htm -чтобы работать с созданным документом - нужно открыть его *внутреннюю сторону*делаем следующее:нажимаем *File* в панели управления, в открывшемся меню выбираем *Edit Page* или *Ctrl+E*нажимаем, теперь перед нами открылась*изнанка* нашего документа; -вот и настала пора вложить в нашу первую страничку все, что Вам захочется(картинки, анимацию,естественно-тексты и прочее) -обо всем этом в наших следующих уроках :) Обязательно переименуйте Вашу страницу как Вам удобно, сделаем это так:(работаем теперь всегда с тем документом, где мигает курсор) нажимаем *File*,в открывшемся окошке выбираем *Save As*нажимаем, открывается окошечко под названием *Page Title* и в нем вводим название вашего документа латинницей.Например - privet. Нажимаем *ОК* и у Вас открывается окно с вашим броузером, повторно введите имя страницы и выберите куда Вы её запишите. ЗАПОМНИТЕ!Всегда,при редактировании страницы мы работаем с ДВУМЯ файлами(в самом низу вашего экрана, прямоугольные кнопки со значками *Netscape* и *Composer*(кнопка с листочком в левом углу))- это *лицевой* и *изнаночный*(редактируемый) файлы соответственно. *Изнаночный*(Composer-файл)имеет четыре вида:*normal*,*show all tags*, *HТML source* и *preview*-это четыре кнопки слева,внизу страницы. ПРАВИЛО!
Вот теперь у нас есть основа
будущей страницы.............идем
далее?
|
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще раз |
следующий |
HTML язык-школа |
| Урок2: Фон
страницы Итак, у Вас есть основа будущего сайта-это файл под названием*privet*(урок1). Открываем этот файл, далее - *изнанку* нашей странички:помните как это делается? *File*,*Edit Page*. Теперь мы *внутри* файла privet. Начнём. В самом верху панелей управления документом находим кнопочку *Format*и нажимаем. Открывается новое окошко, находим *Page colors and background...*нажимаем. Перед Вами окно, которое задает цвета фона, ссылок и текста.Чтобы ваставить желаемые Вами цвета в этом окне щелкните на белый кружочек *Use custom colors*- теперь Вы видите, что в рамочках появились разные цвета. В этом окне пять категорий: *normal text*- цвет текста на странице; *link text*- цвет ссылок(линков-адресов других ваших страниц); *active link text*- цвет ссылок при нажатии на них; *visited link text*- цвет посещённой ссылки; *background* - а это цвет основного фона страницы. Нажимайте на цвет в рамочке напротив каждой категории, будет открываться таблица цветов и выбирайте желаемый. Ниже,в окне, Вы увидите *Background Image*-фоновая картинка. Тут Вы должны нажать на кнопку *Choose File...*,откроется окно Вашего броузера,оттуда(например из созданной Вами ранее папки*fon*) Вы выбираете желаемый фон и нажимаете в окне браузера *Open*, а в окне цветов-*OK*.После того, как Вы нажмете*ОК*-ваш экран заполнится фоном, который вы выбрали. Таким образом, мы сделали фон Вашей страницы. ОБЯЗАТЕЛЬНО в конце работы не забудьте СОХРАНИТЬ изменения на странице!!! -Нажимаем на панели операций на изображение дискеты со стрелочкой(Save)или нажимаем на *File*, выбираем команду *Save* и сохраняем. -Потом,отображаем ваши изменения на *лицевую* сторону страницы-переходим в *лицо* файла, нажимаем кнопку со стрелкой вверх(*Reload current page*). Замечание1:(коротко, последовательность действий)
Замечания2: Некоторые поправки в код документа, изменяющие фон.
Если
Вам все понятно, не теряем времени - идем
дальше...
|
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще раз |
следующий |
HTML язык-школа |
| Урок3: Текст В интернете очень много различных сайтов,посвященных эффектам текста (красочные анимированные приветствия, движущиеся строчки,мигание и свечение текста и прочее).Но сейчас мы будем создавать текст, не используя встроенных вложений(скриптов). Им(скриптам) будет посвящен отдельный урок. Итак, открываем наш файл *privet*. У нас уже есть фон и заданные цвета ссылок и текста. Приводим файл в редактируемое состояние -*File*, *Edit Page*. Вот теперь мы сделаем некоторые изменения в НТМL-коде страницы: -нажимаем внизу *HTML Source* -найдите строчку <title>privet</title>(вверху страницы) -перед ней скопиркуте и вставьте вот это: <meta http-equiv="content-type" content="text/html; charset=windows-1251"> В итоге у Вас должно быть написано следующее: <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>privet</title> </head> ... Таким образом, мы задали тип и характер текста. -нажимаем *Save*(на изображение дискеты вверху на панели управления), автоматически переходим в *нормальный* режим редактирования; -напишем что-либо на русском языке, например слово *УРОК*,сохраняем- *Save*; -переходим на *лицевую сторону* файла и нажимаем кнопку со стрелкой вверх(*Reload current page*). -Что Вы видите?.............Вы не можете прочитать слово? Тогда делаем вот что: а)закрываем оба окна; б)заходим на диск (С:), отыскиваем наш файл *privet*,открываем его,приводим в редактируемое состояние-*File*,*Edit Page*; в)удаляем наше слово *УРОК*, записываем заново и сохраняем *Save*; г)переходим на*лицо* файла, нажимаем кнопку *Reload...* Теперь слово читается. Напечатайте какую-нибуть фразу(перейдите снова в *изнанку* файла), сохраните- *Save*, вернитесь на *лицо * файла, нажмите *Reload...*. Получается? Отлично!!! Идем дальше. Замечание1:(коротко, последовательность действий)
С текстом на Вашей страничке можно делать следуюшие вещи: подчеркивать,укрупнять,наклонять,делать жирным :) задавать шрифт текста, смещать относительно страницы, задавать абзацы и прочее). Для этого существует нижняя панель - управление текстом. Итак, что там есть: -кнопка *Body Text*-при нажатии на нее, откроется окно с разными видами заголовков. Действует так: выделяете Ваш текст(или часть его), нажимаете на эту кнопку, выбираете вид текста, нажимаете. Например: Заголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6моноширинный шрифт - такой шрифт получается при использовании *preformat*.неформатированный текст - это обычный шрифт *body text* пример - это тип текста при использовании *address* Далее Вы видите: -*два квадратика с цветом*: передний-цвет текста; дальний- цвет фона; -кнопки -а и +а -эти кнопки позволяют Вам уменьшать или увеличивать размер шрифта. Например, (урок ...... урок). Чтобы использовать их, достаточно выделить текст или его часть и нажимамать на одну или вторую кнопку сколько Вам нужно :) -кнопка В -утолщает Ваш текст(УРОК); -кнопка /- наклоняет текст(урок); -кнопка U - подчеркивает текст(урок); -далее -две кнопки установки абзацев текста; -две кнопки смещения части текста; -и в конце -4-е кнопки размещения текста на странице(влево, в центре, вправо и по всей длине страницы). Есть еще дополнительный набор управления текстом в меню окона *Format*, но сейчас мы не будем разбираться в подробностях работы всех кнопок и окон :) Наберите у себя на страничке в редактируемом режиме*изнанке*(Composer) небольшой текст и поупражняйтесь в использовании этих кнопок. Цвет текста Если Вы хотите, чтобы на Вашей странице текст был выделен разными цветами, то сделать это очень просто. Можно сделать так: Набираете текст- выделяете предложение или весь абзац-нажимаете на первый цветной квадратик на нижней панели управления документом - выбираете цвет-*ОК*. В результате, текст может выглядеть так: Вы находитесь в гостях у Светланы. Вам нравится мой сайт? Может быть у Вас есть пожелания или предложения, критика, замечания? Запечатлеть Ваше посещение сайта Вы можете в *Гостевой книге*. Или так: П Р И В Е Т.......... Сможете сами так сделать? :) Экспериментируйте и фантазируйте.! Шрифт текста(для начала Вам не нужно это применять -меньше мороки) :) Помимо всех кнопок,управляющих положением, размером и цветом текста, можно самим задать тип шрифта текста. Пример -это шрифт текста на этой странице. Чтобы сделать подобное-напечатайте текст, откройте *HTML source*, теперь скопируйте вот это: <font face="Courier New, Courier, mono"> - этим самым Вы зададите шрифт *Courier New*,затем, вставьте этот код перед предложениями. Т.е у Вас каждый блок с текстом будет выглядеть примерно так: <font face="Courier New, Courier, mono"><font color="#ff9900"> Здесь будет находиться Ваш текст</font></font> Или можете задать вот такой шрифт: <font face="Monotype Corsiva,mono"> выглядеть это будет так: Приветствую Вас! или <font face="Impact, mono"> - а это смотрится вот так: Добро пожаловать! Если у Вас есть программа *Microsoft Word*, то оттуда можно выбрать различные виды шрифта текста и вставить их в тег <font face="...,mono">. Лучше всего,при оформлении
страницы, использовать таблицы
и в них помещать текст, фото, картинки и прочее.
О построении таблиц будет отдельный
урок.
ОБЯЗАТЕЛЬНО
в конце работы не забудьте СОХРАНИТЬ
изменения на странице!!! Нажимаем на
панели управления на изображение дискеты со
стрелочкой(Save)или нажимаем на *File*, выбираем
команду *Save* -сохраняем.
Управлять командами(отменять их) можно, нажав на *Edit* и *Undo*-таким образом Вы исправите ошибки, а восстановить обратно -*Edit* и *Redo*. Замечание3
Вторую страницу вашего сайта делать заново- НЕ НУЖНО!!! Вверху Вашей редактируемой страницы*Composer* Вы видите три панели управления.В середине(вторая сверху панель)есть кнопка с изображением листочка и карандаша - *New*, нажав на нее-Вы откроете новый лист *Composer*. Поправка:в новом листе будет другой характер текста *KOI-8*,отсутствовать название файла и цвета текста и ссылок. Или Вы можете сделать так: -открыть редактируемое состояние первой страницы (*File*,*Edit Page*), -затем -выделить все содержание страницы и удалить*Delete*, -нажимаем *File*,*Save As...*откроется окно Вашего броузера, выбираем-куда запишем новый файл, НАЗЫВАЕМ его другим именем,например - *privet1* и нажимаем *Save*. Теперь у Вас две страницы*privet*и*privet1*. Заметка: Удалять можно не все, если ,например, Вы делаете страницы в таблицах, то сами таблицы удалять не нужно! |
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще раз |
следующий |
HTML язык-школа |
| Урок4: Ссылки
и якори(анкоры) Ссылки(гиперссылки документа,линки)- это выделенные цветом слова или фразы, которые при щелчке переводят на другую страницу, сайт(другой ULR адрес). Для того,чтобы оформить ссылку -Вам нужно: - иметь уже готовые другие страницы вашего сайта, записанные на ваш (С:)диск или адреса тех сайтов, которые Вы хотите поместить у себя на странице; - поставьте курсор в то место,где будет находиться Ваша ссылка; - вверху, на второй панели управления, в самом конце, есть кнопка *Link*(два скрепленых кольца)-нажмите на нее; - открылось окно, в котором есть два поля для ввода слов: *Link Text* и *Link Location*. В верхнее поле введите имя Вашей ссылки(например, Фотоальбом); - в нижнее поле мы будем записывать адрес ссылки таким образом: а)если у Вас уже готовы другие страницы сайта, нажимаем на кнопку *Choose File*, отыскиваем, где находятся другие страницы, нажимаете на имя той страницы,на которую будет указывать Ваша ссылка,затем нажимаем *Open*- адрес Вашей страницы появился в поле *Link Location* и нажимаем *ОК*. Вы видите, что там,где у Вас стоял курсор, появилась синяя надпись,подчеркнутая -это и есть Ваша ссылка; б)если Вы еще не создали другие страницы сайта -не спешите оформлять ссылки или укажие тот адрес страницы,под которым она будет создана; в)если же Вы хотите поместить ссылки на другие сайты, то в поле *Link Location* введите интернетовский адрес этих сайтов, например: http://svega25.narod.ru/kartinka.html НЕ ЗАБУТЬТЕ СОХРАНИТЬ
ВАШИ ДОПОЛНЕНИЯ И ОТРАЗИТЬ ИХ НА *ЛИЦЕ*
ФАЙЛА!!! :)
Вот Вы уже умеете оформлять ссылки. О том, как их можно сделать красивыми, Вы прочитаете ниже. Якорь(анкор) - это внутренняя ссылка документа. Пример тому, вот эта страничка, которую Вы сейчас читаете. Здесь, при нажатии название урока в меню, Вы не переходите на другой лист(страницу) сайта, а лишь *перелетаете* ниже или выше по этой странице :) Работает это так: при нажатии на слово-ссылку, Вы перемещаетесь к тому месту, где установлен якорь. Особенно полезны внутренние ссылки, когда Вы помещаете большой текст на страницу(кулинария,стихи и прочее). Создав меню вверху страницы, Вы можете возвращаться к нему,нажав на слово-ссылку(из любого места, где Вы ее установите). Итак, приступим. - Якорь ставится перед той фразой (или словом), к которой мы будем *прилетать*; - выбираем ту фразу, перед которой поставим якорь, ставим туда курсор; - нажимаем на самой верхней панели управления документом на слово(кнопку)*Insert*; - открылось окно, в котором мы выбираем *Named Anchor...*нажимаем; - появилось другое окошечко, куда Вы должны ввести имя якоря(анкора) латинницей, например, напишите J - нажимаем *ОК* и Вы видите, что перед вашей фразой появился квадратик с изображением якоря :) - теперь самое главное:вернемся к Вашему меню или тому месту, откуда Вы хотите запросить эту фразу. Выделите слово в меню,нажимаем на панели управления(средней)кнопку *Link*, и вводим в поле *Link Location* имя якоря(анкора) со значком #, т.е. Вы вводите вот это: #J - нажимаем *ОК* и у Вас появляется ссылка на якорь J. Вот, посмотрите пример -нажмите на ЭТО Слово *ЭТО* -ссылка к якорю G, который стоит у меня перед фразой *Урок4 Ссылки и якори* Вам все понятно?
Если нет -прочтите урок еще раз.
А для тех, кому все ясно - посмотрим, как сделать ссылки красивыми. Наводим *красоту* ссылок Помимо трех стандартных цветов ссылок(линки:непосещенная,при клике и посещенная),есть еще один атрибут - цвет ссылки при наведении курсора (*Cover*). 1)Давайте зададим стиль ссылок. Делаем следующее: - копируем вот этот код; <style type="text/css"> A:link {COLOR: #339999; TEXT-DECORATION: none} A:visited {COLOR: #c0c0c0; TEXT-DECORATION: none} A:active {COLOR: #fffe00; TEXT-DECORATION: underline} A:hover {COLOR: #99ff99; TEXT-DECORATION: none} </style> - переходим в режим *HTML source*; - вставляем этот код между тегами <head> и </head>, таким образом заданный нами стиль ссылок будет действовать на весь документ (первоначально заданные Вами цвета -не действуют, т.к.этот код мы вставили в *голову* документа); - сохраняем (*Save*) наши изменения; - на *лице*страницы нажимаем кнопку*Reload...*. В этом коде написано следующее: А:(link,visited,active,hover)- это соответственно ссылки:непосещенная,посещенная,при щелчке и при наведении. {COLOR:#339999... - это цвет ссылки(код цвета Вы выбираете сами) TEXT-DECORATION:(none,underline) - это декорирование ссылки(без черты*none* и с чертой*underlinе*)- здесь Вы сами выбираете - быть вашей ссылке подчеркнутой или нет. Например, если Вы сделаете так: A:visited {COLOR: #ffffff; TEXT-DECORATION: underline} -то, Ваша посещенная ссылка(та, которую уже посмотрели)будет белого цвета и подчеркнута. 2)Конкретно, для цвета ссылки при наведении на нее курсора(hover), мы можем ввести(между тегами*головы*документа <head>и</head>)персональный код -вот такой: <style fprolloverstyle="">A:hover {color: #99ff99; text-decoration:none ; text-transform:none ; font-family:none; font-weight:none } </style> Это исходный вариант кода, где кроме цвета ссылки - не задано никаких изменений. Вы же можете вставить туда следующее: text-decoration:underline - Ваша ссылка при наведении курсора будет подчеркиваться или text-decoration:blink - при наведении курсора -ссылка начнет мигать; text-transform:uppercase - при наведении на ссылку - буквы ссылки станут заглавными; font-family:Monotype Corsiva!important - при наведении курсора-Ваша ссылка будет менять шрифт; font-weight:bold - при наведении-ссылка будет ужирняться :) Таким образом, Вы можете приукрасить Вашу страничку. :) 3)Пояснения к ссылке Наведите курсор вот СЮДА Хотите сделать так? Это очень просто. Когда Вы делаете обычную ссылку (выделяете слово(или ставите курсор на место будующей ссылки), нажимаете на*Link* в панели управления) в открывшемся окне есть кнопка *Advanced Edit*,нажмите на нее - откроется новое окно, где внизу есть два поля ввода:левое -*аттрибуты*, правое-*значение*. В поле *аттрибуты* нажмите на кнопочку со стрелкой -откроется меню -выберите *Title*,затем -в правое поле ввода *значение* запишите ваш текст (пояснение к ссылке)...готово, нажимаем*ОК*. 4)А можно ли сделать разноцветную ссылку?.....Попробуем? Прочитать урок еще раз ------- у меня - получилось. А у Вас? :) На этом мы закончим
урок о ссылках и якорях и перейдем к неменее интересному
- созданию таблиц.
|
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще раз |
следующий |
HTML язык-школа |
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще раз |
следующий |
HTML язык-школа |
| Урок6: Вставляем
картинку На этом уроке мы будем учиться вставлять картинку, анимашку или фото на страницу. Чтобы вся иллюстрация вашей страницы выглядела красиво -упорядочите ее, т.е.-поместите в таблицу(-ы).Например: Создадим таблицу, в которую вставим 5 картинок. Теперь,зададим размер каждой ячейки и положение в ней картинки(вверху, в центре).Делаем следуюшее: - ставим курсор в первую ячейку; - нажимаем *Table*с изображением таблички,открывается окно*Table Properties*. Вверху Вы видите две закладки *Table*и*Sells*.Открыта закладка *Sells*,где мы зададим высоту и ширину ,положение содержания ячейки и ее цвет. Остальные аттрибуты не будем использовать; - нажимаем на каждую из кнопок *pixels*, выбираем *% of Table*и задаем размер ячейки(в процентах). Т.к. у нас 5 ячеек, то зададим каждую по 20%(*Height*и*Wigth*-высота и ширина ячейки). Далее, указываем расположение содержания ячейки (*Horizontal*и*Vertical*) например, *Middle*и*Center* - тем самым наша анимашка будет по середине ячейки. - теперь проделаем тоже самое с каждой ячейкой. В результате вся таблица стала с заданными параметрами ячеек; - снова ставим курсор в первую ячейку,нажимаем на *Image*, открывается окно,где вверху Вы видите четыре закладки: *Location* - место нахождения анимашки(фото, картинки).Здесь мы делаем во что:нажимаем на *Choose file*, отыскиваем Вашу каритнку или анимашку или фото в броузере,нажимаем *Open*, видите -адрес картинки появился в поле ввода, а сама картинка -в нижнем углу окна, далее называем картинку- во второе поле ввода *Alternate text*вводим название картинки или не называем ее-щелкаем по белому кружочку*Don't use alternate text*; *Dimensions* - размерность картинки.Если Вы хотите оставить ее натуральные размеры,то эту закладку можно пропустить. Если же Вам нужно задать свои габариты картинки, то щелкаем по белому кружочку *Custom Size* и задаем размеры в пикселях или процентах от ячейки(в клетке *Constrain* должна стоять галочка(взаимосвязь высоты и ширины картинки) -в том случае,если Вам не нужно искажать пропорции).Отключив галочку -Вы сами задаете размеры картинки. Вот пример: 
- натуральный
размер или
- уменьшенный
размер этой же картинки.*Appearance* - в этом окне можно задать рамку у картинки.Например:
здесь я задала рамку картинки *Solid
Border*шириной в 2pixels.Цвет рамки задаете сами -выделив
картинку и выбрав цвет на панели управления(два цветнах
квадратика).*Link* - в этом окне Вы можете сделать вашу каритнку ссылкой. Т.е. при нажатии на картинку произойдет перемещение на другой адрес страницы или сайта. Делаем так:нажимаем *Image*, находим закладку *Link*, в поле ввода записываем адрес ссылки или якоря.Затем, Вы можете оставить или отменить(щелкнуть на квадратик*Show border around linked image*)рамку у ссылки.После всего -нажимаем *ОК*. Не забутьте задать(или отменить)имя картинке. Вот пример: нажмите на картинки
(ссылка без рамки)или
(ссылка в рамке)и Вы вернетесь к началу
этого урока.Теперь, когда Вы задали всевозможные характеристики картинки, нажимаем *ОК*. Вот что получилось у меня:(в каждой ячейке -ссылка) :)
Идем.................................далее
|
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще раз |
следующий |
HTML язык-школа |
| Урок7: Создаем фотоальбом На этом уроке мы создадим фотоальбом, в котором каждая фотография(или картинка)маленького размера, но при нажатии на нее - фотография откроется в отдельном окне и в полную величину. Лучше всего использовать таблицу,в нее мы и будем помещать наши фото.Например, сделаем таблицу для 5-ти картинок(задайте все параметры таблицы и ячеек). - нажимаем *Image* на панели управления,выбираем картинку или фото из броузера, называем ее(или отменяем название); -нажимаем закладку*Dimensions*,щелкаем на кружочек *Custom Size*(в клетке *Constrain* должна стоять галочка -это взаимосвязь высоты и ширины картинки) и записываем следующие значения размеров картинки (фото):примерно ставим от 30 до 50 *% of sell*wigth и height устанавливается автоматически(высоту лучше не превышать,не более 60%); -нажимаем *ОК* и проделываем все сначала с каждой следующей картинкой (фоткой)в других ячейках; -вот результат(это получилось у меня):
Теперь нам нужно сделать так, чтобы при клике на маленькую картинку открывалось окно с нормальным размером этой картинки(фото). Делаем следуюшее: - копируем вот этот скрипт(открытие фото в новом окне):выделяем и нажимаем(*ctrl+C*) <script language="JavaScript"> <!-- function open_foto(name_foto) { window.open(name_foto,'foto','top=30, left=30, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=0, width=500, height=400'); } // --> </script> где ширину и высоту окна Вы можете задать сами, например,width=300, height=100' - окно будет меньшего размера. В этом скрипте цифра 0 означает отсутствие аттрибутов нового окна(минибара,дирекций, статуса и прочих),если Вы хотите, чтобы они присутствовали в открывающемся окне, измените 0 на 1, например,menubar=1 -теперь, вставяем этот скрипт в *голову* Вашего файла(открываем*HTML source* и перед закрывающим тегом </head> ставим скрипт(курсор на начало строки,например, после тега</style> и нажимаем *ctrl+V*). Получилось? Отлично! Теперь, будем вносить изменения в адрес картинки(фото),т.е. будем указывать на этот скрипт.Открываем *HTML source* и делаем следующее: - находим адресс Вашей картинки в таблице, он выглядит примерно так: <img src="../multyashki/demon.gif" alt="" width="55" height="55"> и перед ним ставим ссылку на скрипт: <a href="javascript:open_foto('demon.gif')"> и изменяем таким образом все адреса ваших картинок(фото)в таблице. Вместо *demon.gif* Вы ставите адрес Вашей картинки(фото).В результате, каждая картинка(фото) будет иметь следующий адрес: ...<a href="javascript:open_foto('demon.gif')"><img src="../multyashki/demon.gif" alt="" width="55" height="55">... Получаем такую штуку(нажимайте на картинки)
:)
Замечание: -Чтобы картинки в таблице не были в рамочке(после того,как Вы сделаете из картинки ссылку на открытие нового окна),нажмите в *Image*на закладку*Appearance* и там выставьте значение бордюра*Solid border* 0 pixels. -При оформлении фооальбома или галлереи картинок,помещайте на страницу не более 10-12 штук,иначе,страница будет долго грузится,особенно,если фото или картинки большого размера, лучше сделайте несколько страниц со ссылками друг на друга. Вот,в
принципе,все,что касается создания такого фотоальбома.
|
)
){kind=small}
){kind=small}
){kind=small}
)
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще
раз |
следующий |
HTML язык-школа |
| Урок 8: Скрипты Итак, усвоив все выше изложенное :)Вы уже самостоятельно можете смастерить неплохой сайт. Что же еще? Может добавить чего-нибуть эдакова: самопишущегося,крутящегося, приветствующего и подобного этому :) Тогда, нам нужно обратиться к скриптам. JavaScript - язык программирования, разработанный для создания интерактивных документов. Это объектно-ориентированный язык разработки встраиваемых приложений. Для внедрения в HTML-страницу языка JavaScript достаточно вписать специальный тег-контейнер: <SCRIPT> ... </SCRIPT>, внутри которого и будут располагаться операторы языка JavaScript. Нужно учитывать, что некоторые броузеры, не поддерживающие какие-либо теги языка HTML, могут просто игнорировать и теги языка JavaScript, но выведут всё содержимое на страницу в виде символов. Вот пример работы скриптов: Или вот так:
Если Вам нужен первый скрипт (из выше расположенных), то в то место, где хотите видеть его впишите следующее: <marquee scrolldelay="100">вставьте сюда Ваш текст</marquee> Обязательно задайте цвет и размер текста у скрипта. Перед скриптом ставим, например, <font size="+1" color="#c0c0c0">. В результате у Вас должно быть написано так: <font size="+1" color="#c0c0c0"> <marquee scrolldelay="100">вставьте сюда Ваш текст</marquee> Код второго скрипта(туда-сюда): <marquee behavior="ALTERNATE" scrollamount="50" scrolldelay="150"> Запишите сюда Ваш текст </marquee> Код третьего скрипта(снизу-вверх): <MARQUEE behavior=scroll direction=up height=100 loop=-1 scrollamount=1 scrolldelay=100 width=100><CENTER>*** <BR>Вставьте сюда Ваш текст<BR> ***</center></marquee> В этих скриптах можно изменить скорость движения текста: scrolldelay="100" - поставьте свое значение от 10-300. Еще один скрипт мы применяли при создании фотоальбома. Немного измененным его можно использовать для открытия нового окна при нажатии на ссылку. <SCRIPT LANGUAGE="JavaScript"> <!-- function open_window(name_window) { window.open(name_window,'window','top=30, left=30, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=0, width=600, height=400'); } // --> </SCRIPT> ............. Этот скрипт ставится между тегами<head> и </head>. В то место, где будет ссылка на открытие нового окна введите поправку: <a href="javascript:open_window('адрес нового документа')"> На этом я закончу разговор о скриптах. Кстати,не все скрипты работают с *Netscape*. |
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще
раз |
следующий |
HTML язык-школа |
| Урок 9: Коллекции Совсем маленькие коллекции. Фоны Вы посмотрите тут, а клип-арт - вот здесь. Все подручные материалы дла создания ваших страниц можно взять из интернета из сайтов *В помощь сайтостроителю* :) А если у Вас есть программа *Photoshop* и навыки работы в ней, то создать свое,неповторимое просто необходимо! :) |
| Урок 10: Помещаем готовый сайт в интернет После всех ваших стараний и трудов Вы сделали сайт. Поздравляю!!! Теперь его должны увидеть все :)Для этого ваш сайт нужно поместить на сервер, где есть такая возможность. Например, на *народе* (narod.yandex.ru). Набираем в интернете адрес: http://narod.yandex.ru В середине страницы Вы видите: *Займите это имя для своего сайта*. ЗАНИМАЙТЕ!!! Т.е. в белое поле введите название вашего сайта на латиннице.Здесь придется немного помучаться :) Далее,выполняете все пункты при оформления сайта. И вот Вы в *мастерской* Вашего сайта. Отыскиваем *Редактирование и управление файлами*,нажимаем(Вам нужно будет перекачать сюда весь Ваш материал:фото,картинки,страницы...) и начинаете делать следующее: - справа вверху Вы видите панель управления,находим *создать папку*,нажимаем,откроется новое окно и в белое поле вводим имя папки. Рекомендую завести столько папок,сколько у вас страниц, чтобы весь материал, относящийся к данной странице, был в этой папке; Все папки пусть будут в *корневой папке*, чтобы сразу было их видно. - теперь,открывайте папки поочередно и в каждую загружайте все ее содержание,кроме самих страниц(их поместите в *корнекую папку*); - САМОЕ ВАЖНОЕ!!! После того, как Вы загрузили весь материал в интернет, посетители еще не могут видеть Ваши картинки, фото,фоны и прочее т.к. Вы не отредактировали АДРЕСА(ULR) этих материалов. Для этого Вам нужно: -- открыть редактируемое состояние каждой HTML-страницы(кнопка с изображением карандаша слева у названия каждого файла). Откроется *изнанка *страницы*(в НТМL-коде). -- изменить все адреса использованного материала на интернетовские. Например, у Вас написано: <img src="../multyashki/demon.gif" alt="" width="55" height="55"> измените на: <img src="http://svega25.narod.ru/animashki/demon.gif" alt="" width="55" height="55">,где адрес будет другой(Ваш),вместо папки -animashki будет стоять имя Вашей папки,в которой находится эта картинка и имя самой картинки. Таким образам, везде, где у Вас записан материал с диска(С:), изменяйте адреса на интернетовские. -- после всех исправлений,проверяем(нажимаем на кнопку*изображение лупы*) и потом-*сохранить*. Проделываем такое редактирование с каждой страницей. Теперь будем делать *Главную страницу* сайта. Выберите из Ваших страниц ту, которая станет лицом Вашего сайта(в ней должны быть ссылки на все другие страницы и *Гостевая книга*-кстати, про Гостевую поговорим позже).Сделайте копию этого файла(страницы) и назовите ее index.html и только так!!! Иначе она не станет главной страницей Вашего сайта и его невозможно будет посмотреть. Таковы правила на *народе*. После того,как Вы все это проделаете, кликните на название Вашего сайта(в правом верхнем углу страницы*Редактирования и управления файлами*. Вот теперь Вы должны увидеть Вашу Главную страницу! Еще раз напоминаю, проверяйте правильность указания адреса страниц, иначе неправильно адресованный файл не будет находиться в интернете. Теперь о том, что Вам необходимо еще сделать. *Гостевая книга* -лучше всего взять шаблон в мастерской(внизу в левой колонке есть ссылка *Гостевая*,щелкните по ней и выберите образец). Обязательно вставьте адрес гостевой(вам его укажут) на Вашу главную страницу(например,в ссылку -гостевая). *Счетчик посещений* - на каждой странице можно организовать такую штуку :) Напротив каждой HTML-страницы в *корневой папке* справа есть кнопка *Свойства*,нажав на которую у Вас откроется новое окно,в котором Вы можете отредактировать страницу, огранизовать счетчик, поместить страницу в каталог и посмотреть параметры файла. *Каталог* - обязательно поместите хоть одну из Ваших страниц в каталог *народа*. Это повысит посещение сайта и даст Вам стимул к дальнейшему творчеству в области сайтостроения :) На этом все мои уроки и советы закончены - ДЕРЗАЙТЕ!!!
Искренне желаю Вам удачи, красивых содержательных страниц и огромного числа посетителей!!! С уважением,Светлана :) |
| Вернуться к другим страницам
сайта |
К списку уроков |
Прочитать урок еще
раз |
HTML язык-школа |
