Building a Simple Web Page in Adobe Dreamweaver

Overview

• Create a simple webpage using Adobe Dreamweaver.
• Project: Create a website called "Cool Drives" featuring a driving location (Valley of the Gods).
• Background: Prior coding knowledge from KH Academy recommended.
• Discussion: Relevance of Dreamweaver in 2024 compared to online builders; understanding the Box model is crucial.

Initial Setup

• Dreamweaver Introduction: Learn basic navigation and setup a new site.
• File Structure: Organize files in folders for CSS (stylesheets) and images.
• Creating a Site: Define a new site, create a folder, set up the directory for files.

Building the Webpage

Setting the Background and Header

• Background Color: Set using hex color #f7f3e8.
• Inserting Header: Use header tag, style it to span across the page.
• Styling Header:
  • Width: 1200px
  • Height: 120px
  • Centered with margin: auto
  • Set background color (a cool blue).

Creating and Styling Navigation

• Add Navigation: Use nav tag with unordered list.
• Menu Items: Home, About Us, Cool Drives, Contact.
• CSS Styling:
  • Remove list bullets.
  • Display menu items as inline-block.
  • Background color: transparent white with alpha for hover effects.
  • Text styles and padding for button appearance.
• Positioning: Float logo and nav bar, adjust margins for alignment.

Main Content Section

• Main Section Configuration: Width 1200px, centered with background color white.
• Hero Section:
  • Use a section with ID hero and a hero image.
  • Insert image using Photoshop to size (1200x400px).
  • Add H2 and paragraph for tagline.
  • Adjust padding and text styles.

Location Information

• Adding Content:
  • Use article and aside tags.
  • Insert H1 for title, paragraphs for content (text sourced from Wikipedia).
  • Insert Google Maps iframe in aside for location.
• Styling:
  • Set widths (article 600px, aside 540px).
  • Clearfix added to prevent box collapse.
  • Adjust padding around content.

Footer

• Footer Setup:
  • Define footer at the end with specific width and height.
  • Style using background color darker than main content.
  • Center the footer and adjust padding.
• Content:
  • Insert paragraph for copyright information, including links to resources and design credit.

Preview and Adjustments

• Previewing Website: Use browser preview for real-time updates.
• Final Adjustments:
  • Ensure margins and paddings are correctly set.
  • Validate links and hover effects.

Conclusion

• Reflection on Dreamweaver: Facilitates visual design with CSS and HTML.
• Skills Utilized: Integration of coding and design in building a web page.
• Encouragement: Apply these skills to create your own web pages.