Как создать web-страничку?

[Majik13]

Только для сети Астра-Ореол.

Итак, как же все-таки создать свою страничку в Сети?
Создание странички можно разбить на несколько этапов:

1й этап - Диалектический. На этом этапе еще не поздно отказаться от своей затеи и не морочить голову себе и окружающим.
Рекомендуется сесть и хорошо подумать, а нужна ли она вам вообще, эта страничка. Если там не будет никакой информации кроме краткой автобиографии создателя (зачастую урезанной из-за боязни выкладывать информацию о себе в сеть) трех фоток и двух песен, к тому же регулярно обновлять ее вы не собираетесь - то наверное и не стоит тратить время попусту. Если же вы считаете, что обладаете достаточно ценной информацией, которой хотите поделиться с окружающими и сможете регулярно обновлять и поддерживать свою страницу, или вам ПРОСТО НЕОБХОДИМО таким образом выразить самое себя - флаг в руки, переходите ко второму этапу.

2й этап - Аналитический. Сядьте в удобное кресло, поставьте перед собой чашку кофе, возьмите в руки карандаш и бумагу. Проанализируйте и рассортируйте все материалы, предназначенные для размещения на сайте. Выделите группы схожих по тематике материалов - они будут в одних разделах на сайте. Если вы думали создать раздел, например, с программами, а у вас таких нет и нет возможности своевременно доставать свежие версии - вычеркивайте этот раздел нафиг - он никому не нужен. Если хотите сделать раздел, но информации ПОКА нету - вычеркивайте и его, надпись "under construction" еще никому удовольствия не доставила. Запишите названия оставшихся разделов. Если вдруг оказалось, что информации на самом деле туева хуча и разделов тоже многовато - еще не поздно отказаться от своей затеи и не морочить голову себе и окружающим.
Если объем предстоящей работы вас не пугает - см. 3й пункт.

3й этап - Творческий. Добудьте где-нибудь программу-редактор html (dreamweaver, frontpage, homesite, другой). Где - дело ваше, можно купить диск, спросить в чате или откопать на чьем-то фтп. Установите программу. Разберитесь с тем, как она работает и что она собственно делает. Нет желания разбираться - еще не поздно отказаться от своей затеи и не морочить голову себе и окружающим. Если вы более-менее подразобрались в принципах функционирования данного ПО и сделали несколько не совсем уродливых страничек, вытащите из мусорного бачка структурную схему сайта, созданную на 2м этапе. Сделайте кучу страниц в соответствии с этой схемой и объедините их сквозной навигацией (меню) в соответствии с ранее выделенными разделами.
Один совет - не надо использовать на странице графику, взятую с других астровских страниц - от нее уже тошнит. Или рисуйте сами (свои кривые рисунки лучше чужих прямых), или, на крайняк, залезьте в самый дальний угол Интернета и стырьте оттуда пару картинок.
Второй совет - все страницы должны быть как-то визуально связаны, меню должно быть всегда на одном и том же месте. Для тех кто не понял первую часть фразы - делать на всех страницах разный по цвету фон - это плохо.
Объяснять вам детально, как и что делать - это тоже самое, что делать все за вас - никто не будет. Если есть желание создать страницу - разберетесь и сделаете все сами.
Дайте проверить сайт вашему другу - если он в течении первых пяти минут не врубится, как попасть с главной страницы в раздел "Я и моя собака" (к примеру), можете отказаться от своей затеи и не морочить голову себе и окружающим.
Если друг врубится, можете радоваться - теперь от идеи отказываться уже поздно.

4й этап - Глобализация. Итак, у вас есть 350 страниц, когда вы кликаете на них мышкой - ваш взляд радует сверкающий всеми 32битами цвета самиздат. Теперь надо, чтобы другие на него посмотрели. Для этого необходимо установить на свой компьютер хттп сервер (apache, sambar, iis, другой) и держать его включенным примерно 24 часа в сутки. Как устанавливать сервер - не раз уже обсуждалось на этом самом форуме и на миллионе других серверов. Повстречайте в чате человека, у которого такой сервер стоит и выпытайте у него инструкцию по установке. Установите сервер, заставьте его работать, попросите вашего друга из сети АО залезть на вашу страничку. Если он удачно туда залезет и тут же начнет опускать ваши веб-дизайнерские способности ниже плинтуса - не смущайтесь, ему просто завидно. Все прекрасно. Вас ждет последний этап.

