Основы сайтостроения

Содержание

Слайд 2

Web-сайт это: Набор страниц, посвященных определенной тематике и связанных между собой гиперссылками

Web-сайт это:

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

Слайд 3

Анализ и проектирование сайта Информационное наполнение сайта Креатив, или визуальная составляющая

Анализ и проектирование сайта
Информационное наполнение сайта
Креатив, или визуальная составляющая сайта
Написание кода
Тестирование
Публикация
Поддержка


Этапы разработки веб-сайтов:

Слайд 4

2 способа Ручной С использованием конструктора С помощью языка разметки HTML

2 способа

Ручной

С использованием конструктора

С помощью языка разметки HTML

С помощью специальных

программ

С помощью online-сервисов

Слайд 5

На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для

На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для

того, чтобы создать Web – страницу нужно написать программу на языке HTML.
Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег.
ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки <>..
Слайд 6

Даны теги, определить парные и одиночные теги: ; ; ; Тег Одиночные Парные Пример: Пример: ….

Даны теги, определить парные и одиночные теги:

;

;
;


Тег

Одиночные

Парные

Пример:

Пример:  
….
 

Слайд 7

Парные теги бывают: Пример: …. открывающиеся закрывающиеся

Парные теги бывают:
Пример:   ….  

открывающиеся

закрывающиеся

Слайд 8

Пример кода Веб-страницы Название Web-страницы Приветствую тебя, посетитель моего сайта. Меня

Пример кода
Веб-страницы



Название Web-страницы


Приветствую тебя, посетитель моего сайта.
Меня

зовут Петя.
Это моя первая Web-страница.


Слайд 9

- программа рассчитанная на работу в Windows, Linux,Mac Os. Для начала

- программа рассчитанная на работу в Windows, Linux,Mac Os.
Для начала мы

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

Визуальный редактор
Kompozer

Слайд 10

Интерфейс визуального редактора Kompozer

Интерфейс визуального редактора Kompozer

Слайд 11

Оформление страницы Установка фоновой заливки страницы В главном меню редактора необходимо

Оформление страницы

Установка фоновой заливки страницы
В главном меню редактора необходимо выбрать:


Формат Цвета и фон страницы
Слайд 12

Заголовок страницы Для изменения заголовка веб-страницы необходимо в главном меню выбрать

Заголовок страницы

Для изменения заголовка веб-страницы необходимо в главном меню выбрать :
Формат

Заголовок и свойства страницы
Слайд 13

Наполнение веб-страницы Наполнение страницы осуществляется довольно просто и напоминает работу в текстовом редакторе

Наполнение веб-страницы

Наполнение страницы осуществляется довольно просто и напоминает работу в текстовом

редакторе
Слайд 14

Добавление гиперссылок На панели инструментов существует иконка, с помощью которой добавляем

Добавление гиперссылок

На панели инструментов существует иконка, с помощью которой добавляем гиперссылку,

указывающую на расположенный в Интернете сайт
Слайд 15

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

Добавление изображений

Необходимо щелкнуть по иконке «Изображение» на панели инструментов и выбрать

картинку из папки локального или съемного диска
Слайд 16

Результат

Результат