Автор работы: Пользователь скрыл имя, 23 Января 2014 в 22:08, курсовая работа
ЦЕЛЬ: Создание Web – сайта «История развития вычислительной техники»
Для этого необходимо решить следующие задачи:
1. Ознакомиться с современными Интернет – технологиями и, по возможности, использовать их в своей разработке;
2. Изучить основные понятия и программный инструментарий, применяемый для разработки и создания Web – сайта;
ВВЕДНИЕ………………………………………………………………………3
ГЛАВА 1. БАЗОВЫЕ ЗНАНИЯ НЕОБХОДИМЫЕ ДЛЯ СОЗДАНИЯ WEB-САЙТА
1.1 Web-страницы и Web-сайты………………………………………………7
1.2 Язык разметки гипертекстовых страниц HTML…………………………8
1.3 Web-редактор MS SharePoint Designer 2007………………………………12
ГЛАВА 2. РАЗРАБОТКА WEB-САЙТА «ИСТОРИЯ РАЗВИТИЯ ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ»
2.1 Создание новой web-страницы (шабло-на)…………………………………14
2.2 Ввод и форматирование тек-ста……………………………………………16
2.3 Работа с графи-кой……………………………………………………………23
2.4 Создание гиперссы-лок………………………………………………………24
ЗАКЛЮЧЕ-НИЕ…………………………………………………………………26
СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУ-РЫ…………………………...........27
<HTML> <HEAD> <TITLE> Моя первая страница</TITLE> </HEAD> <BODY> ..........
</BODY> </HTML>
Теперь мы можем написать HTML-код нашей странички:
<HTML> <HEAD> <TITLE>Моя первая страница</TITLE> </HEAD> <BODY> Здесь будут мои страницы! </BODY> </HTML>
В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов. Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не будет абзацев, и он станет нечитаемым.
Для начала новой строки
используется тег <br> (сокр. от англ.
break - прервать). Этот тег приводит к
отображению браузером
Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <p> (англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <p>, в отличие от <br>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.
Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута="значение". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <p> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </p>. Если его нет, то новый тег <p> означает закрытие предыдущего, соответственно вложенные <p> невозможны. Выравнить текст по центру возможно также тегом <CENTER>.
Теперь мы можем
поместить на нашу Web-страницу некоторый
текст с различным
<HTML> <HEAD>
<TITLE>Моя первая страница</
<p align=right>С
одной из моих страниц можно
будет<br>отправить мне
</BODY> </HTML>
Специальные редакторы,
ориентированные на визуальную разработку
сайтов, позволяют проектировать web-
Вы можете размещать на странице текст, таблицы, рисунки, видео, создавать ссылки, использовать различные интерактивные компоненты и при этом работать со страницей в режиме WYSIWYG (What You See Is What You Get – Что видишь, то и получаешь), то есть практически в том виде, в каком она будет выглядеть в браузере.
Визуальный редактор позволяет скрыть внутреннее представление страницы в формате HTML, что существенно облегчает разработку и избавляет от поиска синтаксических ошибок.
Одним из редакторов для
визуального проектирования web
Редактор имеет удобные инструменты для работы с таблицами, встроенные средства для обработки изображений, позволяет легко размещать на страницах различные мультимедиа-объекты: рисунки, видеофильмы, анимацию, звуковые фрагменты.
Программа SharePoint Designer является не только редактором web-страниц,
но и содержит средства управления сайтом,
такие как схема навигации по страницам,
анализ сайта с помощью различных отчетов,
настройка на определенные браузеры, загрузка
сайта на web-сервер по протоколам HTTP и FTP.
Все эти возможности позволяют создавать
с помощью SharePoint Designer полноценные web-
Требования к компьютеру для установки и работы редактора SharePoint Designer такие же, как у других приложений MS Office.
Рисунок 1
Рабочее окно программы
ГЛАВА 2. Разработка Web-сайта «История развития вычислительной техники»
2.1 Создание новой web-страницы (шаблона)
Для создания новой страницы в SharePoint Designer 2007 я выбрал в меню Файл Создать Веб – узел Общие Одностраничный веб – узел
Рисунок 2
Создание новой страницы
Шаблон — это особым образом подготовленная и сохраненная Web-страница, где уже имеются некоторые элементы, которые могут понадобиться (заголовок, сведения об авторских правах, элементы оформления и т. п.).
После того, как в главном окне программы появится наш шаблон, необходимо сохранить наш файл. На жестком диске необходимо создать отдельную папку (далее корневая папка), в которой будут находиться все файлы, необходимые для создания файла. Назовем эту папку Мой сайт. Для сохранения файла выбираем в меню Файл пункт Сохранить и в появившемся окне указываем путь сохранения Корневая папка.
Рисунок 3
Сохранение
Задаем имя первой страницы glavnaya.html. Теперь мы можем найти созданную страничку в правом окне экрана. По тому же принципу необходимо создать и сохранить еще 6 страничек. Имена новых страниц задаются в соответствии с содержанием страниц сайта (это необходимо для создания гиперссылок). ()
2.2 Ввод и форматирование текста
Начнем мы с того, что введем в нашу только что созданную Web-страницу текст и отформатируем его — расставим заголовки, выделим части текста полужирным шрифтом и пр.
В этом смысле SharePoint Designer 2007 мало чем отличается от текстовых редакторов.
Рисунок 4
Работа с текстом
Текст набирается с помощью клавиатуры , чтобы создать новый абзац, нужно нажать клавишу <Enter>. Если же надо просто перенести текст на другую строку (вставить так называемый разрыв строк), то достаточно нажать комбинацию клавиш <Shift>+<Enter>.
Также вы использовать горячие клавиши показанные в таблицах()
.
Таблица 1
Управление и работа с веб-страницами
Чтобы |
Нажмите |
Создать новую веб-страницу |
CTRL+N |
Открыть веб-страницу |
CTRL+O |
Закрыть веб-страницу |
CTRL+F4 |
Сохранить веб-страницу |
CTRL+S |
Выполнить печать веб-страницы |
CTRL+P |
Обновить веб-страницу |
F5 |
Переключаться между открытыми веб-страницами |
CTRL+TAB |
Переключаться между открытыми веб-страницами в обратном порядке |
CTRL+SHIFT+TAB |
Просмотреть веб-страницу в веб-обозревателе |
F12 |
Выйти из Office SharePoint Designer 2007 |
ALT+F4 |
Найти текст или код HTML на веб-странице |
CTRL+F |
Найти следующее вхождение последней строки поиска |
F3 |
Найти предыдущее вхождение последней строки поиска |
SHIFT+F3 |
Найти следующее вхождение выбранного элемента |
CTRL+F3 |
Найти предыдущее вхождение выбранного элемента |
CTRL+SHIFT+F3 |
Заменить текст или код HTML на веб-странице |
CTRL+H |
Проверить орфографию на веб-странице |
F7 |
Найти слово в тезаурусе |
SHIFT+F7 |
Отменить действие или закрыть диалоговое окно |
ESC |
Отменить действие |
CTRL+Z |
Вернуть или повторить действие |
CTRL+Y |
Переключаться между открытыми диалоговыми окнами |
ALT+F6 |
Переключаться между открытыми диалоговыми окнами в обратном порядке |
ALT+SHIFT+F6 |
Удалить веб-страницу
или папку в области задачСписо |
DEL |
Перейти на уровень выше в области задач Список папок |
ПРОБЕЛ |
Таблица 2
Доступ и использование представлений
Чтобы |
Нажмите |
Выполнить предварительный просмотр текущей страницы в веб-обозревателе |
F12 |
Выполнить переход
между режимами Код, Конструкто |
CTRL+PAGE DOWN |
Выполнить переход
между областями Код и Конструк |
ALT+PAGE DOWN |
Отобразить или скрыть область задач Список папок |
ALT+F1 |
Переименовать выбранный файл в области задач Список папок |
F2 |
Таблица 2
Работа со средствами кодировки
Чтобы |
Нажать |
Вставить временную закладку |
CTRL+F2 |
Перейти к следующей временной закладке |
F2 |
Перейти к предыдущей временной закладке |
SHIFT+F2 |
Вставить фрагмент кода |
CTRL+ВВОД |
Вставить закрывающий тег |
CTRL+ТОЧКА ( . ) |
Вставить открывающий тег |
CTRL+ЗАПЯТАЯ ( , ) |
Вставить комментарий кода HTML |
CTRL+ЗНАК КОСОЙ ЧЕРТЫ ( / ) |
Вставить выбранный в IntelliSense элемент |
CTRL+ПРОБЕЛ |
Выбрать тег и его содержимое |
CTRL+SHIFT+ДВОЕТОЧИЕ ( : ) |
Найти соответствующий тег |
CTRL+ТОЧКА С ЗАПЯТОЙ ( ; ) |
Выполнить поэтапный поиск |
CTRL+ALT+F |
Открыть диалоговое окно Переход на строку |
CTRL+G |
Открыть Быстрый редактор тегов Примечание. Это сочетание клавиш также работает в режиме «Конструктор». |
CTRL+Q |
Таблица 3
Форматирование текста и параграфов
Чтобы |
Нажать |
Изменить шрифт |
CTRL+SHIFT+F, СТРЕЛКА ВНИЗ и СТРЕЛКА ВВЕРХ, чтобы выбрать нужный шрифт, затем нажмите ВВОД |
Изменить размер шрифта |
CTRL+SHIFT+P, СТРЕЛКА
ВНИЗ и СТРЕЛКА ВВЕРХ, чтобы
выбрать нужный размер шрифта
(или ввести нужный размер |
Применить форматирование полужирным шрифтом |
CTRL+B |
Применить форматирование подчеркнутым шрифтом |
CTRL+U |
Применить форматирование курсивом |
CTRL+I |
Применить форматирование надстрочным шрифтом (только в режиме «Конструктор») |
CTRL+ЗНАК ПЛЮС ( + ) |
Применить форматирование подстрочным шрифтом (только в режиме «Конструктор») |
CTRL+ЗНАК РАВНО ( = ) |
Копировать форматирование |
CTRL+ SHIFT+C |
Вставить форматирование |
CTRL+SHIFT+V |
Удалить форматирование из выделения (только в режиме «Конструктор») |
CTRL+SHIFT+Z |
Выровнять абзац по центру |
CTRL+E |
Выровнять абзац по левому краю (только в режиме «Конструктор») |
CTRL+L |
Выровнять абзац по правому краю |
CTRL+R |
Увеличить отступ |
CTRL+M |
Уменьшить отступ |
CTRL+ SHIFT+M |
Применить стиль |
CTRL+ SHIFT+S, СТРЕЛКА ВНИЗ и СТРЕЛКА ВВЕРХ, чтобы выбрать нужный стиль, затем нажмите ВВОД |
Применить стиль «Обычный» |
CTRL+SHIFT+ N |
Применить стиль «Заголовок 1» |
CTRL+ALT+1 |
Применить стиль «Заголовок 2» |
CTRL+ALT+2 |
Применить стиль «Заголовок 3» |
CTRL+ALT+3 |
Применить стиль «Заголовок 4» |
CTRL+ALT+4 |
Применить стиль «Заголовок 5» |
CTRL+ALT+5 |
Применить стиль «Заголовок 6» |
CTRL+ALT+6 |
Применить стиль «Список» |
CTRL+ SHIFT+L |
Выберите цвет после активизации пипетки |
Клавиши со стрелками Примечание. Для перехода в цветные шестиугольники из черного шестиугольника, нажмите СТРЕЛКА ВЛЕВО или СТРЕЛКА ВПРАВО, чтобы сначала перейти через серый и белый шестиугольники. |
Таблица 4
Редактирование и перемещение текста и рисунков
Чтобы |
Нажмите |
Удалить один символ слева |
ПРОБЕЛ |
Удалить один символ справа |
DEL |
Удалить одно слово слева |
CTRL+ПРОБЕЛ |
Удалить одно слово справа |
CTRL+DEL |
Копировать текст или рисунки |
CTRL+C |
Вырезать выделенный текст в буфер Microsoft Office |
CTRL+X |
Вставить содержимое буфера обмена |
CTRL+V |
Вставить разрыв строки Примечание. Работает только в режиме «Конструктор». |
SHIFT+ВВОД |
Вставить неразрывный пробел Примечание. Работает только в режиме «Конструктор». |
CTRL+SHIFT+ПРОБЕЛ |
Таблица 5
Выделение текста и рисунков
Чтобы |
Нажмите |
Выделить один символ слева |
SHIFT+СТРЕЛКА ВПРАВО |
Выделить один символ справа |
SHIFT+СТРЕЛКА ВЛЕВО |
Выделить до конца слова |
CTRL+SHIFT+СТРЕЛКА ВПРАВО |
Выделить до начала слова |
CTRL+SHIFT+СТРЕЛКА ВЛЕВО |
Выделить до конца строки |
SHIFT+END |
Выделить до начала строки |
SHIFT+HOME |
Выделить одну строку сверху |
SHIFT+СТРЕЛКА ВВЕРХ |
Выделить одну строку снизу |
SHIFT+СТРЕЛКА ВНИЗ |
Выделить до конца абзаца (только в режиме «Конструктор») |
CTRL+SHIFT+СТРЕЛКА ВНИЗ |
Выделить до начала абзаца (только в режиме «Конструктор») |
CTRL+SHIFT+СТРЕЛКА ВВЕРХ |
Выделить один экран вниз |
SHIFT+PAGE DOWN |
Выделить один экран вверх |
SHIFT+PAGE UP |
Выделить всю страницу |
CTRL+A |
Отобразить свойства выделения |
ALT+ВВОД |
Информация о работе Разработка Web-сайта на тему «История развития вычислительной техники»