Файл: Выбрать доменное имя и присвоить его разработанному сайту.docx

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 22.11.2023

Просмотров: 17

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.


Цель работы:

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

Задания:

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

  2. Разработать структуру своего сайта (тематическое направление сайта придумать самостоятельно). Предусмотреть не менее 3 страниц.

  3. Выбрать один из бесплатных конструкторов сайта (учитывая задачи п.4), изучить его возможности и на его основе создать разработанный сайт из п.2.

  4. С помощью конструктора реализовать следующие задачи (все организовывать на бесплатной основе):

    1. Выбрать доменное имя и присвоить его разработанному сайту

    2. Зарегистрировать и вставить счетчик отслеживания трафика Яндекс.Метрика.

    3. Установить цель на событие: клик по кнопке в Яндекс.Метрике с установкой соответствующего скрипта на страницу сайта.

    4. Организовать отправку сообщения с сайта на вашу почту.

  5. Подготовить отчет о проделанной работе и защитить результаты своей работы.

Ход работы:

1. Сравнение конструкторов сайтов представлено в таблице 1.

Таблица 1 – Сравнение конструкторов сайтов




Преимущества

Недостатки

Wix.com

  • Красивые шедевры;

  • Удобный интерфейс;

  • Свобода действий;

  • Помощь в оптимизации;

  • Подсказки и техподдержка;

  • Низкая скорость загрузки;

  • Мобильная версия тормозит;

  • Нет возможности исправлять или менять код;

SITE123

  • Есть настройка дизайна сайта

  • Скорость загрузки сайта высокая;

  • Есть редактор мобильной версии сайта;

  • Мегатеги: Title, Description, Keywords и атрибуты для картинок Alt и Title

Битрикс

- Распространённость

- Техподдержка

- Расширения

- Обучение

- Ориентированность на клиентов

- Производительность

- Безопасность

- Жертвы маркетинга

- Сложная админка

- Много плохих разработчиков



2. Представляю структуру своего сайта (Рисунок 1):


Животные





Отправка на почту

Медведь

Белка


Рисунок 1 – структура сайта

3. Выбирается конструктор сайтов Битрикс 24.

4. Чтобы получить домен, нужно в «настройка сайта» нажать на кнопку «получить домен бесплатно». Затем набрать имя модема и нажать на кнопку «подключить модем бесплатно. У нас есть модем B24-GTRY6B.BITRIX24.SITE (Рисунки 1-2).



Рисунок 1 – Получение модема



Рисунок 2 – Получение модема

Чтобы установить Яндекс Метрику, нужно сначала задать настройки и нажать на кнопку «создать счётчик» (Рисунок 3).



Рисунок 3 – установка «Яндекс-Метрика»

Далее мы получаем код счётчика (Рисунок 4)



Рисунок 4 – код счётчика «Яндекс-Метрика»

Чтобы поставить «Яндекс Метрика», нужно в «настройки» выбрать «аналитика» и ввести номер данного счётчика (Рисунок 5).


Рисунок 5 – установка «Яндекс Метрика»

Далее мы видим отображение в «отчёты» количество визитов к нему (Рисунок 6).


Рисунок 6 – посещение сайта

А здесь мы видим полную сводку статистики посещения сайта и прочей информации (Рисунок 7).




Рисунок 7 – сводка

Далее устанавливаем цель посещения страниц. Сначала вводим название цели, потом ставим тип условия «посещение страниц», потом вводим URL сайта и наконец кликаем по кнопке «Добавить цель» (Рисунок 8).



Рисунок 8 – добавление цели посещения страниц

А здесь проходит отслеживание об отправке формы (Рисунок 9).



Рисунок 9 – отправка формы

Чтобы отправить на почту письмо, для начала в CRM-форме пользователь вводит свои данные и электронную почту (Рисунок 10).



Рисунок 10 – СRM-форма

В форме обратной связи выбираем вкладку «письмо», пишем текст, и наконец нажимаем кнопку «отправить» (Рисунки 11-12).



Рисунок 11 – Форма обратной связи



Рисунок 12 – отправка письма

Получаем письмо обратно (Рисунок 13).



Рисунок 13 – Письмо-ответ

Ответы на контрольные вопросы.

1. При создании сайта проектируются две структуры: логическая и физическая. Логическая структура определяет, в какой последовательности материалы будут доступны пользователю, какие ссылки следует выбирать для доступа к информации, размещенной на сайте. Хорошо продуманная логическая структура гарантирует, что на поиск необходимых данных будет затрачено меньше времени, и что они всегда будут найдены.

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

3. Основными отличительными признаками при сравнении сайта-визитки и интернет-магазина
являются объем представленной информации и функционал.

