[ На главную ] -- [ Список участников ] -- [ Правила форума ] -- [ Зарегистрироваться ]

Web дизайн

  Вход на форум   логин       пароль   Забыли пароль? Регистрация
On-line:  

Раздел: 
художественная гимнастика (Rhythmic Gymnastics) / Компьютеры, программы, софт, комплектующие, железо / Web дизайн

Страницы: << Prev 1 2 3 Next>> новая тема

Автор Сообщение

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:33
3.6 Некоторые приемы в HTML

1. Фон с фиксированным изображением.

Путешествуя по web'у, наверно замечали сайты с фоном, который при прокручивании страницы остается на месте? Так вот этот трюк очень даже легко воспроизвести, делается это так:

<stylе type="text/css">

BODY { background-image: url(название_бэкграунда.gif);

background-attachment: fixed}

</stylе>

Данный код вставьте между тегами <HEAD> и все.

Но если вы не используете CSS, можно поступить по-другому:

<BODY background=1.gif bgProperties=fixed>

Параметр "bgProperties", со значением "fixed", аналогичен примеру, рассмотренном выше.



2. Ваш рисунок в меню "Избранное"

С помощью этого кода, Вы можете добавить свою иконку в пункт "Избранное." Изображение должно быть размером 16х16 пикселей. Этот код нужно вставить между тегами <HEAD>:

<LINK REL="SHORTCUT ICON" HREF="mypage.ico">



3. Убираем полосу прокрутки в поле TEXTAREA.

Точнее будет не убрать, а скрыть. В общем, все дело в том, что мы делаем полосу прокрутки одного цвета с фоном и все. Сделать этот трюк нам поможет CSS, смотрите:

<TEXTAREA rows="2" cols="2" stylе="

background-color:#dddddd;

scrollbar-face-color: #dddddd;

scrollbar-highlight-color: #dddddd;

scrollbar-shadow-color: #dddddd;

scrollbar-3dlight-color: #dddddd;

scrollbar-arrow-color: #dddddd;

scrollbar-track-color: #dddddd;

scrollbar-darkshadow-color: #dddddd">

</TEXTAREA>



3.7 Как адаптировать сайт под различные видеорежимы

У посетителей, приходящих на вашу страницу выставлен различный видеорежим. Большинство посетителей используют видеорежим 1024 на 768. Все больше пользователей выставляют размер рабочего стола 1280 на 1024. Есть уникумы, у которых до сих пор стоит размер рабочего стола 640 на 480.

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

jаvаScript позволяет решить эту проблему. В арсенале его объектов содержится масса свойств, которые определяют свойства системы пользователя.

Чтобы определить видеорежим достаточно опросить свойства width и height объекта screen:

<script language="jаvаScript">

<!--

var height=0;

var width=0;

width = screen.width

height = screen.height

document.write("Размер вашего рабочего стола: ");

document.write(width + " на " + height);

//-->

</script>

Если вы теперь вставите данный код в свою страницу, то следующее сообщение расскажет вам о разрешении вашего экрана:

Размер вашего рабочего стола: 1024 на 768

Можете поэкспериментировать, поменять на своем компьютере размеры экрана, затем нажать кнопочку "обновить" в браузере, и вы увидите, что сообщение изменилось.

Итак, опросив свойства экрана, мы получим переменные, значения которых можно использовать в дальнейшем для формирования страницы. Оба значения нам ни к чему, достаточно использовать только одну переменную - width. К тому же в различных типах браузеров значение высоты экрана будет разной величиной.

Рассмотрим самый простой вариант - на каждый видеорежим создан дубликат страниц. Необходимо сделать чтобы автоматически загружалась нужная. Воспользуемся условным оператором if, который будет проверять значение переменной width, и в зависимости от ее величины загружать необходимую страницу.

<script language="jаvаScript">

<!--

if (width>800)

self.parent.location="page1024.html";

else

if (width == 800)

self.parent.location="page800.html";

else

self.parent.location="page640.html";

//-->

</script>

для браузеров не поддерживающих jаvаScript предложим загружать страницу page800.html:

<noscript>

<a href="page800.html">ENTER</a>

</noscript>

Полный код страницы будет выглядеть следующим образом:

<HTML>

<HEAD>

<meta http-equiv=Content-Type content="text/html; ch arset=windows-1251">

<TITLE>Автоматическая загрузка</TITLE>

</HEAD>



<BODY>



<script language="jаvаScript">
<!--var width=0;

width = screen.width

if (width>800)

self.parent.location="page1024.html";

else

if (width == 800)

self.parent.location="page800.html";

else

self.parent.location="page640.html";

//-->

</script>

<noscript>

<a href="page800.html">ENTER</a>

</noscript>

</BODY>
</HTML>

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:35
Страница 23 из 25


4 Подводя итоги

