Create, code, edit, and manage responsive HTML websites that look amazing on any size screen with Adobe Dreamweaver.
![]()
Adobe Dreamweaver I – Part I.IntroductionAdobe’s Dreamweaver is a “What You See is What You Get” (“ WYSIWYG”) web design program. Dreamweaver allows you to build a complete Web site from scratch without having to write much (if any). This makes it possible for non-coders to create web content.Dreamweaver replaced Adobe’s GoLive software when Adobe acquired Macromedia in 2005. At the time of this writing, the most current version of Dreamweaver is CS3.
CS3 allows you to use Spry widgets and data fields: dynamic, reusable elements that can interact with the user or with a database. CS3 also offers tighter integration with and better support of.This workshop covers the basics of Dreamweaver: how to add content and set up a preliminary page layout. We mention the value of Styles and Templates (and occasionally cover them in class if there is time), but we leave alone the Spry framework, Data sets, and several other advanced features. We do, however, provide that may be useful in these regards.You are highly encouraged to review the materials from the before continuing with this workshop. What is Dreamweaver?“So really, what is Dreamweaver?”The common (mis)conception with Dreamweaver is that Dreamweaver is designed to or is even capable of completely removing the agency of and coding from web design. This is like saying that a nail-gun can completely replace a hammer.
A nail-gun will nail the boards together, but it is an imprecise tool, and there is a certain amount of danger while using it. If you can’t occasionally fall back on the hammer for more detail-oriented work, then there’s a definite limit to what you can build.
A skilled carpenter knows how to use the hammer and occasionally does so when the nail-gun just isn’t doing what is intended.Dreamweaver, like the nail-gun, is designed to make your life easier. You may never learn HTML or CSS, but without knowing them, you are limited to Dreamweaver’s way of doing things.
This is not altogether a bad thing: it is simply a slightly narrow perspective on a large field. Extolling the Virtues. Writing ContentHTML can be cumbersome. Dreamweaver writes (for the most part) good, valid HTML using an easy point-and-click interface. Managing FilesUnless you are using a scripting language like, managing a large site with many pages and files can quickly become a mess. Dreamweaver has built-in dependency tracking that will automatically manage your files and will update your pages accordingly.
Many people use Dreamweaver just for its built-in synchronization tool. Preliminary Page LayoutDreamweaver has good tools to assist you in laying out your site. There are also a lot of “pre-fab” layouts and templates available as starting points in Dreamweaver CS3.Dreamweaver’s layout features are, however, somewhat limiting. Some designs are simply impossible to achieve using the built-in layout tools. In these cases, you can go in and manually edit the HTML and CSS that Dreamweaver produces to tweak to exactly what you need.What Isn’t Dreamweaver?Dreamweaver is not designed to completely remove the agency of HTML and CSS: it is meant to assist you with your HTML and CSS and to make some of the more mundane aspects of Web Publishing less terrible.That said, however, it is definitely possible to get a very decent-looking Web site up quickly and easily using Dreamweaver without ever learning a bit of HTML or CSS. Barring knowledge of HTML and CSS, however, you will be limited in your ability to make your site very customized or very easy to maintain. Setting Up SitesA Web Page is an element of a Site.
Dreamweaver allows you to put all your web page files together for easy access and editing. It will help you create a new folder in which all the files will be located and referenced from.It is important that you review the page from the Web Publishing at the UW online curriculum. In particular, it will tell you how to activate your web publishing services if you have not done so already. It also covers which server you’ll connect to (e.g. Dante or Homer) and which folder on that server you’ll put your Site in (e.g. Publichtml or studenthtml).
Getting StartedThis tutorial is designed for students, staff, and faculty of the University of Washington, but can be used to work with any similar web host server.The first step is to create the Site. There are two methods to do this.
One method is at the Splash Page and the other method is from the Menu:. MenuSelect the ‘Site’ menu and select ‘Manage Site’, when the dialog box appears select ‘New’.Whichever method you used, you should be at the same point and from here all the steps will be the same.Settings Part 1Now give your web site a name.
This name is arbitrary and will not be seen by anyone else other than those working on it. It is generally a good idea to name your site in a way that describes what your site will be about.After giving your site a name, input the URL you will be using. The URL is the address that you type in to access your site from the web. (Note: MX 2004 users will have to click the advanced tab at the top of the dialog box to input the URL.)When you are finished select the ‘Next’ button to continue. Settings Part 2The next screen asks if you want to enable server technologies. Server technologies are usually for specific scripts like PHP, MySQL, Perl, etc.
Unless you know what these are and intend to use them on your site, you should avoid them and select No. Click ‘Next’.
Settings Part 3Now you have 2 options for where you want to work on your web site:. Edit local copies on my machineThis is the first option and the recommended option. What it means is that your documents will be stored on the local computer to begin with and they will not be uploaded to the web server until you decide to. This is the recommended setting.
Edit directly on serverThis is the second option. Working off the server means that you are saving your data directly to the server removing the need to upload, but depending how you have it set up, your documents might be displayed live on the web. If chose to work locally, below you will have to specify what directory you want to use.Select ‘Next’ to continue.
Settings Part 4Here we can setup our connection to the web server. The values that are used here a designed to be used by University of Washington students, staff, and faculty. If you have a different web server that you want to connect to contact your web host to find out what those values are.(Note that your values for hostname and folder may well differ from what is depicted in the screen shot.)The first drop down menu lets you choose how you want to connect to the server. Click the drop down menu and select FTP. FTP stands for File Transfer Protocol and is the method to connect to your server account with your UWNetID.Essentially Dreamweaver acts like an FTP (or in our case an SFTP program) to connect to your UW file space and put files into your web site’s folder on your Dante or Homer account. Which server you connect to and which folder you select to put your Site into are covered on the page of the Web Publishing at the UW online curriculum. The server is usually either dante.u.washington.edu or homer.u.washington.edu.In the next field, “hostname”, you will choose where on your server you want to save the document when you do upload it.
Just like above there are different naming conventions to use when using different servers. Again, this is covered on the page of the Web Publishing at the UW online curriculum. This field is usually either publichtml or studenthtml.Now in the ‘FTP login:’ field you want to enter your UWNetID as the username.Just below that enter your UWNetID password.
Only leave the “Save” checkbox selected so that you will not have to re-enter your password when you upload and download your files from the server.Then MAKE SURE YOU CHECK “USE SECURE FTP” (SFTP). The UW servers are encrypted and you must use some Secure FTP connection in order for them to work correctly.Now click ‘Test Connection’. You should get confirmation if you connected successfully. If not carefully check your steps, make sure words are capitalized or not where appropriate. If you are still having difficulties connecting and have checked your settings, you should contact your host to ensure you have the proper connection information. You could also send an email to Catalyst for a fast response via email.
Please see the bottom of the for the email address.When you are finished, click ‘Next’. Settings Part 5The next page is about checking in and checking out. This tells Dreamweaver to treat the files on your Site like library books. When you open a file for editing it is “checked out” and nobody else can edit it until you close it or “check it in.” This is useful if there may be more than one person working on the Site at once as it prevents two people from editing files at the same time. All Together NowHere all your settings are shown. If you are not satisfied with your settings, simply click the back button to redo that step that you want to change. When you are done click ‘Done’.Now you are ready to start creating pages for your web site!
Getting StartedMuch of the difficulty in using a program like Dreamweaver comes from understanding how the program breaks down the project into logical units. This page describes the “philosophy” of Dreamweaver and how to problem-solve in its mindset. Paragraph BlocksDreamweaver breaks down your content into several logical “building blocks” — units that group common things together. You are already using the biggest logical unit — the Site.A Site houses one or more Pages.
These pages house one more Layers which in turn house one or more Paragraph Blocks. The Paragraph Blocks then contain the actual content: the actual text and images.The following schematic to the right shows how these different entities are related.We will go over how to create pages later on this page.
![]()
Discussion of layers is covered in and discussion of Paragraph Blocks can be found in the section. FilesWhen you navigate to for example, what is it showing you? Surely the code and images that make up the Google home page must be in some files somewhere, right?In fact, what you are being shown is a file called index.html on the google.com server. Try it out — go to and see that what it shows you is in fact the same.There are two things to take away from this example:. Pages on Web Sites are just filesAll the pages on web sites are in fact simply files.
In the same way that word processors typically create.doc files, Dreamweaver creates.html files for your Pages.(Some sites do not have a separate file for every page as in the case where the contents are dynamic, but that needn’t concern us at this point.). index.html is assumedWhen you ask for you’re not requesting any particular file: you’re requesting a folder, namely /. If we had been requesting a file (and not a folder), then the address would be something like that slashes in a URL indicate folders in the same way that they indicate folders on your computer.)More on index.htmlRecall that if you have a folder of Word documents on your desktop, the folder itself doesn’t have the text of your term paper as its contents.
Rather, the text of your paper is actually the content of a file within the folder.So when you go to an address ending with a /, why do we see text and images instead of a list of files? The answer is subtle but important:Tip: I f the web server receives a request for a folder instead of a file, it assumes that the requester wanted a file in that folder called.index.html.
If the web server receives a request for a folder instead of a file, it assumes that the requester wanted a file in that folder called.index.html.So what if there is no index.html file in a folder? In this case, the web server does what your computer does — it gives a listing of all the files in that folder!CAUTION: If you don’t want visitors to be able to see a listing of all the files in one of your site’s folders, you should put an.index.html. file in that folder. This file can be blank, but it must be there to prevent the server from listing all the files in the directory.So there is this special file called “index.html” inside most of the folders on web sites. This file might better be called homepage.html or landingpage.html as those names more accurately describe what contents typically reside in an index.html file, but the name is special and means something to the server.Next we’ll talk about the Dreamweaver interface and how to get comfortable with its many tools and dialogue boxes. The Interface Creating a New FileTo get started with the Dreamweaver interface, go to File New and select HTML.
The newest version of Dreamweaver, CS3, has default Layouts which can help you set up the most common web designs quickly, but for now we’ll just be working on a bare, no-Layout file.One of the best features about the Dreamweaver interface is that it can be customized to how you like: palettes can be moved, reordered, and even changed into toolbars. Dreamweaver likes to call interface configurations Workspaces.The screenshots below were taken of the “default” Dreamweaver interface. You can revert to this default interface at any time by going to Window Workspace Layout Default. The Design ViewThe most prominent aspect of the Dreamweaver interface is the large Design View:The Design View shows you a live, “What You See is What You Get” preview of your current document.
This view hides the HTML and CSS and only shows you what your visitors will see. This is how most people prefer to work on their Site: if you modify the HTML of the site by hand, the Design View is updated almost immediately to reflect those changes, and vice-versa.Be warned, however, that the Design View isn’t a perfect rendition of your page. In most cases it does a very good job of displaying your page the same way a web browser will, but there are some cases where it fails miserably to figure out how the web page “really” looks. If you are importing an existing layout into Dreamweaver or if your page gets very complicated, you should be sure to check your site in a real browser to ensure things appear they way you are expecting. We will come back to this idea later.
Above the Design ViewBetween the Design View and the Insert Window is a small set of commonly-used tools:The far-left series of buttons, “Code”, “Split”, and “Design” allow you to toggle between ways of showing the HTML source code. The most interesting is the “Split” view which shows both the HTML and the design view simultaneously, allowing you to see how changes in the content affect the HTML and vice-versa.The middle text box (with the text “Untitled Document” in the screenshot) is the document’s Title. The Title will be visible in the browser’s title bar. The right image has the Title “Welcome to MyUW”:The green and blue arrows allow you to quickly Get and Put (upload and download) the current document to/from the server. More information on transferring files will be given in the section.The globe icon allows you preview your document in a real web browser.
As mentioned, Dreamweaver’s Design View isn’t always the most accurate rendition of your page. It is wise to preview your document in a web browser (or several web browsers as they don’t always render code the same way) after every major design change.The other buttons on this toolbar are not pertinent to this curricula. The Insert WindowThe Insert Window allows you to insert common elements into your pages simply by clicking on them. This bar has tabs (Common, Layout, Forms, etc.) for different categories of content.In order from left to right, the buttons are:. HyperlinkInsert a link to another page either within your Site (an Internal Link) or to a page on another web site (an External Link).
Note that once a link is inserted with the Insert Window it must be edited in the Properties Inspector, which is covered in the next section.Creating links and inserting content will be covered on the next page. Email LinkIt is recommended that you NEVER use this button. The problem is that it puts your email address directly on the page in the clear. Spam robots crawling the internet looking for email addresses will harvest it from this link and subscribe you to spam lists. If you want to give your email address out online it is recommended that you do so discretely: Describe the email address in words.
E.g.,Send your questions to my email address, [email protected] is still feasible that you might end up receiving spam, but the likelihood is greatly lessened. Named AnchorUsed to set anchor points on the page that can then be scrolled to. An example is to place a Named Anchor at the top of the page called “top”. You can then create a Hyperlink that scrolls the user’s browser to that Named Anchor.
TableAllows you to insert tabular data into your page. Do not use this button to create a layout for your page — that’s the job of a Layer. Here is an example of a table. ItemPricePancakes$3.25Waffles$4.50Endoscopy$1474.99. Insert Div TagUsed to insert a tag — a quasi logical unit similar to Dreamweaver’s concept of a Layer but more generalized. Only use this if you are familiar with and.
ImagesThis is actually several buttons in one: Click and hold your mouse button down to see several possibilities. This allows you to insert various kinds of images onto your page.One of the more interesting “sub” buttons here is the Rollover Image Button that allows you to easily insert an image that changes when the mouse is over it. An example of this is to the right of this paragraph. MediaAnother button that is several buttons in one. Use this to insert special media objects from other programs like or Java Applets (note that Java and are not the same thing; don’t use this button to insert JavaScript.). DateAllows you to insert the current date in a variety of formats.
One option of the dialogue box is to have Dreamweaver automatically update the inserted date every time you save the document. This is useful for inserting a “Last Updated On” line that automatically updates itself every time you save the page. Server-Side IncludeUseful to include SSI content. SSI requires that you name your file with the “. Shtml” extension and requires that your server supports SSI. Most web servers do support SSI (including the UW web servers), but it has generally been superseded by scripting languages like and Perl.
CommentInsert a comment into the page’s source. Your visitors won’t see this comment unless they view the source code for the page. You can view the comments for the page by selecting View Visual Aids Invisible Elements and ensuring that the preferences item for comments is enabled. HeadThis set of buttons allows you to insert common HTML tag elements. Do not use this unless you are familiar with HTML and CSS. ScriptUsed to insert references to external scripts (such as JavaScript) in the page or to insert sections that browsers without JavaScript enabled will see. Only use this if you are familiar with HTML and JavaScript.
TemplatesUsed to insert the different regions used for templates, something we mention in the section. Tag ChooserUsed to insert HTML and other tags directly into the source of the page. Use this only if you are familiar with HTML.Palettes and TabsLike many design programs, Dreamweaver features many Palettes that give you easy access to Dreamweaver’s many features. Not willing to stop there, Dreamweaver incorporates various Tabs into many of the Palettes.
The Tabs are a sort of sub-Palette, if you will.Palettes can be opened and closed by clicking on the Palette’s title and the Tabs within a Palette can be toggled by clicking on them.In the screenshot to the right, the Files Palette is shown active while all the other Palettes are inactive. On the Files Palette, there are three tabs — Files, Assets, and Snippets. We will come back to this Palette in the section.If your Palettes are arranged differently and you want to “start fresh”, remember You can revert to this default interface at any time by going to Window Workspace Layout Default.The Files Palette is active in the image to the right.
The Properties InspectorOnce you have some content on the page, it’s feasible that you’ll want to change some of the attributes about pieces of that content. Dreamweaver calls attributes Properties, and these Properties can be changed in the Properties Inspector:The Properties Inspector is context-sensitive: what it displays varies widely depending on what is currently active.
The “ active” element on the page is usually whatever is highlighted by the cursor, but that is not always the case:. Text is active when it is highlighted,.
Images are active when they have a single-line, solid, black border around them. An image is made active by clicking on it, and. Layers are active when they have a thick, blue border around them. Discussion on how to make a Layer active is given in the section.
Paragraph Blocks are active when the cursor is inside them. Note that the Properties Inspector shows both properties of the active Paragraph Block and the active Text simultaneously.
We will discuss which properties refer to which elements on a later page.The graphic to the right summarizes the notion of active Text and active Paragraph Blocks.In fact, the Properties Inspector’s set of Properties even changes wildly depending on what type of element is active. For example, it wouldn’t make sense to have “Bold” and “Italics” buttons for images; and it wouldn’t make sense to have text rollover options. Thus, the general methodology for using the Properties Inspector is to. Find the element whose properties you wish to change,. Highlight it (or click on it in the case of an image or a Paragraph Block to make it active), and to then. Change the properties to suit your needs.Try it OutArmed with an overview knowledge of the Dreamweaver interface, you are encouraged to “play” with it for a while before continuing: see if you can’t figure out how to insert an ordered list like the one below. We’ll cover how to do it in the next section if you want to cheat.
![]()
Adding Content. We’re finally ready to start adding content to our Site! This page is perhaps more tedious than it needs to be, but please stick with it!
The theory laid down is important for later subjects. The Dreamweaver MethodIn the, we asked you to experiment a bit with Dreamweaver by posing that you see if you can’t figure out how to insert an ordered list like the one to the right before continuing.So how do we go about doing this? The key is to follow “the Dreamweaver method”:. Enter the content without regard to formatting,. Select the elements whose formatting you wish to change, then.
Change the formatting using the Properties Inspector.This is a general approach to getting “correct” results in Dreamweaver. Essentially its philosophy is that content is paramount and definition is secondary. Or, “you are more important than what you do.” The you is the content; the what you do are the properties of that content, visible and controlled via the Properties Inspector.How to Create a ListThe screencast video to the right demonstrates how to insert this content.(Note that although the screencast is shot using the PC version of Dreamweaver, there is little distinction between the PC version and the Mac version.) Entering Text: More on Paragraph BlocksAs we mentioned in the section, Dreamweaver’s“logical unit” for content is the Paragraph Block. A Paragraph Block is considered to be a single cohesive group of content.To create a new Paragraph Block hit the Enter key. This behavior is not what you might expect: it’s not how most word processors handle the Enter key – they are likely to simply break the line as opposed to creating a new paragraph block.(You can break the line by holding down Shift while hitting Enter.)To the uninitiated, this may seem like a distinction without a difference: how does a line-break differ from a separation of Paragraph Blocks? The two screen shots below illustrate the difference.
Text with Paragraph BlocksParagraph Blocks:The distinction visually between these two versions is about a 12-point-high bit of whitespace between the lines in the version with Paragraph Blocks while there is no space between the lines in the version with line breaks. The important distinction, however, is the meaning of the two versions:When writing a paper, a break in the paragraph is used to separate ideas or transition subjects while a break in the line is purely a formatting issue: the line is too long, perhaps, for the page. This is the same distinction made by Dreamweaver. Use Paragraph Blocks to group together paragraphs (logically connected units) on the page; use line breaks to break the line (as in the case of lyrics or lines of a poem). CAUTION: Do not use line breaks to control the width of your text! In general, you have no idea how wide your visitor’s screen is going to be!
There is no way to reliably say if your visitor is looking at your site on a 30″ monitor or a 2.5″ cellphone.If you want to change the width of a block of text like in the screenshot to the right, you should do so with Layers. Reserve line breaks for separating lines of prose. Paragraph Blocks and the Properties InspectorRemember from our discussion on that Paragraph Blocks are considered “active” in the eyes of the Properties Inspector when the cursor is inside them. This is opposed to text inside of a particular Paragraph Block-text inside of a Paragraph Block is active when it is highlighted. Changing Existing Properties With the Properties InspectorThe observant viewer will notice that the screenshot to the right depicts an ordered list while the screencast video depicts an unordered list. Step 2C hange the desired properties in the Properties Inspector.Inserting Headings and Links Using the Properties InspectorWe can do a lot more with the Properties Inspector than simply insert and change lists: we can change the meaning of a whole manner of content. Try creating the following document in Dreamweaver using only the Design View and the Properties Inspector:Do not simply make the “Optimus vs.
Amazon” text large and bold. The important thing about this text is that it is a Header. Rather, make it a “Heading 1” by changing its Paragraph Block’s “Format” Property. Also make the text “Amazon” link to, say, The SolutionAgain following “the Dreamweaver Method” from the first section on this page, we.
Tip: Note that a Paragraph Block is always a Paragraph Block. It may, however, have a Format of a Heading or a List Item, etc. The term “Paragraph Block”, then, is somewhat of a misnomer. It might better be called a “Block.” We’ll continue to call these elements Paragraph Blocks, however.The Format of a Paragraph Block defines how that Paragraph Block relates to the rest of the page as a whole. Now we’ve made the “Optimus vs. Amazon” Paragraph Block into a “Heading 1.” We’ve also made the “Battle of the Primes” text italicized.
Now we’d like to make the text “Amazon” into a Link. Select the text to turn into a link.It turns out that this is something that can be done with the Properties Inspector. That is, the “Link” is the Property of text (or other content such as images) that tells the browser to redirect the user to another page when the text is clicked by the user. Thus, we can highlight the text we want to make into a link and simply change its “Link” Property in the Properties Inspector to the address of the page to which we’d like our text to link.The “Target” Property only exists when there is something in the Link Property. The Target allows you specify the window in which a link will open Selecting a Target of “ blank” will make the link open in a new window.
The other Targets in this dropdown have to deal with HTML frames and are beyond the scope of this curriculum.You can “unlink” content (make it into normal content and not sensitive to moues-clicks) at any time by simply deleting its Link property in the Properties Inspector. Change its Link Property in the Properties Inspector.The moral of the story is that the Dreamweaver Method, as mentioned at the top of this page, allows you to create web content by first inserting your content as “non-web” content and to then “webify” it by changing its various Properties in the Properties Inspector.When you are inserting links within your Pages, it is important to remember how paths on the internet work. This is discussed at some length in the of the Web Publishing at the UW online curriculum.Inserting Images and Other ContentThe previous sections covered how to change the properties of existing text; they didn’t cover how to insert new content.Adding new content in Dreamweaver is quite simple: you’ve already experienced how to insert text. Inserting other kinds of content is equally simple. As you might have imagined, inserting content such as images simply involves using the Insert Window that we discussed in the section.When using the Insert Window, Dreamweaver asks you to describe the content you’re adding in one or more dialogue boxes. Mostly these are self-explanatory. We’ll go over how to add an image:.
Save the image you want to add to your Desktop (or some other easy-to-find location). We’ll be using the image at the right in our example. If you are on a Mac or a PC, you can drag the image onto your desktop directly from this site if you are using a modern web browser. Enter the text around where you want the image to be in the Design View, and place your cursor where you want the image to be placed:Notice that we’re going to be putting the image in its own Paragraph Block. This is not a requirement-you could put the image directly inline with the rest of the text (perhaps surrounded by line breaks, as discussed at the beginning of this page). Remember that the Insert Image button actually has several “sub” buttons to insert various image-related elements into the page.Click the downward-pointing arrow next to the Insert Image button (depicted to the right) and hold the mouse down.
Let go on the “Image” item on the menu that appears. Find the image on your computer you wish to insert:There is an important point to make about the path of your image here. If you get a dialogue box like the following then you must click “Yes” to ensure the image gets copied to your Site’s folder and uploaded with your page. Properties InspectorThe answer, of course, is to simply change the image’s Link property in the Properties Inspector.
You’ll notice that as soon as you do this and move your cursor of the image that the image will be given a thick blue border. This is the default style for how a linked image should be displayed. You can manually get rid of this border by setting the Border property to “0” in the Properties Inspector. What’s NextThere are of course other kinds of elements to be inserted in a Web Site, and we’ll cover some more of them as they come up. Before we continue much further developing our site, however, we’d like to take a bit of a detour and talk about how to save your work and upload it onto your public server.
This and more covered in our next section,. Try it OutBefore continuing to the next page, try to reproduce our example (without making the image into a link) without referring back to this tutorial. When you are finished save this file as “index.html” and continue to the.
![]() Comments are closed.
|