imd create a home page for this course

The point of this exercise

All web pages are simply text files, regardless of the program used to create the web pages.

Web browsers interpret the lines of HTML and CSS codes as they appear in the file.

A specific syntax must be followed to use HTML and CSS codes correctly.

Most HTML codes must appear in pairs—an opening component and a matching closing component.

Web pages typically exist as two copies of the same file: one copy is on the originating computer where the file was created and another copy exists on the destination web server where the file can be accessed by users through their web browser programs.

Images are not embedded within web pages; images are separate files that are referenced (as text links) using HTML code on the web page.

Lessons learned: web pages are HTML file types, web pages are all text, images are linked to web pages, CSS is used to modify the HTML, text and images can be placed on two different layers (and, of course, side by side, web pages have specific dimensions that can be addressed in terms of pixels or proportional using percentages, you'll see the exercises we'll complete throughout this course.

Create a home page for this course
...using a table-based layout

Companion pages in design concepts: layout and grid.

We'll start out with tables and later develop CSS-based layouts that are built around divs instead of tables. As a web designer, you will likely inherit "old" sites that rely completely on tables for layout. It is common for current designs to employ a combination of tables and divs. Eventually, your longer-term goal should be to aspire to building completely table-free, div-based layouts. First, make a folder on your removable storage device. Give it the name of "art307". This is your local web folder.
Three things to start every web page.
1. Open Dreamweaver:
  File menu >
  New... >
  Blank Page with these settings:
  Page type: HTML,
  Layout: None,
  Doctype: XHTML Transitional 1.0 >
  Click Create.
2. Save your file inside your local web folder—for your home page, you must use the exact name:
  
  index.html
  
  ...entered with no quotes, as all lower case, no spaces, and with .html as the file extension. The file name "index.html" is standard file name that informs the file server that this is the home page for this particular web directory.
3. Give your web page a title. One of the first things to do is to enter the title for the page. Replace "Untitled Document" with something descriptive for your course home page. It's important to realize the page title is different than the file name.
  
  This would be a good time for us to explore the Dreamweaver program interface, using our blank page.
Create a layout using a table.
To control the layout on a page, we need some tools.
1. Insert menu > Table > Rows: 10, Columns: 3, Width: 80%, Cell padding:4, Border: 1, all other settings leave blank.
2. Place text content, copying the content from this page.
3. Merge cells to achieve the layout needed for this page design. Use the merge button that appears in the properties bar when a table is selected on a web page:
4. Merge three cells in the first, seventh, and ninth rows to make a single large cell that will function as an outdent over the text below. At this point, your web page should look something like this:
Add text within your table cells.
Now you're ready to place content into the respective cells within the table layout. Using the sample page, copy and paste the text content into the respective cells within the table layout.
Add structure to your text.
Define the most important text on your page as HTML headings.
Properties palette > HTML panel > Heading 1 and Heading 2. We'll use headers and bulleted lists to get acquainted with the concept of content-structure-presentation.
Preview your file by saving it and then opening it with a browser program.
File > Preview in Browser... > choose a browser from the list
Tweak. Preview. Repeat. For each revision of content that you make to your web page, you must save the web page in Dreamweaver and reload the page in a web browser in order to view the changes.

This will be our web development cycle for developing web sites

Our web development cycle