4.1 Как разместить свой сайт в интернете

Необходимо выбрать сервер, на котором мы будем размещать свой сайт. Например, www.narod.ru. Сначала нужно пройти процедуру регистрации, при которой вы получите имя своего сайта, заполните некоторые свои данные и придумаете себе пароль. Потом, введя свой логин и пароль, необходимо зайти в свою мастерскую. Там вы выбираете пункт "Управление файлами" и закачиваете все файлы своей странички, используя предложенный интерфейс. Это самый простой способ без использования каких-либо дополнительных программ. Стартовая страница вашего сайта должна называться index.html. Точно так же, вы можете закачать на сайт и остальные файлы, например фотографии, музыкальные записи или программы, которыми вы хотите поделиться с посетителями.

Так же вы можете получить доступ с своим файлам на сервере по FTP (File Transfer Protocol - протокол передачи файлов). Используя FTP вы можете пересылать (копировать, передавать) файлы в Интернете (с удаленного компьютера на локальный и наоборот). Кроме того, при помощи FTP можно работать со своими файлами прямо на удаленном компьютере (переименовывать их, удалять, создавать каталоги и т.д.).

Чтобы воспользоваться протоколом FTP, понадобится специальная программа, так называемый FTP-клиент. FTP-клиентом может служить интернет-броузер (MS Internet Explorer, Netscape Navigator), программа управления файлами Far Manager, специализированная программа CuteFTP и другие. FTP-клиент встроен также в некоторые HTML-редакторы, такие как HomeSite, Dreamweaver или FrontPage.

В командной строке браузера нужно набрать следующее:

ftp://ваш_логин:ваш_пароль@ftp.narod.ru

Например, если ваш логин в Яндекс-Паспорте - myname, а пароль к нему - 12345, то строка должна быть такой:

ftp://myname: 12345@ftp.narod.ru.Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка jаvа-script

Когда соединение будет установлено, в окне браузера появится список файлов вашего сайта.

Имена файлов могут содержать только буквы латинского алфавита, цифры и символы . (точка) и _ (подчеркивание). Имя файла не должно начинаться с точки. Запомните, что существует разница между именами файлов в Windows и Unix системах. Большинство web-серверов в интернете располагаются именно на unix системах. Различие в регистре символов, windows к нему не чувствителен, т.е. FILE.EXE и file.exe для него одно и то же, но для unix систем это два совершенно разных файла. По этой причине у многих начинающих web-дизайнеров возникают ситуации, когда ссылки на какие-либо файлы могут не работать.



4.2 Как разместить на web-странице счетчик посещений

Счётчик - это специальный блок, который можно установить на любую страницу web-сайта с целью фиксации количества её посещений.

Существует огромный выбор готовых счетчиков, предоставляемых различными службами. Как правило у любого провайдера, предоставляющего место под страничку есть счетчик. Достаточно внимательно прочитать раздел "Помощь" чтобы разобраться как установить счетчик.

Есть такой счетчик и на сайте http://www.narod.ru. Он подсчитывает общее число заходов на страницу за весь период. Статистика посещений - отдельный раздел Мастерской, с помощью которого можно следить за посещаемостью сайта в целом, с разбивкой по дням. Показания счётчика можно сделать доступными посетителям, при этом возможен выбор варианта дизайна его отображения на странице. Статистику посещений может просматривать только владелец сайта.

Для того, чтобы установить счетчик на страницу, следует в Мастерской выбрать раздел «Управление файлами», затем в строке с той страницей, на которую вы хотите его установить, нажать кнопку «Свойства» и выбрать в появившемся окне закладку «Счетчик». Здесь отметьте флажок «использовать счетчик на странице», выберите дизайн счетчика и нажмите «Сохранить».

После этого в коде вашего документа HTML перед тегом </BODI>добавится следующий код:

<BR>

<CENTER>

<IMG SRC=http://www.narod.ru/counter.xhtml>

</CENTER>

Этот код вы потом можете переставить в любое удобное для вас место вашей страницы. Показания счетчика можно увидеть Мастерской в разделе «Управление файлами» в скобках после имени страницы, на которой он установлен. Кроме того, показания счетчика, если он не невидимый, можно увидеть на самой странице.

Наиболее предпочтительнее установить счетчик-ретинг от сервисов статистики, таких как: TopMail, KMindex, Rambler, HotLog, SpyLog и др.

Кроме счетчика вы получите подробную статистику за месяц, неделю и день, а также сравнение в рейтинге себя с другими. Подсчет числа просмотров ваших страниц, уникальных посетителей, география посетителей, откуда попадают на ваш сайт, настройки пользователей, такие как разрешение экрана, типы браузеров, операционная система и т.п. Служба KMindex кроме того предоставляет отчет «Поисковые слова» (блок «Ссылки»), который представляет собой рейтинг поисковых слов, распределенных по четырем главным поисковым машинам Рунета - Яndex, Rambler, Апорт, Google. Для получения счетчика посещений, например, от TopMail вам необходимо зайти на страницу регистрации http://top.mail.ru/add. Нажмите на вкладку "Регистрация" и выполните все запрашиваемые процедуры. После этого вы получите код счетчика.

