Меню

Уроки 29 31 4 4 Технологии создания а Содержание и структура а Оформление а Размещение а в Интернете

Уроки 29 — 31 §4.4 Технологии создания сайта. Содержание и структура сайта Оформление сайта. Размещение сайта в Интернете

• структура сайта
• навигация
• оформление сайта
• шаблон страницы сайта
• хостинг

4.4.1. Технологии создания сайта

Существуют несколько способов создания сайтов.

Во-первых , сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличать теги от текста, их заключают в угловые скобки (рис. 4.7).

Во-вторых , можно документ, подготовленный в текстовом процессоре (Microsoft Word, OpenOffice Writer), сохранить как web-страницу (в формате HTML).

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

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

Рис. 4.7. Простейшая веб-страница и её HTML-код

Вы можете попытаться освоить основы веб-дизайна самостоятельно, пройдя дистанционный курс «Web-конструирование» А. А. Дуванова в Роботландском университете (http://www.botik.ru/

4.4.2. Содержание и структура сайта

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

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

Теперь необходимо определить структуру (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.

Очевидно, сайт может включать в себя общую информацию (программу и расписание занятий, место проведения занятий, фамилию, имя, отчество руководителя и т. д.), страницу новостей и объявлений, личные страницы руководителя и участников объединения, галерею работ участников объединения, полезные ссылки на другие ресурсы сети Интернет и многое другое. Изобразим структуру сайта в виде графа (рис. 4.8).

Рис. 4.8. Иерархическая структура сайта

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

4.4.3. Оформление сайта

Любой сайт загружается с главной (домашней) страницы (home page) , которая прежде всего должна давать ответ на вопрос «О чём этот сайт?». Для этого на главной странице размещают название сайта, тематическое графическое изображение, короткий текст с описанием содержания сайта, а также главное меню — ссылки на основные разделы сайта. Также на главной странице могут быть размещены имя автора сайта и его контактная информация, счётчик посетителей, новости и т. д.

Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это:

• заголовок сайта, расположенный в самом верху страницы;
• главное меню, как правило, размещаемое в левой части страницы (количество пунктов меню, их названия и порядок неизменны на всех страницах сайта).

Желательно, чтобы страницы сайта были выполнены в едином стиле. Чтобы выдержать стиль, проще вначале разработать шаблон страницы сайта, на котором представить элементы, имеющиеся на всех страницах сайта (рис. 4.9).

Рис. 4.9. Примерный шаблон страниц сайта

При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:

• Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения.
• Названия пунктов меню делайте краткими; недопустимо растягивание названия пункта на несколько строк.
• Не выбирайте для страниц пёстрый фон, на таком фоне текст читается с трудом.
• Не размещайте на странице слишком много информационных и художественных блоков.
• Не пишите слишком длинных текстов. Текст разбивайте на небольшие абзацы, отделяя их друг от друга пустыми строками.
• В каждом абзаце используйте одни и те же приёмы форматирования.

4.4.4. Размещение сайта в Интернете

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

Хостинг — услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным .

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

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

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

САМОЕ ГЛАВНОЕ

Структура (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.

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

Шаблон страницы — это схема страницы, на которой представлены элементы, имеющиеся на страницах сайта. Использование шаблонов страниц помогает выдержать единый стиль оформления сайта.

Хостинг — услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.

Читайте также:  Влажные экваториальные леса климатические условия животные растения таблица

Вопросы и задания

1. Ознакомьтесь с материалами презентации к параграфу, содержащейся в электронном приложении к учебнику. Дополняет ли презентация информацию, содержащуюся в тексте параграфа?

2. С помощью каких инструментов можно создавать сайты?

3. Что такое структура сайта?

4. Продумайте и изобразите в виде графа структуру одного из следующих сайтов:

а) «Наш класс»;
б) «Моя семья»;
в) «Информатика».

Источник

Таблица для сайта. Сделать/вставить таблицу

Эта статья будет посвящена разбору возможностей создания и вставки таблиц, в том числе таблиц excel на сайт.

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

Далее посмотрим, как вставить на сайт таблицу из уже готового файла Excel. И в завершении создадим адаптивные таблицы для сайта с помощью сервисов Гугл и Onedrive, чтобы вставлять на сайт таблицы excel любого размера.

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

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

Плагины для создания и вставки таблиц на сайт

Для разных движков, будь то это WordPress, Joomla или любой другой, существуют дополнения или плагины, расширяющие возможности оформления страниц сайта. В зависимости от того, какой движок у вашего сайта, вы можете просто в поисковике набрать что-то типа: таблица в Водпресс или как создать таблицу в Joomla и получить кучу сайтов, которые делают подробный разбор разных плагинов.

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

