Создание собственного сайта

Размещено на http://www.allbest.ru/

Создание собственного сайта

Нагаев Д.В.

Юфтайкина Е.В.

Государственное бюджетное профессиональное образовательное учреждение Республики Мордовия “Торбеевский колледж мясной и молочной промышленности”

Торбеево, Республика Мордовия, Россия.

Интернет -- наиболее динамично развивающаяся среда информационного обмена в истории человечества. Современные возможности доступа к Интернету с мобильных телефонов и устройств (мобильный Интернет), с телеприемника, а также обмен информацией через сеть других устройств, расширяют круг пользователей. Для с связи с Internet нам требуется специальное программное обеспечение. Основным инструментом, который используется для доступа к информации в Web, является программа - браузер. Наиболее популярные программы - браузеры: GoogleChrome, MozilaFirefox и Opera. В русскоязычном сегменте интернета так же популярен браузер Yandex. сайт браузер верстка дизайн

Для разработки сайта прежде всего нам потребуется браузер. Какой конкретно браузер вы будете использовать - не имеет значения, подойдет абсолютно любой. К примеру, GoogleChrome. Браузер нам нужен для того, чтобы мы могли видеть процесс создания сайта не в виде кода, а в виде графических объектов. Существует несколько программ, в котором можно написать код сайта. Можно ограничиться блокнотом, а можно использовать более удобное ПО, которое поможет работать в разы быстрее и эффективнее. К таким программам относятся Notepad++ и SublimeText. Из-за того, что страницы с расширением .php не будут открываться в браузере без нужного ПО, (а это очень важно просматривать и тестировать php страницы), нам потребуется локальный сервер, который будет установлен на Вашем компьютере. С помощью Denwer или XAPPM мы можем установить сервер на ПК и открыть нужную страницу в нем. Если мы занимаемся не только версткой, но и созданием дизайна для сайта, то тут нам нужен графический редактор, самый популярный из них - это Photoshop.

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

Прежде чем приступить к созданию сайта, нужно определиться с тематикой и решить для чего будет предназначен этот сайт. Продумайте что будет находиться на главной странице, где будут находиться ваши данные и т.д. Каждый сайт должен иметь индивидуальный дизайн, но при этом вы должны придерживаться современных тенденций в веб-дизайне. Сайт может быть написан на HTML (с использованием css, javascript, php) или FLASH. Минус FLASH сайтов - это слишком долгая загрузка из-за огромного количества графики. Это может не понравится пользователю с медленным интернетом. А плюсом Flash сайтов является их красота. В нашем случае мы будет использовать HTML. Сразу начнем с ошибок, которые допускают начинающие веб-дизайнеры/верстальщики:

1) Проблема с нечитабельным текстом. Самая частая ошибка новичков - это выбор шрифтов, которые трудно прочитать. Не нужно ставить слишком большой или слишком маленький шрифт. Цвет шрифта - тоже важно. Нельзя делать цвет текста слишком пестрым. Текст должен хорошо просматриваться на фоне страницы.

2) Громоздкий размер страниц. Слишком огромные объекты на сайте выглядят некрасиво. Это может оттолкнуть посетителей сайта. Помните, что сайт прежде всего должен быть удобен пользователям.

3) Незафиксированная ширина сайта. Одна из главный проблем. Если посетитель с маленьким разрешением экрана зайдет к вам на сайт, то страница будет работать некорректно. Появится горизонтальная прокрутка страницы. Так же и наоборот, если у пользователя большой размер монитора - сайт будет выглядеть слишком мелким, соответственно пользователь ничего не сможет разобрать, и скорее всего, покинет ваш сайт.

4) Текст, написанный не для веб-сайта. Контент на вашем сайте должен быть написан так, чтобы его было удобно просматривать. То есть, нужно писать максимально кратко, но при этом сохраняя суть статьи.

5) Несовместимость браузеров. Очень часто бывает такое, что сайт, который работает корректно в одном браузере, будет работать некорректно в другом. Позаботьтесь об этом, и допишите несколько строк в CSS, которые отвечают за правильное отображение страницы в других браузерах. В противном случае, вы отпугнете посетителей, т.к. пользователи используют разные браузеры, а не только один, под который написан ваш сайт.

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

Когда “отрисовка” дизайна закончена, можно приступать к самой верстке. Как говорилось выше, верстать сайт вы можете даже в блокноте, но это неудобно и займет больше времени. Поэтому мы воспользуемся программой SublimeText.

Для начала нам нужно создать папку, в которой будут храниться все файлы сайта, допустим, назовем папку “mysite”. В данной папке создаем еще одну папку, которая будет называться “images”. В ней мы будем хранить все графические элементы нашего будущего сайта. Важно называть папки английскими символами. Далее в “mysite” мы создаем текстовый документ с названием index(.html) и расширением .html. Это главная страница сайта.

Открываем index.html в SublimeText и начинаем верстать страницу.

Что бы браузер понял, что за файл ему нужно прочитать, первым делом следует написать в документе такую строку: <!DOCTYPEHTML>. В теге <head></head> нам нужно указать заголовок сайта, который будет отображаться во вкладке, кодировку сайта, например, metacharset=”utf-8”. Что бы мы могли работать с каскадной таблицей стилей (CSS) нам так же нужно подключить ее в “голове” сайта, прописав <linkrel="stylesheet" href="style.css"/>. На данный момент у нас нет этого документа, поэтому нам следует его создать.