4. Потому что в них функционал очень скудный из-за того, что за каждую функцию нужно заплатить. Как бы пользователю даётся пробная версия, но чтобы полностью пользоваться ей, нужно заплатить.

5. Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.







body>



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

Body {
margin: 0;
padding: 0;
font-size: 12px;
color: red;
}


При большом количестве значений одного свойства разрешается применение сокращённой записи. А вот и пример:

H2{
font-family: arial, sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

Сокращённая запись стилей заголовка H2 будет выглялеть так:

H2{ font: arial,sans-serif 20px italic bold; }

7. Robots.txt — это текстовый файл, который содержит параметры индексирования сайта для роботов поисковых систем.

Яндекс поддерживает стандарт исключений для роботов (Robots Exclusion Protocol) с расширенными возможностями.

При очередном обходе сайта робот Яндекса загружает файл robots.txt. Если при последнем обращении к файлу, страница или раздел сайта запрещены, робот не проиндексирует их.

8. 400 Bad Request


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

401 Unauthorized

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

402 Payment Required

Эта ошибка сообщает клиенту о том, что для успешного выполнения запроса ему необходимо оплатить доступ к серверу. Изначально код 402 должен был стать неким стандартом для цифровой валюты и оплаты контента в сети. Но не срослось. До сих пор нет единого решения по поводу того, как должны выглядеть платежи в сети. Также нет и единого решения по поводу того, как стоит использовать 402.
9. Для настройки FTP-соединения с удаленным сервером, на котором у вас лежит или будет лежать сайт, ваш хостер должен вам сообщить следующие данные: логин, пароль и адрес FTP -сервера. Они нужны для организации ограничения доступа к вашему сайту. Чтобы данные на сайте могли менять только вы. Если под рукой нет никакого файлового менеджера или специального FTP -клиента, подойдет браузер «Internet Explorer» или окно «Мой компьютер», что, по сути, одно и то же.

Используя полученный у хостера данные, делаем прямую ссылку для подключения по FTP к серверу:


ftp://логин:пароль@адресftpсервера

Логин и пароль разделяются служебным символом «:», после пароля перед адресом ftp-сервера стоит служебный символ «@». В самом начале ссылки мы пишем «ftp://», чтобы браузер был уверен, что передача файлов будет по протоколу FTP, а не по более привычному для него HTTP. Пробелов в ссылке быть не должно.

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

Её виды.

Верстка по виду издания:

книжно-журнальная верстка – создается по обычным правилам книжной верстки, хотя существуют особенные приемы для некоторых видов иллюстрированных журналов;

газетная верстка – от книжно-журнальной кардинально отличается другим расположением текста и иллюстраций, а также довольно свободными правилами переносов;

акцидентная верстка – применяется для верстки отдельных небольших заказов: афиш, объявлений, бланков, рекламных листовок. Такая верстка называется еще мелочным набором. Применяется и для создания отдельных частей книг, то есть суперобложек, титулов и шмуцтитулов, инициалов и т. д. Вообще акцидентная верстка бывает трех видов: издательская акциденция, афиши и плакаты, акцидентная продукция малых форм. Акцидентная верстка использует различные графические решения. См. примеры верстки по виду издания.

Конфигурация материалов:

при прямой конфигурации колонки по высоте одинаковы, и каждая образует прямоугольник. Применяется обычно в учебниках, многих газетах и журналах, изданиях художественной литературы. Преимущество – удобочитаемость и аккуратный строгий вид полосы;

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

Расположение материалов относительно центра полосы. Центром полосы называется линия, которая по вертикали или по горизонтали делит полосу на две одинаковые части.

Различают симметричную и асимметричную верстку. При симметричной верстке получившиеся равные части страницы как бы логически уравниваются по смыслу. Асимметричное решение удобно, когда нужно графически выявить главный элемент. См.  примеры "Верстка относительно центра полосы".

Ширина колонок материала: по этому признаку различают постоянную (одинаковое количество равных по размеру колонок) и переменную верстку. 

Способ размещения текста и иллюстраций:

открытая верстка – с иллюстрациями над или под текстом полосы;

закрытая верстка – с иллюстрациями, помещенными внутри текста и граничащими с текстом по двум или трем сторонам;

глухая верстка – когда в макете много колонок, и расположенные внутри текста иллюстрации всеми четырьмя сторонами соприкасаются с текстом;

версткавразрез – попеременно иллюстрации и текст, при этом текст делится иллюстрациями на фрагменты;

версткав оборку – в углу размещена иллюстрация, а с двух сторон она окружена текстом;

верстка на полях – так можно поместить мелкие изображения.

Вывод: навыки работы с web-технологиями, навыки разработки сайтов с помощью конструкторов сайта получены и применены на практике.