Но, также необходимо понимать, что у плагинов есть и свои недостатки.

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

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

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

Вставить таблицу на сайт с помощью ckeditor

Удобно, — ставим курсов в том месте текста, где нужно создать и вставить таблицу, нажимаем на значок таблицы, как показано на снимке выше и с помощью всплывающего окна настраиваем нужную нам таблицу:

Свойства таблицы

Здесь все интуитивно понятно. И просто поэкспериментировав, можно быстро понять, как создавать таблицы на сайте с помощью этого плагина. Единственное что хочется дополнить, — если у вас тема сайта адаптивная, т.е. размер корректно изменяется под экраны мобильных устройств, и если вам нужно сделать таблицу во всю ширину страницы, то в поле Ширина можно указывать в процентах, например 100%.

Удобный плагин-редактор, что и говорить! Но, как я уже говорил, есть и недостаток у него с некоторыми темами. Например, при сохранении страниц в некоторых темах добавляются лишние переносы строк и убираются они только в режиме HTML. Конечно, можно приспособиться, но, если не хватает внимательности, то можно это пропустить и в оформлении страниц будут лишние переносы строк.

Также данный плагин не «дружит» с некоторыми другими плагинами, которые добавляют свои кнопки в стандартную панель редактора для быстрого и удобного вывода функций.

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

Вставить опрос на сайт

При нажатии по кнопке появляется дополнительное окно, в котором можно просто поставить ID опроса и нажать ОК :

ID опроса

Опрос вставится в то место страницы, где стоял курсор.

А узнать ID опроса можно в разделе, где находятся все созданные опросы:

Опросы

Достаточно удобно! Но, при добавлении расширенного редактора CKEditor данная кнопка не работает, т.е. не выводит всплывающее окно (по крайней мере, в некоторых темах).

Конечно, здесь тоже можно приспособиться, просто вставляя вручную код , где цифра 2, это ID опроса.

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

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

Сайты для создания таблиц. Генераторы таблиц

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

Вот один из таких бесплатных сайтов для создания таблиц: Онлайн генератор html таблиц для сайта:

русскоязычный генератор html таблиц для сайта

Функционал здесь минимален, но зато можно сразу же заполнить необходимые ячейки, а также объединить нужные ячейки в таблице.

И еще обратим внимание на один русскоязычный онлайн генератор таблиц :

Читайте также:  Природное сообщество виды признаки и примеры

онлайн генератор таблицо для сайта

Как видно на снимке выше, в этом генераторе даже можно задавать цвет и доп. эффекты!

Если захочется поэкспериментировать с созданием таблиц и этих сервисов будет недостаточно то, вот еще один сервис для создания таблиц: HTML Table Generator . Этот генератор таблиц англоязычный, но разобраться в нем просто, а если еще пользоваться браузером с автопереводчиком , то вообще никаких проблем.

Как вставить таблицу Excel на сайт

Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer .

Суть работы сервиса простая. Нужно выделить и скопировать необходимую готовую таблицу или ее часть:

Как вставить таблицу Excel на сайт

Далее, нужно зайти в вышеупомянутый сервис, вставить скопированную таблицу и сгенерировать html код таблицы:

сгенерировать html код таблицы

Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:

копируем готовый код таблицы

И вставляем к себе на сайт.

Если таблица небольшая, то проблем не должно быть. Но если таблица широкая, в таком случае мы сталкиваемся с серьезным недостатком размещения таблиц на сайте, а именно с тем, что широкие таблицы могут не помещаться на странице.

Вот как это может выглядеть:

большая excel таблица на сайте

Как видно на снимке, таблица выходит на границы сайта.

Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.

Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?

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

Но, есть более интересный способ, который рассмотрим далее.

Адаптивные таблицы для сайта через Гугл Диск

Загружаем в Гугл Диск нужный нам файл с таблицей (Создать -> Загрузить файл) и открываем доступ:

Открыть доступ файлу

Включаем доступ по ссылке и копируем ее:

Совместный доступ

Теперь можно разместить на сайте, например, так:

Расписание Саратовского автовокзала (нажмите для просмотра)

Таким образом, и для пользователей удобно, — всегда на любом устройстве корректно будет отображаться таблица и скачать файл можно на компьютер (кстати, было бы уместно также в файле вставить адрес своего сайта для вирусного продвижения, если предполагается много скачиваний).

