Верстка сайта из готового дизайн макета

Автор работы: Пользователь скрыл имя, 06 Февраля 2011 в 14:23, курсовая работа

Описание работы

Сайт - это информационная и рекламная единица, доступная практически из любой точки планеты, это десятки или сотни веб-страниц, связанных между собой общей темой, дизайном, ссылками. Главное назначение любого сайта – это удобное предоставление, какой либо информации неважно, что это за сайт. Будь это сайт, какой ни будь трансконтинентальной корпорации или какой ни будь блог обычного человека, главная цель этих сайтов это предоставление какой либо полезной информации посетителям данного сайта.

Скачать архив (43.75 Кб) Сколько стоит заказать работу?
Файлы: 1 файл

Курсовая.doc

— 175.00 Кб (Скачать файл)
 

Таблица 4. Минимальные системные требования для Opera 10.x.

Наименование Характеристика
Процессор -
Операционная  Система Windows XP(SP3), Windows Vista(SPl), Windows 7
Оперативной памяти 256 мб
Свободного  пространства на жестком риске 24 мб
Разрешение  монитора -
 

Таблица 5. Минимальные системные требования для Internet Explorer 8.

Наименование Характеристика
Процессор частота не менее 233МГц
Операционная  Система Windows XP
Оперативной памяти 64 мб
Свободного  пространства на жестком риске 6 мб
Разрешение  монитора 800х600
 

Таблица 6. Минимальные системные требования для Google Chrome.

Наименование Характеристика
Процессор -
Операционная  Система Windows XP(SP3), Windows Vista(SPl), Windows 7
Оперативной памяти 256 мб
Свободного  пространства на жестком риске 52 мб
Разрешение  монитора -
 

     Сводная таблица ниже содержит минимальные системные требования к компьютеру, на котором будут использоваться выше перечисленные программные средства (см. табл. 7). 

Таблица 7. минимальные системные требования к компьютеру.

Наименование Характеристика
Процессор Intel® Pentium®  4 или AMD Athlon® 64
Операционная  Система Windows Vista(SPl)
Оперативной памяти 1 Гб
Свободного  пространства на жестком риске 2,2 Гб
Разрешение  монитора 1280х800
 

     Реализация  проекта осуществлялась на компьютере со следующими характеристиками (см.табл. 8). 

Таблица 8. Характеристики рабочего компьютера.

Наименование Характеристика
Процессор Intel Core 2 Duo 2,4 MHz
Операционная  Система Windows 7
Оперативной памяти 4 Гб
размер  жесткого диска 500 Гб 2,2 Гб
Разрешение  монитора 1680х1050
 

3 Разработка  рабочего проекта 

3.1 Физическая  структура сайта

      В таблице 9 расписана физическая структура  сайта.

Таблица 9.

Название  файла Назначение Взаимосвязь с другими файлами
index.html главная страница сайта папка image, twoColLiqRt.css,

index2.html

index2.html страница второго  уровня папка image, twoColLiqRt.css,

index.html

twoColLiqRt.css файл отвечает за хранение стилей папка image, index.html, index2.html
папка image хранит изображения  которые используются в дизайне сайта  
     
 
 

3.2 Логическая  структура сайта 

Ниже схематично изображена  логическая структура  сайта. 

 

twoColLiqRt.css                         Index.html                            папка image      
 
 
 

                                                Index.html          

                                                

                                                          рис. 7 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

3.3 Тестирование  программы 

     Данный  макет разрабатывался для браузера  Internet Explorer 8. Вот как выглядит главная страница в этом браузере (см. рис.8). 
 

     рис. 8. Главная страница Internet Explorer 8. 
 
 
 
 
 
 
 

Страница второго  уровня (см. рис. 9). 

рис. 9. Страница второго уровня. 

      Как видно на рисунок 8 и 9 на странице отоброжается корректно и не видно не каких дефектов.

        А вот так главная страница  выглядит в Opera 10.x и Google Chrome (см. рис. 10)  
 
 
 
 
 
 

     рис. 10 Отображение страницы в Opera 10.x и Google Chrome 

            Из за того что анонимное поле строк (поле, содержащее строковое содержимое) примыкает к обтекаемому объекту, то между полем строк и краем объекта образуется промежуток в 3 пиксела. Это привело к тому что текст в самом низу страницы належится на желтый блок. Что бы это исправить отключить режим обтекания у текста, то есть добавим класс "clearfloat"

и дадим ему  свойство "clear:both; ". После чего страница будет выглядеть корректно (см. рис. 11).  
 
 
 
 
 
 

     рис. 11. Измененная главная страница в  Opera 10.x и Google Chrome. 
 
 
 
 
 
 
 
 
 

