Уроци Създаване на уеб сайтове, вашия сайт

Поуките от този сайт. Предлагам ви стъпка по стъпка инструкции за създаване на прост сайт с "нула" със собствените си ръце. В този урок ще създадем страница на сайт, на базата на твърд проектиране на маса.

Стъпка 1.Uroki sayta.Ustanavlivaem създаде сървър на локалния компютър.

Изтеглете програмата тук Denwer3. Стартирайте програмата. След наше съгласие да инсталирате програмата, се появява меню DOS. Натиснете Enter. Ние сме съгласни с директорията на инсталационната папка (по подразбиране C: \ уеб сървъри). След това кликнете отново Enter. Посочете писмото на виртуални имената на диск - например Z. Отново Enter. Изберете режима, в който ще работи виртуален диск. Сложете -1. Следваща Enter. Всичко - процедурата е завършена.

След инсталацията на нашия компютър Denwer появи виртуален диск Z, където в директорията Z: \ у дома \ Localhost \ WWW \ ние ще създадете папка с нашия сайт.

Стъпка 2.Uroki sayta.Opredelyaem създаде сайт в програмата Adobe Dreamweaver.

В директорията Z: Начало \ Localhost \ WWW \ (или C: \ уеб сървъри \ у дома \ Localhost \ WWW \, което е едно и също) създадете папка на нашия сайт, го нарича, например «htmlsite».

Отворете програмата Adobe Dreamweaver, раздела отдясно намери мениджър на сайта.