И для самого владельца сайта использование Гугл Диска делает удобным добавление таблиц на сайт, ведь проще создать сложную таблицу в Excelе, чем «мучится» с их созданием на сайте с помощью разных кодов html.

Для этого нужно зайти в файл, закачанный в Гугл, и в верхней части экрана выбрать функцию Открыть в приложении «Google»:

Открыть в приложении

Заходим в Меню -> Публикация в Интернете:

Публикация таблицы в Интернете

Копируем предоставленный код во вкладке Встроить:

Встроить таблицу

И размещаем на своем сайте в нужно месте.

Примечание : Единственное, что еще можно добавить, это размеры width=»100%» height=»480″, как на снимке ниже, чтобы корректно отображалась таблица на сайте.

Добавить размеры

Итак, размещаем код таблицы для сайта на странице и вот что получается (воспользуйтесь вкладками и областями прокруток):

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

Улучшаем использование таблиц

Если на одной странице необходимо вставить много таблиц, то для более удобного их использования посетителями можно воспользоваться плагином Shortcodes Ultimate и заключить таблицы в аккордион:

Адаптивные таблицы для сайта через Onedrive

По аналогии сервиса Гугл Диск, встроить таблицу на сайт можно с помощью сервиса от Майкрософт Onedrive .

Загружаем таблицу, правой кнопкой мыши на файл, — выбираем Внедрение и берем для сайта код таблицы ( 1 ):

Добавить таблицу через onedrive

Можно также воспользоваться дополнительными настройками внешнего вида таблицы ( 2 ):

Дополнительные настройки встраивания таблицы onedrive

Вот как выглядит встроенная таблица на сайте с помощью сервиса Onedrive:

Конечно, встраивание таблиц с помощью сервиса Onedrive уступает Гуглу из-за нестабильности и некорректного отображения некоторых элементов таблиц, но, возможно, в будущем Майкрософт улучшится в этом отношении.

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

Источник



Создание сайта — тест с ответами

Информатика в настоящее время является стремительно развивающийся наукой. Многие студенты постают в технические университеты, чтобы в будущем связать свою деятельность с IT или приближенными областями. Для проверки знаний по теме Создание сайта предлагаем пройти тестирование на этой странице. Обращаем ваше внимание, что в тесте правильные ответы выделены символом [+].

HTML – это:

[+] а) язык разметки гипертекста

[-] б) страница Internet Explorer

Что такое тэг:

[+] б) команда, заключенная в угловые скобки

[-] в) указатель ссылки

Контейнер

[-] а) разделения текста на заголовки

[-] б) форматирования шрифта любого фрагмента текста

[+] в) разделения текста на абзацы

Набор веб-страниц, связанных между собой перекрестными ссылками, расположенный под одним общим корневым именем, называется:

[-] а) электронным учебником

Web-страница (документ HTML) представляет собой:

[-] а) текстовый файл с расширением txt или doc

[-] б) двоичный файл с расширением com или exe

[+] в) текстовый файл с расширением htm или html

Для просмотра Web-страниц в Интернете используются программы:

[+] а) Internet Explorer или NetScape Navigator

[-] б) MicroSoft Word или Word Pad

[-] в) HTMLPad или Front Page

Читайте также:  Рабочая тетрадь по истории России Артасов 6 класс Параграф 24

Гиперссылки на Web – странице могут обеспечить переход

[+] а) на любую web – страницу любого сервера Интернет

[-] б) только на web – страницы данного сервера

[-] в) только в пределах данной web – страницы

Гипертекст – это:

[-] а) текст очень большого размера

[+] б) структурированный текст, где возможны переходы по выделенным меткам

[-] в) текст, в котором используется шрифт большого размера

Для создания Web-страниц используется эта программа:

Для создания Web-страниц используется эта программа:

Они используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ:

Для выравнивания текста в документе используется атрибут:

Тэг может быть:

Тэг может быть:

Тэг может быть:

Сайт можно создать, воспользовавшись:

[-] а) языком программирования Си

[+] б) языком разметки гипертекста HTML

[-] в) электронными таблицами

Кто занимается проектированием структуры wеb-сайта:

[-] б) системный администратор

При наполнении страниц сайта информационными материалами не следует:

[-] а) избегать слишком длинных текстов

[+] б) использовать пестрый фон

[-] в) применять краткие названия пунктов

Как называется услуга размещения сайта на сервере, постоянно находящемся в сети Интернет:

Как называют схему страницы, на которой представлены элементы, имеющиеся на страницах сайта:

Как можно создать сайт:

[+] а) сохранив документ в формате HTML

[-] б) с помощью электронных таблиц

[-] в) воспользовавшись языком программирования Си

