Разработка образовательного сайта на тему “Основы создания Web-сайтов”

Средства CSS. Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.

В первых версиях стандарта HTML не было предусмотрено никаких средств для управления внешним видом информации. Общая концепция гипертекста была направлена на доступность информации для любых устройств, способных воспроизводить текст. Для разметки рекомендовалось использовать только логические теги, определяющие заголовки, подзаголовки, списки, абзацы, цитаты и т.д. – то есть, те элементы, которые и составляют структуру документа. Интерпретация же внешнего вида оставалась полностью на совести оконечного терминала.

При показе странички конкретному  устройству должна быть задействована  соответствующая случаю таблица  стилей. Таблицу стилей нужно написать всего один раз при создании сайта  для каждого из устройств, на котором  планируется вывод информации. К  тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.

Размещение всей стилевой информации в одном внешнем файле открывает  нам и другие полезные возможности  – ведь изменив содержимое только одного стилевого файла, мы можем  в считанные секунды сменить  весь дизайн сайта. Причем никаких других переделок не понадобится.

1.3. Представление текста на Web-страницах

 

При создании профессиональной графики  для Web используется текст со сглаженными  краями. Сглаживание – это легкая размытость на неровных краях, сглаживающая переходы между цветами. Не сглаженные края, напротив, выглядят зазубренными и ступенчатыми. Исключением из этого  общего правила является текст очень  малого размера, (10 пунктов и меньше), применение сглаживания делает его  практически неразличимым. Текст  малых размеров будет выглядеть  намного лучше без сглаживания.

При разработке Web-страницы средствами базового HTML есть два комплекта шрифтов; пропорциональный и шрифт фиксированной  ширины. Проблема заключается лишь в том, что неизвестно, какой из них и какого размера будет  использован при отображении.

Пропорциональный шрифт – иначе "шрифт переменной ширины" для  каждого символа выделяет разное количество места в зависимости  от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем  прописная "I". Такие гаринитуры, как: Times, Helvetica и Arial являются примерами  пропорциональных шрифтов.

Web-браузеры для большинства  текстов на Web-странице, включая основной  текст, заголовки, списки, цитаты  и т. д., используют пропорциональные  шрифты. Как правило, большие отрывки  основного текста удобнее читать, когда они напечатаны пропорциональными  шрифтами. Поскольку большинство  пользователей не имеют времени  заменить шрифты, установленные  по умолчанию, с большой вероятностью  можно предположить, что текст  на вашей странице будет отображен  шрифтом Times размером 10 или 12 пунктов  или Helvetica. Но это всего лишь  общее правило.

1.4. Представление графики на Web-страницах

На данный момент почти все изображения  в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий  упоминания, формат PNG, борется за поддержку  и внимание браузеров. Далее –  краткий обзор "большой тройки" онлайновых графических форматов. Более  подробная информация представлена в главах, посвященных каждому из форматов.

GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

Его свойства состоят в следующем:

– поддерживает не более 256 цветов (меньше можно и часто нужно);

– использует палитру цветов;

JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

Фотографии или любые изображения  с плавными градациями цветов лучше  всего сохранять в JPEG-формате, потому что он предлагает более высокое  качество изображений, умещающихся  в файл меньшего объема. Тем не менее, JPEG не является лучшим решением для  графических изображений с одноцветными областями, поскольку этот формат имеет  тенденцию испещрять цвета крапинками и конечный файл, как правило, будет  несколько больше, чем GIF-файл для  того же изображения.

PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG – Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web.

1.5 Инструментарий для создания Web-страниц.

1.5.1 HTML-редакторы.

 

HTML-реда́ктор — компьютерная  программа, позволяющая составлять  и изменять страницы в формате  HTML. Несмотря на то, что HTML-код  может быть написан в простом  текстовом редакторе (например, Notepad), специальные редакторы для написания  кода HTML предлагают больше удобств  и функциональности. Принцип их  работы условно делится на  две категории:

Редактор показывает только исходный код.

Редактор показывает готовую страницу, работая по технологии WYSIWYG.

Есть также редакторы, работающие по смешанной системе, то есть поддерживающие оба принципа работы.

Macromedia Dreamweaver - профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, Dreamweaver облегчает эту работу и обеспечивает вас полезными инструментами и средствами, чтобы сделать ваши проекты непревзойденными.

Dreamweaver включает в себя много  инструментов и средств для  редактирования и создания профессионального  сайта: HTML, CSS, JavaScript, отладчик JavaScript, редакторы  кода (просмотр кода и инспектор  кода), что позволяет вам, редактировать  JavaScript, XML и другие текстовые документы,  которые поддерживаются в Dreamweaver. Технология Roundtrip HTML импортирует документы  HTML без переформатирования кода  и вы можете настроить Dreamweaver, чтобы он наводил порядок и  переформатировал HTML как вы этого  хотите.

Возможность визуального редактирования в Dreamweaver также позволяет вам быстро создавать или менять дизайн проекта  без написания кода. Вы можете рассмотреть  все ваши централизованные элементы и перетащить их с удобной панели непосредственно в документ.

Dreamweaver полностью настраиваемый.  Используйте Dreamweaver, чтобы создавать  свои собственные объекты и  команды, изменять "горячие"  клавиши и даже писать код  JavaScript, чтобы расширять возможности  Dreamweaver новыми свойствами, инспекторами  свойств и новыми отчетами  о сайте.