Създаване на нов сайт. В прозореца, който се появява, може да определи името на сайта, в папката, където на сайта ще бъде разположен оборудване (новосъздадената Hit контакт htmlsite папка :. Освен Готово.

Стъпка 3.Uroki създаде sayta.Opredelyaem кодиране Adobe Dreamweaver програмните файлове.

В раздела Разширени, изберете Edit Properties (Настройки) - Новият документ, изберете вида на документа: HTML 4.01 Transitional, кирилицата набор от символи (Windows). Код във файл с такъв избор би бил: дограма-1251.

Стъпка 4.Uroki създаде sayta.Sozdaem първи HTML-файл на нашия уебсайт.

Създаване на нова PHP-файл, да го запишете като index.html. Това ще бъде основният файл сайт, от който ще зарежда цялото.

Създаване на нов CSS-файл. Запазете го като «style.css». Там ще се съхраняват стиловете, които ще дадат на красотата на нашия сайт.

Стъпка 6.Uroki sayta.Podtseplyaem създаде стил лист във файла index.php.

Файлът index.html отидете на раздела Design (Project). В долния панел изберете стил от падащия списък и изберете: вземете лист стил, както и в диалоговия прозорец посочете ни style.css файл.

Ще се създаде рамка ширина 846 пиксела сайт. Можете да настроите всеки от вас размер.

Така че, във файла index.html. създадете таблица, състояща се от три реда и една колона. Ширината на масата в моя случай 846 пиксела. OK. Подравнява масата в средата чрез атрибута на подравняване. Сложете цвета на фона на таблицата - бяло.

style.css Файловите предписват кантиране на маса - уебсайт рамка:

(1 пиксел дебелина, черни).

Файлът index.html в раздела дъно изберете таблицата и възлага main_border клас.

Ние списък стилове за всички сайт тестови точки, което ще създаде стил файл style.css:

Отворете програмата Adobe Photoshop. Създаване на нов файл (моите размери - 846 на 100 пиксела). Създаване на графичен дизайн с името на сайта и името му (на вкус).

За да създадете долната част на страницата (долната част на графичната част на обекта, да създадете нов файл (моите размери - 846 от 20 пиксела), а също и създаване на графичен дизайн за вашия вкус.

В директорията Z: \ у дома \ Localhost \ WWW \ phpsite създаде IMG папка, която съхранява създадена програма горния и долния колонтитул във формат JPG. Когато запишете в менюто на програмата Adobe Photoshop използвате Save за Web.

Отиди на програмата Adobe Dreamweaver, отворете index.html. Плъзнете нагледна илюстрация на заглавната част на папката сайт IMG в най-горния ред на таблица, графика колонтитул на проектиране - в най-долния ред.

Отворете програмата Adobe Photoshop. Създаване на нов файл (моите размери - 50 на 50 пиксела). Запълнете го с всякакъв фон по ваш вкус и запазете за уеб като bg.jpg. в папката IMG.

Отиди на програмата Adobe Dreamweaver, отворете файла style.css и сложи това в него стила на фона:

Стъпка 10.Uroki създаде sayta.Proveryaem дали произведения, създадени от нашия уебсайт.

Стъпка 11.Uroki създаде sayta.Sozdaem навигация и съдържанието на сайта.

Работи се в средния ред на таблицата, определя вертикален това изравняване - в горната част и да се създаде нея друга маса, състояща се от един ред и 2 колони от 100%. В първата колона, ние ще използваме като лента за навигация. Дясната му очертаващ правоъгълник смяна до размер от около 186 пиксела. Нека създадем лявата лента за навигация, собствен стил, наричайки го остави, за това, което в предписват на файла style.css:

(Предшестващо цвят - сив, полето рамка 1 пиксел, твърдо вещество, черен)

Резерв, отидете на файла index.html, поставете курсора в лявата колона на средния ред на таблицата, в долната част на екрана, изберете маркер на нашата клетка и му се даде ляв стил.

навигация

основенстатии

граница: 1px твърд сив; / * Style рамка * /

ширина: 100%; / * Ширина * меню /

фон-цвят: # f6f6f6; / * Цветът на фона на клетката * /

марж: 8px; / * Допустимо * /

ширина: 150px; / * широчина за меню Internet Explorer * /

шрифта: удебелен 13 пкс Verdana; / * Font Текст * /

подложка: 2px; / * Вътрешен otsutp текстов линк от клетката ръбове * /

уплътнение ляв: 4 пкс; / * Вътрешен otsutp текстов линк от левия край на клетката * /

ширина: 100%; / * Ширина на клетъчната * /

цвят: # 000000; / * Цвят на текста * /

текстови декорация: няма; / * Подчертая, връзки имат - не * /

граница дъно: 1px твърд сив;

> Html> тяло #coolmenu на

фон-цвят: #cccccc; / * Цвета на фона на изскачащата клетка * /

цвят: # 000000; / * Цветът на текста, когато задържите * /

Копирайте HTML кода и го поставете в лявата клетка на файла index.html. Преди това вертикално подравняване в клетката, за да горния ръб. За да вмъкнете HTML код в раздела КОД ход и я поставете в низ:

 

на мястото на параметъра  ,

Както знаете HTML код съдържа връзки към страници, като у дома - index.php, а на другите страници на сайта, която ще създадем по-късно. Можете да добавите нови страници и титли промяна на страници, дадени тук.

Ходим на проверката на браузъра. Ако се изкачва ширина меню извън клетката, style.css на файл, за да определят меню процент (широчината: 100%; / * Меню Ширина * /), например чрез поставяне на 93-95%.

Стъпка 13.Uroki създаде sayta.Zapolnyaem текст на файла index.html.

В десния клетката на таблицата направете вертикалното подравняване на върха и да добавите текст в него.

Стъпка 14.Uroki създаде sayta.Pered страница репликация index.html към други страници на вашия сайт ще направя лявата лента за навигация елемент библиотека на сайта.

Отворете програмата Adobe Dreamweaver, в десния панел, изберете раздела Файлове - комплекти (активи). Кликнете върху иконата на библиотеката. Изберете напусна нашия навигация: в менюто бързо маркер, като кликнете върху раздела

. След избор, кликнете върху иконата на "Нова библиотека обект" се намира в долната част на раздела Библиотека (долу вдясно). Дайте заглавие нов член библиотека (например leftnav). Създадената библиотека членът е оцветен веднага към жълто.

Стъпка 15.Uroki sayta.Tirazhiruem създаде index.html файл към други страници на вашия сайт.

Rastirazhiruem файла index.html за необходимите ни броя на страниците, т.е. Запазете го като article0.html, article1.html, article2.html т.н. Така article0.html lesson0.html файлове и ние ще съдържа имената на линкове към файлове на статии и уроци (за основните страници на статии и уроци). Също така от файла index.html ще създаде about.html файл.

Стъпка 16.Uroki sayta.Ustanavlivaem създаде връзка от навигацията в новосъздадените файлове.

По-късно през lesson0.html файл напишете въвеждащ текст под уроци заглавия, описания, уроци и така нататък. Как да го направя красиво, вижте HTML и CSS класове курсове. Създаване на имена от уроци връзки към необходимите файлове, по същия начин, като ги плъзнете до иконата "Указател към файла."

След като настроите всички връзки, ние ще предложим да се актуализират всички файлове, съдържащи елемент библиотека. Ние казваме - ОК.

Уроци създават sayta.Kak видим, няма нищо по-лесно да се създаде сайт за HTML. Сега ние просто трябва да се попълнят от съдържанието на страницата.

1. Ако ще сами пишете текстове "от нулата", е по-добре да го направя, след като в програмата Adobe Dreamweaver.

2. Ако копирате текст от интернет, и вие в този момент нямат достъп до сайта си, той е по-добре да се копира, отколкото чрез Microsoft Word, и в Notepad.

3. Когато въвеждате текст в програмата Adobe Dreamweaver или поставете копирания текст в раздела Опции, изберете Form - Параграф (Параграф), т.е. свободен край

, който след това е желателно да се замени на сайта стилове - style.css файла. Например, както следва:

4. изберете Форматиране Header 1 или 2 за изделията заглавните (изводи), или 3, е желателно за красота стилове замяна също избрани

,

или

. Например, заглавията са определени като на текущия сайт

и разписани в стилове, както следва:

5. За четливост спокойно можете да добавите удебелен шрифт (B бутон), курсив (I на един бутон), долна черта (защо отидете в раздела кодекс и в рамка се подчертае текстови тагове ...), Но се опитайте да не се прекалява.

6. За всяка страница, за да се създаде уеб сайт, не забравяйте на заглавната част на панела (горен панел), въведете името на тази страница и като кликнете върху кода на раздела, създаване на описание и ключови думи.