Hoe maak je een website in Dreamweaver deel 1, website setup te maken

Hoe maak je een website in Dreamweaver deel 1, website setup gemeenschappelijke beginner maken

Adobe Dreamweaver CC

Project overzicht en website setup

Invoering

Dreamweaver is een geweldig programma voor het bouwen en ontwerpen van websites visueel. Maar het kan ontmoedigend zijn wanneer u voor het eerst te openen. Het heeft zo veel functies-wat zijn ze allemaal voor?

Om de tutorial-serie een redelijke lengte te houden, dan heb je maar twee webpagina’s te bouwen; maar als je eenmaal hebt gedaan, moet je voldoende kennis om meer pagina’s op uw eigen te maken te hebben.

Notitie: Je hebt geen ervaring met Dreamweaver nodig. Echter, een algemene kennis van de Hypertext Markup Language (HTML) en Cascading Style Sheets (CSS). zal helpen om context te veel van de onderwerpen in deze serie. HTML en CSS zijn zowel open webstandaarden en er zijn veel middelen beschikbaar om deze technologieën te leren. De Essentials voor beginners serie, Understanding Cascading Style Sheets (CSS). en HTML & CSS zorgen voor een goede basis.

Wat je gaat bouwen

Laten we beginnen met het downloaden van het monster bestanden en het nemen van een blik op het afgewerkte project.

  1. Download het monster bestanden van de link aan de bovenkant van deze pagina.
  • De bestanden zijn gecomprimeerd als een ZIP-bestand. Pak de bestanden op een gunstige locatie, zoals uw bureaublad.
    • Op Mac OS X, net op het gedownloade ZIP-bestand in de Mac Finder automatisch uitpakken van de bestanden.
    • Op Windows met de rechtermuisknop op het gedownloade ZIP-bestand en kies Alles uitpakken in het contextmenu. Blader naar een geschikte locatie als daarom wordt gevraagd, en klik op Extract.
    • Binnen de uitgepakte bestanden is een map genaamd Bayside. Moet negen submappen, zie figuur 1.
    • De inhoud folder bevat de tekst inhoud van de webpagina’s en de js map bevat een JavaScript-bestand dat zal worden gebruikt om het navigatiemenu op kleine schermresoluties te controleren. De andere mappen bevatten een volledige versie van het project als het lijkt op het einde van elk deel van deze serie. U kunt deze gebruiken om te controleren tegen je eigen code. Er is geen map voor deel 8, omdat het laatste deel is gewijd aan het laten zien hoe je het afgewerkte project te uploaden naar een webserver.

    • Open de PART7 map, en sleep index.html in een browser om het te bekijken. De homepage van het voltooide project eruit ziet als Figuur 2.
    • Figuur 2. De homepage van het afgewerkte project heeft een twee-koloms layout.

      1. Het formaat van de browser door een van de zijkanten naar binnen te slepen. Wanneer het kijkvenster smaller is dan 700px, de layout verandert van twee kolommen aan een enkele kolom. De navigatiebalk wordt vervangen door MENU tegen een zwarte achtergrond. De witte tekst in het vak over het beeld van de Golden Gate Bridge, heeft zich diep roze, en is nu gepositioneerd onder de afbeelding, zoals weergegeven in figuur 3.

      Figuur 3. Op een smallere scherm, de pagina verandert in een single-kolom lay-out.

      1. Klik MENU. De navigatiemenu glijdt soepel op een semi-transparante zwarte achtergrond (zie figuur 4).

      Figuur 4. De navigatiemenu dia’s in beeld.

      1. Klik MENU nog een keer. De navigatie-menu schuift omhoog en uit het zicht.
    • Open het navigatiemenu weer, en klik op BEZIENSWAARDIGHEDEN naar de tweede pagina (de andere menu-items zijn dummy koppelingen) te bekijken.
      • Definieer een site in Dreamweaver
    • Bouw de structuur van een webpagina met HTML5-elementen
    • Gebruik de DOM paneel om je weg te vinden rond de pagina en voeg nieuwe elementen
    • tekst en beelden toe te voegen aan de pagina
    • Download en resample beelden van een Creative Cloud Bibliotheek
    • De stijl van de pagina met behulp van Dreamweaver CSS Designer
    • Maak een tweede webpagina die op dezelfde manier is vormgegeven
    • Bedien verschillende lay-outs met behulp van de Visual Media Queries bar
    • Upload de afgewerkte pagina’s naar een online webserver
    • Langs de weg, zult u ook naar de belangrijkste onderdelen van de Dreamweaver gebruikersinterface weten.

      Dit is een grondige tutorial dus geef jezelf voldoende tijd. Elk deel is onderverdeeld in korte stukken die verklaren niet alleen wat te doen, maar ook waarom. Neem een ​​pauze tussen secties om ervoor te zorgen dat u de verschillende technieken geïntroduceerd begrijpen.

      Stel de Dreamweaver-werkruimte

      Voordat je aan de slag, over te schakelen naar de Design Workspace. Dit geeft je toegang tot alle belangrijke panelen die u nodig hebt voor deze les te geven. Op Windows, de snelle manier om dit te doen is de Workspace Switcher gebruiken in de rechterbovenhoek van het scherm (zie figuur 5).

      Figuur 5. Selecteer de Design Workspace uit de Workspace Switcher.

      Op Mac OS X, wordt standaard de Workspace Switcher is op dezelfde locatie, maar als je hebt uitgeschakeld het Application Frame, het is aan de linkerkant. Als u ook hebt uitgeschakeld de Application Bar, het is verborgen. De alternatieve manier om een ​​werkplek te kiezen is Venster gt; Workspace Layout gt; Ontwerp .

      Het opzetten van een site in Dreamweaver

      Een veel voorkomende beginnersfout is om te beginnen met werken op webpagina’s in Dreamweaver zonder een site te definiëren. Dit resulteert in een links naar activa, zoals afbeeldingen en stylesheets, wijzend naar een locatie op uw lokale computer. Alles werkt prima, totdat je komt om de site te uploaden naar uw externe server. Dan ontdek je al je links zijn gebroken en moeten worden opgelost. Vermijd dit hartzeer door altijd het definiëren van een site. Het is een snelle en gemakkelijke taak.

      In Dreamweaver, een site organiseert alle documenten op uw lokale computer is gekoppeld aan uw website en laat u sporen en te onderhouden koppelingen, bestanden te beheren, en de overdracht van uw website bestanden naar een webserver. Een typische Dreamweaver plaats heeft ten minste twee delen:

      • Lokale map: Dit is uw directory-meestal een folder te werken op uw harde schijf. Dreamweaver verwijst naar deze map als uw lokale site root.
    • Remote Folder: Dit is waar u uw bestanden op te slaan op de computer die draait uw web-server. De webserver is vaak (maar niet altijd) de computer dat uw site publiekelijk beschikbaar op het web maakt.
    • Tip: Als u van plan bent om te werken aan verschillende sites, is het een goed idee om een ​​map aan te maken op uw lokale harde schijf op te slaan. Op Mac OS X, uw persoonlijke map bevat al een map met de naam Sites. Op Windows, het opzetten van een map met de naam Sites op het hoogste niveau van de C-schijf. Hoewel de screenshots voor deze reeks werden genomen op Windows, de instructies zijn identiek voor Mac OS X, met uitzondering van sneltoetsen en de etiketten op sommige knoppen (beide worden gegeven).

      Definieer de lokale site map voor de Bayside Beat website

      Alles wat je nodig hebt om het werk te beginnen is om uw site een naam te geven, en vertel Dreamweaver waar u de bestanden op te slaan op uw lokale computer. U hoeft niet naar de externe map definiëren totdat u klaar bent om uw site te uploaden naar een live web server op het internet bent.

      1. Start Dreamweaver en selecteert plaats gt; Nieuwe site. Het dialoogvenster Site-instelling verschijnt.
    • In de Site naam veld voert Bayside Responsive als de naam van de site. De naam wordt intern gebruikt door Dreamweaver om de site te identificeren. Het maakt niet uit of het spaties bevat.
    • Klik op het mappictogram naast het Lokale site map veld om te bladeren en selecteer de map Bayside uit de steekproef bestanden die je gedownload. Het dialoogvenster Site-instelling ziet er nu als figuur 6, hoewel het pad voor de lokale site map zal afhangen van waar je de map Bayside gekopieerd op uw harde schijf.
    • Figuur 6. Definieer de lokale map site voor de Bayside Responsive website.

      1. Uitbreiden Geavanceerde instellingen in de kolom links van de Site Setup dialoogvenster en selecteer Local Info.
    • Klik op het mappictogram aan de rechterkant van de standaard Images folder veld om het te openen Kies Afbeelding Folder dialoog venster.
    • Klik nieuwe map (In Windows, het boven in het venster, op een Mac, is het aan de onderkant). Noem de nieuwe map afbeeldingen, selecteert u deze en klikt u op Selecteer map (Windows) of Kiezen (Mac). De Site Setup dialoogvenster moet er hetzelfde uitzien naar figuur 7.
    • Figuur 7. Stel de standaard map afbeeldingen.

      1. Laat de andere opties ingesteld op hun standaardwaarden. Er is geen noodzaak om een ​​waarde voor Web URL in te voegen, omdat we het gebruik van links ten opzichte van Document.

      Het paneel Bestanden in Dreamweaver toont nu de nieuwe map lokale hoofdmap voor uw huidige site (zie figuur 8). De lijst met bestanden in het paneel Bestanden fungeert als een file manager, zodat u kunt plakken, verwijderen, verplaatsen en geopende bestanden te kopiëren, net zoals u zou doen op een desktop.

      Figuur 8. De map monster bestanden en afbeeldingen in het paneel Bestanden.

      Je hebt nu gedefinieerd een lokale map site voor de Bayside Beat website. Dit is waar je de werkende kopieën van webpagina’s op uw lokale computer te houden. Je hebt ook aangegeven de standaard map om afbeeldingen op te slaan. Dit vertelt Dreamweaver om afbeeldingen naar die map automatisch te kopiëren wanneer u beelden van buiten de map siteroot importeren.

      Best practice voor het benoemen van bestanden en mappen in een website

      Een typische website bevat een groot aantal bestanden en mappen. Voor het gemak van onderhoud, is het belangrijk om ze logisch te organiseren. Maak aparte, toepasselijke naam mappen voor afbeeldingen, video’s, style sheets en externe JavaScript-bestanden. dragen ook de volgende punten in gedachten:

      • Bestanden en mappen namen in websites mag nooit spaties bevatten of een van de volgende tekens: / \% *: |? ‘Lt; gt; .
    • Hoewel andere speciale tekens zijn toegestaan, het is over het algemeen een goed idee om jezelf te beperken tot alfanumerieke tekens, koppeltekens en onderstrepingstekens.
    • De meeste bestanden en mappen namen uiteindelijk als onderdeel van de URL van een webpagina’s, dus hou ze kort, maar zinvol. Lange URL’s zijn moeilijk voor gebruikers om te onthouden en te typen in browsers op een mobiel apparaat.
    • De overgrote meerderheid van de websites worden gehost op Linux-servers, die hoofdlettergevoelig zijn. Met behulp van kleine letters voor de bestanden en mappen namen voorkomt problemen met bestanden die niet worden gevonden.
    • Sla het project activa aan een Creative Cloud Bibliotheek

      De beelden en kleurenschema voor dit project worden online opgeslagen in een gedeelde Creative Cloud Bibliotheek. CC Bibliotheken maak uw visuele vermogen voor u beschikbaar zijn overal, en zijn vooral nuttig bij het samenwerken met andere mensen. Bijvoorbeeld, een persoon die verantwoordelijk is voor het creëren van visuele middelen, terwijl u verantwoordelijk voor de bouw van de eigenlijke site bent. Check out de online documentatie voor meer informatie over het gebruik van CC Bibliotheken in Dreamweaver te leren.

      U moet de activa in de gedeelde bibliotheek op te slaan in een bibliotheek van uw eigen.

      1. Gebruik de activa in de Bayside Beat Libary.
      2. Klik Opslaan naar Creative Cloud in de rechterbovenhoek van het browserscherm, en sla de gedeelde activa aan uw Bayside bibliotheek, als je dat nog niet hebt gedaan.
    • Selecteer de Bayside bibliotheek in het panel Dreamweaver CC Bibliotheken. Je moet vier beelden en zes kleurstalen zien zoals weergegeven in figuur 9.
    • Figuur 9. De gedeelde activa in de Bayside CC Library.

      Maak je werken webpagina’s

      Je gaat naar de Bayside Beat website vanuit het niets te maken. Het monster bestanden die u hebt gedownload bevatten de tekstinhoud in Microsoft Word en RTF-bestanden, een JavaScript-bestand, en kopieën van het project in elk stadium voor u om te vergelijken tegen je eigen werkbestanden.

      Laten we beginnen met het maken van twee HTML-pagina’s voor de site.

      1. Als de Dreamweaver Welcome scherm zichtbaar is, klikt u op HTML in de Maak nieuw sectie. Of selecteer het dossier gt; nieuwe in het hoofdmenu. In beide gevallen, deze opent dialoogvenster Nieuw document, zie figuur 10.

      Figuur 10. Het dialoogvenster Nieuw document heeft opties om vele soorten bestanden.

      1. Zeker weten dat nieuw document is geselecteerd in de kolom links, dat type document is ingesteld op HTML. en Kader Geen.
    • Type Bayside Beat: Cable Cars in de Titel veld.
    • Zeker weten dat Doc Type is op de standaard HTML5. en dat niets wordt in de Bevestig CSS veld. Als er iets in Attach CSS wordt weergegeven, selecteert u deze en klikt u op het prullenbakpictogram aan de rechterkant van het veld.
    • Klik creëren. Dreamweaver een lege HTML-pagina in het venster Document.
    • Indien nodig, selecteert u de spleet knop (zie figuur 11) in de linkerbovenhoek van het Document venster om de onderliggende HTML-opmaak te onthullen.
    • Figuur 11. Selecteer de knop Split naar de onderliggende code zichtbaar te maken in een deel van het venster Document.

      1. Het venster Document (of Live View) is helemaal leeg, maar de eenvoudige HTML-structuur is geopenbaard in Code View, zoals figuur 12 toont.

      Figuur 12. Dreamweaver maakt automatisch de eenvoudige HTML-structuur.

      Lijn 1 is het type document (doctype) verklaring dat de browser dit is een HTML-bestand vertelt.

      HTML is een tag-gebaseerde taal. Tags worden omgeven door punthaken. De meeste labels komen in paren, met de afsluitende tag aangegeven door een slash na de opening hoekijzer.

      De hele pagina is genest binnen een paar lt; htmlgt; labels (op de lijnen 2 en 10). De lt; headgt; sectie op de lijnen 2-6 bevat informatie voor de browser. Alle inhoud van de pagina gaat tussen het openen en sluiten lt; bodygt; labels.

      De meeste van de tijd, Dreamweaver alle benodigde code voor u als u werkt met een visuele interface en dialoogvensters. Maar je moet voorzichtig zijn als je kopieer en plak de code van elders. Net als mensen, kan een HTML-pagina slechts één hoofd en slechts één lichaam. Als de inhoud niet weergegeven in Live View of een browser, de meest waarschijnlijke reden is dat je het hebt geplakt buiten het lichaam.

    • Sla het bestand op door het selecteren van het dossier gt; Save of met behulp van de sneltoets Ctrl + S (Windows) of Cmd + S (Mac).
    • In de Opslaan als dialoogvenster, zorg ervoor dat u in de Bayside lokale site map, noem het bestand index.html. en klik op Save .

      Het bestand wordt nu weergegeven in het paneel Bestanden, en het tabblad in de linkerbovenhoek van het venster Document geeft de bestandsnaam.

      Tip: U kunt altijd naar de huidige website van de map lokale site door te klikken op de Site Root knop aan de onderkant van het dialoogvenster vak Opslaan als.

    • Maak een nieuw HTML-bestand. Het welkomstscherm niet meer zichtbaar is, dus je moet het menu optie te gebruiken het dossier gt; nieuwe naar het dialoogvenster Nieuw document te openen. U kunt ook op Ctrl + N (Windows) of Cmd + N (Mac).
    • Selecteer dezelfde opties als in stap 2 eerder, maar nu verlaten Titel veld leeg, en klik vervolgens op creëren .
    • Sla het bestand in de map website wortel als sights.html.
    • In Split View, de waarde tussen de lt; titlegt; tags op lijn 5 is "Document zonder titel" .

      Dit is wat wordt weergegeven op het tabblad browser of titelbalk. Het zal ook worden opgepikt door de zoekmachines. Het verlaten van deze waarde ongewijzigd is een veel voorkomende beginnersfout.

      Er zijn twee manieren om het te veranderen:

      • Ga in de code, en het handmatig veranderen, zorg ervoor dat u de opening te verlaten en sluiten van HTML-tags intact.
      • Gebruik Dreamweaver de eigenschappencontrole. Laten we gebruik maken van die techniek.
      • De eigenschappencontrole is de grote horizontale paneel aan de onderkant van het document venster in de Design Workspace. Indien nodig, klikt u op het tabblad Eigenschappen om het aan de voorzijde (in eerste instantie, het is verborgen achter het deelvenster Uitvoer) te brengen.

        Vervang Untitled Document in de Document titel veld met Bayside Beat: Sightseeing. Merk op dat er niets verandert in de onderliggende HTML terwijl u typt.

      • Om de wijziging te bevestigen, drukt u op de Tab-toets of Enter / Return. De waarde in het veld Document titel vervangt Untitled Document in de HTML-code op lijn 5 (zie figuur 13).
      • Figuur 13. Gebruik de eigenschappencontrole om de Document titel in te stellen.

        Hoewel Dreamweaver maakt de HTML-opmaak voor u, is het een goed idee om te blijven Split View opent een groot deel van de tijd bij het werken met een webpagina. Hiermee kunt u controleren of de wijzigingen die u gemaakt correct zijn uitgevoerd. Dat wil niet zeggen dat Dreamweaver is onbetrouwbaar. Behalve in bijzondere omstandigheden, zal het precies wat je vraagt ​​te doen. Maar het is belangrijk om te weten waar je bent in het document. Als de invoegpositie op de verkeerde plaats, zal uw nieuwe code daar worden toegevoegd. Als je niet oppast, kan je eindigen met een verwarde puinhoop die moeilijk te ontrafelen zijn. De DOM panel, die we gebruiken in het volgende deel van de tutorial-serie, is ook van onschatbare waarde in het bijhouden van de pagina structuur.

        Tip: Als u liever de onderliggende code naast de visuele weergave van de pagina te zien, selecteer Uitzicht gt; Split Verticaal. Om terug te keren naar het splitsen van het venster Document horizontaal, selecteert u dezelfde optie opnieuw. Het menu View kunt u ook kiezen welke kant Live View op zou moeten zijn. Sleep de balk scheiden Code en live bekeken om hun relatieve grootte aan te passen. Dreamweaver onthoudt uw instellingen automatisch.

        Waar te gaan vanaf hier

        Nu dat u klaar bent met het definiëren van uw site, en creëerde twee blanco pagina’s, kunt u beginnen met het toevoegen van inhoud aan hen door het volgen van Deel 2: toevoegen en opmaken tekstinhoud.

        Bron: helpx.adobe.com

        Geef een reactie

        Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *