Введение. Web-конструирование

Web-конструирование

Л. Татарникова

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

Основные источники:

− Дерябин А.Л. Программирование технологических процессов для станков с ЧПУ. – М.: Машиностроение, 2007. – 236 с.

− Шарин Ю.С.Обработка деталей на станках с ЧПУ. – М.: Машиностроение, 2005. – 357 с.

− Панов Ф.С., Травин А.И.Работа на станках с числовым программным управлением. – М.: Машиностроение, 2006. – 198 с.

− Инструкция по программированию для УЧПУ Н22 – 1М

− Инструкция по программированию для УЧПУ «Электроника НЦ-31»

− Инструкция по программированию для УЧПУ Н33 – 1М

− Инструкция по программированию для УЧПУ 2Координата С-70-3

Дополнительные источники:

− Евгеньев Г.Б. Основы программирования обработки на станках с ЧПУ учебное пособие. - М.: Машиностроение, 2008. – 154 с.

− Сергиевский Л.В. Наладка и эксплуатация станков с ЧПУ: учебник. – М.: Машиностроение, 2007. – 158 с.

− Кузнецов Ю.И., Сафраган Р.Э., Гончаренко Б.А. Оснастка для станков с ЧПУ: справочник. – М.: Машиностроение, 2006. – 311 с.

Интернет ресурсы:

1. Журнал по металлообработке «Стружка» - WWWW.STRUZHKA.RU

2. Техническая библиотека – techlib.org, trurl library:

Сегодня мы начнём прогулку в увлекательный мир – мир web-строительства.

Что это значит? Наверняка ты «гулял» в Интернет, а уж если и не гулял, то слышал о нём. Что такое Интернет? Каждый представляет его по-своему. Но, возможно, всякому будет понятно и такое сравнение: Интернет – это городок, точнее, городище, состоящее из домиков – сайтов, которые, в свою очередь, состоят из комнат – страничек. В каждой комнате есть двери в соседние, и даже (сбылась мечта фантастов!) в очень далёкие комнаты. Причём сделаны эти двери – гиперссылки – так хитро, что, перебираясь в комнатку, расположенную за тридевять земель, ты даже не заметишь, что так далеко забрался.

Творят все эти чудеса мастера-сайтостроители (web-мастера). И имеется у них инструмент – специальный язык, красиво и звучно названный Hyper Text Markup Language – язык гипертекстовой разметки, или коротко HTML.

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

Итак,

Чертёж первый
Голова, тело, заголовок…

1. Для создания чертежа, или кода (web-мастера – люди довольно странные и обычные чертежи называют кодом J), нашего домика-сайта нам понадобится рабочая площадка – папка, в которую будут помещаться все файлы (мы люди «подкованные» и прекрасно понимаем, что Интернет – это виртуальный мир, а значит всё, что в нём существует, располагается в файлах):

c создай папку с именем my_site;

c открой её и в ней создай текстовый документ, которому дай имя index.html (создаются и папка, и документ одинаково: Файл à Создать à Папку или Текстовый документ).

2. Открой файл index.html двойным щелчком мыши.

Не удивляйся, если твой текстовый файл открылся не в блокноте. Мы изменили расширение файла (.txt на.html), а такое расширение сообщает системе Windows, что файл является web-страничкой и открывать её надо в специальной программе – браузере (или броузере, решай сам, как должно звучать слово Browser), том самом мастере, который умеет читать html-чертежи и строить по ним домики.

Не удивляйся, если, прочитав эти строки, ты всё-таки увидишь свой файл открытым в блокноте. Такое может случиться, если в системе отключено отображение расширений. В этом случае, переименовав файл в index.html, ты на самом деле получил файл index.html.txt, который и должен открыться в блокноте. Как тогда быть? Можно, конечно, изменить системные настройки, но мы поступим проще:

c выполни команду Файл à Сохранить как…;

c в открывшемся диалоговом окне в списке Тип файла выбери Все файлы;

c в поле Имя файла сотри предложенное имя и запиши index.html (на твой вопрос, зачем мы стёрли имя, заменив его точно таким же, отвечу – на самом деле ты стёр имя со скрытым расширением.txt);

c нажми кнопку Сохранить и закрой блокнот;