5й этап - Промоушен. Наконец, надо заставить народ ходить на вашу страничку, пусть проникаются царящим на ней креативным духом. Для этого необходимо разместить ссылки на нее на всех известных вам гатчинских страницах - почти везде есть такие разделы, на странице "ссылки" нашего провайдера, и, самое главное, написать письмо по адресу [email protected], и попросить добавить ваш сервер в LIST of LOCAL SERVERS, созданный господином Софтом. 500 посетителей в месяц вам гарантировано. Если все-таки, каким-то образом на вашем сайте окажется интересная информация - число посещаний будет в десятки - сотни раз выше. Регулярно обновляйте сайт и не забывайте оставлять компьютер включенным с запущенным на нем хттп-серверов.

6й этап. Все, в ларек за пивом.

P.S. Несогласные и желающие дополнить - пишите, я не истина в последней инстанции.

 

[Kea&Хз]

Notepad-forever!!! :twisted:

 

[Esjot]

INHO, Allaire Homesite 4ever

 

[Кекс]

ОК, решил высказать свои мысли по вопросу темы, а не о том, что "Блокнот" - навсегда.
Полностью согласен с этапами, описанными Majik13. Некоторые мысли и комментарии.

Есть много причин, по которым вы решили-таки создать свой сайт. Возможно, просто чтобы самоутвердиться в своих и чужих глазах, идя в ногу с научно-техническим прогрессом. Возможно, у вас появились объективные причины рассказать миру о себе и что-то спросить (коммуникативная цель). Независимо от этого, прежде всего нужно решить, как этот сайт должен выглядеть, чтобы быть уникальным, отражающим именно вас. Таким образом, сайт будет как бы вашим автопортретом, по его виду люди будут судить и вас. (Не хотите, чтобы судили - не делайте сайт). Например, если у вас есть любимые цвета, их можно использовать для оформления, это уже будет частичка вашей индивидуальности. Но с цветами следует обращаться очень осторожно. Не вдаваясь в подробности колористики (цветоведения), упрощенно можно сказать, что цвета в сочетании друг с другом ведут себя совершенно по-разному, в зависимости от их количества, взаимного расположения в цветовом круге и т.д. Например, красный, взятый в отношении 1/9 к зеленому (квадрат 3х3, сбоку зеленый, в центре красный), даст максимальный контраст и визуальное напряжение (при одинаковой величине яркости и насыщенности этих цветов). Это явление можно использовать (очень осторожно!) для самых сильных акцентов. Для цветного текста на цветном фоне это неприемлимо по этой же причине - визуальное напряжение переходит в напряжение глаз, текст (основной информативный элемент!) перестает восприниматься. Со времен появления письменности предпочитали писать черным по белому. Это и сейчас самая универсальная комбинация цветов. Для цветного текста на цветном фоне можно подобрать противоположные цвета, но с разной яркостью и насыщенностью. Например, если взять для фона светлый, теплый, песочный желтый, то для текста может подойти темный, холодный синий (можно поэксперементировать с инвертными цветами даже в Paint-е ). По восприятию на белом фоне хорошо читается красный и зеленый текст, на желтом - черный. :!: Обратите внимание, в большинстве листовок, раздаваемых у метро и на вывесках многих магазинов используется именно это сочетание. Итак, можно (и желательно) обойтись всего тремя цветами: общий фон, текст, акценты. Один из них может иметь варианты по яркости или цветовому тону, в сторону двух других цветов или инвертным им. Многообразие цветовой гаммы производит только одно впечатление - безвкусицы. Вышеописанные явления не могут дать готовую модель хорошего сочетания - алгеброй гармонию не проверишь - это всего лишь более-менее общая концепция. Это даже не правило, ведь иногда именно нарушение правил дает потрясающий эффект (не только в web-дизайне, дизайне вообще, но и в музыке, кино и т.д.).
Итак, цвета подобрали. Теперь нужно раскрасить ими содержание, если оно, конечно, есть. Навигация, текст (форматирование и шрифты), иллюстрациии и декоративные элементы должны быть выдержанны одинаково на всех страницах. Это закон единства и целостности всего вашего творения.
Навигация должна быть удобной и понятной и связывать ссылками все страницы сайта. "Удобной и понятной" - это понятно, но как это выглядит? Есть даже такое понятие - "юзабилити", означающее как раз это удобство и понятность. На мой взгляд, довольно расплывчатое и неоднозначное понятие. Если бы оно было однозначным, то однажды найденное решение использовалось бы повсеместно, а сайты были бы похожи друг на друга, как капли воды. Безусловно, привычное вертикальное меню слева - удачное решение, но не везде оправданное. Конечно, это не значит, что нельзя использовать этот прием; это значит, что нужно подумать о наиболее подходящем в конкретной ситуации варианте. Возможно, это будет горизонтальное меню, выпадающее меню, карта-изображение, что либо еще или комбинация нескольких вариантов. Имеет смысл делать навигацию такой, чтобы потом, при появлении нового раздела на сайте, ее легко можно было подправить.
Текст должен быть иерархически и содержательно организован. Главные заголовки - главные на всех страницах, второстепенные всегда вторые после главных, основной текст всегда отличается от специального (типа примечаний, новостей и т.д.). Все это хорошо управляется с помощью таблиц стилей. Используйте шрифты, присутствующие у всех, независимо от операционной системы. Указывайте семейства шрифтов, например Arial (для PC), Helvetica (для Mac) и sans-serif (шрифт без засечек, если указанных ранее шрифтов нет в системе пользователя, он увидит текст, напечатанный каким либо шрифтом без засечек, установленным у него). Использовать экзотические шрифты можно в заголовках, но делать их в графическом виде. Любой шрифтовой наворот должен также быть обусловлен по смыслу. :!: Еще один факт: для больших объемов текста удачен шрифт с засечками (Times, например), для коротких сообщений, призванных привлечь внимание - без засечек (например, Arial). Заметьте, книги печатаются шрифтом с засечками, а журналы, объявления и вывески - без.
Чтобы картинки выглядели частью сайта, их нужно обработать под стиль страницы. Даже если вы взяли изображение из клипарта или откуда-то еще, один декоративный элемент стиля вашего сайта, пририсованный в Photoshop-е, уже сделает его уникальным. Например, просто рамка или надпись нужного цвета.
Декоративные элементы - это небольшие картинки, маркеры, полоски а также рамки таблиц и абзацев и т.д. Естественно, все они должны быть в одном стиле.

