Creating Your First Webpage in Adobe Dreamweaver
1. HTML Basics and Structure
1.1 HTML Document Structure
A standard HTML document consists of the following sections:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple webpage created in Dreamweaver.</p>
</body>
</html>
1.2 Common HTML Tags
- Headings:
<h1>to<h6>define heading sizes. - Paragraphs:
<p>defines text blocks. - Links:
<a href="URL">creates hyperlinks. - Images:
<img src="image.jpg" alt="description">embeds images. - Lists:
<ul>(unordered) and<ol>(ordered) create structured lists. - Forms:
<form>collects user data.
1.3 HTML Attributes
Attributes modify HTML tags. Example:
<a href="https://example.com" target="_blank">Visit Example</a>
2. Introduction to CSS: Styling HTML Elements
2.1 CSS Syntax
CSS consists of selectors and declarations:
p {
color: blue;
font-size: 16px;
}
2.2 Ways to Apply CSS
- External CSS: A separate .css file for better organization.
- Internal CSS: Defined in the
<head>section. - Inline CSS: Applied directly to an HTML element.
2.3 Example of Internal CSS
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #0055a5;
}
</style>
3. Creating a Simple Webpage in Dreamweaver
3.1 Creating a New File
- ✔ Open Dreamweaver and click File > New.
- ✔ Select HTML as the document type.
- ✔ Click Create.
3.2 Adding HTML Structure
Switch to Code View and enter the basic structure shown in section 1.1.
3.3 Styling with CSS
Switch back to Code View and add the CSS styles from section 2.3.
3.4 Previewing Your Page
- ✔ Click File > Preview in Browser to view your page.
- ✔ Ensure fonts, colors, and structure are displayed correctly.
4. Using Dreamweaver’s Visual Design Mode
- ✔ Drag and drop elements like text, images, and tables without touching HTML.
- ✔ Dreamweaver automatically generates HTML and CSS.
- ✔ Use Live View to test responsive designs in real-time.
5. Key Takeaways
- ✔ HTML structures webpages using tags like
<h1>,<p>, and<a>. - ✔ CSS enhances design with colors, fonts, and layouts.
- ✔ Dreamweaver provides both code and visual editing tools.
- ✔ Previewing ensures compatibility across different browsers.
Ready to build your own website? Click here to explore more Dreamweaver tutorials and resources.