Dreamweaver for Dummies Jared Covili jcovili@media.utah.edu (801) 585-5667 www.uensd.org/dummies Section 1: How The Internet Works The Basic Process Let's say that you are sitting at your computer, surfing the Web, and you get a call from a friend who says, "I just read a great article! Type in this URL and check it out! It's at http://www.uen.org/greatarticle.htm". So you type that URL in to your browser and press return. Magically, no matter where in the world that URL lives, the page pops up on your screen! At the most basic level possible, the following diagram shows the steps that brought that page to your screen: Your browser formed a connection to a Web server, requested a page and received it. If you want to get into a bit more detail, here are the basic steps that occurred behind the scenes: The browser broke the URL into 3 parts: 1. The protocol ("http") 2. The server name ("www.uen.org") 3. The file name ("index.html") The browser communicated with a name server to translate the server name "www.uen.org" into an IP Address, which it uses to connect to the server machine. The browser then formed a connection to the server at that IP address. Following the HTTP protocol, the browser sent a GET request to the server, asking for the file " http:// www.uen.org/index.html ". The server then sent the HTML text for the Web page to the browser. The browser read the HTML tags and formatted the page onto your screen.
If you've never explored this process before, that's a lot of new vocabulary. The Internet So what is "The Internet"? The Internet is a gigantic collection of millions of computers, all linked together on a computer network. The network allows all of the computers to communicate with one another. A home computer is usually linked to the Internet using a normal phone line and a modem that talks to an Internet Service Provider (ISP). A computer in a business or university has a Network Interface Card (NIC) that directly connects it to a Local Area Network (LAN) inside the business. The business then connects its LAN to an ISP using a high-speed phone line like a T1 line. A T1 line can handle approximately 1.5 million bits per second, while a normal phone line using a modem can usually handle 30,000 to 50,000 bits per second. ISPs then connect to larger ISPs, and the largest ISPs maintain fiber-optic "backbones" for an entire nation or region. Backbones around the world are connected through fiber-optic lines, undersea cables or satellite links. In this way, every computer on the Internet is connected to every other computer on the Internet. How the Web Page Works Have you ever wondered how a Web page works? Have you ever wanted to create your own Web page? Have you ever heard the word "HTML" and wondered what it means? Let's set the stage. At this moment, it is nearly guaranteed that: You have access to a computer. You have access to a Web browser, and that browser is either Netscape Navigator or Microsoft Internet Explorer. You want to learn how Web pages work, and perhaps learn the art of creating your own pages. Because you have access to a computer and a Web browser, and possess the desire to learn, you have everything you need to get started. You can create any kind of Web page you can imagine. In order to talk about Web pages and how they work, you need to understand four simple terms: Web page - A Web page is a simple text file that contains not only text, but also a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen. The tags are simple instructions that tell the Web browser how the page should look when it is displayed. The tags tell the browser to do things like change the font size or color, or arrange things in columns. The Web browser interprets these tags to decide how to format the text onto the screen. HTML - HTML stands for Hyper Text Markup Language. A "markup language" is a computer language that describes how a page should be formatted. If all you want to do is display a long string of black and white text with no formatting, then you don't need HTML. But if you want to change fonts, add colors, create headlines and embed graphics into your page, HTML is the language you use to do it. Web browser - A Web browser, like Netscape Navigator or Microsoft Internet Explorer, is a computer program (also known as a software application, or simply an application) that does two things: o A Web browser knows how to go to a Web server on the Internet and request a page, so that the browser can pull the page through the network and into your machine. o A Web browser knows how to interpret the set of HTML tags within the page in order to display the page on your screen as the page's creator intended it to be viewed. Web server - A Web server is a piece of computer software that can respond to a browser's request for a page, and deliver the page to the Web browser through the Internet. You can think of a Web server as an apartment complex, with each apartment housing someone's Web page. In order to store your page in the complex, you need to pay rent on the space. Pages that live in this complex can be displayed to and viewed by anyone all over the world. Your landlord is called your host, and your rent is usually called your hosting charge. Every day, there are millions of Web servers delivering pages to the browsers of tens of millions of people through the network we call the Internet. It is extremely easy to experiment with Web pages without using a server. Your browser can view the Web pages you create from your personal machine. Once you understand how to create your own pages, it is likely that you will want to put them "out on a server," so that people around the world can load your pages and read them. Viewing the Source Let's take a look at the "guts" of a Web page. These are the original text and HTML tags typed by the author and interpreted by the browser to produce the Web page you actually SEE on the Internet. With your mouse, right-click on any blank portion of a web page and choose "View Source." A new window appears, displaying words and characters, some of which may look pretty technical and foreign. These words and characters are, collectively, the HTML programming code you are about to learn. Each element within that code is an HTML tag. Don't be intimidated by how complex it looks -- you'll be surprised at how easy it really is. When you are done looking at the page's source code, simply close out the source page.
You can look "behind the scenes" of almost any page on the Internet this way. When you become more involved in Web designing, you'll probably find yourself viewing the sources of complicated Web pages in order to learn the codes that the authors, or page designers, used to create such interesting arrangements. Section 2: Workflow and Planning When starting a new online project there is a basic structure to the process or at least you might want to think about using one so that this project doesn t overwhelm you. Believe me, becoming overwhelmed by a project will happen before you know it unless you are following a process. The following work-flow strategies are just suggestions, so modify to meet your own needs. There are five stages of creating and sustaining a project. 1. Planning What is your objective? Who is your audience? Where is the content coming from? Why are you doing it? What are the technical specifications? What is it going to look like? How are visitors going to navigate? These questions need to be answered before you do any other work. Your answers guide you through the rest of the process. The worksheets following this page can help with this process. 2. Gathering This is the stage when you collect and organize all the content, including text, images, logos, contact info, assignments, calendars, student work etc. Taking the time to get as much of your content in a binder on your desk or folder on your desktop will speed up the building process. Doing a good job here will help prevent a stalled project while you wait for someone else to get you files. 3. Building Here is where we get down to work to build the web site, and Dreamweaver makes our work much easier. Most likely the greatest portion of the time spent on the project will be during this phase. 4. Transferring The easiest part. Make all your work available for the world to see. The most common method of transferring your project to a Web server (host) is FTP. Dreamweaver can also handle this for us. 5. Updating Keep your site current. There are some projects that may not ever need new information, but most sites benefit from current and regular updates. Section 3: Getting Started Managing your site is a big challenge. It becomes difficult to keep track of all of your files, graphics and their locations especially as you put your site on a web server. Dreamweaver has a site-management feature that requires you to create and keep all of your files in one main root folder on your hard-drive so you can easily duplicate the folder structure on a web server. This helps keep all of your links working and avoids broken graphics. The first step in allowing Dreamweaver to help manage your site is to Define a New Site. This means telling Dreamweaver you are starting a new site, giving it a name, identifying a local root folder, and Identifying a Remote root folder. Once this is done Dreamweaver helps manage all your files on the local machine and on the server. Defining a New Site 1. Create a new folder on your desktop. Name it something like joe_teacher_root". This is where you store all the files for your website. 2. Start Dreamweaver. 3. Select the Expand button in the Site panel on the right. This expands the Site panel and makes it easier to work with. 4. Click on the Site drop down menu and select New Site
. 5. Select the Advanced tab. Enter a Site Name. This name is for your eyes only. 6. Select Local Info. This is where you tell DW where to store all your files locally--local Root Folder. This is where all the files for this site are stored on the local computer. You already created a folder on the desktop. To tell DW where it is click the yellow folder icon on the right. Leave the rest of the boxes empty at this time. Building the Root Structure Adding Folders and Files The site root is the folder (directory) that contains all the files that make up a site. All of these files could be in the root level (upper most level) of the site root, but organizing some of the files into subfolders makes it easier for you to locate and manage the files as the site grows By creating a structure and dividing the files into corresponding subfolders, you can access the files quickly when you need to make revisions or changes. You, the developer, determine the actual structure and names of the folders. The design of the structure is flexible and you can arrange it in any method that you desire, as long as you adhere to the following conventions: The index page must be in the root (upper most level) of your root folder. All files used in the site and subfolders that may contain those files must be located within the root folder. All folder names must follow standard naming conventions, containing no special characters (special characters include spaces, slashes, apostrophes, etc.). As with files, no two folders in the same place can have identical names. Library and Template folders must remain in the root level of the local root folder. They should not be renamed or moved as that would cause them to not function properly. Organization and preplanning allows you to save the files into the correct folder as you create them. Saving files into a predetermined location reduces the chance of having to move the file after it has been linked to other files. Dreamweaver can update links if you move them in the site window, but saving files in the right place first is best. Defining a site structure at the beginning of a project can increase productivity and simplify the entire process.
Creating a directory structure to organize the files has many benefits, including quick retrieval, the ability to repurpose files, improved efficiency and clarification that makes the site easier for other developers to understand. Steps 1. Locate the Site Panel. It is usually on the left side with in the Files Panel. You should see the root folder that you defined at the top. Before building in Dreamweaver draw a diagram or organizational chart of the pages within the site as well as how you will link them. 2. After defining the site and using the teacher sample files, the site panel should show the files and folders that are already in the root folder. The next step is to add the eight HTML files from the above diagram to the site. Start by selecting the folder the files will go inside. Then right click the mouse. 3. Select New File from this menu. Each page within a site is a single HTML file.
4. Name this first one Index.html. The file must have the extension.html or.htm for it to be a valid webpage. 5. Now add the other seven html files the same way and in the same place. Check to make sure they all have the.html or.htm extension. If they don't, add it to them now. Also add the Index.html page. This is the homepage or the page you want people to see first when they come to your site. 6. As the site grows and the number and types of files increase, it is a good idea to organize the root folder. Creating subfolders to hold similar types of files is recommended. To do this Select the top folder, then right click. From the pop out menu Select New Folder. 7. The name of this folder should describe what it contains. This folder holds all the html files or pages except the index. So name the folder "pages". Folders do not need file extensions, just the name. 8. Now move all the html files, except the index, into the pages folder. Do this by clicking and dragging each file onto the pages folder. When the file is inside of a subfolder it will be indented. The index.html is a special case. It is designated as the home page or the first page visitors should see. To make sure visitors see this page first it needs to be "at the root level" which means inside the root folder but not inside any other folders. The main pages are now within the root folder and it is time to start laying out the pages. You may want to add one more html file and name it something like mock up or scratch and then use this file to design on. Section 4: Introduction to Dreamweaver MX What is DreamWeaver? Dreamweaver is a professional web page editor or sometimes called a WYSIWYG (What You See Is What You Get) HTML editor. As you create a web page, Dreamweaver shows the results instantly. In comparison, if you hand code HTML you need to work in a text editor, save your work, and open a browser to see the results of the change. Dreamweaver is a word processor of web pages. This new version "MX" is the latest offering from Macromedia of their web page editor which has become the standard for professionals and beginners alike. Probably the biggest change comes in the Panels. In version 4 all the action panels floated, which meant they could get behind each other and turned off accidentally. Also it seemed like you had to continually move them out of the way. In MX all the Panels come "docked", meaning they are locked in place along the
left side of the program and are accessed and managed through expanding and compressing individual panels. As you will see this greatly improves the usability of all the complex menus that are on these panels. There are a few other changes and improvements but for the general user the panel system is the biggest difference. Dreamweaver's User Interface The User Interface is a fancy name for how a program is laid out for the user to use. Below is the standard "User Interface". Let's take a look at the individual parts. The Insert Panel This is the default look for this panel. Each tab has a different set of buttons to perform the most used actions. The "Common" is at the front because it is the most heavily used. All actions performed by these buttons can be done at least one other way. For example; inserting a table can be done using the table button on this panel, using the Insert drop down menu, or using a keyboard short cut, so choose the best method for you. The buttons on this panel appear without labels by default. Dreamweaver gives a lot of options when it comes to customizing, one of which is the ability to have labels show for each button. The Properties Panel The Properties panel is the most important panel of all. This panel changes depending on what is selected in the document window. Once you select an object, this panel reflects all its editable properties. Note: For some objects this panel includes a lower half that shows additional properties. Always keep this panel fully open. There is a small white triangle in the lower right corner, click on it to expand the panel.
Modifying Page Properties To change the background color as well as other attributes of your page use the Page Properties window. Some of the attributes you can change are background color, text and link colors. 1. Select Modify > Page Properties 2. Move the Page Properties window around so you can see part of your Document Window behind. 3. Click on the small box to the right of the word Background. A color palette will open up. 4. Click on a color pixel. This will change your background color to be the selected color. Click Apply to preview the change. Click OK if you are finished making changes in the Page Properties window. You can do the same process for Text Color, Links, Visited Links, and Active Links. 5. Another way to pick a color is to match a color using the eyedropper. Instead of picking a color from the palette you can match the color of anything on your document window or pallets. Most likely you will be trying to match a color within a graphic. When the color palette comes up move your mouse over the item that has the color you would like to match. Make sure that your cursor is an Eye Dropper. Click on the object with the matching color. The property color box should turn the same color as the matching item. Click Apply to see the results. 6. You can use the hexadecimal value for a color instead of using the color palette. Type in the number (#3333FF for bright blue) in the box next to the property color you would like to change.
7. Save your work. NOTE: All the colors shown in the Initial Color Palette are web safe colors. When you pick a color that is outside the palette you run a risk of having the color look different between different browsers. Creating and Modifying Tables There are times when you want to use a table instead of a layer, like when you are doing a calendar or a table showing teacher s names and email addresses. Let s learn how to create a table: 1. Click on the Insert Table button in the Object Palette or choose Insert > Table from the top pull down menu. 2. The Insert Table dialog box appears. Fill in the appropriate information to create your table. 3. A table should appear on your page with the amount of rows and columns you specified in the dialog box. 4. You can merge cells to create one larger cell. To do this, select cells you would like to merge by clicking inside the cell and dragging it through all of the cells you would like to merge. 5. Choose Modify > Table > Merge Cells or click on the Merge Cell button in the Property Inspector. This will result in all of the selected cells becoming one cell. 6. Add another row by clicking in a cell and going to Modify > Table > Insert Row a new row will be inserted above the cell where you put your cursor. 7. You can delete a column or row just as easily. Select the row you want to delete. Go to Modify > Table > Delete Row. 8. To add text in your table. Click in the cell you want to add text to and begin typing. You can format the text the same way you would outside of a table. 9. To add an image to your table click in the cell where you want to insert the image and go to Insert > Image. 10. You can adjust the column and row widths by moving your cursor to the boarder of the column or row you want to adjust. Wait for your cursor to change to a double arrow and then click and drag the line to the width or height that you want. 11. You have just created a table. There are several other table options, but these are the basics. The best thing to do is get in and experiment with them to see what you can do. TIP: There are two types of tables, Percentage-based tables and Pixel-based tables. A Percentagebased table will stretch with the width of the browser. This means that the size of the table depends on the size of the browser. The table changes size to fill up the specified % of the screen. A Pixelbased table is a fixed size no matter how small or large the browser becomes. What type of table to use is solely dependent on look you want for your page layout. Creating Links The ability to link pages with hyper links is what makes the web such a powerful tool. You can make text or images a link. 1. Select the image or text you wish to make a link. 2. If you want to link to an html file that is within your site, click on the small yellow folder next to the Link text box in the Properties Inspector window.
3. The Select HTML File window pops up. Browse to the html file location on your computer. Click on the file name and click the Select button. You have just created a relative link or internal link. It is relative because it linked to the document within the site and not to an external web site 4. If you want to create a link to an external web site, select the image or text you wish to make a link. 5. Type the web address (http://www.uen.org) into the link option in the Properties Inspector window. Notice that if you are creating a text link, the text color changes. You have just created an Absolute link or external link. It is absolute because it starts with http:// and includes the full address. 6. To preview and test your page in a web browser. Go to File > Preview in Browser > select a browser or Press F12. Depending on what your default browser is set for you may see your page in Netscape or Internet Explorer. 7. Make an email address link selecting the text and in the Properties Inspector type mailto:address@somewhere in the Link field or click the email link button common Object Palette. Type in the text you want to be a link and the email address. from the