Дизайн web-сайта. Macromedia Dreamweaver MX 2004.

Презентация:



Advertisements
Похожие презентации
Проверка знаний Запишите теги : 1 вариант 1. Заголовок страницы 2. Содержание 3. Размер шрифта 4. Абзац 5. Как называется главная страница сайта 2 вариант.
Advertisements

Инструментальные средства создания Web-сайтов
Вставка изображений.. Могут размещаться графические файлы трёх форматов GIF, JPG, PNG. Для вставки изображения используется тэг с атрибутом SRC, который.
«Эргономика и дизайн Web-сайта» Занятие 4. Топология сайта Интуитивно-понятная структура: Древовидная Линейно-последовательная Гибридная Отсутствие перекрестных.
Уроки сайтостроения «Структура html- документа». Что такое Интернет? Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят.
С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ ДОКУМЕНТА HTML Создание Web - страницы.
Форматирование текста Вставка рисунка Таблицы Гиперссылки Круговой сектор Структура документа.
Вставка изображений в Web – страницы. В Web- страницу можно вставлять изображения, хранящиеся в графических файлах трех типов : GIF, JPEG, PNG. HTML –
Какой тег является тегом перевода строки? 1.BR 2.TR 3.HR 4.I.
РАЗРАБОТКА WEB-САЙТОВ.. Создание Web-сайтов реализуется с помощью языка разметки гипертекстовых документов HTML. Тэги – инструкции браузеру, указывающие.
HTML Урок 2 Пищита Е.В.. СОДЕРЖАНИЕ УРОКА Вставка горизонтальной линии. Тег Цвет горизонтальной линии. Тег Выравнивание горизонтальной линии. Тег Линия.
Атрибуты тэгов «Создание Web-сайтов» Занятие 1 Часть 2.
Графические редакторы. РАСТРОВЫЕ ВЕКТОРНЫЕ Компьютерные изображения.
Основные теги HTML. Язык HTML HTML не является языком программирования, он предназначен для разметки текстовых документов. HTML состоит из тегов. Основным.
Компоновка страниц Расположение элементов на экране, соответствующее особенностям восприятия информации Область способствующая запоминанию Верхнее пространство.
(HyperText Markup Language) – язык гипертекстовой разметки.
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
HTML (HyperText Markup Language) - Язык Разметки Гипертекста.
Преподаватель: Казак Ю.Н.. Сформулировать основные принципы добавления графических изображений в WEB-страницы; познакомить обучающихся с тегом вставки.
Структура создания слайда. Ключевые слова структура сайта навигация оформление сайта шаблон страницы сайта хостинг.
Транксрипт:

Дизайн web-сайта. Macromedia Dreamweaver MX 2004

Дизайн сайта - это предоставление информации в графической форме на экран для наиболее удобного визуального восприятия. Разработка дизайна сайта - важный этап создания сайта. Именно дизайн сайта сформирует у пользователя сайта первое впечатление о сайте. Дизайн сайта

Правила дизайна 1. Размер каждой загружаемой страницы не должен превышать 30К. Если ваша страница требует длительной загрузки, предупредите об этом посетителей. 2. Избегайте крупных изображений и апплетов, они долго грузиться. 3. Составляйте крупные изображения из более мелких. Несколько маленьких картинок загружаются значительно быстрее, чем одна большая. 4. Для ускорения загрузки страниц применяйте в изображениях теги HEIGHT, WIDTH и ALT. 5. По общепринятым нормам баннер размером 468х60 рiх (пикселей) не должен превышать Кб.

6.Избегайте пестрых, многоэлементных фоновых изображений: они сильно затрудняют чтение страниц. 7.Регулярно проверяйте свои ссылки на работоспособность. 8.Если на изображении сотни цветов или оно имеет фотографическое качество, пользуйтесь форматом JPEG. Он обеспечивает меньший размер файла для таких изображений. Если же это изображения с крупными монотонными областями или текстом, пользуйтесь форматом GIF, так как JPEG пачкает цвета и смазывает текст. 9.Пользуйтесь таблицами - это самый эффективный способ оформления, особенно для изображений, сопровождаемых текстом. 10.Не пишите ничего в статусной строке, пользователю хочется знать куда он попадет после нажатия на ссылку.

Шаг 1 Важную роль в дизайне играют цвета, которые используются на сайте. Их не должно превышать 3-х основных цвета и их оттенки Правильно подобраны цвета (текст читаемый) Неправильно подобраны цвета (текст нечитаемый)

Шаг 2 Рисунки должны быть четкими, не размытыми

Шаг 3 Правильное расположение информации на странице облегчает восприятие

Логотип Меню Название Текстовая информация Дополнительные ссылки

10 А класс Выполнил Ф.И.О Главная Мой класс Обо мне Мое хобби Новости школы Образец

Создание сайта Главная страница – index.htm Мой класс – myclass.htm Обо мне – myname.htm Мое хобби – myhobby.htm