Это мой взгляд на общие принципы создания сайта вообще. Безусловно, сайты "для себя" отличаются от сайтов "для заказчика" (будь то какая-нибудь фирма или приятель, обещавший ящик пива за помощь), но вся вышеизложенная теория одинакова в целом.
Вот, пожалуй, пока все, а то как Филарет буду

Редактировались только очепятки :wink:

 

[Majik13]

2Кекс
Ну на самом деле для веба имеет смысл использовать шрифты с засечками (тот же Times) только большого кегля. Поверь мне, если шрифт меньше 10pt, ты его читать устанешь, если больше - мало влезет на страницу
А рубленые шрифты - это еще и единственный выбор для очень малого размера шрифта (например 6, 7pt). А сейчас, кстати, модно мельчить

К чему я это все? К тому, что не парьтесь и ставьте везде шрифт Arial (мой личный совет) А заголовки действительно можно любым шрифтом набирать, только в графике.

Что касается цветов, написал ты конечно кайфово, только я почти ничего не понял Пример с красным и зеленым был ужасен, не потому что он не катит, а потому что стоило мне представить, как прочитавшие его люди начинают применять это сочетание на страницах, так по спине мурашки поползли. Я бы наоборот порекомендовал не брать первичные/вторичные цвета (ж,с,к,з,о,ф), а использовать более спокойные смеси.

Ну, а теперь, для тех, кто (я надеюсь, что такие есть!) читает этот топик с целью сделать свою страничку, я хотел бы перечислить то, что по-моему делать не стоит

