All currently editable chapters are in the Working Version section. -- All finished versions are in the Finished Version section.
Please create an account and log in to start editing

From Digital Foundations

Contents 1 Download Materials For Chapter 16 2 16. Files and Servers 3 Visual References 4 Results of Chapter 16 Exercises 4.1 Exercise 1: Defining a site in Dreamweaver 4.2 Exercise 2: File and folder management

[edit] Download Materials For Chapter 16

No files were required to begin the exercises in Chapter 16; however you can download our final files to see how we completed them.

Click here for our Chapter 16 final exercise files.

[edit] 16. Files and Servers

A web page is an HTML file that is stored on a web server.

A server is a computer with software installed on it that allows it to send and receive requests for web pages.

A client is a computer running software, such as a web browser, that sends requests to the server. When you click a link on the web, your computer sends a request to the server through the web browser and the server returns the requested web page.

Each web page has its own unique address, called a Universal Resource Locator, or URL. A properly formed URL has a domain name, such as www.digital-foundations.net. URLs may include folders and file names. Folders are denoted by forward slashes, and HTML files end in .html. For example, www.digital-foundations.net/folder/file.html is a URL pointing to a file named file.html stored in a folder named folder on the server that hosts the domain digital-foundations.net. Files and folders on a server are like folders on your own computer. The difference is that anyone on the Internet can view them! One way of thinking about URLs and servers is through the metaphor of the postal mail system. An address specifies the exact location of the addressee. To do this, it takes a name, street name and number, city, state, postal code, and country. Likewise, a URL is the exact location of the file you are requesting. The domain name is like the city, state, zip and sometimes the nation, the folder is like the street address, and the file name is the addressee’s name. Everything has to be included, or the right file will not be requested.

[edit] Visual References

Artists experiment with their materials, whether they are paint, marble, photographic paper, or for Internet artists, the communication between clients and servers. In an attempt to describe their Internet artworks, MTAA (M. River & T. Whid Art Associates) created The Simple Net Art Diagram (1997). http://www.mteww.com/nad.html
The concept of the diagram is that Net Art is about communication. The art is not just the code on the server, or the aesthetic results of the code when displayed in the browser. The art happens through communication.

The artist Abe Linkoln took MTAA’s work one-step further, with the Complex Net Art Diagram, located at http://www.linkoln.net/complex/
For Linkoln, the web is a repository of found images and massive quantities of information. Notice the appropriation of Jodi’s code bomb in this work. A server is just a computer loaded with software that delivers files requested by web browsers. The artist duo Eva and Franco Mattes, who work as 0100101110101101.org, created a project called Life Sharing, where they turned their own computer into a web server, exposing their entire computer and all of its contents.

[edit] Results of Chapter 16 Exercises

The following exercises will result in two web pages that link to each other where one is saved in the root directory and the other is saved in a subdirectory.

[edit] Exercise 1: Defining a site in Dreamweaver

Choose the Designer workspace from the pull-down menu in the Application bar before working on the following exercises.

Defining a site tells Dreamweaver how to keep track of the site’s files on your local machine and how to keep them synchronized on the remote web server. If you do not define your site, you can drive yourself crazy with broken links and missing images.

1. Choose HTML from the Create New menu when Dreamweaver launches. If the Welcome Screen is disabled, use File > New > Blank Page > HTML > <none>.

2. Choose Site Menu > New Site.

3. In the New Site dialog box, use the Basic tab at the top of the box. This will make the dialog box act like an installation wizard, guiding you through the process of defining your site. On the first screen, name your site and enter its URL. The name of the site can be anything, but we tend to keep it simple. If you don't have a URL, you can leave this field blank. Click the Next button.

4. The next screen is for defining a server technology, such as PHP, that you would like to use. Don’t worry about what this means, just leave the radio button for No selected, and click the Next button.

5. Check the radio button for Edit local copies on my machine. When you edit locally, your pages are designed and coded on your hard drive before they are transmitted to the server. (It is rarely a good idea to edit directly on the server until you are more experienced.) Use the folder icon to the right of the text entry field to browse to a folder location. It will launch a window similar to the Open or Save window where you can choose or create your root folder.

The root folder is the location where all of the web files are saved. This is important because when you are ready to upload your content to the server, you will recreate the same file structure at the root directory of the web site. Here is where metaphor can be used to understand this digital idea. You have a home that is located at a particular address. The postal service delivers your mail to that address. If you are in the kitchen or the bedroom, you are positioned in some area of the house, contained within that address, so you will receive mail delivered to the address. The domain name is your address. The root folder is your home. All the files in your root folder are at home. Any folders you create inside the root folder are contained by the root and can be accessed like rooms in a house.

