Step 2

1. Main Site Root Folder

The Site Root Folder is key to your project's success.

Computers are very sensitive to the placement of files. Every time you link a file to an HTML page, code is written identifying the location of that file on your web page. If the file is later moved, the computer will not find the linked file and some of your web page will not function.

For these reasons, please commit to keeping the Main Site Root Folder in one place and never moving it. It can be saved to any form of storage, as long as Dreamweaver can easily see the folder when it opens. I suggest a flash drive. It is also very wise practice to backup this folder on another form of storage in case the original is lost. (You do not want to build your site over from scratch!)

Next, if you are using the SVSU Lab Computers every time you turn on Dreamweaver, you will have to identify where the Site Root Folder is. I have named the Site Root Folder we are using for the Work Site, the Main Site Root Folder.

To explain to Dreamweaver where the folder is, follow these steps…
  1. Go to the drag down menu, Sites
  2. Choose Manage Sites…
  3. In the lower right corner, click on New Site
  4. Give the Site a Name (I suggest MSRF, for Main Site Root Folder)
  5. Click on the small folder icon, across from the words "Local Site Folder"
  6. Then click on Save

Again, if you will be using the SVSU Lab Computers, this will have to be done at the start of every class. If you are using your own computer, it will remember these settings and you will only have to enter this once.

As stated before, please do not move the placement of the Main Site Root Folder. The same applies to any items that should be stored in your Main Site Root Folder. For example, you cannot keep your index.html (home page) on one flash drive, outside of your Main Site Root Folder. That is because the computer will have a very difficult time locating them outside of the Main Site Root Folder.

Also, even if Dreamweaver could find a rouge file outside of the Main Site Root Folder, it would not be able to share the file with the rest of the world when the website is published. If however, you keep the proper files in their correct location and structure, you will have an easy time publishing your site for the world to see.

2. HTML Sandwich

Modern HTML documents are structured to enhance both accessibility and search engine optimization.

The basic structure remains as follows:
  1. Doctype Declaration: <!DOCTYPE html> indicates that the document is HTML5.
  2. HTML Element: <html></html> wraps the entire document.
  3. Head Element <head></head> contains meta-information, links to stylesheets, and scripts.
  4. Body Element: <body></body> includes the content visible to users.

It's important to incorporate semantic elements within the body to define different parts of your webpage meaningfully, such as `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`. These elements help improve the accessibility and structure of your content, making it more comprehensible to both users and search engines.

3. HTML Structure and Content

HTML uses a combination of elements (tags) to structure web content.

Semantic elements should be used to define the structure of your webpage:
  • Content Elements:
    • Text, images, and multimedia.
  • Structural Elements:
    • Semantic tags like `<header>`, `<main>`, `<footer>`, `<article>`, `<section>`, and `<aside>` organize content meaningfully. </aside>
  • Identifiers:
    • Use `class` for elements that appear multiple times on a page and `id` for unique elements.
  • Tags: Define the start and end of an element. For example, `<p>` for paragraphs, `<a>` for links, and `<div>` for divisions or sections.

With the advent of HTML5, it's encouraged to use these semantic elements over non-semantic ones like `<div>` for every section, as they offer better accessibility and are more SEO-friendly.

 

4. CSS = Style

CSS (Cascading Style Sheets) defines the look and layout of a web page.

Modern CSS practices have evolved to include responsive design techniques and new layout models like Flexbox and CSS Grid, alongside traditional methods. Here’s an updated approach:
  1. External Stylesheets: Linking a separate `.css` file is the most efficient way to style your website, allowing for the separation of content and design.
  2. Embedded CSS: Placing CSS directly within the `<head>` section using `<style>` tags is suitable for single-page styles.
  3. Inline CSS: Applying styles directly to elements via the `style` attribute is least efficient but can be useful for quick, specific adjustments.

    For layout and structure:
  • Use Flexbox for one-dimensional layouts (either rows or columns)
  • Use CSS Grid for two-dimensional layouts (rows and columns simultaneously).
  • Adopt Responsive Design practices with media queries and relative units (e.g., percentages, vw, vh) to ensure your website adapts to different screen sizes and devices.

    Common CSS properties include:
  • `display: flex;` or `display: grid;` for layout.
  • `width`, `height`: Use relative units for flexibility.
  • `padding`, `margin`: Control spacing around and within elements.
  • `border`: Defines the border around elements.
  • `background-color`, `background-image`: Set the background of elements.
  • `max-width`, `max-height`: Limit the size of elements, useful for responsive design.

5. Advanced CSS Techniques

Flexbox is a CSS layout model designed for one-dimensional layouts, meaning it can efficiently manage layouts in either a row or column direction but not both simultaneously.

It's particularly useful for aligning items within a container, even when their sizes are unknown or dynamic. A key feature of Flexbox is its ability to distribute space between items unevenly and align items vertically within a container, which was difficult with older techniques like float. It's important to note that Flexbox properties are applied to a parent container, turning it into a flex container, and its direct children become flex items. Flexbox does not work with float, as float is ignored within a flex container.

CSS Grid is a two-dimensional layout system capable of handling both rows and columns simultaneously, making it ideal for creating complex web layouts. Grid allows for the definition of templates, placing items into the layout, and aligning them with precision. Like Flexbox, Grid operates on a parent container, which is designated as a grid container. The children of this container then become grid items. Grid provides more control over layout than Flexbox, making it better suited for larger, more complex layouts. Similar to Flexbox, float has no effect on grid items within a grid container.

HTML and CSS Examples:

For Flexbox: < div class="flex-container"> < div class="flex-item">Item 1</div> < div class="flex-item">Item 2</div> < div class="flex-item">Item 3</div> </div>

.flex-container { display: flex; /* Designates this div as a flex container */ justify-content: space-around; /* Distributes space around items */ }

.flex-item { width: 100px; /* Sets width for each item */ margin: 10px; /* Sets margin around each item */ }

In this example, the .flex-container class is assigned display: flex;, turning it into a flex container. Each .flex-item becomes a flex item. This setup demonstrates that the container itself must be designated as flex to arrange its children accordingly, and it highlights how flex properties replace the need for float.

For CSS Grid: <div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> </div>

.grid-container { display: grid; /* Designates this div as a grid container */ grid-template-columns: repeat(3, 1fr); /* Creates three columns of equal width */ gap: 10px; /* Sets the gap between grid items */ }

.grid-item { padding: 20px; /* Sets padding inside each item */ }

In the grid example, the .grid-container class uses display: grid; to establish a grid layout, with grid-template-columns defining how many columns there are and their sizes. This showcases the necessity of defining a parent container as a grid to utilize grid layout features effectively, underscoring that float is irrelevant for items within a grid container.

Both examples illustrate the crucial point that Flexbox and Grid layouts require a parent container to be explicitly defined as flex or grid, respectively. This parent container then influences the layout and alignment of its direct children, bypassing the need for float and ensuring a more structured and responsive design.