На этот раз это будет документ style с расширением .css. Данный файл тоже должен находиться в папке “mysite”. Командой “href” мы указываем расположение файла. Т.к. он находится рядом с файлом index.html, то нам не нужно дописывать название папки. Далее мы продолжаем работу в файле index.html, и открываем тег <body></body>. Это “тело” сайта. В данный тег вписывается весь основной код сайта, кроме стилей. Стили мы прописываем в style.css. Что бы в дальнейшем не заморачиваться созданием остальных файлов, мы сразу подключаем документ с JavaScript попутно создавая текстовый документ sctipt с расширением .js (В папке “mysite”) и registration с расширением .php ( в той же папке). В script.js у нас будет код с ЯваСкриптом, для оформления сайта, а в registration.php код с формой регистрации пользователей.

Сначала создадим заголовок на главной странице сайта. Вписываем любой текст в теги <h1></h1>. С помощью данного тега текст будет выглядеть максимально большим. Чем меньше заголовок/подзаголовок нам нужен, тем больше будет цифра в теге <h..></h..> (например <h2></h3>…<h6></h6>. 6 - минимальный размер для заголовка). Для обозначения абзаца мы используем тег <p>”абзац”</p>. Что бы верстка была более удобной, рекомендуется делать блочную верстку. Для этого разделите сайт на несколько частей, например “Шапка”, “Сайд бар”, “Контент” и “Подвал”.

Каждый из этих элементов будет верстаться в отдельном блоке. Блоки обозначаются тегом <div></div>. Для этого тега можно указать различные значения, которые в будущем могут пригодиться в работе с CSS. Допустим создадим блок для шапки сайта. Прописываем <divid=”header”>Содержимое блока</div>. “id=”header”” мы прописали для удобства. В случае, если нам нужно отредактировать положение данного блока, то мы заходим в style.css, и уже там прописываем необходимые нам значения для данного элемента.

Допустим, нам надо что бы блок с шапкой сайта отображался по центру.

Для этого в css мы пишем следующее: header{ margin: 0 auto; }. Важно знать, что перед тем, как прописать значение, нужно открыть фигурную скобку, и соответственно закрыть ее в конце. На конце каждого значения нужно ставить точку с запятой “;”, иначе ничего не будет работать.

В нашем случае компьютер сам найдет центр страницы и расположит шапку там, т.к. мы указали значение “0 auto” для margin. Команда margin имеет несколько значений. Например: margin-top - смещение по высоте, margin-left - смещение по левому краю, margin-right - смещение по правому краю. Такими же функциями обладают и команды padding-top (left, right), только применяют их в других случаях. В случае, если мы хотим видеть шапку без картинок и текста, с однородным фоном, то нам нужно прописать для блока divid=”header” ширину, высоту и цвет фона.

Напомню, что все стили прописываются в документе style.css. header{ weight: 200px; height: 500px; background-color: grey;}. Следует отметить, что блоки div со значением id не отмечаются в CSS никакими символами (просто header), а блоки div со значением class(=”header”) отмечаются символом “#” (#header). Если нам нужно видеть в шапке сайта какое либо изображение, то мы проделываем следующее: Зайдя в Photoshop и открыв нужный шаблон, мы вырезаем картинку для шапки сайта и сохраняем ее в папку “mysite” -> “images”. Желательно, чтобы изображение было в формате png или jpg.

Название тоже пишем английскими буквами. Далее заходим в index.html, в тег <divid=”header”></div> прописываем путь до нужной нам картинки, например <imgscr=”images/header_top.png”>. Сохранив документ и обновив страницу в браузере наблюдаем отображение нужной картинки. По желанию можно прописать стили в style.css. По такому же принципу создаем оставшиеся части сайта, соблюдая размеры которые указаны в шаблоне.

Регистрацию сайта осуществляем с помощью программы XAMMP. Пишем код регистрации, и создаем базу данных в PHPmyAdmin. После установки данного ПО появляется окошко, в котором мы ищем кнопку отвечающую за перенаправление в корень папки программы. Это кнопка Explorer. Далее скидываем нашу php регистрацию в папку (C:\xampp\)htdocs , при этом создав папку, например “registration”, чтобы в дальнейшем мы могли обращаться к данному файлу по адресу http://localhost/registration/

В случае, если все корректно отображается, и вы довольные работой сайта, то можете купить домен и поставить сайт на хостинг.Перед тем, как обращаться к какой либохостинговой компании за ее услугами, следует учесть несколько моментов. Самое важное - это возраст компании. Чем больше, тем лучше. Это говорит об опыте работы. У них должен быть офис или хотя бы дата-центр.

Обязательно должна быть техническая поддержка. Далее - нужно осмотреть цены и клиентскую панель управления на хостинге. Обычно хорошие хостинги предлагают перенос сайта со старого хостинга, на новый, и беслатный тестовый период использования.Данный сервис позволит вам поддерживать сайт в режимеон-лайн сутками на протяжении месяца/года, в зависимости от того, какой пакет услуг вы купили. На сайте хостинга вы можете подробно ознакомиться со стоимостью услуг. Если у вас небольшой сайт, то вам будет хватать виртуального хостинга. Если же у Вас серьезный проект, то вам понадобится свой выделенный сервер. Но это будет стоить гораздо дороже.

Размещено на Allbest.ru