Visual Web Developer Express Jam Sessions

Größe: px

Ab Seite anzeigen:

Download "Visual Web Developer Express Jam Sessions"

Kai Kraus
vor 10 Jahren
Abrufe

1 Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express, Microsofts kostenlose Entwicklungsumgebung für ASP.NET 2.0, geben. Schritt für Schritt lernen Sie den Umgang mit dem leistungsfähigen Programm und erfahren nebenher eine ganze Menge über ASP.NET selbst. Finden Sie im ersten Teil heraus, wie ASP.NET 2.0 und Visual Web Developer Express Sie auf vielfältige Weise bei der Erstellung moderner CSS Layouts unterstützen, wie Sie eine dynamische Navigation einbinden und die fertige Site auf einen Webserver kopieren können all das direkt aus der Entwicklungsumgebung heraus. Voraussetzungen Funktionsfähige Installation von Visual Web Developer Express auf Ihrem Computer Grundlegende Kenntnisse der Webentwicklung (HTML und CSS). - 1/20 -

NET selbst. Finden Sie im ersten Teil heraus, wie ASP.NET 2.

2 Einführung in Visual Web Developer Express 1. Öffnen Sie Visual Web Developer 2005 Express. 2. Legen Sie ein neues Projekt an: Klicken Sie im Menü auf den Eintrag Datei und wählen Sie dann Neue Website 3. Ein Dialog-Fenster öffnet sich, in dem Sie Ihre neue Website konfigurieren können. 4. Wählen Sie von den installierten Vorlagen ASP.NET-Website aus. Speicherort: Dateisystem, Sprache: Visual Basic. Klicken Sie anschließend auf OK. 5. Jetzt sehen Sie das Grundgerüst Ihrer neuen Website in Visual Web Developer Express. 6. Rechts oben finden Sie den Projektmappen-Explorer, der alle Dateien des Projekts anzeigt. 7. Ein Doppelklick auf eine Datei im Projektmappen-Explorer öffnet die Datei in der Mitte des Texteditors. 8. Auf der linken Seite befindet sich die Toolbox, die eine ganze Reihe von Steuerelementen beinhaltet. 9. Rechts unten ist das Eigenschaften-Fenster, das die Eigenschaften der ausgewählten Steuerelemente anzeigt. Hier können Sie diese auch konfigurieren. 10. Klicken Sie im Projektmappen-Explorer mit der rechte Maustaste auf die Datei Default.aspx. Im Kontext-Menü wählen Sie Löschen. Bestätigen Sie, dass Sie diese Datei löschen wollen. Wir haben nämlich was anderes vor - 2/20 -

Klicken Sie anschließend auf OK. 5. Jetzt sehen Sie das Grundgerüst Ihrer neuen Website in Visual Web Developer Express. 6.

3 11. Wählen Sie im Projektmappen-Explorer den obersten Knoten der Baumstruktur aus. 12. Im Menü oben klicken Sie auf den Eintrag Website, und wählen Sie Neues Element hinzufügen. - 3/20 -

4 13. Ein Dialog-Fenster öffnet sich. Wählen Sie den Dateityp Masterseite aus. 14. Klicken Sie unten auf die Schaltfläche Hinzufügen. 15. Die neue Datei heißt MasterPage.master. Darin werden das Layout und andere wiederkehrende Elemente der Website definiert. Der eigentliche Inhalt wird unter Zuhilfenahme des ContentPlaceHolder Steuerelements von den Web Form Seiten mit der Endung.aspx eingefügt. - 4/20 -

Darin werden das Layout und andere wiederkehrende Elemente der Website definiert.