Macromedia Dreamweaver 8 RUSSIAN

Редактор Homesite

Редактор Homesite является одной из наиболее распространенных программ для верстки  веб-сайта. Это как бы своего рода конструктор, так как здесь настраивается  абсолютно все-от панели инструментов до создания различных спецификаций html. Здесь присутствуют также и  весьма полезные функции и компоненты, такие как собственный ftp-клиент, позволяющий загружать html-файлы  на сервер.

В этом редакторе встроен модуль проверки орфографии английского языка. Homesite можно рекомендовать как  новичку в области html-верстки  страниц и вебдизайна, так и  профессионалу, успешно работающему  не один год в области html-программирования.

Режимы работы Homesite:

ручной набор текста в виде кода HTML, Java Script, Perl, DHTML

работа в режиме визуального  редактора

просмотр страницы с помощью  браузера (тестовый режим)

В Homesite предусмотрены горячие клавиши (клавиши быстрого вызова функций  и тэгов). Разработчик также может  задать собственные комбинации клавиш, позволяющие выводить определенный набор тэгов, что обеспечивает гибкость и скорость работы вебмастера.

Блокнот Самый простой вариант — это редактор Notepad (Блокнот), входящий в стандартную поставку Windows. Однако в данном случае все тэги и вообще весь html-код страницы приходится писать вручную. Отсюда напрашивается использовать специальные более навороченные редакторы, позволяющие большую часть работы автоматизировать.

1.5.2 Графические редакторы.

 

Adobe Photoshop - Самый популярный графический пакет для профессионального редактирования любых форматов изображений. Художники, работающие в области компьютерного дизайна, могут бесконечно спорить о том, что лучше Mac или PC, но все они едины в одном - без Adobe Photoshop практически никто из них не обходится. Потрясающие инструменты для работы с растровой графикой уже давно возвели Adobe Photoshop в ранг короля графических редакторов.

Adobe Photoshop CS3

Microsoft Paint - простой (или лучше сказать - простейший) редактор, входящий в стандартную поставку операционных систем Microsoft. Он обладает набором простейших функций (кисточка, карандаш, резинка и т.д.), которые позволяют создавать незамысловатые картинки. К сожалению, для обработки графики он практически не пригоден. Картинку, которую вы видете справа - это большее, на что способен этот редактор.

 

PhotoPaint - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые инструменты для обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве работы, интерфейсе и скорости наложения фильтров - наложение происходит немного медленнее.

Painter - редактор предоставляет великолепные возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Очень удобен для разработки фоновых рисунков или Web-страниц в стиле живописи. Пользуясь это программой чуствуешь себя настоящим художником.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Глава 2. Разработка образовательного сайта на тему “Основы создания Web-сайтов”

 

 

Страница Сайта

<html>       

  <head>               

    <meta http-equiv="Content-Type"/>     

   

<style type="text/css">

 

 

body {       margin:0;        

             padding:0;        

             font: bold 11px/1.5em Verdana; }

h2 {         font: bold 14px Verdana, Arial, Helvetica, sans-serif;        

             color: #000;        

             margin: 0px;        

             padding: 0px 0px 0px 15px; }

 

img {        border: none; }    

 

#tabs5 {      float:left;      

              width:100%;      

              background:#cbd3d9;      

              font-size:93%;      

              line-height:normal;       }    

 

#tabs5 ul {   margin:0;          

              padding:10px 10px 0 50px;          

              list-style:none;       }  

 

 

 

 

 

#tabs5 li {    display:inline;      

               margin:0;      

               padding:0;       } 

  

#tabs5 a {     float:left;      

               background:url("tableft5.gif") no-repeat left top;     

               margin:0;      

               padding:0 0 0 4px;      

               text-decoration:none;       }

 

#tabs5 a span {float:left;      

               display:block;     

               background:url("tabright5.gif") no-repeat right top;     

               padding:5px 15px 4px 6px;     

               color:#FFF;       }  

 

#tabs5 a span {float:none;}  

 

#tabs5 a:hover span {color:#FFF;}   

 

#tabs5 a:hover {        background-position:0% -42px; } 

 

#tabs5 a:hover span {   background-position:100% -42px;       } 

 

#tabs5 #current a {     background-position:0% -42px;       }  

  

#tabs5 #current a span {background-position:100% -42px;       }

 

#button {

        width: 12em;

        border-right: 1px solid #000;

        padding: 0 0 1em 0;

        margin-bottom: 1em;

        font-family: Tahoma, Arial, sans-serif;

        font-size : 10px;

        background-color: #90bade;

        color: #333;

        }

 

        #button ul {

                list-style: none;

                margin: 0;

                padding: 0;

                border: none;

                }

 

        #button li {

                border-bottom: 1px solid #90bade;

                margin: 0;

                list-style: none;

                list-style-image: none;

                }

 

        #button li a {

                display: block;

                padding: 5px 5px 5px 0.5em;

                border-left: 10px solid #1958b7;

                border-right: 10px solid #508fc4;

 

 

                background-color: #2175bc;

                color: #fff;

                text-decoration: none;

                width: 100%;

                }

 

        #button li a {

                width: auto;

                }

 

        #button li a:hover {

                border-left: 10px solid #1c64d1;

                border-right: 10px solid #5ba3e0;

                background-color: #2586d7;

                color: #fff;

                }