Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Наполнение контентом Наполнение контентом — это внесение графической и текстовой информации в шаблонные web-страницы сайта в рамках, предусмотренных его дизайном.

Постановка задачи Процесс создания нового сайта обязательно необходимо начинать с постановки задачи, в ходе которой определяются требования к данному сайту.

2.Разработка макета сайта Разработка любого сайта, как правило, подразумевает его макета.

Макет сайта - эта наброски внешнего вида сайта.

Основной целью данного этапа является создание удобного, продуманного интерфейса

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

 

3.Верстка макета - процесс формирования веб-страниц в текстовом редакторе, следующий этап после разработки макета;

 

Наполнение контентом Наполнение контентом — это внесение графической и текстовой информации в шаблонные web-страницы сайта в рамках, предусмотренных его дизайном.

 

5. Создание справочной системы (написание руководства пользователя).

 

6. Создание установочного диска (CD-ROM).


 

3 РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

 

 

Данное руководство пользователя составлено и применимо к сайту, листинг которой имеется в Приложении 1.

Для запуска сайта используется файл index.htm. После того, как сайт будет запущена, она отобразит главное страницу с доступными вариантами действий (рис. 1).

Рис. 1 - Главная страница сайта.

3.1. Вкладки

 

Что бы перейти к нужному разделу надо нажать соответствующую вкладку (Рис.2).

Рисунок 2 – Вкладки

3.2 Содержание

 

Что бы перейти к нужному пункту раздела надо выбрать его в окне содержания (Рис.3).

Рисунок 3 - Выбор формата

 

 

3.3 Наверх

 

Чтобы бы вернутся к началу страницы нужно навести курсор в левую часть сайта к кнопке наверх и нажать ее (Рис.4).

Рисунок 4 - Наверх

Заключение

 

В ходе выполнения данной работы закреплены навыки по верстке сайта.

Сайт, описанный в курсовом проекте разработан в соответствии с постановкой задачей по теме “Анализ и сравнение протоколов IPv6 и IPv4”.

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

Всё это свидетельствует о работоспособности сайта и позволяет сделать вывод о ее пригодности для просмотра.


 

СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

 

 

1. CSS. Каскадные таблицы стилей. Подробное руководство/ Эрик А. Мейер.:Символ-Плюс, 2008 г.- 418 с.

2. HTML и CSS. Основа любого сайта /Роберт Агулар.: Эксмо, 2010 г.- 686 с.

3. Web-конструирование. HTML/А. А. Дуванов.:, БХВ-Петербург 2005 г.- 576 с.

4. HTML. Самоучитель. / Н. Комолова.: Питер, 2011 г.- 1248 с.

5. Использование HTML, JavaScript и CSS. Руководство Web-дизайнера / О. Н. Рева.: Эксмо, 2008 г.- 416 с.

 

 

ПРИЛОЖЕНИЕ

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Анализ и сравнение протоколов IPv6 и IPv4</title>

<link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<a class="back" href="#"> Наверх</a>

<div class="tabs">

<input type="radio" name="tab" id="r1" checked>

<label for="r1">IPv4</label>

<input type="radio" name="tab" id="r2">

<label for="r2">IPv6</label>

<input type="radio" name="tab" id="r3">

<label for="r3">Сравнение</label>

 

<div class="tabed">

<div>

<h4>Содержание</h4>

<ul>

<li><a href="#1-1">Определение</a></li>

<li><a href="#1-2">IP-Адреса</a></li>

<li><a href="#1-3">Представление IPv4 адресов</a></li>

<li><a href="#1-4">Назначения подсетей</a></li>

<li><a href="#1-5">Структура пакета</a></li>

 

</ul>

 

</div>

</div>

 

</body>

</html>

 

body{

color:#fff;

background:url("image/use_your_illusion.png");

font-family:tahoma;

 

 

}

 

.tabs{

width:800px;

margin:50px auto;

 

}

 

 

.tabs > input{

display:none;

}

 

 

.tabs > label{

display:block;

float:left;

padding:10px;

margin-right:1px;

font-size:20px;

 

}

 

.tabs > label:hover,

.tabs > input:checked + label{

background:#6DA0E3;

color:#000;

cursor:pointer;

}

.tabed {

clear:both;

 

}

 

.tabed > div {

width:800px;

border:2px solid #6DA0E3;

position:absolute;

padding:10px 13px;;

display:none;

//opacity:0;

//z-index: 0;

}

#r1:checked ~.tabed > div:nth-of-type(1),

#r2:checked ~.tabed > div:nth-of-type(2),

#r3:checked ~.tabed > div:nth-of-type(3) {

display:block;

//opacity:1;

//z-index: 1;

}

 

.tabed > div ul{

width:180px;

border:2px solid #6DA0E3;

padding-right:5px;

padding-top:4px;

padding-bottom:4px;

 

}

 

.tabed > div li {

display:block;

margin-left:-35px;

 

 

}

 

.tabed > div li:hover {

background:#6DA0E3;

 

cursor:pointer;

}

.tabed > div table{

border:3px solid #6DA0E3;

border-collapse: collapse;

}

.tabed > div table td,th{

border:2px solid #6DA0E3;

padding:5px;

}

.tabed > div > h3 {

border-bottom:2px solid #6DA6ff;

}

td > table{

margin: -5px;

}

.tabed > div a{

display:block;

color:#fff;

padding:2px;

text-decoration:none;

 

 

}

.tabed > div a:hover {

 

color:#000;

 

}

.back {

position:fixed;

display:block;

top:0px;

left:0px;

width:100px;

color:#3D3D3D;

height:100%;

text-decoration:none;

padding-top:80px;

text-align:center;

 

}

 

.back:hover{

background:#000;

color:#818283;

opacity:0.4;

 

 

}

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...