Скопируйте полученный код и поместите себе на страницу в удобное для вас место. Аналогично вы можете зарегистрироваться и получить счетчик на других службах, таких как курсы валют, или прогноз погоды.

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:38
http://wartix.net/log/ssi

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:40
Заключение

Как уже отмечалось web дизайн не простое направление деятельности. Как и во всех современных, да и уже устоявшихся направлениях необходимо учиться, учится и еще раз учиться. Стоить помнить одно - на сегодняшний день технологии меняются с завидной скоростью, и необходимо учить более новые. К примеру как сейчас появление технологии Ajax позволит соперничать HTML-PHP технологиям с такой интерактивной средой как Macromedia Flash, а в некоторых возможностях даже позволят превзойти ее.

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

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:49
http://wartix.net/log/code/js-css-menu.shtml
Выпадающее меню
Если на сайте много ссылок в меню, то есть смысл сделать навигацию в виде ниспадающего меню для оптимизации структуры сайта.
Для начала рассмотрим код самого меню. Вёрстка может быть произвольная, я использовал блочную вёрстку.
<div onmouseover="menushow('1');" onmouseout="menuhide('1');" stylе="float: left; width: 50%;">
<div class="navhead">информация</div>

<div id="navbody1">
<a href="http://wartix.net/info/about/">о проекте</a><br />
<a href="http://wartix.net/info/contacts/">контакты</a><br />
<a href="http://wartix.net/info/sitemap/">карта сайта</a>
</div>

</div>

<div onmouseover="menushow('2');" onmouseout="menuhide('2');">
<div class="navhead">сервисы</div>

<div id="navbody2">
<a href="http://wartix.net/text2bin/">text2bin</a><br />
<a href="http://wartix.net/passgen/">passgen</a><br />
<a href="http://wartix.net/domaincc/">domaincc</a>
</div>

</div>
Первому блоку было присвоено имя navbody1, а второму — navbody2. Для каждого раздела при наведении мыши на элемент и при уходе с элемента вызывается функция JS.

Стоит также добавить пару строк на CSS. Для этих блоков указано свойство visibility: hidden. Также я указываю курсор "pointer", чтобы пользователь, у которого отключена поддержка jаvаScript, понял, что это — не просто заголовок, а здесь скрывается блок навигации.


<stylе type="text/css">
.navhead {font-weight: bold; background-color: #f5f7f7; cursor: pointer;}
#navbody1, #navbody2 {visibility: hidden;}
</stylе>
Главная составляющая этого проекта — код на jаvаScript:


<script language="jаvаscript" type="text/jаvаscript">
//<!--
//<![CDATA[
function menuhide(menunum)
{
var currentmenu = document.getElementById("navbody" + menunum);
currentmenu.stylе.visibility = 'hidden';
}

function menushow(menunum)
{
var currentmenu = document.getElementById("navbody" + menunum);
currentmenu.stylе.visibility = 'visible';
}
//]]>
//-->
</script>

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:50
При наведении курсора на блок активизируется функция menushow(menunum). Menunum — переменная, которая хранит строку с номером меню. Функция выбирает элемент страницы, а имя складывается из navbody и номера. Далее для элемента задаётся свойство visibility: visible. Функция menuhide() (скрывающая меню) срабатывает, когда курсор покидает область меню.

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:53
http://wartix.net/log/articles/

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 06:56
www.imena.ua

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 07:01
Как работать с Xara Menu на хосте narod.ru..
http://sellexpress.ru/p62189.html
Кто не будь пробовал сей продукт программиста Игоря на народе?

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 07:05
Xara Menu Maker 1.1 Academic Edition

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 07:16
файлы с народа качаються через РЕФЕРАЛ и никак иначе?

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 07:21
http://getip.ru/ru/users.narod.ru

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 07:23
www.ru-monitor.ru

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 07:26
www.etorg.com/cat/2051/
Торговля воздухом?

500 000 000 000 000 RSG
Группа: Администратор
Сообщений: 13693
 Добавлено: 30-06-2007 08:27
www.i2r.ru/static/476/out_21555.shtml
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
www.webmascon.com/topics/coding/42a.asp
www.e-gloryon.com/tips/submenu.html

Страницы: << Prev 1 2 3 Next>> новая тема
Раздел: 
художественная гимнастика (Rhythmic Gymnastics) / Компьютеры, программы, софт, комплектующие, железо / Web дизайн

Отвечать на темы могут только зарегистрированные пользователи

KXK.RU