Разработка дизайна макета сайта

Макет разрабатываемого сайта будет состоять из 3 блоков (Рисунке. 3.2): шапки сайта (header), левого меню навигации (navigation), формы обратной связи справа (form) и нижнего блока (footer).

Рисунок. 3.2 Макет сайта

Чтобы реализовать данную структуру в Dreamweaver, необходимо:

1.Устанавливаем базовый пакет Denwer 3 в директорию C: /WebServers. В директории C: /WebServers/home/localhost/www cоздаем новую директорию с названием Interteach.

2.Запускаем Adobe Dreamweaver CS3 и в меню Sites выбираем пункт Manage sites…

3.В появившемся окошке жмем кнопку New…и выполняем все согласно инструкциям Site Definition. В качестве местонахождения сайта выбираем локальную папку C: /WebServers/home/localhost/www/Interteach

4.В редакторе кода набираем следующий текст (листинг 2):

 

Листинг 2. Код главной страницы

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >

< html>

< head>

< title> < /title>

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

< /head>

< body>

< div id=" container" >

<! --Подключаем шапку сайта-->

< div id=" header" > < img src=" img/header.jpg" width=" 900" height=" 160" > < /div>

< div id=" wrapper" >

< div id=" content" > … Здесь будет находится содержимое сайта < /div>

< /div>

< /div>

<! --Подключаем блок навигации-->

< div id=" navigation" >

… В данный блок помещаем код из листинга 1

< div>

<! --Подключаем форму-->

< div id=" extra" > …В этом блоке будет форма обратной связи < /div>

<! --Подключаем " подвал" сайта-->

< div id=" footer" >

< p> … Здесь будет информация о фирме: адрес, телефон < /p>

< /div>

< /div>

< /body>

< /html>

 

1.Cохраняем страницу как index.php;

2.Теперь необходимо разбить сайт на php-блоки. Для этого в корневой директории сайта создаем директорию blocks, куда мы и будем их помещать;

3.Создаем четыре php файла в директории blocks и называем их соответственно header.php, navigation.php, form.php, footer.php;

4.Поочередно открываем в Dreamweaver каждый из блоков и вставляем в них вырезанные из index.php соответствующие тэги < div> < /div> и все что между ними находится.

5.На месте вырезанных тэгов < div> вставляем php-инструкцию include (" " ), указывающую на конкретный файл (листинг 3):

Листинг 3. Разбиение сайта на php-блоки

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >

< html>

< head>

< title> < /title>

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

< /head>

< body>

< div id=" container" >

<! --Подключаем шапку сайта-->

<? php include (" blocks/header.php" );? >

< div id=" wrapper" >

< div id=" content" >

… Здесь будет находится содержимое сайта

< /div>

< /div>

<! --Подключаем форму-->

<? php include (" blocks/form.php" );? >

<! --Подключаем блок навигации-->

<? php include (" blocks/navigation.php" );? >

<! --Подключаем " подвал" сайта-->

<? php include (" blocks/footer.php" );? >

< /div>

< /body>

< /html>

Инструкции include имеет формат:

include $fileName;

где $fileName - строка, представляющая собой имя файла. Результатом применения этих инструкций будет включение содержимого файла с указанным именем в текущий документ. Включаемый файл может содержать просто текст, текст с HTML-разметкой, операторы PHP. Смысл применения этих инструкций: рациональное описание фрагментов, многократно повторяющихся в ряде документов сайта. Примером может служить HTML-код " шапки" или описание набора PHP-функций, использующихся в ряде web-страниц.

1.Пока у нашего сайта отсутствует оформление и левая навигация выглядит неаккуратно. Чтобы задать сайту красивое оформление, мы будем использовать каскадные таблицы стилей (CSS). Для этого в папке с нашим сайтом создаем новый текстовый документ и сохраняем его под именем style.css.

2.Далее в файл style.css мы должны поместить следующий код (листинг 4):

Листинг 4. Таблицы стилей style.css

html, body{margin: 0; padding: 0}

