Создание сайтов Скачать
презентацию
<<  Красивый сайт Фоны для оформления  >>
Macromedia Dreamweaver Табличный дизайн Создание шаблонов
Macromedia Dreamweaver Табличный дизайн Создание шаблонов
Структура Web-сайта
Структура Web-сайта
Дизайн страниц
Дизайн страниц
Эскиз Web-страницы
Эскиз Web-страницы
Готовая Web-страница
Готовая Web-страница
«Табличный» Web-дизайн
«Табличный» Web-дизайн
Таблица разметки
Таблица разметки
Режим разметки страницы
Режим разметки страницы
Разметка страницы Вариант №1
Разметка страницы Вариант №1
Разметка страницы Вариант №2
Разметка страницы Вариант №2
Порядок действий
Порядок действий
Задание №1
Задание №1
Свойства страницы
Свойства страницы
Задание №2
Задание №2
Шаблоны
Шаблоны
Создание шаблонов
Создание шаблонов
Задание №3
Задание №3
Создание Web-страниц на основе шаблонов
Создание Web-страниц на основе шаблонов
Задание №4
Задание №4
Слайды из презентации «Дизайн сайтов шаблоны» к уроку информатики на тему «Создание сайтов»

Автор: Дарья Гвасалия. Чтобы увеличить слайд, нажмите на его эскиз. Чтобы использовать презентацию на уроке, скачайте файл «Дизайн сайтов шаблоны.ppt» бесплатно в zip-архиве размером 483 КБ.

Скачать презентацию

Дизайн сайтов шаблоны

содержание презентации «Дизайн сайтов шаблоны.ppt»
СлайдТекст
1 Macromedia Dreamweaver Табличный дизайн Создание шаблонов

Macromedia Dreamweaver Табличный дизайн Создание шаблонов

Web-design

Гвасалия Д.А.

2 Структура Web-сайта

Структура Web-сайта

Важным моментом при разработке Web-сайта является организация удобной системы перемещения по сайту. Для её создания можно использовать графические значки, кнопки или строки меню.

3 Дизайн страниц

Дизайн страниц

Прежде чем решать проблему дизайна необходимо продумать ответы на следующие вопросы: Каков характер создаваемого Web-узла? Либо это информационный сайт или основная задача сайта – развлечения Какие цвета будут использованы, шрифты, графические иллюстрации? Какими будут основные области Web-узла, доступ к которым должен быть организован с каждой страницы? Как пользователи будут переходить на страницы второго, третьего или четвертого уровней?

4 Эскиз Web-страницы

Эскиз Web-страницы

5 Готовая Web-страница

Готовая Web-страница

6 «Табличный» Web-дизайн

«Табличный» Web-дизайн

В настоящее время наиболее популярен Табличный Web-дизайн. Web-страница создается на основе большой таблицы (так называемой таблицы разметки), в ячейки (они называются, по аналогии с таблицей разметки, ячейками разметки) которой помещается и название сайта, и набор гиперссылок, и сведения об авторских правах и, разумеется, основное содержимое. Эти таблицы почти ничем не отличаются от тех, что мы создавали на занятии 7.

7 Таблица разметки

Таблица разметки

8 Режим разметки страницы

Режим разметки страницы

Включение режима разметки: Кнопка Layout в группе инструментов Layout панели Insert (вставка)

После нажатия кнопки Draw Layout Cell (рисование ячейки) или Layout Table (компоновка таблицы) перемещаем курсор в то место документа, где будет левый верхний угол ячейки или таблицы, нажимаем левую кнопку мыши и перетаскиваем её в то место, где будет противоположный угол. Для удобства компоновки лучше включить режим отображения измерительных линеек и координатной сетки ?

Компоновка таблицы

Рисование ячейки

9 Разметка страницы Вариант №1

Разметка страницы Вариант №1

Название сайта

Основной текст

Рисунок, эмблема, символ…

Главная

Новости, Реклама, и т.п

Научные интересы

Подменю

Программы

Ссылки

Поиск

О сайте

Реклама, сведения об авторских правах и пр

10 Разметка страницы Вариант №2

Разметка страницы Вариант №2

Название сайта

Основной текст

Рисунок, эмблема, символ…

Рисунок, эмблема, символ…

Главная

Научные интересы

Программы

Ссылки

Поиск

О сайте

Подменю

Реклама, сведения об авторских правах и пр.

11 Порядок действий

Порядок действий

Создать новый HTML-документ Войти в режим разметки слайда Разместить ячейки для заголовка (и рисунка-эмблемы) и для основного текста Для создания меню воспользоваться опцией «Компоновка таблицы». В созданной таблице нужно разместить несколько ячеек по числу пунктов меню Выйти из режима разметки страницы

12 Задание №1

Задание №1

Создайте следующую таблицу разметки

13 Свойства страницы

Свойства страницы

Фоновый рисунок

Цвет фона

Цвет текста

Цвет ссылки

Цвет посещенной ссылки (обычно используют тусклые цвета)

Цвет активной ссылки (яркий)

Отступ для страницы слева, сверху

Правила хорошего тона предписывают выбирать для оформления сайта как можно меньше цветов. Электронный справочник для подбора цветов http://www.tarusa.ru/~golovan/

14 Задание №2

Задание №2

Задайте в качестве фонового рисунка рисунок fon.gif. В верхнюю левую ячейку вставьте рисунок harry1.jpg Измените цвет разделительной ячейки Заполните пункты меню и задайте расположение текста по центру ячейки Заполните ячейки для заголовка и для основного текста так как показано на рисунке

15 Шаблоны

Шаблоны

Шаблон – это образец, “скелет” Web-страницы, который содержит общие для всех страниц элементы: заголовок, набор гиперссылок, сведения об авторских правах, таблицу разметки и т.п. Эти элементы остаются неизменными на всех страницах, созданных на основе данного шаблона, поэтому так и называются — неизменяемыми элементами. Уникальное содержимое страницы размешается в специально созданных изменяемых областях Шаблоны сохраняются в особых файлах, имеющих расширение .dwt, в папке Templates. При создании сайта можно использовать несколько шаблонов Если в шаблон вносятся изменения, то Dreamweaver предлагает применить данные изменения ко всем страницам, которые созданы на основе данного шаблона

16 Создание шаблонов

Создание шаблонов

Шаблон можно создать на основе существующей HTML страницы. Для этого в вкладке Common панели инструментов “Вставка” Insert нужно нажать кнопку Templates и в раскрывающемся списке выбрать Make Template. Дать имя новому шаблону Поместить изменяемые области Editable Region – области, которые можно будет редактировать, все остальное будет оставаться без изменений

17 Задание №3

Задание №3

Выделите текст «Основной текст сайта» и сделайте данный текст изменяемой областью (Editable Region) Сохраните шаблон (Save as Template)

18 Создание Web-страниц на основе шаблонов

Создание Web-страниц на основе шаблонов

File – New…

19 Задание №4

Задание №4

Создать на основе созданного шаблона 5 страниц для каждого пункта меню Сохранить созданные страницы. Главная страница должна иметь имя index.html, остальные имена латинскими буквами и без пробелов (books.html, author.html и т.п.) Заполните поля для основного текста информацией: например «Джоан Роулинг – английская писательница, автор серии романов о Гарри Поттере, переведённых более чем на 60 языков, в том числе и на русский»

«Дизайн сайтов шаблоны»
http://900igr.net/prezentatsii/informatika/Dizajn-sajtov-shablony/Dizajn-sajtov-shablony.html
cсылка на страницу
Урок

Информатика

126 тем
Слайды
Презентация: Дизайн сайтов шаблоны.ppt | Тема: Создание сайтов | Урок: Информатика | Вид: Слайды