Создание структуры Web-сайта
Пензенский
Государственный Университет
Кафедра:
Коммуникационный менеджмент
Курсовая
работа
Тема:
Создание структуры Web-сайта
Выполнила: студентка гр.05ЗИЖ61
Тюрина Е.Г.
Проверила: Карпова М.К
Пенза
Содержание
Введение
1. Базовые знания необходимые для создания Web-сайта
1.1 Web-страницы и Web-сайты
1.2 Язык разметки гипертекстовых страниц HTML
1.3 Web-редактор
Macromedia Dreamweaver
2. Как построить хороший сайт
2.1 Представление текста на Web-страницах
2.2 Представление графики на Web-страницах
2.3 Планирование информационного потока
2.4 Условия для создания успешного сайта
3. Разработка Web-сайта
посвященного компании "Марс"
.1 Создание новой web-страницы (шаблона)
.2 Ввод и форматирование текста
.3 Работа с графикой
3.4 Создание гиперссылок
Заключение
Список использованной литературы
Введение
развивается довольно стремительно. Быстро растет количество изданий,
посвященных Сети, что предвещает широкое ее распространение даже в далеких от
техники областях. Internet превращается из большой игрушки для интеллектуалов в
полноценный источник разнообразной полезной информации для любой категории
пользователей.
Через десять лет, по прогнозам специалистов, около 50 процентов семей
(безусловно, пока лишь в развитых странах) будут использовать его ежедневно.
Телевидение и радиоприемники не будут заменены компьютерами, но будут иметь
мощный процессор, большую память и фактически сами станут в некотором отношении
компьютерами.
Это будет время, когда любой человек, владеющий компьютером, сможет
"скачать" с его помощью статьи, иллюстрации, видео- или
аудиоинформацию по любой интересующей его теме. Он сможет получить эту
информацию тогда, когда он этого пожелает. Через какое-то время системы
искусственного интеллекта - параллельный машинный перевод, а также
идентификация и распознавание голоса сломают последние национальные и языковые
барьеры и сделают возможным свободный транснациональный обмен информацией.
Каждый из нас уже сейчас может сделать свой вклад в развитие Internet.
Для этого достаточно создать свой веб-сайт и разместить его в Сети.
Сегодня, путешествуя по Internet, можно найти много очень хорошо
выполненных сайтов, которые быстро загружаются, привлекательны на вид, имеют
четко разграниченную по разделам информацию и удобные функции навигации. Такие
сайты просто приглашают вас посетить их, расслабиться, задержаться на некоторое
время, развлечься и узнать что-то новое.
Если вы задерживаетесь на каком-либо сайте на длительное время и даже не
осознаете этого, то, по всей видимости, такой сайт очень хорошо продуман.
Вернитесь обратно и попробуйте осмыслить полную картину. Можете ли вы увидеть
структуру, организацию? Легко ли воспринимается информация? Понимание движения
информационных потоков - это первый шаг в создании функционального, удобного в
работе сайта. Если вы поймете, как работает эта концепция, и примените ее при
создании собственного сайта, то вы уже тем самым опередите большинство других
разработчиков.
Тема моей курсовой работы: Разработка Web-сайта посвященного компании "Марс".
Объект исследования: Web-сайт салона ООО Марс.
Предмет - создание структуры Web-сайта.
Цель - создание Web-сайта компании "Марс".
Для этого необходимо решить следующие частные задачи:
ознакомиться с современными Интернет-технологиями и, по возможности,
использовать их в своей разработке;
изучить основные понятия и программный инструментарий, применяемый для
разработки и создания Web-сайтов;
выявить и учесть методы и способы представления на Web-страницах
различных видов информации (текстов и изображений);
ознакомиться с основными правилами и рекомендациями по разработке и
созданию Web-сайтов и неукоснительно следовать им в своей практике;
определиться со структурой Web-страниц;
представить пошаговую стратегию разработки web-сайта.
1. Базовые знания необходимые для создания Web-сайта
1.1 Web-страницы и Web-сайты
Что такое Web-страница'? Ответить на этот вопрос могут многие. Это
интернет-документ, предназначенный для распространения через Интернет по
средством сервиса WWW. А если уж говорить по-простонародному, это то, что
показывает в своем окне программа-клиент для просмотра Web-страниц - Web-обозреватель.
С технической точки зрения Web-страница - это обычный текстовый файл,
который можно создать в любом текстовом редакторе, том же Блокноте, стандартно
поставляемом в составе Windows. Этот файл содержит собственно текст
Web-страницы и различные команды форматирования этого самого текста. Команды
форматирования называются тегами, а описывает их особый язык HTML
(HyperText Markup Language, язык гипертекстовой разметки).
Файлы, содержащие Web-страницы, должны иметь расширение htm[l]. Они
сохраняются на жестких дисках серверного компьютера. Получив от
Web-обозревателя запрос по протоколу HTTP, Web-сервер (серверная
программа, обеспечивающая работу сервиса WWW) загружает эти файлы и отправляет
Web-обозревателю.
Но как Web-обозреватель дает понять Web-серверу, какая Web-страница ему
нужна? Очень просто - он пересылает в составе клиентского запроса имя и полный
путь файла, в котором она сохранена. Скажем, вот так: #"523077.files/image001.gif">
Выбираем категорию Стартовые страницы и загружаем один из
шаблонов.
Шаблон - это особым образом подготовленная и сохраненная Web-страница, где уже
имеются некоторые элементы, которые могут понадобиться (заголовок, сведения об
авторских правах, элементы оформления и т. п.).
После того, как в главном окне программы появится наш шаблон, необходимо
сохранить наш файл. На жестком диске необходимо создать отдельную папку (далее
корневая папка), в которой будут находиться все файлы, необходимые для создания
файла. Назовем эту папку Мой сайт. Для сохранения файла выбираем в меню Файл
пункт Сохранить и в появившемся окне указываем путь сохранения Корневая
папка.
Задаем имя первой страницы glavnaya.html. Теперь мы можем найти созданную
страничку в правом окне экрана. По тому же принципу необходимо создать и
сохранить еще 6 страничек. Имена новых страниц задаются в соответствии с
содержанием страниц сайта (это необходимо для создания гиперссылок). Имена
задаются английскими буквами.
3.2 Ввод и форматирование текста
Начнем мы с того, что введем в нашу только что созданную Web-страницу
текст и отформатируем его - расставим заголовки, выделим части текста
полужирным шрифтом и пр. В этом смысле Dreamweaver мало чем отличается от
текстовых редакторов.
Текст набирается с помощью клавиатуры при этом Dreamweaver самостоятельно
разобьет текст на строки. Чтобы создать новый абзац, нужно нажать клавишу
<Enter>. Если же надо просто перенести текст на другую строку (вставить
так называемый разрыв строк), то достаточно нажать комбинацию клавиш
<Shift>+<Enter>.
Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где
будет появляться набираемый нами текст, может перемещаться во всех направлениях
с помощью клавиш-стрелок. Также мы можем "листать" текст нажимая
клавиши <PeUn> и <PeDown> мгновенно перемещаться к началу и концу
строки клавишами <Ноте> и <End>. Чтобы быстро переместиться в
начало или конец документа, нужно нажать, соответственно, комбинацию клавиш
<Ctrl>+<Home> или <Ctrl>+<End>. Мы также можем
устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.
В случае ошибки мы всегда можем удалить неправильно введенный текст,
воспользовавшись клавишами <Backspace> и <Del>. Первая при нажатии
удаляет символ, находящийся слева от текстового курсора, и идеально подходит
для удаления только что введенного неправильного символа. Вторая удаляет
символ, находящийся справа от текстового курсора.
Кроме того, в окне документа Dreamweaver доступны такие операции, как
перемещение ("вырезание"), копирование текста в буфер обмена Windows
и последующая его вставка в место, где находится текстовый курсор. Это может
быть очень полезно, если нам нужно переместить фрагмент текста с места на место
или поместить похожие фрагменты текста в разные места документа.
Быстро выполнить все необходимые операции с текстом поможет специальная
панель, расположенная снизу главного окна в программе Dreamweaver:
После того, как необходимый текст набран и отформатирован, необходимо
поработать с цветом. Цветовые параметры страницы тоже можно отредактировать при
помощи этой панели.
Для задания цвета используется так называемый селектор цвета. Вот
он
Селектор цвета состоит из двух частей. Справа находится поле ввода, где
вводится код нужного цвета в формате RGB. Выглядит это так - #RRGGBB, где RR -
это шестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете
красной составляющей, GG - зеленой, а BB - синей. Пример задания цвета в формате RGB - #336699 (это
тускло-голубой цвет). Но вряд кто запомнит наизусть шестнадцатеричные коды
цветов. Поэтому в левой части селектора цвета находится кнопка вызова окна
выбора цвета, которое в раскрытом виде показано на след рисунке:
Большую часть этого окна занимает палитра, где, собственно, мы и
ищем нужный цвет. Найдя его, просто щелкаем по нему мышью, и окно выбора цвета
закроется.
Зададим фон всей страничке. Я выбрала цвет #14285F. Соответственно теперь
нужно изменить цвет шрифта, чтобы текст был удобнее читать. Я сделаю шрифт
черным, а заголовки фиолетовым.
То же самое необходимо проделать с остальными страницами будущего web-сайта, чтобы была выдержана единая
стилистика текста. После всей проделанной работы в главном окне программы мы
увидим следующее:
3.3 Работа с графикой
Графические изображения, предназначенные для размещения на страницах и
хранятся в отдельных файлах. А в коде HTML этих страниц с помощью особых тегов
ставятся своего рода ссылки на эти файлы. Встретив такую ссылку,
Web-обозреватель загружает нужный файл и выводит содержащееся в нем изображение
в соответствующем месте Web-страницы.
Графические изображения и некоторые другие элементы страниц, также
хранящиеся в отдельных файлах, называются внедренными элементами Web-страниц.
Форматов графических изображений на свете существует очень много. Но в
Web-графике популярны только три из них: GIF, JPEG и PNG. При разработке своего
сайта я используя только формат JPEG.
Формат JPEG (Joint Pictures Encoding Group, группа кодирования
неподвижных изображений), напротив, замечательно подходит для хранения полутоновых
изображений. Поэтому картины и сканированные фотографии хранят только в
этом формате. Для начала, все графические изображения, которые я буду использовать
при разработке web-сайта,
необходимо скопировать в корневую папку. Если этого не сделать, при просмотре
сайта в Web обозревателе вы не увидите желаемых
изображений. Чтобы вставить изображение на страницу сайта, нужно в меню Вставить
выбрать пункт Изображение, и в сплывающем окне найти тот файл, который я
хочу разместить.
После этой операции Dreamweaver поместит графическое изображение в то
место, где на данный момент находится текстовый курсор.
Теперь давайте щелкнем мышью по только что вставленному изображению,
чтобы его выделить. (Собственно, Dreamweaver автоматически выделит изображение
сразу после его вставки.) После этого вокруг изображения появится тонкая черная
рамка, на правой и нижней границе которой появятся небольшие черные квадратики.
Это так называемые маркеры изменения размера. Можено
"захватить" мышью любой маркер и перетащить его на новое место,
изменив тем самым горизонтальный или вертикальный размер изображения
соответственно. А для того, чтобы оба размера изменялись пропорционально,
перетащим мышью маркер, находящийся в правом нижнем углу изображения, при
нажатой клавише <Shift>. Теперь сохраним получившуюся страницу, выделим
изображение, если оно не выделено, и посмотрим на редактор свойств. Вот, что мы
там увидим
Поля ввода Ш и В позволяют нам задать размеры изображения,
введя его, соответственно, ширину и высоту вручную. Это может быть полезно,
если выделенное изображение - часть оформления сайта; в остальных случаях
удобнее задавать размеры изображения, перетаскивая мышью маркеры изменения
размера.
Таким образом оформляем всю станицу. И наша страница примет вид,
представленный на рисунке:
3.4 Создание гиперссылок
Обсуждая отличие Web-страницы от Web-сайта, я выяснила, что Web-сайт -
это набор Web-страниц, связанных друг с другом. Но вот как эти самые страницы
связываются, сказано не было. Пора прояснить данный вопрос.
Для этого используются гиперссылки- особые связи, ведущие от одной
Web-страницы к другой. Они имеют вид фрагментов текста, выделенных особым
образом (у меня они голубого цвета с подчеркиванием). Если по такой гиперссылке
щелкнуть мышью, Web-обозреватель загрузит страницу, интернет-адрес которой
указан в параметрах гиперссылки.
С правой стороны, в каждом окне программы Dreamweaver я заранее создала
так называемую карту сайта. С помощью нее на сайте можно спокойно
перемещаться при помощи гиперссылок по страницам и не бояться
"заблудиться".
Давайте создадим на нашей первой Web-странице первую гиперссылку,
указывающую на вторую страницу сайта istoriya.html
Выделим слова История и посмотрим на редактор свойств. Большое
поле ввода Ссылка для задания интернет-адреса для гиперссылки
заметно сразу.
После этого необходимо выбрать инструмент Указатель на файл и,
удерживая клавишу мыши, перетащить указатель на необходимую страницу сайта,
которые мы можем увидеть в соседнем окне программы Dreamweaver:
В графе Ссылка появится имя указанного мною файла. Тем же самым
способом нужно оформить все гиперссылки, которые я хочу сделать в своем web-сайте. Каждую страницу я оформляю
идентичным образом, в результате чего я получила готовый Web-сайт.
Заключение
В данной курсовой работе рассмотрены актуальные вопросы разработки и
создания современного Web-сайта.
При этом мною были решены следующие частные задачи:
ознакомление с современными Интернет-технологиями и использовать их в
своей разработке;
изучение основных понятия и программы Dreamweaver, применяемой для
разработки и создания Web-сайтов;
ознакомление с методами и способами представления на Web-страницах
различных видов информации (текстов и изображений);
ознакомление с основными правилами и рекомендациями по разработке и
созданию Web-сайтов и неукоснительное следование им в своей практике;
определение структуры Web-страниц;
предоставление пошаговой стратегии разработки web-сайта.
В результате проведенных работ на базе выбранных технологий был создан
прототип современного Web-сайта.
Список используемой литературы
1. Дронов
В. А. Самоучитель Macromedia Dreamweaver 8. - СПб.: БХВ-Петербург, 2006
2. Алексеев
А.П. Введение в Web-дизайн:
учебное пособие. - М.: СОЛОН-ПРЕСС, 2008
. Барысов
Р. Постройте профессиональный сайт сами. - СПб., 2009
. Печников
В.Н. Сомоучитель Web-страниц и Wrb-сайтов. - М.: Триумф, 2006
. Печников
В.Н. Создание Web-сайтов без посторонней помощи. - М.: Триумф, 2006
. Панфилов
К. По ту сторону веб-страницы. - СПб.: ДМК Пресс, 2008
. Кроудер
Д. Создание web-сайта для чайников: 3-е издание. - М.: Диалектика, 2009
. Вильямсон
Х. Универсальный Dynamic HTML / Библиотека программиста - СПб.: ПИТЕР, 2001