body{background-image: url(img/fone-tr.png);

background-color: #f7fcf8; margin: 0; padding: 1em 0; font-family: " Lucida Grande", " Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; font-size: small}

 

p{margin: 0 20px 10px}

a{color: #981793}

hr{clear: both; height: 1px; color: #ccc; background: #ccc; border: none}

form {margin: 10px 2px}

textarea {width: 180px}

#textfield {

background: #FDF5E6;

border: 1px inset #660000;

}

#button {

background: #FDF5E6;

border: 1px outset #660000;

color: #000;

font-weight: bold; }

h2{margin: 0 20px 10px; padding: 0.5em 0; letter-spacing: -0.1ex; font-size: 1.2em}

div#top {background: #AE202B; text-align: center; padding: 5px 0px; font-weight: bold}

div#topicwhite {padding: 10px 5px; border-top: 2px dashed #FF8539}

div#header h1{height: 80px; line-height: 80px; margin: 0;

padding-left: 10px}

div#container{background: #FF8539; text-align: left; margin: 0 auto; width: 900px; border: 1px solid #660000; height: auto}

div#wrapper{float: left; width: 100%}

 

div#footer{background: url(img/bg-footer.png); color: #FFF}

div#footer p{margin: 0; padding: 5px 10px}

 

div#container{width: 900px; margin: 0 auto}

div#content{background: #FFF; margin: 0 200px 0px 205px; min-height: 370px}

div#navigation{background: #FF8539; float: left; width: 200px; margin-left: -200px}

div#extra{float: left; width: 200px; margin-left: -900px}

div#footer{clear: both; width: 100%}

 

img {float: left; padding: 0px 10px 0 0}

 

1.Теперь создаем еще один файл стилей – для навигации. Называем его cssverticalmenu.css. Помещаем в него следующий код (листинг 5):

Листинг 5. Таблицы стилей cssverticalmenu.css

.glossymenu, .glossymenu li ul{

list-style-type: none;

margin: 0;

padding: 0;

width: 200px; /*WIDTH OF MAIN MENU ITEMS*/

border: 1px solid black;

}

 

.glossymenu li{

position: relative;

}

 

.glossymenu li ul{ /*SUB MENU STYLE*/

position: absolute;

width: 130px; /*WIDTH OF SUB MENU ITEMS*/

left: 0;

top: 0;

display: none;

filter: alpha(opacity=100);

-moz-opacity: 1;

}

 

.glossymenu li a{

background: white url(glossyback.gif) repeat-x bottom left;

font: bold 12px Verdana, Helvetica, sans-serif;

color: white;

display: block;

width: auto;

padding: 5px 0;

padding-left: 10px;

text-decoration: none;

}

 

.glossymenu.arrowdiv{

position: absolute;

right: 2px;

background: transparent url(arrow.gif) no-repeat center right;

}

 

.glossymenu li a: visited, .glossymenu li a: active{

color: white;

}

 

.glossymenu li a: hover{

background-image: url(glossyback2.gif);

}

 

/* Holly Hack for IE \*/

* html.glossymenu li { float: left; height: 1%; }

* html.glossymenu li a { height: 1%; }

/* End */

 

1) Чтоб левое меню навигации было выпадающим, мы должны написать небольшую программу на JavaScript. Для этого в папке с нашим сайтом создаем новый текстовый документ и сохраняем его под именем cssverticalmenu.js. Помещаем в него следующий код (листинг 6):

 

 

 

Листинг 6. Программа для навигации cssverticalmenu.js

var menuids=new Array(" verticalmenu" ) //Enter id(s) of UL menus, separated by commas

var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

 

function createcssmenu(){

for (var i=0; i< menuids.length; i++){

var ultags=document.getElementById(menuids[i]).getElementsByTagName(" ul" )

for (var t=0; t< ultags.length; t++){

var spanref=document.createElement(" span" )

spanref.className=" arrowdiv"

spanref.innerHTML=" & nbsp; & nbsp; "

ultags[t].parentNode.getElementsByTagName(" a" )[0].appendChild(spanref)

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName(" ul" )[0].style.left=this.parentNode.offsetWidth+submenuoffset+" px"

this.getElementsByTagName(" ul" )[0].style.display=" block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName(" ul" )[0].style.display=" none"

}

}

}

}

if (window.addEventListener)

window.addEventListener(" load", createcssmenu, false)

else if (window.attachEvent)

window.attachEvent(" onload", createcssmenu)

 

2) Теперь нужно подключить таблицы стилей и JavaScript к нашей странице index.php. Для этого между тэгами < head> вставляем следующую информацию (листинг 7):

 

Листинг 7. Программа для навигации cssverticalmenu.js

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

< script type=" text/javascript" src=" cssverticalmenu.js" > < /script>

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

 

 

⇐ Предыдущая1234Следующая ⇒

Поделиться: