Lecții crearea de site, site-ul dvs.

Lecțiile acestui site. Vă sugerez să instrucțiuni pas cu pas pentru crearea unui site simplu, cu un „zero“ cu propriile sale mâini. In acest tutorial vom crea o pagină a unui site bazat pe un design de masă greu.

Pasul 1.Uroki sayta.Ustanavlivaem a crea un server de pe computerul local.

Descarcă aici programul Denwer3. Pornește programul. După consimțământul nostru pentru a instala programul, apare meniul DOS. Apăsați Enter. Suntem de acord cu directorul de dosarul de instalare (implicit C: \ webservere). Apoi, faceți clic din nou Enter. Se specifică litera a numelui de disc virtuale - de exemplu Z. Enter din nou. Selectați modul în care va funcționa un disc virtual. Pune -1. Următoarea Enter. Toate - procedura este finalizată.

După instalarea pe calculatorul nostru a apărut Denwer Z unitate virtuală, în cazul în care în directorul Z: \ acasă \ localhost \ www \, vom crea un director cu site-ul nostru.

Pasul 2.Uroki sayta.Opredelyaem a crea un site în programul Adobe Dreamweaver.

In directorul Z: Casa \ localhost \ www \ (sau C: \ webservere \ acasă \ localhost \ www \, care este același lucru) a crea un dosar de site-ul nostru, numindu-l, de exemplu, «htmlsite».

Deschideți programul Adobe Dreamweaver, fila de pe dreapta găsi Managerul site-ului.

Creați un site nou. În fereastra care apare, definiți numele site-ului, folderul în care site-ul va fi amplasat echipamente (nou create de contact htmlsite dosar rezultat :. Salvați Efectuat.

Pasul 3.Uroki crea codificare sayta.Opredelyaem fișiere de program Adobe Dreamweaver.

În fila Complex, selectați Editare proprietăți (Setări) - Noul document, selectați tipul de document: HTML 4.01 Transitional, setul de caractere chirilice (Windows). Codul într-un fișier cu o astfel de alegere ar fi: ferestre-1251.

Pasul 4.Uroki crea sayta.Sozdaem primul fisier HTML al site-ului nostru.

Crearea unui nou php-fișier, salvați-l ca index.html. Acest lucru va fi fișierul site-ul principal, de la care va fi de încărcare întreg.

Crearea unui nou fișier CSS-. Salvați-l ca «style.css». Vor fi păstrate stilurile care va da frumusetea site-ului nostru.

Pasul 6.Uroki sayta.Podtseplyaem a crea o foaie de stil la fișierul index.php.

Fișierul index.html du-te la tab-ul Design (Proiect). Panoul de jos pentru a alege un stil în lista drop-down și alegeți: ridica o foaie de stil, și în caseta de dialog specificați fișierul style.css nostru.

Voi crea o lățime cadru de site-ul 846 pixeli. Puteți seta orice dimensiunea.

Deci, în fișierul index.html. a crea un tabel format din trei rânduri și o coloană. Lățimea tabelului în cazul meu 846 pixeli. OK. Aliniaza tabelul din mijloc prin atributul Align. Pune culoarea de fundal a tabelului - alb.

Cele style.css fișiere tabel tăiate prescrie - site-cadru:

(1 pixel gros, negru solid).

Fișierul index.html din fila de jos selectați din tabel și să alocați clasa main_border.

Enumerăm stiluri pentru toate site-ul punctele de testare, care va crea un stil de fișier style.css:

Deschideți programul Adobe Photoshop. Crearea unui fișier nou (dimensiunile mele - 846 x 100 pixeli). Crearea unui design grafic cu numele site-ului și numele de domeniu (la gust).

Pentru a crea subsol (partea de jos a părții grafice a site-ului, a crea un nou fișier (dimensiunile mele - 846 cu 20 de pixeli), și, de asemenea, a crea un design grafic pentru gustul tau.

În directorul Z: \ acasă \ localhost \ www \ phpsite crea un img dosar, care stochează antetul de program creat și subsol în format jpg. Când salvați în meniul programului Adobe Photoshop utilizați Salvare pentru Web.

Du-te la programul Adobe Dreamweaver, deschideți index.html. Trageți o ilustrare grafică a antetul folderului site-ului img în linia de sus a tabelului, subsol design grafic - în linia de jos.

Deschideți programul Adobe Photoshop. Crearea unui fișier nou (dimensiunile mele - 50 x 50 pixeli). Umple-l cu orice fundal pe placul dumneavoastră și de a salva pentru Web ca bg.jpg. în dosarul img.

Du-te la programul Adobe Dreamweaver, deschideți fișierul style.css și a pus acest lucru în ea stil de fundal:

Pasul 10.Uroki crea sayta.Proveryaem dacă lucrări create de site-ul nostru.

Pasul 11.Uroki crearea de navigare și conținutul site-ului sayta.Sozdaem.

Procedăm în rândul din mijloc al mesei, setați alinierea verticală ea - de-a lungul partea de sus și de a crea în acesta un alt tabel care constă din 1 rând și 2 coloane de 100%. Prima coloană, vom folosi ca bara de navigare. tura dreapta caseta de încadrare la o dimensiune de aproximativ 186 pixeli. Să creați bara de navigare din stânga, stilul său propriu, numindu-l la stânga, pentru ceea ce în fișierul style.css PRESCRIBE:

(Culoare fundal - gri, dreapta cadru 1 pixel, solid, negru)

Rezerva, du-te la fișierul index.html, pune cursorul în coloana din stânga a rândului de mijloc a mesei, în panoul inferior, selectați eticheta celulei noastre și dau un stil de stânga.

navigare

principalArticole

frontieră: 1px solid gri; / * Style cadru * /

lățime: 100%; / * Lățime * meniu /

background-color: # f6f6f6; / * Culoarea de fundal a celulei * /

Marja: 8px; / * Marja * /

lățime: 150px; / * latime pentru meniul Internet Explorer * /

font: bold 13px Verdana; / * Font Text * /

padding: 2px; / * Text link-ul intern otsutp din celula marginile * /

padding-left: 4px; / * intern otsutp link text de la marginea din stânga a celulei * /

lățime: 100%; / * Lățimea celulei * /

culoare: # 000000; / * Culoare text * /

text-decoration: none; / * Link-uri au Subliniat - nu * /

border-bottom: 1px solid gri;

> HTML> corp #coolmenu un

culoare de fundal: #cccccc; / * Culoarea de fundal a celulei planare * /

culoare: # 000000; / * Culoarea textului atunci când treceți * /

Copiați codul HTML și inserați-l în celula din stânga a fișierului index.html. Înainte de această aliniere verticală în celulă pentru a face marginea de sus. Pentru a introduce codul HTML pe fila cod de mutare și introduceți-l într-un șir de caractere:

 

în locul parametrului  .

După cum știți codul HTML conține link-uri către pagini, cum ar fi Acasă - index.php, și pe celelalte pagini ale site-ului, pe care o vom crea mai târziu. Puteți adăuga noi pagini și titluri de pagini schimbare oferite aici.

Mergem la verificarea browser-ului. În cazul în care ascensiuni lățime meniu în afara celulei, style.css fișier pentru a fixa un meniu lățime de procentaj (lățime: 100%; / * Latime Meniu * /), de exemplu, prin plasarea 93-95%.

Pasul 13.Uroki creați un text sayta.Zapolnyaem al fișierului index.html.

În celula din dreapta a tabelului face alinierea verticală de sus și adăugați textul în ea.

Pasul 14.Uroki a crea pagina de replicare index.html sayta.Pered la alte pagini de pe site-ul dvs. va face bara de navigare elementul de bibliotecă site-ului din stânga.

Deschideți programul Adobe Dreamweaver, În panoul din dreapta, selectați fila Fișiere - Seturi (active). Faceți clic pe pictograma biblioteca. Selectați navigare stânga noastră: în meniul tag-ul rapid, făcând clic pe tab-ul

. După selecție clic pe pictograma „New Library Object“, situat în partea de jos a filei Library (dreapta jos). Dă-membru al bibliotecii titlu nou (de exemplu, leftnav). Elementul de bibliotecă creat este colorat imediat la galben.

Pasul 15.Uroki sayta.Tirazhiruem a crea un fișier index.html la alte pagini de pe site.

Rastirazhiruem index.html fișier pentru noi este necesar, numărul de pagini, și anume, Salvați-l ca article0.html, article1.html, article2.html etc. Astfel article0.html lesson0.html fișiere și vom conține numele de link-uri la fișiere de articole și lecții (pentru a fi principalele pagini de articole și lecții). De asemenea, din fișierul index.html va crea about.html fișier.

Pasul 16.Uroki sayta.Ustanavlivaem a crea un link de navigare la fișierele nou create.

Mai târziu, în fișierul lesson0.html a scrie textul introductiv sub titluri de lecții, descrieri, lecții și așa mai departe. Cum de a face acest lucru frumos, a se vedea cursuri de clase HTML si CSS. Creați nume de la lecții de link-uri către fișierele necesare, în același mod trăgându-le pe pictograma „Un pointer la dosar.“

Odată ce ne-am creat toate link-urile, vom oferi pentru a actualiza toate fișierele care conțin elementul de bibliotecă. Noi spunem - OK.

Lecții de a crea sayta.Kak vedea, nu este nimic mai ușor de a crea un site HTML. Acum, avem nevoie doar pentru a umple de conținutul paginii.

1. Dacă mergi singur tip de texte „de la zero“, este mai bine să o facă o dată în programul Adobe Dreamweaver.

2. Dacă copiați text de pe Internet, și în acest moment nu au acces la site-ul dvs., este mai bine să copiați decât prin Microsoft Word, și în Notepad.

3. Când introduceți text în programul Adobe Dreamweaver, sau introduceți textul copiat de pe fila Opțiuni, selectați Form - Alineatul (punctul), adică etichetă

, care este apoi de dorit pentru a trece peste site-ul Stylesheet - fișierul style.css. De exemplu, după cum urmează:

4. alege Format antet 1 sau 2 pentru articolele de antet (lecții), sau 3, de asemenea, este de dorit pentru frumusete Stylesheet suprascriere selectate

,

sau

. De exemplu, antete sunt definite ca site-ul curent

și precizate în foaia de stil, după cum urmează:

5. Pentru lizibilitate nu ezitați să adăugați text cu caractere aldine (butonul B), cursiv (I a unui buton), subliniere (de ce mergeți la fila Cod și încadrată etichete de text subliniere ...), Dar încercați să nu exagerați.

6. Pentru fiecare pagină pentru a crea site-ul nu uita pe antetul panoului (panou superior), introduceți numele acestei pagini, și făcând clic pe codul filă, creați o descriere și cuvinte cheie.