Вёрстка
Верстальщик получает макеты шаблонов в виде простых изображений (например, в формате JPEG или PNG), либо разбитых по слоям (например, в PSD или AI). Его задача — получить из этих графических макетов гипертекстовые веб-страницы с подготовленными для интернета изображениями.
Одним из сложных моментов в работе верстальщика является обеспечение совместимости со множеством браузеров — программами для просмотра веб-страниц (так называемая кроссбраузерность). Браузеры могут одни и те же элементы разметки или правила CSS интерпретировать по-своему, в результате чего некоторые пользователи могут увидеть содержимое не так, как задумывал дизайнер и ожидает увидеть заказчик. Когда верстальщик убедится, что большинство браузеров одинаково отображают готовые шаблоны, наступает следующая фаза разработки — веб-программирование.
Программирование
К программистам поступают готовые шаблоны страниц и указания дизайнеров по работе и организации элементов сайта. Программист создаёт программную основу сайта, делая её с нуля, используя фреймворк или CMS. Выбор языка программирования в данном случае — вопрос непринципиальный.
После того, как сайт готов к эксплуатации, наступает следующая фаза — наполнение сайта информацией.
Безопасность
Существует множество сайтов, которые являются значимыми ресурсами. На этих ресурсах могут располагаться персональные данные пользователей (например, личная переписка, адреса, телефоны) или финансовая информация (например, банковские сайты). Взлом таких ресурсов может повлечь как прямые денежные убытки (например, злоумышленник может перечислить деньги с чужого счёта на свой собственный), так и косвенные, связанные с распространением конфиденциальной информации или просто злоумышленник может испортить содержимое сайта. Для многих сайтов важно обеспечить некоторый уровень безопасности. Требуемый уровень безопасности во многом зависит от располагающейся на сайте информации.
Наиболее распространённые последствия атаки на сайт:
несанкционированное изменение злоумышленниками (см.: дефейсинг, хакеры)
подделка сайта (дизайн и содержимое сайта может быть скопировано и у пользователя такого сайта могут украсть пароли)
Наиболее популярными мотивами для взлома популярных ресурсов, таких как почтовые или социальные сети, являются:
ревность
выгода: злоумышленник рассылает со взломанного аккаунта спам
воровство с целью возврата владельцу за деньги
Хо́стинг(англ.hosting) — услуга по предоставлению вычислительных мощностей для физического размещения информации на сервере, постоянно находящемся в сети (обычно Интернет). Хостингом также называется услуга по размещению оборудования клиента на территории провайдера с обеспечением подключения его к каналам связи с высокой пропускной способностью (колокация, от англ.collocation).
Обычно под понятием услуги хостинга подразумевают как минимум услугу размещения файлов сайта на сервере, на котором запущено ПО, необходимое для обработки запросов к этим файлам (веб-сервер). Как правило, в услугу хостинга уже входит предоставление места для почтовой корреспонденции, баз данных, DNS, файлового хранилища и т. п., а также поддержка функционирования соответствующих сервисов.
Хостинг баз данных, размещение файлов, хостинг электронной почты, услуги DNS могут предоставляться отдельно как самостоятельная услуга, либо входить в понятие услуги.
Сайты с бесплатным хостингом
www.Народ.ру - один из самых популярных сервисов предоставления бесплатного хостинга (free hosting), предоставляя широкий набору услуг своим пользователям, имея при этом достаточно простой интерфейс, поэтому создание сайта на narod.ru не вызывает больших сложностей у неопытных пользователей интернета. Личный сайт на narod.ru считается уже не совсем модным, поскольку этим уже никого не удивишь, сейчас уже очень многие пользователи интернета обязательно знают всем известный сайт народ точка ру. Список сайтов www.narod.ru наверняка уже превышает многие десятки тысяч сайтов как небольших компаний, так и обычных персональных сайтов. Каталог web сайтов на narod.ru при желании можно найти в Яндекс каталоге - yaca.yandex.ru. Поскольку ресурс очень популярный, то хакеры и недобросовестные пользователи пытаются завладеть чужим сайтом на народе.ру, и взлом сайтов narod.ru идет постоянно, так что надо быть очень внимательным при установке неизвестных программ, которые могут содержать вирусы, которые крадут пароли доступа к сайту. Основные возможности хостинга Народа:
имя сайта: ваше_имя.narod.ru
почтовый ящик ваше_имя@narod.ru
неограниченное пространстводля сайта (размер сайта -100 Мбпри регистрации + возможность самостоятельно увеличить размер сайта по мере необходимости, размер отдельных файлов - не более 5 Мб, файлы большего размера автоматически удалаются)
Есть более 100 шаблонов для создания страниц
возможность создавать страницы по собственному дизайну
FTP-закачка файлов на сервер - ftp://ваш_логин:ваш_пароль@ftp.narod.ru
К сожалению, скрипты не поддерживаются, но имеются дополнительные free сервисы:
Гостевая книга, Персональный форум, чат, Сообщества, Опросы и Анкеты, счетчик на странички, статистика посещений сайта, форма для поиска по сайту, индексация сайта поисковой системой Яндекс.
Создание персонального сайта.
Чтобы создать Ваш первый простой сайт мы воспользуемся бесплатным хостингом (местом под сайт) narod.ru от поисковой системы Яндекс
Преимущества этого хостинга: простота освоения, бесплатность, неограниченный размер сайта готовые варианты дизайна, счетчики, статистика посещений, гостевая книга, персональный форум и чат.
Недостатки: поскольку хостинг бесплатен, то Ваш сайт будет не слишком быстро загружаться и на нём будет размещена реклама от Яндекса. Впрочем в данном случае это неважно, поскольку единственная цель Вашего первого сайта — научить Вас делать простые сайты.
Шаги для создания сайта:
1.Переходим по ссылкеhttp://narod.ru(или копируем её в адресную строку браузера).
2.Находим на этой странице (в начале основного текста по центру) строчку "Создайте свой сайт", нажимаем правой клавишей мышки на ссылку и у вас откроется окошко для ввода текста прямо под ней.
В это окошко нужно ввести название (оно же будет и началом адреса) Вашего будущего сайта. Название должно быть:
- Латинскими буквами без пробелов (возможны знаки подчёркивания, дефисы, точки).
- Уникальным. Если кто-то до Вас уже забронировал это название, то Вам придётся немного изменить его или придумать другое.
- По возможности коротким и отражать основную идею сайта.
Для примера я беру название saitposhablonu (сайт по шаблону) и ввожу его в вышеупомянутое окошко. Вы вводите своё название и нажимаете кнопку "Занять" справа от окошка.
После этого происходит переадресация на другую страницу Яндекс.Паспорт "Регистрация. Шаг 1 из 2".
3.В этой новой странице вводим имя и фамилию (лучше свои :) Название сайта уже должно быть в поле "Логин". Нажимаем "Дальше".
Попадаем на страницу Яндекс.Паспорт "Регистрация. Шаг 2 из 2".
4.Здесь вводим пароль к нашему сайту. Пароль должен содержать от 4 до 20 символов из списка: A-z, 0-9, ! @ # $ % ^ & * ( ) _ — + и не может совпадать с логином.
Логин и пароль лучше записать в какой-нибудь текстовый файл, чтобы потом можно было его скопировать и вставлять при заходе в свой аккаунт. Поскольку этот наш сайт — пробный — можно не слишком беспокоиться о его безопасности, но в будущем — лучше хранить пароли в более надёжных местах, например в записной книжке.
Далее заполняем следующие поля:
Пароль ещё раз — для проверки правильности.
Контрольный вопрос (на случай, если забудем пароль).
Ответ на контрольный вопрос.
Электронная почта (не обязательно, поскольку на Вас будет зарегистрирован новый почтовый ящик вида: название_сайта@yandex.ru).
Мобильный телефон (совсем не обязательно, но если сайт не временный — лучше заполнить).
Контрольные цифры — для защиты от автоматической регистрации.
Нажимаем "Зарегистрировать".
Должна появиться новая страница Яндекс.Паспорт "Готово". На ней можно ввести дополнительную информацию о себе. Нажимаем "Сохранить" и... оказываемся на странице "Мои сервисы".
5.Нажимаем маленькую ссылку "Все службы" в самом верху страницы. Попадаем в полный список сервисов, которые предоставляет Яндекс.
Ищем в центральной колонке ссылку "Народ" и оказываемся на главной странице narod.ru с которой и начали.
6.Вводим пароль в соответствующем окошке в правой панели страницы. Логин уже должен быть там. Если нет — вводим его тоже.
7.Жмём "Войти".
Перед нами открывается так называемая "Мастерская", из которой можно управлять своим сайтом, прикручивать к нему всевозможные дополнения типа гостевой книги или форума.
Но сначала нужно сделать хотя бы одну страницу сайта — главную. Для этого:
8.Ищем в левой колонке (раздел "Мой дом") ссылку "Главная страница" и нажимаем её.
Открывается страница с вариантами шаблонов для этой страницы.
9.Выбираем приглянувшийся шаблон и жмём "Дальше".
Допустим Вы выбрали шаблон "Простой". Открывается страница настройки вида главной страницы Вашего будущего сайта.
10.Выбираем цвет фона (фон должен быть не слишком "сочным", чтобы не резал глаз). Пожалуй возьмём классический белый.
11.Заполняем графу "О чём сайт". Это будет название сайта, говорящее о его предназначении. В нашем примере это "Сайт по шаблону".
Цвет текста названия... пусть будет тёмно-зелёный, чтобы был контрастным фону, но не кричащим. И пожалуй поставим галку "Жирный", чтобы он всё-таки выделялся.
12.Теперь текст, который будет на главной странице. Он должен в нескольких абзацах раскрывать название сайта и дать понять посетителю, о чём же этот сайт.
Вот текст нашего экспериментального сайта:
<начало текста>
"Сайт по шаблону" является своего рода полигоном, чтобы научиться создавать шаблонные сайты на хостинге narod.ru.
Вы можете сделать себе такой же просто прочитав статью "Как создать сайт по шаблону на narod.ru", написанную специально для желающих быстро научиться создавать сайты.
Данную статью Вы можете найти на сайте http://www.BestFREE.ruв разделеСтатьи/Web-дизайн.
<конец текста>
Цвет этого текста оставим чёрным, чтобы он легко читался на белом фоне.
13.Вводим ссылки в соответствующие поля.
Ссылки (или гиперссылки) — это основа Интернета. По ссылкам можно переходить с одного сайта на другой или с одной страницы сайта на другие.
У каждой ссылки есть её видимая часть (текст, картинка, кнопка и т.д.) и адрес, на который переходит посетитель нажав на видимую часть этой ссылки.
Для начала создадим 3 ссылки:
"Главная" — эта ссылка будет вести на главную страницу этого сайта и иметь адрес http://www.saitposhablonu.narod.ru (не забудьте, что Вы вместо saitposhablonu везде должны указывать придуманное Вами название).
"Об авторе" — пара слов об авторе статьи. Её адрес пусть будет http://www.saitposhablonu.narod.ru/about.htm
"Статья о создании этого сайта" — ссылка на эту статью. Адрес: http://www.bestfree.ru/article/webdesign/shablon.php Это будет внешняя ссылка, ведущая на другой сайт, в отличие от предыдущих — внутренних.
14.Задаём цвета ссылок. Традиционно ссылки делают синим цветом, посещённые ссылки — пурпурным, а активные — красным. Но в принципе — здесь всё на Ваше усмотрение и вкус.
Для примера задам вышеуказанные цвета.
Жмём "Готово" и смотрим результат.
Дизайн прямо скажем — не изысканный, но для начала — вполне сойдёт.
Если Вас всё пока устраивает — жмите "Готово" в верхней части страницы. Если не устраивает, тогда нажимайте "Ещё редактировать" и вносите коррективы.
На следующей странице нам предлагают:
Отредактировать созданную страницу — опять вернуться к редактированию главной страницы;
Перейти к созданию других страниц — это мы сейчас и выберем;
Перейти в раздел "Управление файлами" — пока не надо, но потом обязательно перейдём;
Порекламировать свой сайт через службу "Яндекс.Директ" — за деньги разумеется :) Тоже пока не будем.
15.Переходим к созданию других страниц. Выбираем шаблон "Про меня", и нам снова предлагают выбрать из нескольких шаблонов и ввести имя файла — оно же адрес новой страницы. Выбираем к примеру "Мышеходный" и вводим имя файла about (мы уже задавали ссылку на него на главной странице).
Нажимаем "Дальше".
16.На новой страничке заполняем поля:
"Приветствие" — пишем Добро пожаловать... и так далее, как обычно пишут в таких случаях;
"Фотография" — выбираем свою лучшую фотку для этой страницы, но не слишком большого размера. Оптимальный размер для файла с большой фотографией 50-300 кб. Чем меньше размер, тем быстрее будет грузиться страница;
"Текст Вашей странички" — немного расскажите о себе, то, что будет интересно узнать посетителям;
"Ссылки на другие страницы" — здесь можно указать ссылку на главную страницу и например снова на ссылку со статьёй. Свой e-mail лучше не указывать (как это предлагает шаблон по умолчанию), иначе можно получить на него горы спама.
E-mail всегда лучше шифровать, например с помощью вот этой программы: http://www.bestfree.ru/soft/inet/crypt.php#CrypteMail
Итак, нажали "Готово" и получили страничку "Про меня". Посмотрели и если нужно — отредактировать.
Теперь у нас есть 2 странички сайта, которые ссылаются друг на друга.
Аналогичным способом можно сделать и другие страницы, только не забывайте ставить на них ссылку хотя бы с главной, иначе посетитель просто не сможет их найти.
Для того, чтобы редактировать готовую страницу:
1.Нажимаем ссылку "Мастерская" в левой верхней части окна под логотипом Яндекс.Народ.
2.В правой колонке ищем и нажимаем "Управление файлами и HTML-редактор".
Открывается таблица, содержащая все файлы, которые мы создали или загрузили при создании страничек, включая файл с нашей фотографией для страницы "Про меня".
3.Ищем файл index.html и нажимаем на кнопочку с карандашом слева от имени файла.
Перед нами снова открылся знакомый редактор странички.
4.Подправляем ссылку — меняем htm на html и нажимаем "Готово" и ещё раз "Готово" на следующей странице.
Теперь если скопировать в новое окно браузера адрес http://www.saitposhablonu.narod.ru/index.htmlили даже просто saitposhablonu.narod.ru, то откроется главная страница "Сайта по шаблону".
И если нажать на главной странице ссылку "Об авторе", то откроется созданная нами страница "Про меня".
Нажав на ней ссылку "Главная" — Вы снова вернётесь на главную.
Подведём итог:
1.Вы смогли создать свой первый сайт за полчаса даже не владея языком HTML.
2.Теперь Вы можете полировать готовый сайт, добавлять к нему новые страницы и улучшать старые. Для этого всё-таки лучше начать учить HTML (вот неплохой самоучитель для начала:http://www.bestfree.ru/book/webdesign/html.php#HTMLvPrimerah_DrigalkinVV).
Ход работы:
Зайдите на сайт http://narod.ru
Зарегистрируйте Интернет-страницу на указанном в пункте 1 сайте. В процессе регистрации выберите вариант организации сайта – персональный веб-сайт, результаты отобразите в отчете.
Войдите в конструктор сайта и выберите: стиль оформления странички, шрифты, макет страницы и название. Результаты сохраните в отчете.
Заполните все разделы созданного сайта. Результаты сохраните в отчете.
Опубликуйте созданный сайт нажав кнопку опубликовать.
Дайте ссылку на опубликованный сайт вашему соседу слева и справа. Попросите их зайти на сайт.
Зайди на ваш сайт в режиме редактирования и выберите раздел статистика. Проанализируйте статистику посещения сайта. Результаты отобразите в отчете.
Зайдите в настройки сайта и выберите размещения блока рекламы от Яндекса.