c убедись, что в папке my_site теперь существует два файла – index.html и index, первый из которых можешь смело удалить;

c двойным кликом открой файл index, и, если он открылся в браузере, значит, у тебя получилось сменить расширение, поэтому теперь возвратись к началу текста в этой рамке и читай…

И ещё одно замечание: о типе файла говорит не только его расширение, но и значок – пиктограмма приложения, «ответственного» за этот файл. Если у файла index.html значок изменился, превратившись в голубую букву е, значит, «твой» браузер – Internet Explorer.

Программ-браузеров существует довольно много. Наиболее распространены такие: Internet Explorer (устанавливается в системе Windows автоматически), Opera , Netscape Navigator (и его русифицированная версия Сибкон Коммуникатор )…

3. В открывшемся окне браузера ты видишь пустую страницу. И, думаю, это тебя не удивляет – мы ведь ещё ничего и не «начертили». Откроем наш файл для редактирования. Для этого щёлкни правой кнопкой мыши по этой самой пустой странице и в открывшемся контекстном меню (будем коротко его называть КМ) выбери строчку Просмотр HTML-кода.

Описанным способом можно открыть код странички в Internet Explorer. В нём же можно поступить и иначе: Вид à Просмотр HTML-кода. В любом случае наш файл откроется в Блокноте.

В браузере Opera всё это делается чуть-чуть иначе: либо КМ à Фрейм à Просмотреть источник (Frame à View source), либо Вид à Источник (View à Frame source).

А вот в Сибкон Коммуникаторе сложнее. Если он у тебя установлен как основной, то ты уже успел увидеть сообщение о том, что в документе нет данных. То есть пустой чертёж Коммуникатор не воспринимает вообще. И воспользоваться командой КМ à Просмотр кода кадра или Вид à Код страницы сейчас не получится. Эти команды просто недоступны. Придётся запускать Блокнот из главного меню и выполнять команду Файл à Открыть.

4. Наконец-то можно написать первые строчки кода:

<HTML>

<HEAD>

</HEAD>

<BODY>

Здравствуйте! Меня зовут Вася!

</BODY>

</HTML>

Как видишь, html-код состоит из особых слов – тегов, заключённых в угловые скобки < и >. Каждый тег имеет свой смысл:

<HTML> – начало html-документа;

<HEAD> – начало «головной» части – в ней записывается служебная информация;

</HEAD> – конец «головной» части (закрывающий тег отличается от открывающего наличием слэша (знак /) и присутствует почти у всех тегов);

<BODY> и </BODY> – начало и конец «тела» документа (именно здесь, между этими тегами и располагается всё содержимое странички).

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

5. Посмотрим, что же мы сотворили:

c сохрани изменения в документе – Файл à Сохранить;

c перейди в окно браузера и обнови страничку, нажав кнопку Обновить: в IE, в Opera, в Коммуникаторе.

6. Впечатляет? Скорее всего, не очень. Мелковато, черновато-серовато, никакого оформления, да ещё в строке заголовка в лучшем случае имя нашего файла, а в худшем – длиннющая строка пути к этому файлу на диске. Будем исправлять:

c прежде всего в головную часть добавим данные о заголовке нашей странички – тег <TITLE>:

<TITLE>Моя домашняя страничка</TITLE>

c затем оформим текст как заголовок, используя теги <H1>, <H2>,… <H6> (эти теги «превращают» заключённый в них текст в заголовок, просто изменяя его размер и выделяя полужирным начертанием, начиная с <H1> – самого крупного и заканчивая <H6> – самым мелким. Поэкспериментируй и подбери наиболее подходящий для твоей странички размер заголовка):

<H3>Здравствуйте! Меня зовут Вася!</H3>

c продолжим рассказ о себе (приведённый в коде текст, конечно же, примерный, ты волен его изменить по своему усмотрению). В результате получаем такой (или почти такой) код:

<HTML>

<HEAD>

<TITLE>Моя домашняя страничка</TITLE>

</HEAD>

<BODY>

<H2> Здравствуйте! Меня зовут Вася! </H2>

Я учусь в 9 классе одиннадцатой школы города Иркутска.

Дата добавления: 2014-11-16