Создание сайта: 36 советов для всех
Введение
Эта статья посвящена в первую очередь новичкам в Интернете. Я постарался описать основные принципы и дать советы. Возможно гуру прочитав эту статью усмехнуться, но не судите строго, я знаю, что ничего нового вы здесь не увидите поэтому не стоит писать мне гневные письма с обвинениями в некомпетентности. Хочу так‑же отметить, что все советы являются моим мнением, основанном на довольно большом опыте работы. Каждый приведенный ниже совет может быть с легкостью оспорен, но я и не утверждаю, что это аксиомы. Если у вас есть мнение по поводу всего здесь написанного, то я не против его выслушать. Пишите, пожалуйста, мне лично. Ну вот в принципе и все, что хотел сказать. Можете приступать к чтению.
Советы Веб‑дизайнеру
1. Делайте то, что от вас хотят видеть.
Клиент всегда прав. Если вам говорят сделать желтый текст на красном фоне, извольте покрутиться и не растерять читабельность с привлекательностью.
2. Не увлекайтесь графикой.
Графика это хорошо, но ведь существуют и другие вещи. Поэкспериментируйте с цветными таблицами и CSS. Разгрузите ваш сайт и старайтесь придерживаться планки до 50kb на страницу.
3. Держите стиль.
При создании дизайна пляшите от тематики. Есть такое понятие, как стиль. Он должен пронизывать весь сайт. Для корпоративных сайтов мягкий дизайн, для развлекательных веселый и обязательно для всех уникальный
|
|
|
4. Дизайн не должен быть литым.
Не сковывайте дизайном информативность сайта. Рано или поздно какую‑нибудь менюшку убирут или добавят, а тексты поменяют
5. Уделяйте внимание мелочам.
Маркеры, полоски, значки и прочие мелкие элементы, готовьте с особой тщательностью. Подгоняйте их под общую картину и вы достигнете хороших результатов.
6. Удобная навигация – залог успеха.
Пользователь не должен часами бродить по вашему сайту (хотя было‑бы неплохо…), это раздражает. Для небольших сайтов можно ограничиться навигационной полоской с выходами к основным разделам, а для сайтов с глубокой структурой стоит делать, что‑то помощнее. Неплохо даже подумать о функции поиска.
7. Ваш броузер не единственный, разрешение экрана не уникально.
Созданный вами сайт должен читаться при 256 цветах, на трех разрешениях экрана (640х480, 800х600, 1024х768) и пониматься двумя основными броузерами.
8. Если заказчик не может сформулировать задачу, дайте волю фантазии.
Бывают случаи, когда заказчик ничего не понимает в Интернет и соответственно не может четко сформулировать, чего он хочет. Не стоит отчаиваться, дайте волю фантазии, проявите себя и постарайтесь не разочаровать своего клиента.
|
|
|
9. Любите себя в меру.
Авторские права – это хорошо, но если любовь к себе превращается в манию это уже плохо. Влепите копирайт в самом низу титульной страницы и остановитесь. Не надо подписывать все страницы, да еще и комментарии в гифы пихать. В конце концов, кому страничку делаем?
10. Дизайн не должен портить жизнь Веб‑мастеру.
Создав сайт, доходчиво объясните Веб‑мастеру о том, как его не развалить. У всех есть свои секреты и неординарные приемы. Веб‑мастер должен их знать.
11. Точность – вежливость королей.
Графический дизайн сайта должен быть подогнан с точностью до одного пикселя. Не ленитесь, пусть работы будет больше, но и эффект значительно солидней.
12. Авторские права не шутка.
Не стоит воровать чужую графику. Во первых это не хорошо, а во вторых если не умеешь делать сам, то какой же ты дизайнер!
Советы Веб‑мастеру
1. На сайте все должно быть на своих местах.
Четко следите за структурой сайта. Не сваливайте все в общую кучу. Если пользователь не разберется где, что лежит, то он к вам не вернется.
2. Не выкладывайте все на одну страницу.
Имеет смысл разбивать большие страницы на более мелкие. Почти вся Россия ходит в интернет через dial‑up и вид бегунка на полосе прокрутки броузера превратившегося в пиксел, вряд ли побудит к вдумчевому чтению.
|
|
|
3. Работайте в рамках дизайна.
Дизайнер делает сайт, а вы отвечаете за его работоспособность. Прежде чем, что‑то реконструировать свяжитесь с дизайн‑студией и согласуйте перемены с ней.
4. Отвечайте на все(!) письма посетителей.
По своей работе вы наверняка получаете массу писем от пользователей с предложениями, замечаниями или жалобами. Не ленитесь, напишите ответ, пусть это будут примитивные фразы такие, как: «Большое спасибо» или «Мы это обязательно учтем». Сделав этот нехитрый номер вы 100 % получаете постоянного посетителя, который к тому же приведет к вам всех своих друзей.
5. Чем чаще обновления, тем больше посетителей.
Как можно чаше обновляйте ваш сайт. Никто не хочет читать одно и тоже. Даже если нет ничего нового, попробуйте сменить приветственную речь или комментарии под картинками. Эффектно, так же смотрится колонка новостей с датами обновления, особенно если эти даты еще не ушли в историю.
6. Работайте оперативно.
Информация, размещенная на вашем сайте, должна обновляться в считанные часы. Услышав о чем‑то интересном, пользователь будет искать это через поисковую машину и если в списке найденного ваш сайт будет на самом верху, то будьте уверены, постоянный посетитель вам обеспечен.
|
|
|
7. Никакой отсебятины.
Если у вас новостной, информационный сайт, то старайтесь избегать предвзятости. Даже если вам не нравиться какое‑либо событие не приписывайте к нему свежепредуманные факты. Пусть будет, как оно есть (AS IS:), а посетители и без вас во всем разберутся.
8. Ваша настольная книга – орфографический словарь.
Старайтесь избегать ошибок и опечаток. Это настолько режет глаза и, так понижает солидность, что вам и в страшном сне не снилось. Возможно, стоит установить программу проверки орфографии или договориться с редактором.
9. ИМХО сабж рулез или пишите по‑русски.
Сленгу – нет! Мало того, что он не смотриться, так еще и часть ваших посетителей ничего не поймет. Конечно, слабенький жаргон типа: метр, прога или аська еще употребимы, но закаленный фидошный сленг стоит исключить.
10. Не пишите чепухи.
Не публикуйте на сайте сомнительную информацию или вообще полнейшую чушь. Пару раз прочитав липу посетитель в вас разочаруется и уйдет к вашим конкурентам. Ну, а если очень хочется, то вставляете подпись «Из непроверенных источников» и спите спокойно.
11. Счетчики, рейтинги и баннеры не последние вещи.
Если студия создавшая сайт не занималась его раскруткой, то это придется делать вам. Наиболее эффективный расскруткой на мой взгляд являются рейтинги. Вам абсолютно ничего не надо делать, чтоб заманивать посетителей. На второе место я бы поставил баннерную рекламу, но создание баннера процесс тонкий и деликатный, которым должны заниматься профессионалы. На там дальше по эффективности можно поставить каталоги, поисковые машины и т. п.
12. Будьте вежливы.
Если вам в 101 раз пишут о какой‑либо неполадке, которую вы уже устраняете, не стоит посылать автора письма в одно известное место, он же для вас старается. Черкните ему фразу «Спасибо, вы нам безмерно помогли» и всем будет приятно.
Советы Заказчику
1. Вам действительно нужен сайт?
Прежде, чем поднимать на уши дизайнеров и программистов, тратив при этом немалые деньги, подумайте хорошенько зачем он вам. Возможно, что вам нужен простой e‑mail.
2. Четко формулируйте задачи.
Не бойтесь загружать дизайнера работой. Ведь именно за этим вы его нанимали. Четко описывайте, что нужно сделать и, как вы это себе представляете. Ему намного проще работать зная, что он делает.
3. Дизайнер должен иметь все.
Логотипы, значки, слоганы, копирайты это все и не только это должно быть в распоряжении дизайнера. Выдайте это в первую очередь. Органично вписать логотип в готовый дизайн очень сложно, а зачастую просто невыполнимо.
4. Как можно чаще давайте информация Веб‑мастеру.
Ваш Веб‑мастер второй после вас человек, который должен узнавать свежие новости. Чем быстрее вы передадите ему информацию, тем оперативней он будет работать, и тем больше посетителей к вам заглянут.
5. Не работайте с не внушающими доверия студиями.
Многие товарищи, чуть освоив свой Front Page (или, что там у них), быстренько клепают странички, называют себя Design Studio и ждут клиентов. Послушайте добрый совет – даже и не думайте связываться. Дизайнер должен уметь все делать своими руками и понимать, что он делает.
6. Одиночки – большая редкость.
Дизайнеры одиночки очень редки (я имею в виду именно профессионалов). Справиться с сайтом в одиночку теоретически можно, но практически… С вами должна работать команда, в которой у каждого четко определенная роль.
7. Дизайнера не должны пугать такие слова, как: CGI, SSI и ASP.
Если вы хотите получить по настоящему мощный, динамичный и информативный сайт, то простым HTML вы не отделаетесь. Погоняйте потенциального Веб‑дизайнера на знание терминов и технологий. Отговорки типа: «это вам абсолютно не нужно» или «зачем такая роскошь» принимать не стоит. Дизайнер, как минимум должен свободно владеть HTML, JavaScript и CSS.
8. Позаботьтесь обо всем заранее.
Готовый сайт еще не все Даже если он у вас на руках, вам надо позаботиться о куче вещей, таких например, как: доменное имя, хостинг, рекламные кампании и о многом другом.
9. Не сковывайте фантазию.
Не бойтесь фантазировать. Хороший дизайнер может воплотить любую вашу мечту (и для этого есть все средства). Если ваш дизайнер заявляет, что не может работать на таком уровне, то скорее всего вы работаете с непрофессионалом.
10. Не надо довить на людей.
Работа над сайтом очень трудоемка. На изготовление любой мелочи могут уходить часы. Не торопите дизайнера! В противном случае вы расчитываете получить блеклую штамповку.
11. Веб‑мастер и Веб‑дизайнер, не одно и тоже.
Эти профессии настолько различны, насколько созвучны их названия. Веб‑дизайнер ваш сайт делает, а Веб‑мастер поддерживает. Почувствуйте разницу и с жалобами обращайтесь по адресу.
12. Заботьтесь о вашем сайте
Не дайте умереть вашему сайту. Даже если это просто визитная карточка с расширенными возможностями, хоть изредка обновляйте его и удаляйте застоявшуюся информацию. Пусть ваши клиенты видят, что вы работаете, а не сидите сложа руки.
HTML редактор
Итак. Начали .
Для создания web‑страницы набираем специальный код на языке HTML. Запустите любой текстовый редактор, например Блокнот, входящий в Windows (Пуск‑ Программы‑ Стандартные – Блокнот). или качаем более продвинутый(бесплатный) редактор с нашего сайта webmasteruvse.ru
Теперь наберите в нем этот «текст»:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
То что Вы набрали – является минимальным «набором» для создания страницы. В дальнейшем при создании web‑страниц Вы можете просто копировать его на новую страницу для облегчения работы.
Теперь поясним набранное. Команды, заключенные в <>, называются тегами. Теги бывают парные и не парные. Парные теги состоят из открывающего тега и закрывающего. Например тег <html> – открывающий тег, а </html> – закрывающий. Как видите разница в открывающем и закрывающем теге всего лишь в /.
Не парные теги состоят только из открывающего тега. Например тег <body>. Между тегами <title> и </title> напишите название Вашей странички. Например вот так:
<html>
<head>
<title> HTML редактор . </title>
</head>
<body>
</body>
</html>
Теперь между тегами <body> и </body> напишите то, что Вы хотите разместить на Вашей странице, например так:
<html>
<head>
<title> HTML редактор . </title>
</head>
<body>
Приветствую Вас на моей страничке! Здесь Вы найдете много интересного. </body>
</html>
Сохраните набранное в виде файла с расширением htm или html, например page1.html в отдельной папке.
Далее запустите сохраненный Вами файл page1.html или откройте его в Internet Explorer.
Поздравляем! Вы только что создали свою первую интернет‑страницу.
Теперь идем дальше. Давайте поменяем цвет фона на Вашей страничке. Цвет фона задается в теге body, и записывается в 16‑ричной системе., где каждая из цифр или букв означает «количество» основных цветов – RGB – Red Green Blue.
Например <body bgcolor="#000000"> означает что цвет фона будет состоять из 00‑красного, 00‑зеленого, и 00 – голубого. Таким образом мы получим черный цвет.
Белый цвет фона кодируется так <body bgcolor="#FFFFFF">
Красный цвет фона кодируется так <body bgcolor="#FF0000">
Зеленый цвет фона кодируется так <body bgcolor="#00FF00">
Синий цвет фона кодируется так <body bgcolor="#0000FF">
Различные комбинации позволяют получить практически любой цвет фона. Например
Такой цвет <body bgcolor="#0 °CC99">
Такой цвет <body bgcolor="#FF9999">
и т. д.
Итак, добавьте параметр в тег body, например вот так:
<html>
<head>
<title> Моя первая страничка в Интернет. </title>
</head>
<body bgcolor="#CC0000">
Приветствую Вас на моей страничке! Здесь Вы найдете много интересного. </body>
</html>
Сохраните страничку и запустите ее опять в Internet Explorer.
Поэкспериментируйте с параметром bgcolor.
Если Вы хотите разделить набранный Вами текст на части…т. е. сделать на странице операцию подобную нажатию кнопки Enter в текстовом редакторе – для этого нужно использовать не парный тег <br>
Разделим наш текст на несколько строк, например вот так:
<html>
<head>
<title> HTML редактор . </title>
</head>
<body bgcolor="#CC0000">
Приветствую Вас на моей страничке! <br> Здесь Вы найдете много интересного. </body>
</html>
ну или, чтобы это выглядело более читаемо, вот так:
<html>
<head>
<title> HTML редактор .</title>
</head>
<body bgcolor="#CC0000">
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
</body>
</html>
Сохраните страничку и посмотрите ее в Internet Explorer.
Для того чтобы выровнять по центру содержимое Вашей странички, используется парный тег center.
Поставим открывающий тег <center> перед содержимым странички, а тег </center> после содержимого странички, вот так:
<html>
<head>
<title> html редактор .</title>
</head>
<body bgcolor="#CC0000">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
</center>
</body>
</html>
Сохраните файл, откройте его в Internet Explorer и посмотрите что получилось.
Теперь установим цвет текста для Вашей странички. Цвет текста задается в теге body, например вот так text="#FFFF00"
Добавим этот параметр после параметра цвета фона.
<html>
<head>
<title> html редактор .</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
</center>
</body>
</html>
Теперь вставим какую‑либо картинку на Вашу страницу.
Для размещения картинки на Вашей страничке вставляем вот этот код <img src="golub.jpg"> в страничку.
<html>
<head>
<title> Моя первая страничка в Интернет.</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
<img src="golub.jpg">
</center>
</body>
</html>
Сохраните файл, откройте его в Internet Explorer и посмотрите что получилось.
Как видите, картинки вставляются в интернет‑страничку с помощью тега img,где в параметре src указывается файл картинки.
Теперь вставим ссылку, при нажатии на которую посетитель сайта пойдет на другую страничку Вашего сайта или вообще на другой сайт, т. е. гиперссылку . Добавим текст после нашей картинки, при нажатии на который будет совершен переход на другой сайт. Для вставки гиперссылок используется парный тег.
<html>
<head>
<title> Моя первая страничка в Интернет.</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
<img src="golub.jpg"> <br>
<a href=http://unionsofttrade.com> Ищете работу на дому? Нажмите здесь !</a>
</center>
</body>
</html>
Если например Вы хотите сделать чтобы картинка являлась гиперссылкой то сделайте так:
<html>
<head>
<title> Моя первая страничка в Интернет.</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
<a href=http://unionsofttrade.com> <img src="golub.jpg"> <br>
Ищете работу на домашнем компьютере? Щелкните здесь !</a>
</center>
</body>
</html>
ПОЗДРАВЛЯЕМ!
Вы прошли начальный курс вебмастера и теперь можете делать простейшие страницы и с их помощью начать зарабатывать деньги !
Дата добавления: 2019-02-12; просмотров: 207; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!