Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера.



Информатика и ИКТ 2 курс

Урок 47(104)

Раздел 7. Интернет.

Тема 7.2 Основы сайтостроения.

Тема урока: Основы сайтостроения. Инструменты для разработки web -сайтов (11кл.,И.Г.Семакин)

Цели урока:

ü освоение приемов работы с интерфейсом программ для разработки сайтов: MS Office SharePoint Designer, Adobe Dreamweaver, WebPagMaker, KompoZer

ü освоение приемов работы с поисковыми системами Интернета: поиск информации с помощью поискового каталога; поиск информации с помощью поискового указателя.

ü освоение приемов извлечения фрагментов из загруженных web-страниц, их вставка и сохранение в текстовых документах.

ü научить студентов применять полученные знания при работе в интернете.

ü знать правила работы с разными браузерами;

ü способствовать формированию умения использовать приемы настраивать браузер для эффективной работы в сети

Оборудование: Internet Explorer (возможно использование другой программы аналогичного назначения), поисковый сервер Rambler, Яндекс, браузер WWW, текстовый процессор Microsoft Word, компьютеры для студентов, §13, (учебник Информатика 11 кл. /И.Г.Семакин, Е.К.Хеннер,Т.Ю.Шеина 5-е издание, 2015г.),

 

Теоретический материал урока

Инструменты для разработки web-сайтов

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

Web-сайт — это совокупность гипертекстовых документов,

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

одним URL-адресом.

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

Понятие языка разметки гипертекста

В предыдущем параграфе уже говорилось о том, что основой любого сайта является язык разметки гипертекста HTML (HyperText Markup Language). HTML включает в себя несколько десятков так называемых тегов (команд), каждый из которых определяет внешний вид отдельного элемента страницы: текста, изображения, таблицы, списка и др. Например, следующая запись в HTML-документе:

<FONT color=red face="Arial">MoH домашняя страница</ГОЫТ>

означает, что указанный текст («Моя домашняя страница») дол­жен отображаться в окне браузера шрифтом Arial, цвет шриф­та — красный.

Визуальные HTML-редакторы

Для создания сайта необязательно знать язык HTML. Сущест­вует множество доступных визуальных HTML-редакторов, их другое название — WYSIWYG-редакторы, позволяющих созда­вать сайты без знания данного языка. WYSIWYG расшифровыва­ется как: What You See Is What You Get — что видишь, то и по­лучаешь. Работа в таких редакторах происходит с визуальными формами, а не с тегами. Например, чтобы сделать шрифт текста жирным, надо просто выделить этот текст и нажать соответствую­щую кнопку в меню редактора. После этого редактор вставит в HTML-код необходимые теги, а разработчик сайта увидит на стра­нице уже итоговый результат.

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

Правда, у визуальных редакторов есть ряд недостатков. В частности, сгенерированный ими HTML-код далеко не всегда бывает оптимальным, т. е. размер файла может получиться гораз­до больше, чем при его непосредственном описании на языке HTML. Кроме того, в этих редакторах есть масса настроек, кото­рые несведущему человеку будут просто непонятны. Например, человек, впервые создающий сайт, может не знать, что такое «якорь» ссылки или «альтернативный текст» изображения. По­этому хоть какие-то минимальные сведения об используемых тер­минах необходимо предварительно получить.

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

1. Adobe Dreamweaver — один из наиболее популярных ком­мерческих программных продуктов, предназначенных для разра­ботки сайтов. Изначально был разработан и поддерживался ком­панией Macromedia (до 2005 г.). Следующие версии, начиная с Dreamweaver CS3 (2007 г.), выпускает компания Adobe. Редактор содержит огромный выбор всевозможных инструментов, удобный интерфейс, тонкие настройки, позволяющие подогнать программу под нужды web-мастера, а также встроенный FTP-менеджер для загрузки файлов на сервер.

Начинающий пользователь может создавать страницы практи­чески без знания HTML — добавляя элементы страницы и указы­вая их параметры с помощью встроенного мастера (рис. 2.7).

Официальный сайт для загрузки — http://www.adobe.com/ downloads/.

 

 

2. Microsoft Office SharePoint Designer 2007 — визуальный HTML-редактор и программа для web-дизайна от компании Microsoft (рис. 2.8). Является одним из компонентов пакета Microsoft Office 2007, но при этом требует отдельной установки. Данный пакет относится к числу достаточно сложных редакто­ров, позволяющих создавать не только простейшие web-страницы,

 