1. Фон текстурой (фотки, рисунки на заднем плане). Бесит. Очень редко выбирают текстуру нормальную.
2. Цвета - написано выше. Кстати, если фон зеленый/фиолетовый/серобуромалиновый, не стоит делать и текст подобных сумасшедших цветов. Попробуйте белый, глядишь, сразу проще будет разобрать, что написано.
3. Шрифты: два-три разных шрифта максимум. Если, конечно вы не претендуете на использование шрифта как инструмента. Я не претендую.
4. Разные разделы с разным оформлением. Пример - Даф, сайт офигенный по содержанию, но оформлен кошмарно. Второй пример - моя страница, еще более кошмарная и совсем не интересная
5. Ява скрипты. Бесит. Мельтешня на страницах отвлекает от содержимого, кроме того, все скрипты, кроме двух, что я видел в астре, тупые и абсолютно бессмысленные. Все эти бегущие строчки, болтающиеся за курсорами надписи и ползающие по страницам менюшки у человека со вкусом вызывают стойкое отвращение.
6. Новости. Если че-то обновляете, лучше написать об этом. Причем на главной странице. У нас не инет, поисковиков нету, и люди начинают просматривать локальные сайты с главной страницы. Искать где-то на пятнадцатом уровне, обновился ли раздел эротики, честно говоря впадлу. P.S. А свежие новости пишутся всегда выше, чем старые

Много еще чего могу написать, но мне лень Как-нибудь потом.
P.S. Ну и стандартное: Несогласные и желающие дополнить - пишите, я не истина в последней инстанции.

 

[gram]

гы, кстати, мож скажешь адреса, где ты видел два реальных яваскрипта =) мне интересно просто... =)
а то натыренные скрипты тоже достали. Особенно ща модно на двух сайтах (Hom и ScRaB) перелив с одной страницы на другую делать, пока дождёшься - захочется закрыть окно нафик

 

[Кекс]

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

Ну, это, конечно ОЧЕНЬ утрированный пример...

Был рад слышать (читать) твой отклик.
+ по поводу ява-скриптов. Скрипт скрипту рознь. Одно дело раскрывающееся меню или активный комментарий, другое - всякие навязчивые "спец-дефекты". На мой взгляд, просто аморально писать свой текст (или бегущую строку) в строку состояния браузера. Все-таки у каждого есть неотъемлемое право видеть адрес ссылки, на которую он навел курсор. Ну и прочее...

 

[Majik13]

2Gram
На demn.gtn.ru когда-то болталась прикольная переливающаяся ботва. Толку никакого, но выглядело красиво У сорми вроде когда-то меню было на странице раздвигающееся.

 

[gram]

а, ну ботва - это обычный скрипт, причём я такой видел вроде на dynamicdrive.com
Работает только под ИЁ...
кстати я свои скрипты сейчас тещу как минимум в трёх браузерах - мозилле, иё и опере7, везде работают одинаково

 

[Кекс]

Пользуясь небольшим кофе-брейком, продолжу размышления.

Итак, вы уже придумали цветовое решение, общее содержание и композицию в целом. Возможно, на столе появились бумажки с предварительными зарисовками, а на винчестере - первые варианты картинок.
Далее дело переходит в стадию технического воплощения идеи. Можно открыть какой-нибудь WYSIWYG-редактор и визуально создавать страницу. Можно открыть "Блокнот" и тэг за тэгом описывать всю структуру страницы. Во втором случае, конечно, необходимо уверенное владение HTML, но на мой взгляд такой подход более непосредственный. К тому же, когда разрабатывался HTML, он не предназначался для автоматизированной генерации. Да и при использовании WYSIWYG-редактора вам потребуется знание HTML: скорее всего, вам придется просматривать и/или править HTML-исходник вашей страницы; зная особенности HTML и таблиц стилей проще работать и в визуальной среде редактирования.

Кофе кончился. Размышления тоже.
Интересно, эту тему читают те, кто на самом деле собрался делать себе сайт?

 

[[Evil]#1_in_the_world]

не знаю даж куда спросить вот у меня на одной странице располагаються статьи и картинки к ним справа и дут кнопки - названия статей можно ли сделать так чтобы при нажимании кнопок просто статьи менялись в нужном поле (или надо создать новую страничку для каждой кнопки?) , и как это сделать если я делаю ее в Dreamweaver MX ? спасибо

 

[Незнайка]

Делай с помощью слоёв (Layers). На эту тему Кекс сделал несколько разработок - выглядит очень впечатляюще.

 

[[Evil]#1_in_the_world]

Спасибо , а то когда ничего не знаешь очень сложно ориентироваться в названиях и командах.

 

[Незнайка]

Почитай книги по Dreamweaver - в продаже их полно с расчётом на пользователей с различным уровнем подготовки.