Чтобы отличать теги от текста, их заключают в:

[-] а) фигурные скобки

[-] б) квадратные скобки

[+] в) угловые скобки

При наполнении страниц сайта информационными материалами не следует:

[+] а) ставить точку в названиях страниц, если они состоят из одного предложения

[-] б) применять краткие названия пунктов

[-] в) избегать слишком длинных текстов

Недостаток бесплатного хостинга:

[+] б) коммерческая реклама от поставщика услуги

Источник

Тест с ответами: “Создание web-сайта”

1. Недостаток бесплатного хостинга:
а) коммерческая реклама от поставщика услуги +
б) отсутствие вариантов размещения
в) доменное имя

2. Как называют схему страницы, на которой представлены элементы, имеющиеся на страницах сайта:
а) матрица
б) шаблон +
в) фундамент

3. Представление структуры сайта в виде графа обеспечивает наглядное представление его содержания и помогает организовать … — переходы с одной страницы на другую:
а) выход
б) реверс
в) навигацию +

4. Услуга размещения сайта на сервере, постоянно находящемся в сети Интернет:
а) хостинг +
б) адаптация
в) моделинг

5. Перед размещением сайта в сети Интернет следует провести его тестирование, чтобы убедиться в том, что он правильно отображается разными…:
а) сайтами
б) страницами
в) браузерами +

6. Чтобы отличать теги от текста, их заключают в:
а) круглые скобки
б) угловые скобки +
в) фигурные скобки

7. Проектированием структуры wеb-сайта занимается:
а) wеb-программист
б) провайдер
в) wеb-дизайнер +

8. При наполнении страниц сайта информационными материалами не следует:
а) ставить точку в названиях страниц, если они состоят из одного предложения +
б) избегать слишком длинных текстов
в) применять краткие названия пунктов

9. Сайт можно создать, воспользовавшись:
а) языком программирования Си
б) языком программирования Паскаль
в) языком разметки гипертекста HTML +

10. Как называют услугу по размещению сайта на сервере, постоянно находящемся в сети Интернет:
а) сервис
б) хостинг +
в) нет верного ответа

11. При наполнении страниц сайта информационными материалами не следует:
а) использовать пестрый фон +
б) применять краткие названия пунктов
в) использовать одинаковые приемы форматирования абзацев

12. Что такое тэг:
а) гиперссылка
б) команда, заключенная в угловые скобки +
в) указатель ссылки

13. HTML – это:
а) язык разметки гипертекста +
б) страница Internet Explorer
в) браузер

14. Сайт можно создать, воспользовавшись:
а) языком программирования Си
б) языком разметки гипертекста HTML +
в) электронными таблицами

15. При наполнении страниц сайта информационными материалами не следует:
а) ставить точку в названиях страниц, если они состоят из одного предложения +
б) применять краткие названия пунктов
в) избегать слишком длинных текстов

16. Что относится к контейнерным тэгам:
а) +
б)
в)

17. Кто занимается проектированием структуры wеb-сайта:
а) wеb-программист
б) системный администратор
в) wеb-дизайнер +

18. Что относится к контейнерным тэгам:
а)

19. Тэг может быть:
а) четким
б) авторитетным
в) парным +

20. Тэг может быть:
а) автономным
б) одиночным +
в) вспомогательным

21. Как можно создать сайт:
а) сохранив документ в формате HTML +
б) с помощью электронных таблиц
в) воспользовавшись языком программирования Си

22. Для выравнивания текста в документе используется атрибут:
а) src
б) align +
в) valign

23. Тэг может быть:
а) главным
б) основным
в) закрывающим +

24. Они используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ:
а) фреймы +
б) гиперссылки
в) контейнеры

25. Для создания Web-страниц используется эта программа:
а) MS FrontPage +
б) Defrag
в) Turbo Pascal

26. Для создания Web-страниц используется эта программа:
а) Блокнот +
б) ScanDisk
в) QBasic

27. Гипертекст – это:
а) текст очень большого размера
б) структурированный текст, где возможны переходы по выделенным меткам +
в) текст, в котором используется шрифт большого размера

28. Гиперссылки на Web – странице могут обеспечить переход
а) на любую web – страницу любого сервера Интернет +
б) только на web – страницы данного сервера
в) только в пределах данной web – страницы

29. Гиперссылка задается тегом:
а)
б) текст +
в)

30. Для просмотра Web-страниц в Интернете используются программы:
а) Internet Explorer или NetScape Navigator +
б) MicroSoft Word или Word Pad
в) HTMLPad или Front Page

Источник