но и полноценные web-узлы, предназначенные для коллективной работы пользователей. Более новая версия программы Microsoft Office SharePoint Designer 2010 максимально завязана на совместную работу большого числа людей над одним проектом, что требу­ет установки соответствующего программного обеспечения на сер­вере, где хранится данный проект.

Изначально этот продукт относился к разряду коммерческих, но с 2009 года стал распространяться бесплатно для всех желаю­щих на официальном сайте Microsoft Office (http://office.microsoft. com/ru-ru/sharepoint-designer-help).

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

 

Встроенный FTP-менеджер позволяет быстро загрузить гото­вый сайт на сервер. Сайты, сделанные в WebPageMaker-3.0.3, одинаково корректно отображаются во всех основных типах браузеров.

К одному из существенных достоинств редактора относится очень небольшой объем дистрибутива (всего 3,5 Мбайт). Кроме того, существует так называемая версия portable, которая не тре­бует установки (ее объем — 6 Мбайт).

4.  Nvu — свободно распространяемый визуальный HTML-ре­дактор. Преимущество редактора Nvu состоит в его кроссплатфор- менности: есть версии под Linux, Microsoft Windows и MacOS.

Помимо типовых для web-редакторов функций, Nvu содер­жит интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов. Редактор очень прост в использова­нии. В последние несколько лет Nvu не развивается, но потенци­ал этого редактора продолжает реализовываться в редакторе KompoZer.

5.  KompoZer (рис. 2.9) — ответвление от редактора Nvu. KompoZer является свободно распространяемой web-авторской сис­темой, которая сочетает в себе менеджер для web-файлов и визуаль­ный редактор. По сравнению с Nvu, KompoZer создает более корот­кий код разметки. KompoZer чрезвычайно прост в использовании,

 

 

 

что делает его привлекательным для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. KompoZer может рассматриваться в качестве редактора для создания небольших web-проектов. Объем дистрибутива — 7 Мбайт.

 


     Любой WWW-документ может содержать стилизованный и форматированный текст, графику и гиперсвязи с различными ресурсами Интернет. Чтобы реализовать все эти возможности, был разработан специальный язык описания WWW-документов, названный HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста.

     Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и теги разметки (markup tags).

Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера.

Способы создания сайтов

 

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

от “написания” его в блокноте до использования конструкторов веб-сайтов .

У всех у них есть свои плюсы и минусы, поэтому я остановлюсь на каждом из них отдельно.

Идеального варианта нет.

       1. Создание сайтов в блокноте

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

Этот способ занимает огромное количество времени, поэтому сейчас им пользуются только “любители экзотики” или специалисты, так как он требует отличного знания в html-программировании.

       2. Создать сайт помогут программы

Специализированные программы, такие как Front Page, Dreamweaver, KompoZer и т.д.

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

На помощь в дизайнерском оформлении вам на помощь придут готовые шаблоны для сайтов (множество бесплатных html-шаблонов можно найти в интернете, например, на internet-technologies.ru).

Для создания сайта надо добавить контент на страницы (текст, видео, картинки и так далее) и перелинковать их.

       3. Бесплатные конструкторы сайтов (слайд 5)

На предыдущие методы по созданию веб-ресурсов может уйти много времени. Быстро создать сайт помогут к бесплатным конструкторам.

Например:

ucoz . ru – Создать сайт может практически каждый интернет-пользователь. Это занимает всего лишь несколько часов. Здесь я имею в виду и наполнение веб-ресурса.

narod.ru – это если вы хотите создать бесплатный сайт на яндексе (Freeware).

ru.jimdo.com - Благодаря этому сервису получаются красивые и многофункциональные ресурсы (условно-бесплатный конструктор) Shareware

Конструкторы позволяют создавать веб-сайты, не имея знаний по html верстке или программированию. Достаточно владеть основными навыками управления компьютером. На выбор предлагается огромное множество оформлений и дизайнов, которые можно применить к своему будущему проекту.

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

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

       4. Бесплатные системы управления контентом (слайд 6)

Для создания полноценного проекта, с наличием юридических прав, помогут бесплатные системы управления контентом - Content Management System (CMS). Правда в таком случае надо потратиться. :

купить домен для своего проекта (доменное имя – то, что видится в строке браузера, например, kem-shool7.ho.ru), а также выбрать хостинг

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

 


Дата добавления: 2021-05-18; просмотров: 77; Мы поможем в написании вашей работы!

Поделиться с друзьями:






Мы поможем в написании ваших работ!