Adobe Dreamweaver CS3 Basics Tutorial
The following tutorial will be covering the basic features of Adobe Dreamweaver CS3. If you look at the design of this new format, you will notice that not much has changed physically; however, a lot of features have been moved or added to provide better support to consumers. I personally found this to be a very easy transition from one Adobe Creative Suite to the next. This particular tutorial will be excessively long in nature. In light of this, I will be making it into a 3 page series. By doing so, download time of the images should be enhanced and so should viewing pleasure. The last thing I would want is for your eyes to glaze over and for you to forget everything you are reading. Please enjoy this excellent read on the new and improved Adobe Dreamweaver CS3.
Once you have started Adobe Dreamweaver CS3 for the first time the starting page is quite similar to the old ones. You will have your familiar selection screen to help you navigate the program as always. You can view this below.
If you open up your webpage within the program you will be able to see how the layout and features have changed in this edition of the product.
If you look under the file menu at the top, you will see a list of features in the “insert” section. Adobe has graciously provided us with a great way to access most of the features that we will need to construct a quality website. I personally like the features in this section of the program. It provides me with more space from side to side to view my product and code when I am changing things. To be honest it looks a little like Microsoft Office, which is widely popular.
In the insert menu, you will see a tab called “common”. In this tab is our first feature. This feature is called “Hyperlink”. It gives you the ability to easily add a hyperlink to your webpage without the strain of writing the actual code.
The next feature is the “Email Link” that looks just like an envelope. As you can guess, this provides you with an easy way to make an email link without writing the code.
The next feature is a favorite of mine because it is an anchor. It represents the feature called “Named Anchor”. This lets you provide a link to a section in a text. You can give this link a name that represents the section it is linking to. This will help the reader easily navigate a long website. I like the name of this feature because I am a fisherman myself.
The “Table” feature makes it easy to make tables within your webpage or tables that you can use to construct the layout of your webpage.
The “Insert Div Tag” is a handy button that I use a lot to insert my div tags from my CSS files. You can always type in straight code if you want to, but if you are stressed for time this feature is a very nice insertion into the common tabular.
The next feature has a wide array of sub-features within it. The first of them is the “Image”, which allows you to easily add an image to webpage. The second is the “Image Placeholder”, which allows you to use an image to point to a link or a file. The “Rollover Image” allows you to insert an image and then if the cursor hit the image at any time it will display a second image that you have inserted. It is a good thing when you have two images you want to show, but you have limited space. The “Fireworks HTML” feature refers to Adobe Fireworks CS3. It will take an html file made in fireworks from an image and insert it into Adobe Dreamweaver CS3 so you can edit it further. The same is possible in Adobe Photoshop CS3. The “Navigation Bar” allows you to easily add a navigational menu with the insertion of image files and direction for what the buttons or links will do when activated. I think I may use this feature in the future when I revamp my websites. The next three features are categorized as “Hotspots”. They come in rectangle, oval, and polygon shapes. You can use these features to draw an area on an image map and make it into a link or reference point that can be pointed to something. It is great if you have a fancy background and you want part of the background that is oddly shaped to be somewhat of a placeholder.
The next features are related to the media side of Adobe. The first is “Flash” that lets you simply add a flash file to your webpage. It is pretty simplistic and you would have needed to test your flash file extensively to make sure it will work on the web. After that is the “Flash Button”. You can see an example of this to the left of this page. Yes, that is right; I am using flash buttons on my homepage. I personally thought they looked pretty good with my simplistic design. I am always changing things around so you might see a whole new website the next time you come back here. Also there is a way to make “Flash Text” with cool graphics. I thought of using that for logos, but opted not too so that my code would be easier to navigate. Nobody likes going through unorganized code. “Flash Paper is a great tool to use if you will be using a lot of Adobe Flash programming in your website. “Flash Video” is mostly used with digital videos that want to be displayed through Flash 7 or Flash 8 encoding. “Shockwave” is another Adobe product that is more of a third party codec for video encoding. The use of “Applet, param, and ActiveX” is a personal preference with codecs and webpage controls. I want pretend to be the guru when it comes to these parameters, but you can find great information about these features on the web. The “Plugin” feature is a great way to add any type of plugin that Adobe may offer you to use in their software. You can also use unlicensed third party programs as well with this feature.
The “Date” feature allows you to add a date in a wide assortment of ways. I like to use this if I want to document what the date was when I published an article or document for referencing.
The “Server-Side Include” lets you include a include parameter into the webpage easily.
The “Comment” feature allows you to add a comment box within the actual code of the website HTML. It is a handy button if you forgot how to write a comment or you just want to speed up the process.
The “Head” feature has a couple features that it hides beneath it. These features are actually the tags that you can use within the head tag. The first of them is the “Meta” tag. You usually use this to add “Keywords and Descriptions” of your website. These ironically are the next two features you find below it. Meta tags can do a lot of things though like link to a CSS file. You can also add a refresh button to your webpage. I don’t see how this is useful though. An easy link button is also provided here.
The next button is the Script button. Here you can add scripts or add sections where no script is allowed.
The next feature has a lot of features that allows you to make layouts within your webpage. They are pretty common features. That is why they are in the common section. They are the “Make Template, Make Nested Template, Editable Region, Optional Region, Repeating Region, Editable Optional Region, and Repeating Table”. They all do pretty much what they say. I don’t use tables in my webpages though. A lot of people still do. You may seem them with some advertising sections, but that is just for ease of use.
The “Tag Chooser” allows you to choose tags that are within all types of webpage formats. These are all the formats that Adobe Dreamweaver allows to be used. This is useful if you have forgotten what you were looking for and need to look at list to find out what it was.
The “Insert Div Tag” is a handy button that I use a lot to insert my div tags from my CSS files. You can always type in straight code if you want to, but if you are stressed for time this feature is a very nice insertion into the common tabular.
The “Draw AP Div” allows you to fabricate a division without having to go into CSS to create it. It is a nice feature if you don’t feel like searching through a long CSS file.
The “Spry Menu Bar” inserts a menu bar that is vertical at the top or on the left side of the webpage. It makes sure that the bar is the lowest thing on the screen. It is a great way to hide menus behind other menus and let them pop out without having to make something weird in Adobe Flash or Adobe Photoshop.
Dreamweaver Basics Tutorial - Page 2