5 16. Um ein Layout zu erstellen, schreiben Sie folgenden Code zwischen die <form> und </form> Tags: <div id= wrapper > <div id= leftcol > <div id= logo > </div> <div id= menu > </div> </div> <div id= rightcol > <div id= header > </div> <div id= main > <asp:contentplaceholder ID= ContentPlaceholder1 runat= server > </asp:contentplaceholder> </div> </div> </div> 17. Fügen Sie im <head> des Dokuments das folgende <link> Tag ein. Damit verknüpfen wir eine Stylesheet-Datei mit unserer Masterseite. <link rel= Stylesheet type= text/css href= StyleSheet.css /> 18. Sie können die im Video verwendete CSS Datei und den images Ordner von der Coding4fun Website ( herunterladen und einfach in das Projektmappen-Explorer-Fenster kopieren. - 5/20 -

Fügen Sie im <head> des Dokuments das folgende <link> Tag ein. Damit verknüpfen wir eine Stylesheet-Datei mit unserer Masterseite. <link rel= Stylesheet type= text/css href= StyleSheet.

6 - 6/20 -

7 19. Um die Website visuell zu bearbeiten, können Sie die Design-Ansicht verwenden, indem Sie unten auf die Schaltfläche klicken. 20. In der Design-Ansicht können Sie Steuerelemente auswählen und deren Eigenschaften im gleichnamigen Fenster (im der Abbildung rechts unten) bearbeiten. 21. Ändern Sie hier den Namen (ID) des ContentPlaceHolder Steuerelements auf maincontent. 22. Über die Schaltfläche können Sie wieder zurück zur Code-Ansicht wechseln. 23. Schließen Sie die Masterseite. - 7/20 -

In der Design-Ansicht können Sie Steuerelemente auswählen und deren Eigenschaften im gleichnamigen Fenster (im der

8 24. Öffnen Sie nun die CSS-Datei. 25. Auf der linken Seite befindet sich die CSS-Gliederungsansicht. Hier können Sie schnell diverse Elemente der Stylesheet Datei suchen und finden, um sie dann im Editor zu bearbeiten. 26. Schließen sie die Datei StyleSheet.css. - 8/20 -

Hier können Sie schnell diverse Elemente der Stylesheet Datei

9 27. Jetzt werden wir Inhaltsseiten hinzufügen. Erste Aufgabe ist die Homepage. 28. Klicken Sie oben im Menü auf Website, und wählen Sie Neues Element hinzufügen. 29. Wählen Sie im sich öffnenden Dialogfenster die Vorlage Web Form. 30. Aktivieren Sie unten das Kontrollkästchen Masterseite auswählen. - 9/20 -

Klicken Sie oben im Menü auf Website, und wählen Sie Neues Element

10 31. Ein neues Fenster öffnet sich. Hier können Sie auswählen, welche Masterseite der neuen Web Form zugeordnet werden soll. In unserem Fall gibt es nur eine Masterseite, die auch bereits ausgewählt ist. Klicken Sie auf OK. - 10/20 -

11 32. Die neue Datei wird im Editor angezeigt: 33. Hier können Sie zwischen den <asp:content> Tags beliebig Inhalte hinzufügen /20 -

12 und den Text auch in der Entwurfsansicht bearbeiten. - 12/20 -

13 34. Um die Seite im Browser anzuzeigen, wählen Sie die Datei Default.aspx im Projektmappen-Explorer aus und klicken Sie dann oben im Menü auf die Schaltfläche In Browser anzeigen ( ). Die Seite wird in einem neuen Browserfenster geladen: 35. Um Einstellungen des mit Visual Web Developer Express gelieferten Web Servers anzusehen, klicken Sie unten rechts in der Start-Leiste auf das Icon Details anzeigen. Das folgende Fenster öffnet sich: und wählen Sie 36. Sobald Sie den Web Server nicht mehr benötigen, klicken Sie auf die Schaltfläche Beenden. - 13/20 -

Die Seite wird in einem neuen Browserfenster geladen: 35.

14 37. Zurück in Visual Web Developer Express ist der nächste Schritt, der Site eine Navigation hinzuzufügen. Klicken Sie auf den Eintrag Website im Hauptmenü und wählen Sie Neues Element hinzufügen. 38. Wählen Sie aus der Liste der Vorlagen Siteübersicht (auf Englisch Sitemap ) und klicken Sie auf Hinzufügen. 39. Die Sitemap wird im Texteditor angezeigt. Es ist eine XML-Datei, die wir später als Datenquelle für das Menü-Steuerelement verwenden werden. 40. Schreiben Sie folgenden Code zwischen die beiden <sitemap> Tags: <sitemapnode url= ~/Default.aspx title= Home description= > <sitemapnode url= ~/Products.aspx title= Produkte description= /> <sitemapnode url= ~/Contact.aspx title= Kontakt description= /> </sitemapnode> 41. Speichern Sie die Datei ab, und schließen Sie sie. - 14/20 -

Es ist eine XML-Datei, die wir später als Datenquelle für das Menü-Steuerelement verwenden werden. 40. Schreiben Sie folgenden Code zwischen die beiden <sitemap> Tags: <sitemapnode url= ~/Default.

15 42. Öffnen Sie erneut die Datei MasterPage.master. 43. Finden Sie das <div> Element in der Datei, das mit dem Namen menu bezeichnet ist. 44. Öffnen Sie die Toolbox auf der linken Seite, indem Sie auf den Reiter klicken. 45. Wählen Sie aus der Toolbox das SiteMapDataSource Steuerelement, und ziehen Sie es auf die geöffnete MasterPage, in das <div> Element mit der ID menu. 46. Sie können die Eigenschaften dieses Steuerelements auch im Eigenschaften-Fenster bearbeiten. In unserem Beispiel ändern wir die ID des Steuerelements auf SiteMapDS. - 15/20 -

Wählen Sie aus der Toolbox das SiteMapDataSource Steuerelement, und ziehen Sie es auf die geöffnete MasterPage, in das <div> Element mit

16 47. Wenn Sie unten auf die Entwurf Schaltfläche klicken, können Sie die SiteMapDataSource im Layout sehen. Das Steuerelement wird nur zur Entwurfszeit angezeigt, um Ihnen eine einfache Konfiguration seiner Eigenschaften zu ermöglichen. Es erscheint niemals im Browser. 48. Öffnen Sie nochmals die Toolbox auf der linken Seite. 49. Jetzt fügen wir der Seite ein Menü-Steuerelement hinzu: wählen Sie in der Toolbox das Steuerelement aus. Ziehen Sie es auf die Seite und platzieren Sie es unter dem grauen Rechteck der SiteMapDataSource. 50. Eine Fenster öffnet sich, in dem Sie das Steuerelement konfigurieren können: 51. Wählen Sie als Datenquelle SiteMapDS, die Datenquelle, die wir in Schritt 45 und 46 angelegt haben. - 16/20 -

Öffnen Sie nochmals die Toolbox auf der linken Seite. 49. Jetzt fügen wir der Seite ein Menü-Steuerelement hinzu: wählen Sie in der Toolbox das Steuerelement aus.

17 52. Kehren Sie jetzt zur Code-Ansicht zurück, indem Sie unten auf die Quelle Schaltfläche klicken. 53. Im <asp:menu> Steuerelement können Sie weitere Formatierungsschritte vornehmen. Für unsere Zwecke fügen Sie dem <asp:menu> Tag zunächst folgende Attribute hinzu: StaticDisplayLevels: 2 StaticSubMenuIndent= Um das Erscheinungsbild des Menüs anzupassen, fügen Sie folgenden Code zwischen die beiden <asp:menu> Tags ein: <StaticMenuItemStyle BackColor= #FFFFFF ForeColor= #66AA22 Font- Bold= true HorizontalPadding= 15 Height= 30 Width= 198 /> <StaticHoverStyle BackColor= #FFCC22 ForeColor= #FFFFFF /> 55. Speichern Sie die Datei MasterPage.master. 56. Wählen Sie Default.aspx Datei im Projektmappen-Explorer aus, und klicken Sie oben auf die Im Browser anzeigen Schaltfläche ( ), um das Ergebnis der bisherigen Schritte im Browser betrachten zu können. 57. Da das Menü auf den Einträgen der Datei Web.sitemap basiert, können Sie es jederzeit erweitern, indem sie der Sitemap neue Knoten hinzufügen. - 17/20 -

Um das Erscheinungsbild des Menüs anzupassen, fügen Sie folgenden Code zwischen die beiden <asp:menu> Tags ein: <StaticMenuItemStyle BackColor= #FFFFFF ForeColor= #66AA22 Font- Bold= true

18 58. Zur Demonstration werden wir die bisherige Website, auch wenn sie noch unvollständig ist, auf einen Webserver hochladen. Visual Web Developer Express bringt auch hierfür die nötigen Werkzeuge mit. 59. Klicken Sie im Projektmappen-Explorer auf den obersten Knoten. 60. Klicken Sie dann im Projektmappen-Explorer auf die Schaltfläche Website kopieren ( ). 61. Eine neues Fenster öffnet sich. 62. Klicken Sie oben auf die Schaltfläche Mit Remotesite verbinden. - 18/20 -

Klicken Sie im Projektmappen-Explorer auf den obersten Knoten. 60.

19 63. Es öffnet sich ein Fenster, wo Sie die Zugangsdaten zum externen Webserver eingeben können. - 19/20 -

20 64. Links sehen Sie die Dateien auf Ihrer Festplatte, auf der rechten Seite wird nach erfolgter Verbindung die Dateistruktur des Remoteservers angezeigt. 65. Wählen sie auf der linken Seite aus, welche Dateien auf den Remoteserver kopiert werden sollen. 66. Klicken Sie dann in der Mitte auf den Button, um die Dateien hochzuladen. - 20/20 -

Wählen sie auf der linken Seite aus, welche Dateien auf den Remoteserver kopiert

Ähnliche Dokumente

Arbeiten mit dem Outlook Add-In

Arbeiten mit dem Outlook Add-In Das Outlook Add-In ermöglicht Ihnen das Speichern von Emails im Aktenlebenslauf einer Akte. Außerdem können Sie Namen direkt aus BS in Ihre Outlook-Kontakte übernehmen sowie