Objective

To become comfortable in the Dreamweaver environment by building this simple text-only web site.

Discussion

Text-only sites are ideal for designing the site architecture. Text-only sites are used for client sign-off on the content before any visual elements are added.

The best way to learn any software package is to simply start working in it. Dreamweaver is designed to do two things: (1) write code for web pages so you don't have to, and (2) help manage the files of your site. In this lesson, we will be building a 5-page web site from scratch without using templates.

Tips: (1) Use the HELP menu to get answers and to access tutorials. (2) Google your software questions (someone most likely has already posted an answer).

Another tip: When copying text from existing websites, it's best to strip out any HTML or inline CSS formatting before pasting into Dreamweaver. If you were to paste formatted text into Notepad (Windows) or TextEdit (Mac: important note), any formatting is automatically stripped out. Now you can copy just the keystrokes into Dreamweaver.

Procedure

Overview: Tell Dreamweaver the location of the files for your site. Make one web page. Copy the first page to make the other pages of your site. Note: replace bold with personalized info.

Creating the home page

1. download starter files (location: faa999/class/html/exercises/x0_dm_text)
2. launch Dreamweaver
3. site > new site: site name=class_x0_dm-text;
   local site folder=faa999/class/html/exercises/x0_dm-text); export STE file
4. window > files: RMB local root folder > new file "index.html"; open file
5. view > code and design: study code
6. copy and paste text from "index.txt" into "index.html"
7. link each item to a new page (see site map )
8. insert > HTML > horizonal rule
9. edit > select > all: insert > nav (wraparound)
10. change title of document to "Parkland College Digital Media"

Creating the inside pages

1. window > site: duplicate "index.html", rename "curriculum.html" (cmd+D)
2. open "curriculum.html"
3. copy "curriculum.txt" into "curriculum.html"
4. link "back to top" to "#"
5. select pasted text: insert > main (wraparound)
6. duplicate "curriculum.html" and make the other pages
7. insert appropriate text into each HTML file
8. format heads, unordered list (use sample site as reference)
9. file > preview in browser (opt+F12 and cmd+F12)

Adding tables from excel files

1. open "tableA.xls" in excel
2. select data to copy
3. paste table into "curriculum.html"
4. select <table>: clear col width & row height in properties
5. repeat with other excel files
6. review code to see if any additional clean up is necessary
7. test and troubleshoot your site

Grading

1. publish site (see separate lesson)
2. make a link from your process page to this assignment