Заключение 

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

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

     Список  используемой литературы 

     1. Алексеев А. П.  Введение в Web-дизайн 2008г.

    2. Горнаков С. Г.  Осваиваем популярные системы управления сайтом 2009г.

    3. Дубаков Михаил  Создание Web-страниц. Искусство верстки 2007г.

    4. Мальчук Е. В. HTML и CSS. Самоучитель  2008г.

    5. Мархвида  И.В.  Создание Web-страниц. HTML CSS JavaScript   2002г.

    6. Печников В.Н.     Adobe Photoshop для Web  2005г.

    7. Хольцшлаг М., Молли Е.  Языки HTML и CSS для создания Web-сайтов     2008г.

    8. Энди Бадд   Мастерская CSS Профессиональное применение  2007г.

    9. www. ru.wikipedia.org 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     Приложение  А 

Листинг файла  Index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Шаблон сайта</title>

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

</head>

<body>

<div class="main">

<div class="container"> Главная | Карта сайта | Контакты</div>

<div class="header"><img src="image/1.jpg" width="299" height="152" alt="1" longdesc="image/1.jpg" /><img src="image/2.jpg" width="294" height="152" alt="2" longdesc="image/2.jpg" /><img src="image/3.jpg" width="144" height="152" alt="3" longdesc="image/3.jpg" /></div>

<div class="content">

<div class="welcome"><p class="zag">Добро пожаловать на наш сайт !</p>

<p class="text">Lorem ipsum dolor sit arnet,  consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean  nonummy hendrent mauris. Phasellus porta.  Fusce suscipit varius mi. Cum sociis natoque penati-bus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio,  gravida at, cursus nec, luctus a, lorem. </p>

</div>

<div class="leftc"><div class="yellowtext">::  Cпециальное предложение</div>

<span class="ctext"><p class="text">Lorem ipsum dolor sirnet, consectetuer adipisc elit. Praesent vestibulummo-lestie lacus. Aeneannon-ummy hendrerit mauris. Phasellus porta. Fussus-cipit varius mi.<BR>

<font size=3> &nbsp;&nbsp;&nbsp;<a href="Index2.html">» read more</a></font></p></span></div>

<div class="rightc"><div class="yellowtext">::  Супер предоложение</div>

<span class="ctext"><p class="text">Lorem ipsum dolor sirnet consectetuer adipisc elit Praesent vestibulummo-lestie lacus. Aeneannon-ummy hendrerit mauris. Phasellus porta. Fussus-cipit varius mi.<BR>

<font size=3>&nbsp;&nbsp;&nbsp;»  read more </font></p></span></div>

<div class="niz">

<div class="yellowtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;::  Cпециальное предложение</div>

<div class="niz2"> <img src="image/9.jpg" width="63" height="81" longdesc="image/9.jpg" ALIGN="right" />

<span class="text"><b>Lorem ipsum dolor sitamet, conpiscing elit. Pravestlbulum molestie lacus.</b> Aan nonummy hs porta. Fusce

Lorem ipsum dolor sit amet, consectet adipiscing elit. </span></div>

<div class="niz2">

<span class="text">Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Praesent vestibulum molestie lacus.  Aenean nonummy hen-drerit mauris. Phsellus porta.  Fusce suscipit vs i. Cum sociis natoque  atibus agnis dis par­turient montnascetur</span> </div>

    <div class="niz2">

<p class="text"><b>•&nbsp;Lorem Ipsum dolor sit amt, contuent vum .<br>

•&nbsp;Lorem Ipsum dolor sit amt, contuent vum.<br>

•&nbsp;Lorem Ipsum dolor sit amt, contuent vum.<br>

•&nbsp;Lorem Ipsum dolor sit amt, contuent vum.

</b></p></div></div></div>

<div class="right">

<ul type="disc">

    <li type="disc">&nbsp;&nbsp;<strong>Home</strong></li>

    <li type="disc"><strong>&nbsp;&nbsp;Company</strong></li>

    <li type="disc"><strong>&nbsp;&nbsp;Products</strong></li>

    <li type="disc"><strong>&nbsp;&nbsp;Services</strong></li>

    <li type="disc"><strong>&nbsp;&nbsp;Support</strong></li>

    <li type="disc"><strong>&nbsp;&nbsp;Articles</strong></li>

    <li type="disc"><strong>&nbsp;&nbsp;Makeup</strong></li>

    <li type="disc"><strong>&nbsp;&nbsp;Contact</strong></li>

</ul></div>

<div class="rightn"><div class="yellowtext">::  Company News</div>

Информация о работе Верстка сайта из готового дизайн макета