Практическое занятие №14
Наименование: Верстка сайта по созданному шаблону
1. Цель: Научиться осуществлять верстку сайта по готовому шаблону
2. Подготовка к занятию: по предложенной литературе повторить тему «Дизайн и верстка веб сайта» и ответить на следующие вопросы:
2.1 Какие веб - технологии используются при верстке сайта по готовому шаблону?
2.2 С чего начинается верстка сайта?
3. Литература:
3.1 Шомас Е.А. Конспект лекций по дисциплине «Веб - дизайн», 2014
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013
3.3 http://www.designonstop.com/tutorials/advanced/sozdaem-v-fotoshope-shablon-sajta-dlya-posleduyushhej-verstki.htm – Создаем в Photoshop шаблон сайта с последующей версткой
3.4 http://ruseller.com/adds.php?rub=12&id=1673 – Создаем сайт с нуля
3.5 http://siteis.ru/ - Верстка шаблона
4. Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Графический редактор Photoshop
4.4 текстовый редактор
5. Задание:
5.1 По созданному шаблону сверстать сайт
6. Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
7. Содержание отчета:
7.1 Наименование и цель работы
7.2 Ответы на контрольные вопросы
7.3 Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Опишите по шагам, что вы делали при верстке сайта?
ПРИЛОЖЕНИЕ:
Вёрстка сайта – это создание структуры, корректно отображающейся в различных браузерах на основе макетов, готовых шаблонов. Созданная структура будет определять дальнейшее отображение текстовой и графической информации сайта.
Практическое занятие №15
Наименование: Размещение сайта в интернете на бесплатном хостинге
1. Цель: Научиться регистрироваться на хостинге, размещать созданный сайт на хостинге
2. Подготовка к занятию: подготовить созданный на предыдущем занятии сайт к размещению на сервере
3. Литература:
3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013
3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с
4. Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
4.4 Total Сommander
5. Задание:
5.1 Разместить созданный сайт на сервер
6. Порядок выполнения работы:
6.1 Пройти регистрацию на любом хостинге и выложить на сервер созданную веб – страницу.
6.2 Ход работы описан в приложении
7. Содержание отчета:
7.1 Наименование и цель работы
7.2 Код таблицы CSS
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе, в котором записываете полученное при регистрации название сайта
8. Контрольные вопросы:
8.1 Для чего проходят регистрацию на хостинге? Какие виды услуг там предлагаются?
8.2 Как устанавливается соединение с сервером?
8.3 Как происходит отправка данных на сервер?
ПРИЛОЖЕНИЕ:
Регистрацию можно на хостинге, например http://www.000webhost.com/order.php
Заходим по предложенной ссылке. Первое поле (рис 1.) можно не заполнять. Второе поле (рис1) заполняете – придумываете название вашего субдомена.
Следующие поля все заполняются вашими данными – ваше имя, адрес электронной почты, на которую вам будет приходить информация, пароль и т.д.
Далее вам на почту приходит письмо, где вы должны подтвердить то, что вы действительно регистрировались на хостинге.
Далее вам предлагается создать свой аккаунт, для этого перейти по ссылке http://members.000webhost.com/
В предложенные поля вводите свой электронный адрес и пароль (вы их прописывали при регистрации и они же вам пришли на адрес электронной почты).
После того, как вы войдете в свой аккаунт нажимаете там кнопку «Go to CPanel». С информационной панели Account information копируете username и ServerName и вставляете их в соответствующие пункты при настройке Ftp – соединения.
Запускаете Total Сommander. Нажимаете на панели кнопку ftp и производите настройку ftp – соединения (рис 2), кнопка Добавить.
После того, как настройки будут выполнены, нажимайте ОК и пробуйте соединится с сервером.
Когда подключитесь к серверу, там будет находится папка public.html. Из нее удаляем файл default.html, а вместо нее загружаем свою страничку с именем index.html
Заходим на свой сайт и просматриваем результат своей работы.
-
№ п/п
Наименование практического занятия
Часы
1
Создание первой web - страницы
2
2
Использование списков на web - страницах
2
3
Добавление изображений и мультимедиа на web - страницах
2
4
Использование ссылок на web - страницах
2
5
Создание карты - изображения
2
6
Конструирование таблиц на web - страницах
2
7
Использование фреймовой структуры
2
8
Создание анкеты на основе форм
2
9
Создание простой таблицы CSS для HTML – документа
2
10
Форматирование текста средствами CSS
2
11
Оформление документа средствами CSS
2
12
Создание анимации с помощью CSS
2
13
Создание шаблона для будущего сайта
2
14
Верстка сайта по созданному шаблону
2
15
Размещение сайта в интернете на бесплатном хостинге
2