Глава 11. Лабораторная работа "Первые шаги в web-редакторе"

Содержание

11.1. Интерфейс редактора Homesite

  1. На вкладке Common (в верхнем правом углу) выберите Quick Start (что бы увидеть название кнопки, подержите на ней курсор мыши). В открывшемся окне Page Properties в поле Title введите: Я учусь писать - в HomeSite!!!, поле Doc Type - оставьте пустым. Нажмите Next>, в следующем окне Meta Properties в поле Keywords введите ключевые слова через запятую слова: HomeSite, html, маркетинг, группа мк.., Ильин Павел. В поле Description введите краткое описание страницы: Это первая web-страница Ильина Павла, написанная в HTML - редакторе HomeSite. Нажмите Finish.

  2. В появившемся окне Body необходимо выбрать Background Color - цвет фона, необходимо выбрать Text Color - цвет текста, Link Color - цвет ссылок. После того как Вы подобрали цветовую гамму, нажмите ОК.

  3. Перед Вами на экране появился готовый html-код Вашей будущей странички. Сохраните эту страницу: выберите File | Save as, в поле Look in выберите свою папку homesite см. п.1. В поле File name наберите index.html. Нажмите Save.

  4. На вкладке Common нажмите кнопку Align Center. Теперь в верхнем правом углу выберите вкладку Fonts и нажмите на кнопку Heading 1. Теперь между тегами заголовка напишите: Привет! Меня зовут Ильин Павел. Затем на вкладке Common нажмите кнопку Break и продолжайте писать: Мне 20 лет. Я учусь в КрасГАУ на факультете Управления и Бизнеса.


  5. Чтобы посмотреть, что у Вас получилось, нажмите File | Save. Сверните окно HomeSite. Откройте свою папку, выберите папку homesite и откройте index.html. Сложно, не правда ли?

  6. Для просмотра в HomeSite предусмотрена вкладка Browse. Нажмите на нее и увидите ту же самую страницу index.html только в окне программы. Каждый раз, исправляя теги, и занимаясь отладкой страниц, не забывайте про эту вкладку! Она Вам поможет видеть внешний вид страницы.

  7. Вернитесь назад к коду: нажмите на вкладку Edit. Поставьте курсор на следующую строчку после закрывающего тега </div>. На вкладке Common нажмите кнопку Horizontal rule, щелкните на вкладку Browser-specific и в поле Color выберите цвет горизонтальной линии. Нажмите ОК. Посмотрите, что получилось с помощью вкладки Browse.

  8. Вернитесь назад к коду: на вкладке Common нажмите кнопку Align Right на вкладке Font нажмите кнопку Italic и между тегами напишите (вместо написания - <br> нажимайте на вкладке Common кнопку Break):

Тянулись недели, <br>

Июли, апрели, <br>

Кружили метели, <br>

И липы цвели... <br>

Казалось что время <br>

ползет еле-еле, <br>

И глаз не поднять от привычной земли. <br>

  1. На вкладке Fonts нажмите Bold и между тегами подпишите стихотворение: Аринчин С. Посмотрите, что у Вас получилось.

  2. Вставка рисунка: Далее откройте Мой компьютер | Temp, скопируйте полностью папку images и вставьте ее к себе в папку homesite. Вернитесь к коду программы, на вкладке Common, нажмите кнопку Image. В появившемся окне на вкладке Image Tag в поле Sourse нажмите кнопку раскрытия папки. В поле Look in найдите свою папку, откройте папку homesite откройте папку images выберите файл рисунка и нажмите Open. Сделайте рисунок в рамке: в поле Border введите 1, сделайте выравнивание рисунка по левому краю, для этого в поле Align выберите right. Нажмите ОК, и посмотрите, что у Вас получилось. Не пугайтесь, если рисунок отображается просто рамкой. Сохраните index.html и посмотрите эту страницу у себя в папке homesite.

  3. Создайте таблицу: нажмите вкладку Tables и щелкните по кнопке Table Wizard, в поле Table Design в поле Rows три раза щелкните по +, в поле Columns один раз по +, в поле Column Span нажмите два раза +, в поле должна получиться таблица с заголовком наверху, с тремя столбцами и четырьмя строками. Нажмите Next>. В поле Alignment выберите center, в поле Background галочкой отметьте Use Color и на вкладке выберите Custom и в цветовой палитре выберите понравившийся цвет, это и будет цвет Вашей таблицы. Нажмите Next>.

  4. В окне Cell Properties щелкните по самой верхней строке (она должна выделиться темно-синим цветом) и в поле Content напишите Мои любимые книги. Затем щелкните по следующей строке по первому столбцу и в поле Content напишите Номер, в следующей - Книга, и в последней ячейке напишите Автор. Заполните таблицу, своими любимыми книгами, например как в таблице:

Мои любимые книги

  

Номер

Книга

Автор

1.

Воскресение

Л.Н. Толстой

2.

Царь-рыба

В.П. Астафьев

3.

Капитанская дочь

А.С. Пушкин

  1. Нажмите Finish. Посмотрите, что у Вас получилось.

  2. Нажмите File | New, на вкладке HTML выберите Blank Document. Щелкнув по вкладке Common выберите Quick Start. В открывшемся окне Page Properties в поле Title введите: Мое резюме. В поле Doc Type - оставьте пустым. Нажмите Next>, в следующем окне Meta Properties в поле Keywords введите ключевые слова через запятую слова: Резюме, маркетинг, группа мк.., Ильин Павел. В поле Description введите краткое описание страницы: Это резюме Ильина Павла. Нажмите Finish.

  3. В появившемся окне Body необходимо выбрать Background Color - цвет фона, необходимо выбрать Text Color - цвет текста, Link Color - цвет ссылок. После того как Вы подобрали цветовую гамму, нажмите ОК.

  4. В поле тега <body> напишите: Меня зовут Ильин Павел. Мне 20 лет. Я учусь в КрасГАУ по специальности «маркетинг организации». Мне нравиться проводить маркетинговые исследования и писать код html в HomeSite.

  5. Сохраните документ в Вашей папке homesite под именем resume.html. см. п.5

  6. Вернитесь на вкладку index.html (вкладки отображаются в левой нижней части экрана)

  7. Вставьте ссылку на Ваше резюме: курсор установите после тегов таблицы, и на вкладке Common щелкните кнопку Anchor. В поле HREF нажмите кнопку с изображением открывающейся папки. В поле Look in найдите свою папку homesite, щелкните на файле resume.html и нажмите Open. Нажмите ОК. И между тегами ссылки напишите Резюме. Посмотрите, что получилось, сохраните и закройте все окна.

  8. Зайдите в свою папку homesite, выберите index.html. Нажмите на ссылку Резюме. Закройте все.

  9. Любой HTML-документ можно просмотреть в HomeSite, внести необходимые поправки в HTML-код и сохранить. Нажмите Пуск | Программы | HomeSite 4.5. | HomeSite 4.5. Выберите File | Open, в поле Look in найдите свою папку homesite и щелкните по файлу index.html нажмите Open. В поле программы Вы видите код этой страницы.