Занятие №1

Занятие №1

НОВЫЙ САЙТ

Загрузите «Конструктор» (двойной клик по ярлыку «Конструктор сайтов» на рабочем столе.

Создайте новый сайт, щелкнув по кнопке «Новый проект» в левом верхнем углу экрана.

В окне «Шаг 1: Выбор шаблона» выберите подходящий вам дизайн. Дизайн сайта можно изменить в любой момент. Я выбрал “New”

-Щелкните по кнопке «Вперед».

Откроется окно «Шаг 2: Выбор расположения объекта». Где вы можете выбрать или создать папку для сохранения проекта вашего сайта.

-Создайте отдельную папку для вашего проекта. Для этого щелкните кнопку «Создать папку»: И введите ее имя. Например: MySite. Щелкните по кнопке «ОК», папка будет создана и Окно с вашим проектом загрузится.

ВВОД ЗАГОЛОВКА САЙТА

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

В него помещается имя сайта (например: Сайт учителя начальных классов, можно вставить логотип, небольшое изображение.(как вставить изображение – чуть ниже)

Вставим название. Для этого поставим курсор в поле заголовка сайта и введем название с помощью клавиатуры.

 

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

 

Текст можно редактировать при помощи инструментов (под ними есть всплывающие подсказки), не забудьте выделить текст перед редактированием. Инструмент щетка

Очищает текст от редактирования и приводит его в текст по умолчанию

(Verdana; 9 пунктов)

ВВОД ЗАГОЛОВКА СТРАНИЦЫ

Каждая страница имеет заголовок, отображаемый только на этой странице. Это выделенное пунктиром поле, расположенное под заголовком сайта. Заголовок – это название страницы, отображающее ее содержание. Кроме текста в заголовок могут быть помещены небольшие изображения и Flash-анимации.

Мы находимся на первой странице сайта. В заголовке такой странице можно написать «Главная», «Добро пожаловать!», «Вас приветствует…» и. т. п.

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

ДОБАВЛЕНИЕ ТАБЛИЦЫ

Ставим курсор в поле и жмём на кнопку - «Таблица»

Выбираем таблицу из 3-х столбцов и пока одной строки, если понадобится ещё, можно добавить. Ставим флажки (галочки) – не фиксированная ширина и нефиксированная высота, толщину бордюра ставим – 0, жмём ОК

ВСТАВКА ФОТО

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

свою фотку в нужном каталоге

и загружаем. Имя фотки может быть на русском языке. Конструктор сам её переименует. После того, как открыли фото, зададим размер, у меня фото и так маленькое 122х180рх, а у кого больше, то сделайте ширину 200рх (рекомендуемая), а высота пропорционально изменится, если включен флажок (рядом), затем зададим отступы от рамки ячейки (рекомендуется 5рх ) вот по 5 и поставим, зададим «положение» по центру и жмём ОК

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

 

О СЕБЕ

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

ФОТО и ТЕКСТ в ОДНОЙ ЯЧЕЙКЕ

А в первую оставшуюся ячейку я вставлю фото своей школы и текст с описанием. Вот что получится. А можно вставить ДЕВИЗ, кто как хочет.

 

Чтобы картинка в ячейке была вверху, а текст снизу или на оборот, надо кликнуть правой кнопкой по ячейки и выбрать из выпадающего меню строки в порядке: ТАБЛИЦА – СВОЙСТВА – ЯЧЕЙКА - Выравнивание по горизонтали – ВЛЕВО – Выравнивание по вертикали – ПО ВЕРХНЕМУ КРАЮ, дальше зацепить картинку и перетащить в верхний угол. Чуть ниже посмотрите скриншоты.

Если желаете сделать таблицу видимой, то внутри таблицы (в любой ячейке) кликните правой кнопкой – выберите ТАБЛИЦА – СВОЙСТВА – ТАБЛИЦЫ – Задать ТОЛЩИНА БОРДЮРА – 1 – ЦВЕТ (на выбор)

После выполнения этой операции надо сохранить проект. И вообще сохранение проекта необходимо производить как можно чаще (при аварийном отключении ПК или зависании, изменения не сохраняются). Так что жмём на кнопку «Сохранить проект»

Теперь посмотрим, что у нас получилось при конвертации проекта в html код. Жмём кнопку «КОНВЕРТИРОВАТЬ В HTML и ПОСМОТРЕТЬ» соглашаемся конвертировать полностью, а при последующих конвертациях «ИЗМЕНЕННОЕ», по завершении конвертации откроется браузер с вашим файлом, обратите внимание на строку вверху, кликните по ней и выберите «разрешить заблокированное содержимое», вы увидите свой шедевр. Посмотрите так ли всё расположено, как хотелось, если нет, то сделайте изменения. Закройте это окно браузера.

Продолжаем дальше.

ДЕВИЗ

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

ОБРАЩЕНИЕ К ПОСЕТИТЕЛЯМ

Пишу текст. Выделяю его и редактирую. Выбираю гарнитуру Monotype Corsiva

Цвет текста выбираю – зелёный, можно выбрать и фон текста, но я обойдусь без него.

 

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

Не забудьте сохранить сайт, нажав на кнопку «Сохранить или закрыть проект и ответить «Да» на вопрос «сохранить»

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