6. If you have a web domain and want to send files to the server, select FTP (File Transfer Protocol) from the pull-down menu that asks How do you connect to your remote server. If you do not have a domain name, use the pull-down menu to select None. Enter the FTP hostname and your assigned file directory, your FTP login (sometimes referred to as username) and FTP password. If you do not have a web server and want to set one up, we recommend our students use Lunarpages.com or Dreamhost.com because of their ease of use and customer service.

Click the Test Connection button to verify that Dreamweaver can successfully connect to your server. If you are using this in a computer lab at a school, there is a very good chance that the lab does not allow connections through this panel. If you are unable to connect in a public location, try it again at home. Click the Next button.

7. Do not enable check in and check out at this time, as you are the only person working on your own files. Click the Next button.

8. Click the Done button.

9. Look in the Files panel to view the root folder for the site you just defined. Click on the button in the top right corner to expand the view in order to see both the local (files on your hard drive) and remote (files on the server) sites.

10. If you have a domain name and entered the login information when you defined the site, clicking on the Connect to remote host button will access the server where your files are stored. If you do not have a domain name, this button will return an error message. Click the button to collapse the view so that you are only viewing the local files. If you do have access to a server, uploading files to it so that they are published on the web is as easy as dragging the files from a folder on the local side of this panel to a folder (called a directory) on the remote side.

[edit] Exercise 2: File and folder management

1. View the HTML document in Split mode. Type "Hello World" into the Design view. Highlight the text and choose Heading 1 from the Format pull-down menu in the Properties inspector. Notice that the H1 tag is added in the code.

2. Choose File > Save As to save the page with the name index.html in the root folder. You can save into the root folder in one click by using the Site Root button in the Save As dialog box. It is essential to have an index file with either an .html or .htm extension in your root directory because the browser automatically knows to load an HTML file with the index name from the root directory. Any other page that you intend to display in the browser will have to be accessed with a fully typed-out path or through a link from one of the other pages.

3. Expand the Site folder in the Files panel to see the index.html file saved in the root folder.

4. Control-click on the root folder to display the contextual menu and choose New Folder. Create a new folder called subdirectory.

5. Make a new file with File > New > HTML > <none>. Save it as page01.html inside the new folder named subdirectory.

6. The new file already has code, even though we have only opened and saved the file. Look in the code portion of the Split view. At the top there is the Document Type Declaration. This tells the browser the version of HTML used to write the file. Next is the html tag followed by the head tag. Inside the head tag we will define the title of the page. The title appears at the top of the browser. Type "chapter 16" in the title field at the top of the document. Notice the title tag nested in the head area of the code has been modified to reflect the change.

7. Type "Hello Subdirectory" on page01 in Design view.

8. Go back to the first file, index.html. If it is still open, then it is one click away on a tab in the top left area of the document window. If you closed it, double-click the file index.html from the Files panel. Add the text "click to see page one" in the body of the page by typing in Design view. Now we will create a link to page01.html from the index page. Select the text "click to see page one" in Design view and mouse over the target button on the far right of the Properties inspector, beyond the Link field. Notice the “Point to File” tool tip that results from your mouse rolling over the target button. Click on the Point to File button and drag the arrow to page01.html in the Files panel. When you release the mouse, the link will appear in the link field and in Code view as an href tag. Notice that "subdirectory/page01.html" is the path for the new link relative to the site home. Subdirectory is the name of the folder and page01.html is the file inside the folder. The slash tells the browser to look inside a directory.

9. Repeat the directions in the previous step on page01 to create a link from page01 back to index. Make the link read "click to see index" instead of "click to see page01." Notice that "../index.html" is the path for the new link. The dot-dot-slash syntax instructs the browser to move up one directory in order to find the file. On your hard drive, this means look inside the enclosing folder.

10. Remember to save all of your changes in Dreamweaver in order to see the links working in the browser. Links are not functional in Dreamweaver; clicking on a link in Dreamweaver will not open that HTML page. Either click to each page individually and use File > Save or use File > Save All to save all of the files that are open. Then test your work in a browser. Use File > Open File or drag the index file to the display area of a web browser. Notice the location area of the navigation bar (where you type or read a URL) displays the name for each file as you click between the two pages.

‘’Notice for each of the browser windows that the two pages have many differences. Index is an untitled page, while page01 has the title “Chapter 16.” Also notice the difference in the leading on the web page as a result of the H1 tag applied to the words “Hello World” on the index page.’’
11. Finally, it is a good idea for beginning web developers to commit to the names applied to files and folders. However, if you have to rename a folder or a file, Dreamweaver will prompt you to update the files that are referencing it as a link. Dreamweaver can update the code in your files to reflect the name change. We'll demonstrate this by changing the name of the folder subdirectory to subdirectory02. As soon as the name is changed (click on the word "subdirectory," pause, type in the numbers at the end of the word, then hit the Return key) click the Update button in the Dreamweaver Update Files warning dialog box.


11. Review the index page. Notice that “subdirectory” has now been changed to "subdirectory02" in the path to the link.