Once you can add text and images in the webpage, linking different webpages is another important part. We shall now understand how to add a hyperlink in the webpage to link the website with other webpages. We will work on the same index webpage for adding the links. 1. In the webpage, select the text that is to be made a link. 2. Go to the Insert menu in the Top menu bar and select…
Pictures are essential parts of the webpages in the website. While creating the website using Adobe Dreamweaver, we shall understand the options of Images in the webpage. Let us see how we can add images in the webpage using Dreamweaver. We will work on the same index webpage for adding them. 1. Place the cursor at a position in the webpage where you want to insert the image. Go to the Insert menu and click…
In this tutorial, we will see how to use the basic HTML tags for styling your website in Adobe Dreamweaver. These predefined styles are simple to use and are used similar to their use in other software. 1. Open the HTML file in the Adobe Dreamweaver and open the files in Split mode where you can see the preview and code at the same time. You can type or copy and paste the text of…
The HTML Page is the normal and standard web page commonly used in the websites. So, it is the first basic thing we should learn in the Dreamweaver software. Create the First Web Page 1. Go to the Menu Bar and Choose File. Select the option New. 2. In the pop up window, select Document Type HTML in the option New Document. 3. Add a Title for the HTML page and click on Create. 4. In…
Adobe Dreamweaver CC is a collection of great tools for the web designers. Website creation is a creative platform for making websites and designing easily and quickly. Website is a collection of data from different files and directories. To start creating the website on Adobe Dreamweaver, first we need to set the folder for the assets of the site. The images, pages and media associated with the site are placed in this folder. This is…
HTML TD Width WIDTH=”width expression” HEIGHT=”height expression” Welcome to one of the most frustrating attributes in HTML. The problem lies in the fact that browsers don’t countWIDTHas much more than a strong suggestion, not an absolute rule. That means that browsers often ignoreWIDTHaltogether. First let’s look at howWIDTH is generally supposed to work, then we’ll look at the problems. WIDTH is supposed to set the width of the table cell. So, for example, the following code where…
To do this, go back into the Dreamweaver document window and select the heading text. Apply the Heading 1 tag to it by selecting Format > Paragraph format > Heading 1. Similarly for the subheadings, select the subheading text and apply the Heading 2 tag to it [Format > Paragraph format > Heading 2]. Styling our Headings and Subheadings Now let us style the Heading 1 and Heading 2 tags to match the look we…
Dreamweaver Template Create a New HTML Template. Save it as template.dwt. It will get saved in a new “Templates” folder. Modify > Page Properties (Set Left/ Right/ Top/ Bottom margins = 0) Table #1 Insert > Table (with 2 columns > 1 row > 780 pixels > cell padding = 0 > cell spacing = 0) Select Table (right click in the table > Table > Select Table). In the Properties Panel set Align = Center.…
Server Side Includes (SSI) and Libraries in Dreamweaver help you to centralize areas of your site that are common to many pages. This helps you to easily make site-wide changes to these common areas and thus helps in maintenance and consistency. When you design a website it is better to design it for easy maintenance. As you add pages your menus will change to incorporate that. You might want to change the mast, footer etc.…
ransparent layer Overlay’s can seem quite daunting at first. This tutorial willshow you how to overlay a transparent PNG onto another image and put text on top of the transparent layer just like in the examples below: If you downloaded the transparent image overlay exercise files, you will get some 3 images to practice with but most importantly for your website, you will get a transparent png overlay which is compatible with Dreamweaver…
Preview in Browser File > Preview in Browser > select the browser of choice View each page Click on all the links Note: If you use Site Relative paths (as you must in server side includes), the “Preview in Browser” feature will not work. You will need to test on a web server locally or upload to your remote hosting server and test. Other tools that Dreamweaver provides : Site > Check Links Sitewide Text…
Server side includes (SSI) help make your website easy to maintain. As your site grows it becomes more and more difficult to make changes that affect the entire site. Imagine adding a new link from the menu and then updating and uploading all the pages everytime you add a new page! If you make the menu into a server side include, you can add the link to this include file alone and upload it to…
Why I Didn’t Teach This in My Main Dreamweaver Tutorials Those using my main Dreamweaver Tutorial series may have noticed that instead of teaching how to put an email address on a website, I describe how to put a feedback form. There are a few reasons for this, and you may want to browse through these reasons before committing yourself to putting your email address online. Email Addresses on the Web Are a Spam Magnet As I mentioned in…
Links, also known as “hyperlinks” in some quarters, are arguably one of the fundamental essentials in a web page. They allow you to point your visitors to another page on your site, as well as to other websites on the Internet. Without links, the World Wide Web would not be that inter-connected web of documents that it is today. This chapter of the Dreamweaver CS4 Tutorial series takes you through the process of creating links on your…
Prerequisites As with all tutorials, I have to make certain assumptions. You have Dreamweaver CS3. Since this is a tutorial about using Dreamweaver CS3, you will (obviously) need to have Dreamweaver CS3. You have some basic knowledge on how to use Dreamweaver. I will also assume that you have some basic knowledge on working with Dreamweaver. This tutorial only deals with the specific problem of creating a web page with a thumbnail that when clicked shows a…
If you were to create a rectangular box outline around the content on your web page using Cascading Style Sheets (CSS), the default is that your box borders will have pointed right-angled corners. To get rounded corners for the box, many webmasters in the past have resorted to using images to give the appearance of curved corners. This article shows you how to achieve the same effect using CSS. It also discusses some of the…
Goal of This Chapter By the end of this chapter, you will have modified your navigation menu so that they have buttons linking to the other important pages of your site. You will also have, optionally, changed the colours of the buttons so that they fit into the colour scheme of your site. This chapter also discusses some ways in which you can deal with the unbalanced columns on your web page. What Do You…
Preliminary Matters I will assume here that you already know how to use Dreamweaver to create your website. If this is not true, please see my tutorial on how to design your website with Dreamweaver. In fact, if you are completely new to creating websites, you should probably start with How to Design / Create a Website: The Beginner’s A-Z Guide. Another assumption I will make is that you know the text to include for the meta…
Steps to Inserting Cut-and-Paste HTML Code into Your Site Start up Dreamweaver and open the page that you want to edit. Switch to your web browser and surf to the page from which you can get the cut-and-paste HTML code. Select the code with your mouse by dragging over all the text, click your right mouse button, and select the “Copy” item from the pop-up menu that appears. Return to Dreamweaver, and click on the…
Now you are ready to use Dreamweaver CS4 to upload your site and make it live to the world. You will need a web hosting server and a domain name. I use Hostgator to host my websites. When you sign up with a hosting company like Hostgator they will send you FTP details with which you can connect to the remote hosting server and upload your files. To upload your files using Dreamweaver CS4: Click on the ‘Expand to…
Now that you have completed the site, thoroughly check it in the browser. Use File > Preview in Browser and select the various browsers. Check the site in at least Internet Explorer and Mozilla Firefox. Sometimes it will look a bit different in different browsers. Check to make sure everything is working fine. Test the menu links to see if the right pages are being called up. You might also decide to make some layout…
Another way of designing layouts in Dreamweaver CS4 is by using tables. We will use this method to create the submenu area within the template. Open template.dwt Delete ‘Content for id “submenu” Goes Here’ from the ‘submenu’ div With the cursor still within the ‘submenu’ div insert a table [Insert > Table] with 3 Rows, 1 Column, Width of 201 pixels, border thickness – 0, Cell padding – 0 and Cell Spacing -0. Click OK.…
In this Dreamweaver CS4 Form Validation Tutorial we will learn how to validate a form in Dreamweaver CS4. The form we will validate is shown below: Step 1: Select the form tag You can do this by clicking anywhere in the form and selecting the <form> tag when it shows at the bottom of the document window. The entire form will grey out to show that it is selected. Step 2: Open the Behavior Inspector…
Let us create a form in the contact us page. To do this: Open contact-us.html Insert > Form > Form You will see a red outline within your page. This is the ‘form’ tag. All your form fields must be placed within this tag. Insert Form > Text field In the screen that opens up type ‘Name’ in the label field. Click OK Similarly create a field for ‘Email’ as well. Also create a field…
Now create the remaining 3 pages and link them up in Dreamweaver CS4. Create the following pages: about-us.html, services.html and contact-us.html the same way you created the index.html page. Insert the appropriate content, images, title tag, headings and subheadings for each. You will see all your pages in your ‘Files’ Panel [Window > Files]. Linking the pages: When we click on the menu buttons at the top of the page we want the appropriate page…
Now we need to insert the image into the content. To align it as designed in our layout follow these steps: Click at the beginning of the 2nd paragraph Insert > Image > browse and select picture.jpg The picture will get inserted at the beginning of the 2nd paragraph. Select the picture and select ‘Right’ from the ‘Align’ drop down in the ‘Properties’ Panel The picture will now align to the right and all the…
Next we will need to format the headings and subheadings within the content. To do this, go back into the Dreamweaver document window and select the heading text. Apply the Heading 1 tag to it by selecting Format > Paragraph format > Heading 1. Similarly for the subheadings, select the subheading text and apply the Heading 2 tag to it [Format > Paragraph format > Heading 2]. Styling our Headings and Subheadings Now let us…
Now that our Dreamweaver template is ready in we can create the pages of our website easily. Let us begin with the Home Page. The home page file is usually named index.html. Your remote hosting server will recognize this file as the home page and display it when your domain name is called up. To create a page from the template: File > New Page From Template > BusinessSite > template Click the ‘Create’ button…
Now it is time to insert editable regions into the Dreamweaver template. Since the content area will differ from page to page we will make this area an editable region. Select and delete ‘Content for id “content” Goes Here’ from within the ‘content’ div. While the cursor is still within the ‘content’ div: Insert > Template Objects > Editable Region Give the New Editable Region a name like ‘content’ The editable region will be hightlighted…
Now let us create the content area and a space for the submenu area on the left. We will create a div for these 2 areas combined called ‘middle’ and then individual divs for the submenu area called ‘submenu’ and the content area called ‘content’ within the larger ‘middle’ div. The ‘middle’ div: Place the cursor after the ‘menu’ div Insert > Layout objects > Div Tag > ID: middle Click the ‘New CSS Rule’…
Let us now work on the menu area. To do this, let us create a new div called ‘menu’ with the accompanying css rule. We first need to point the cursor immeadiatetly after the ‘header’ div. We can do this in 2 ways: 1. The first way is in the design view: Select the ‘header’ div by clicking anywhere inside the header area and clicking on the ‘div#header’ tag that appears at the bottom of…
Now it is time to insert the logo image into the header div using Dreamweaver CS4. Select and delete the default text that is inserted by Dreamweaver when creating a div ‘Content for id “header” Goes Here’. Insert > Image > browse and select the logo image. In the screen that appears, enter alternate text describing the image. e.g. BusinessSite Logo. Click OK. You will see the logo image appearing within the ‘header’ div. We…
Now it is time to specify the styles for your header div tag. In the screen that opens. Select ‘Background’. Browse the header background image. Select ‘Box’. For the Width, type ’100′ and select ‘%’ from the drop down. For the Height type ’94′ and select ‘px’ from the drop down. Click ok. You will come back to the ‘Insert Div tag’ screen. Click OK. In your template page you will see the ‘header’ div…
We will now design the template in Dreamweaver CS4. The layout we designed in Fireworks CS4 is shown below: We will need to recreate this layout in Dreamweaver. Some portions will need to remain images e.g. gradient backgrounds, rounded edges, special fonts like those used in the menu and the logo. These images have already been created, sliced and exported from Fireworks as web optimized images and are available for use within the ‘images’ folder. To…
Now that you have completed the site, thoroughly check it in the browser. Use File > Preview in Browser and select the various browsers. Check the site in at least Internet Explorer and Mozilla Firefox. Sometimes it will look a bit different in different browsers. Check to make sure everything is working fine. Test the menu links to see if the right pages are being called up. You might also decide to make some layout…
Now you are ready to use Dreamweaver CS4 to upload your site and make it live to the world. You will need a web hosting server and a domain name. I use Hostgator to host my websites. When you sign up with a hosting company like Hostgator they will send you FTP details with which you can connect to the remote hosting server and upload your files. To upload your files using Dreamweaver CS4: Click on the ‘Expand to…
What You Will Need Dreamweaver CS3 You will need Dreamweaver CS3 (obviously). The tutorial assumes that you are using Dreamweaver CS3. There are versions of Dreamweaver for both Windows and Mac OS X — either version will do fine. For the most part, both versions work in the same way. Note: if you are using Dreamweaver CS4, please see my other tutorial series Dreamweaver CS4 Tutorial instead. The latter was written specifically for that version of Dreamweaver, and takes…
Place your cursor where you want the image. In the Insert window, click on the image icon. Browse to the file you want and double click to add it to your page. In the properties window, add descriptive alt text in the Alt drop-down menu. Tips: You can insert GIF, JPG, or PNG files onto Web pages. If you want the image to be a different size, you should resize it using Photoshop or another…
Place your cursor where you want the image. In the Insert window, click on the image icon. Browse to the file you want and double click to add it to your page. In the properties window, add descriptive alt text in the Alt drop-down menu. Tips: You can insert GIF, JPG, or PNG files onto Web pages. If you want the image to be a different size, you should resize it using Photoshop or another…
In this tutorial we will be taking a look at how you can create a table layout using Dreamweaver. So launch Dreamweaver, and when you are displayed with the welcome screen, under the Create New column select HTML. If you have difficulty with this, use the Menu Bar to create a new file. With the new file created, make sure you are working in Design View. Firstly, go to the Menu Bar and select Insert>Table.…
In the last tutorial, we took our table layout and inserted an image into the Header section. In this tutorial we are going to add a rollover button to our website. Start up Dreamweaver and open the file you completed in the last tutorial. If you not completed this, you can download the file from here. Alternatively, you can apply the rollover button to your own layouts. To create a rollover effect, you need two…
Learn how to slice up a premade Email Template & code into a Email Template/Newsletter in Dreamweaver! For this tutorial we’ll be using this Email Template we designed in a tutorial earlier. Photoshop 1. Firstly open your email template design, place all the elements into folders (to make it easier). Next remove the eye icon from the content text & background colour is out of view. 2. Next select the Slice tool and select around the…
Acknowledging the rising popularity of smart phones and tablet computers, Adobe has begun to integrate the ability to create mobile content across its entire Creative Suite and Dreamweaver is no exception. One feature, which was introduced in Dreamweaver CS5 and improved in CS5.5, is support for CSS3 Media Queries. Media Queries allow web designers to create style sheets based upon the screen size of the device used to view the page. It’s easier to understand…
Hi everyone! So in this tutorial you will learn how to properly setup your html document, in order to be valid, and to be more optimized for the search engines! So lets start by opening Dreamweaver. Create a new HTML document. Open up the page properties (modify > page properties). Now be sure to fill everything, with your preferences. In Apearence you will configure the document look, text font, font size and color, and the…
We will now learn some of the advantages that Dreamweaver offers us at the time of working with HTML code, and not just in the graphic editor of the design view. It’s not about learning HTML language, it’s just knowing how to readjust the code directly in Dreamweaver. Tags We already know HTML language is based on tags which mark each web site element from start to end. Tags are based on writing the same command betwwen “<” and “>” symbols. The first tag means…
Let’s look at a set of elements that are usually found in web sites, such as marquees, counters, and update datse. Marquees Marquees are text, images, or a combination of them. They can be moved inside the window in a linear way. Below we have an example of a marquee. Welcome to Dog and Cats Marquees cannot be inserted with the Dreamweaver graphics editor, you need to do it through code. To create a marquee you need to insert the <MARQUEE> and </MARQUEE> labels.…
In this unit we’re going to learn the basic characteristics of the behaviors, and also look at a pair of examples of possible applications. Introduction behaviors are actions that happen when the userdoes something over an object, for example moving the mouse over an image, clicking on a text, double-clicking on an image map, etc. behaviors don’t exist as HTML code, they are programmed with JavaScript. Dreamweaver allows you to insert them through the Behaviors panel, so it is not…
We’re going to a look at some of the characteristics of layers, and then work with them and apply some behaviors to them. Introduction Layers are squares that can be placed wherever you want in the Page, we can insert HTML content in them. Those layers can be hidden and overlapped between them. This gives you a great variety to design. Layers can be moved from their positions by just clicking on the the white square in its lerft…
In this unit we’ll learn how to insert multimedia elements. More specifically, we’ll see how to insert a Flash animation, a sound and a video. Flash Movies Flash movies are animations that have an SWF extention, just like buttons and flash text. They are usually used in web sites as a presentation, although they can be used for any kind of animation. These movies can be created through Flash Macromedia, and the user needs to have a plug-in installed on his/her computer to view the movies. Flash movies can be inserted…
We’ll see what a form is, why it’s used, how to insert one, which elements it can contain, and how to validate the data introduced into it. Introduction Forms are used to get users data, they can also be used to make orders in a virtual store, to create a survey, to know users opinon, receiving questions, etc. Once the user has filled out the data and clicked the button to send the form, a program will start, and…
We are going to see what Frames are and when they must be used. We will also see how to insert a simple frame into a website and how to work with it. Introduction Frames are used to distribute the data in a web site. They help to keep some parts straight such as they are, as the logotype and the browser bar, while the others can change. In addition they usually improve the appearance. Each page’s frame has…
In this unit we’re going to see how to work with tables. We’ll learn how to insert tables, combine cells, insert rows or columns, and how to change the border size. Introduction All objects are aligned on the left side of the web site by default. But thanks to the tables it’s possible to distribute the text in columns, place the images next to a text block, and many more things we could not do without the tables.…
In this unit we’re going to see how to insert images in a document. We’ll also see how to create some special images, such as the case of Rollovers and flash buttons, which help to improve the appearance of our web page. Introduction All web sites have a certain number of pages that allow you to improve their look, or just to add more visual information. There are a set of formats more recommendable than others to be introduced in a web site. You can consult…
Now we are going to see what web links are, what are they used for and how to create them, as they are an essential element for any web site. Introduction A hyperlink or link, is just a connection that redirects you to another Page or file when you click on it. You can assign a link to a text, to an image, or to part of an image. Types of links There are different types of access paths…
In this unit we’ll learn how to change the text properties and to create CSS styles, that will allows us to assign styles to our texts. Text Format The Selected text format can be defined through the Text menu, and through the Properties inspector. We’ll see the alternatives offered by the Properties inspector, although they are less than the ones the Text menu offers. Format: Here we’ll select a paragraph format previously designed for HTML, it can be header, paragraph or pre-formatted. The headings are used to establish…
In this section we’re going to see what a web site is, how to create one and to manage it. Also we will see how to modify the document properties. Introduction A web site is a Set of archives and folders, related to each other, and with a similar design or common objective. It’s necessary to design and to plan the Web Site before creating the Pages that are going to be contained in this Web Site. The traditional way…
We’re going to see which are the basic elements of Dreamweaver 8: screen, bars, panels, etc, also we will learn to know how to differentiate between each one of them. We’ll learn how they are called, where they are and what they are used for. We’ll also see how to obtain help, in case that at some moment we don’t know how to continue working. When we know all this we’ll be ready to begin to create web Pages.…
Introducing Dreamweaver 8 Dreamweaver 8 is a easy to use software that allows you to create professional web Pages. The design edition features of Dreamweaver 8 allow you to quickly add objects and functionality to your pages, without having to program the HTML code manually. It’s possible to create tables, edit frames, work with layers, insert JavaScript behaviors, etc., in a very simple and visual way. In addition, it includes a complete FTP client software, allowing…
Using templates in Web design is a great way to save time on your page designs — and there are a gazillian templates you can download from the Web. But before you learn how to edit web sites with templates or themes, it’s helpful to understand the big picture: What are templates best used for, and how do templates differ for different kinds of web sites and blogs. The term template means many things (on…
http://www.addressmunger.com Spammers gather millions of email addresses from Web sites every day by collecting email addresses from links on Web pages. It’s common practice for Web designers to include an email link to make it easy for visitors to contact them. Unfortunately, those simple email links make it even easier for spammers to gather email addresses automatically. To help counter this problem, the programmers at AddressMunger.com have come up with a special way of “hiding”…
Have you ever wondered how some sites add those little custom graphics to the very top of the browser in the address bar next to the URL? Google adds a capital G, Adobe adds their logo, and you can add any image to your site, too. You just have to get it in the right format. Favicons look like this little tiny image of a girl with a blue hat that sits in the address…
Here are three traffic reporting services you can use on any web site. Get all the details with Google Analytics www.google.com/analytics Google Analytics is one of the best traffic counters on the web — and it’s free! You just add a little snippet of code to your Web pages, and Google tracsk your visitors, creating a comprehensive report full of juicy details. You’ll not only get the numbers of visitors and where they came from,…
Dreamweaver makes it easy to design web pages without ever having to look at the HTML code behind the scenes. But even though you don’t have to learn HTML, every once in a while knowing how to work with in Dreamweaver’s Code View can come in handy. In this tutorial, you’ll find instructions for using Dreamweaver’s Code or Split View features to insert code from other sites into your pages. These instructions can be used…
The simplest and quickest option if you want to sell only a few products or services on your Web site is to create a PayPal button for each item you want to sell. Follow these steps: 1. Open your browser and navigate to www.paypal.com. If you have a PayPal account, log in here. If you don’t have an account, click on the Sign Up link to establish an account, and follow PayPal’s easy online instructions.…
new set of tools you can use to create drop-down menus, collapsible panels, and other advanced features. You’ll find the insert options in a Spry Insert bar at the top of the work area, and editing options in the Properties inspector at the bottom of the workspace. This tutorial shows you how to create a Collapsible Panel with Spry, an interactive feature that enables visitors to your site to open and close panels to display…
You can use Behaviors in Dreamweaver to create many interactive features; like opening a small browser window when someone clicks on an image. This is a great way to make supplemental information available without closing the page a visitor is already viewing. When you set up a Behavior in Dreamweaver, you apply an Action to an element, such as Open Browser Window applied to an Image. Then you specify an Event to go with that…
Dreamweaver’s Behaviors panelmakes it possible to create complex interactive features using Javascript, even if you don’t know Javascript. And that’s cool because writing JavaScript is a lot more complex than writing HTML or CSS. Using Behaviors you can add interactive features like complex rollover effects, pop-up windows, and jump menus. When you set up a Behavior in Dreamweaver, you select an Action, like a pop-up window opening, and set it to be triggered by an…
This tutorial is designed to give you a head start on the many ways you can customize a drop-down menu in Dreamweaver. Adobe Dreamweaver CS3 and CS4 include the Spry framework, a set of widgets you can use to create drop-down menus and other advanced features for your web pages. The Spry menus make adding a drop-down menu in Dreamweavereasier, but you’ll still need a basic understanding of CSS and how to edit styles if you want to change…
The Spry framework is a set of widgets Adobe added in version CS3. This collection of tools makes it easier to add advanced features, including e drop-down menus and collapsible panels. These features are included in the Spry Insert bar at the top left of the workspace in Dreamweaver CS3 and in the Spry Insert panel at the top right in Dreamweaver CS4. With Spry you can easily create features, which combine Cascading Style Sheets…
Seems all the cool sites have a big, rotating box at the top of the front page. If you want to showcase a few featured items in a rotating slider (the way I’ve done on the front page of this website), the PowerSlider is going to make your day — and you don’t even have to learn jQuery. This Dreamweaver Extension makes it easy to get JQuery, CSS, and HTML to play together — and…
Even with all the cool features in Dreamweaver, there will almost certainly come a day when you want to do things that Dreamweaver can’t do with the features that shipped with the program. Fortunately, the programmers who created Dreamweaver made it possible for other programmers to add features using the Extension Manager. The result? You can add new functionality by adding extensions from a variety of third-party sources. You can find extensions that do everything…
There is no “Insert QuickTime” button in Dreamweaver, but you can add Quicktime, and almost any other type of multimedia (besides Adobe Flash), if you know where to look in the Dreamweaver Insert Menu. In this tutorial you learn to insert Quicktime in Dreamweaver and customize your QuickTime videos in Dreamweaver. (Tutorial for both Adobe Dreamweaver CS3, CS4, and CS5). If you want to insert Windows Media video into Dreamweaver, the steps are the same,…
Dreamweaver can insert Flash video (.flv) files, as well as Flash files with the .swf extension. In the last issue, I used Dreamweaver to add Flash video to a Web page. In this tutorial, you learn to insert Flash files with the .swf extension. The process is similar to inserting an image file, but Dreamweaver has more settings for Flash. Step 1 Create or Acquire a Flash File For this lesson, I assume you already…
The day that everyone has long predicted arrived. Video is no longer a novelty online and Flash video has become the darling of the Web, favored by video giants YouTube and Google Video, as well as a growing number of Web designers. What makes Flash so special? Not only does it combine good quality with great compression, it comes with a video player that is already in use by 95% of Web surfers. In this…
As you’ll learn in this tutorial, using CSS to create styles for your images instead enables you to quickly and easily align images to the right or left of a page, and add margin space exactly where you want it to create as much, or as little, space as you want between the image and any text or other elements around it. I routinely create two image styles for every site I work on, one…
Including background images in your web pages is a great way to add depth, color, and texture to your designs. You can use backgrounds in Cascading Style Sheets to add decorative elements, such as textured backgrounds, gradients, and borders. Using background images in multiple parts of the page makes it possible to create rich, seemingly layered, designs. For example, you can combine background images in the body of a web page, with backgrounds in div…
It’s become common to format a list of links as a bulleted list, but you don’t have to show the bullets if they don’t fit in your design. Here’s a great CSS trick for turning a bulleted list into a navigation bar with a simple rollover effect. Using a bulleted list for navigation bars is a well-accepted convention that meets current accessibility standards. A bulleted list is a logical choice for navigation elements because even if…
Whether you’re new to CSS, or you’ve been struggling (I mean designing) with styles for decades, the new collection of CSS layouts included in CS3 are a welcome addition to any designer’s arsenal – as long as you know how to customize them. One of the challenges is that no one has been creating CSS layouts for 10 years, and browser support─which can make the difference between a beautiful Web page and a jumbled design…
What’s the best Selector, Class, Tag, or Advanced? Even if you’ve been working with CSS for a while, understanding (and remembering) the differences among the various types of style selectors can be a challenge. As you can see in this screenshot of Dreamweaver’s New CSS Rule dialog, the first thing you need to do is specify if you want to create a rule using a class, tag, or advanced style selector. If you’re still trying…
Find the best Selector for the job: Class, ID, Tag, or Compound In Dreamweaver CS4, Adobe changed the style selector options and added new features to make it easier to create styles. Understanding (and remembering) the differences among the various types of style selectors can be a challenge. This tutorial provides a quick review of the selector options and when you should select one over another. Consider this a handy reference and a crash course…
Even with all the cool features in Dreamweaver, there will almost certainly come a day when you want to do things that Dreamweaver can’t do with the features that shipped with the program. Fortunately, the programmers who created Dreamweaver made it possible for other programmers to add features using the Extension Manager. The result? You can add new functionality by adding extensions from a variety of third-party sources. You can find extensions that do everything…
You can use Behaviors in Dreamweaver to create many interactive features; like opening a small browser window when someone clicks on an image. This is a great way to make supplemental information available without closing the page a visitor is already viewing. When you set up a Behavior in Dreamweaver, you apply an Action to an element, such as Open Browser Window applied to an Image. Then you specify an Event to go with that…
Before you do anything in Dreamweaver, make sure you “set up” the site you want to work on using the Manage Sites features. Once you’ve set up a web site, Dreamweaver keeps track of the files, which makes it easier to edit existing sites, as well create new ones. The setup process is streamlined in Dreamweaver CS5 so there are only two quick steps — and that makes this tutorial short and sweet if you…
Before you do anything in Dreamweaver, make sure you “set up” the site you want to work on using the Manage Sites features. Once you’ve set up a web site, Dreamweaver keeps track of the files, which makes it easier to edit existing sites, as well create new ones. The setup process is streamlined in Dreamweaver CS5 so there are only two quick steps — and that makes this tutorial short and sweet if you…
In the last year, both Google Checkout and PayPal have added shopping cart features to their most basic ecommerce offerings, making it easy for anyone to sell multiple products on a web site. Training Video: Watch Janine’s new Google Checkout training video at KelbyTraining.com Compare: What’s the best? Google Checkout vs PayPal vs. Amazon Payments For no upfront costs and a competitive transaction fee, you can set up an entire shopping cart in an hour or two.…
Adobe Dreamweaver CS4 has a fresh new look and loads of new features, including improved CSS support, a new preview environment called LiveView, and better integration with all of the other cool programs in the CS4 suite. All that and more makes this an upgrade worthy of Dreamweaver’s 10th anniversary. Step 1 Download a trial version of Dreamweaver CS4 now! Adobe has made Dreamweaver CS4 available for public beta! That means you can download a copy…
CSS Layouts make it easy to create new page designs Dreamweaver CS5 includes a new collection of CSS layouts which you can customize to create a variety of Web page designs. These layouts are designed to work well in a variety of Web browsers, so they can help you avoid common problems caused by the different ways Web browsers display CSS. Starting with a CSS layout gives you a great head start when creating new…
CS5 provides better support for include files and PHP You could edit WordPress files in previous versions of Dreamweaver, but version CS5 takes that support to a whole new level. Dreamweaver CS5 can handle multiple levels of include files, so you can use it to edit even the most complex themes, and it includes better PHP libraries, so you can do more complex programming, with better resources at your finger tips. 1. EDIT POSTS FOR A…
Adobe’s easy new way to add free stuff (like interactive slideshows) from their web site You’ll find a growing list of widgets on the Adobe site that you can use to create slideshows, drop-down menus, and other Interactivefeatures. The Widget browser makes it easy to download widgets and add them to Dreamweaver so you can add powerful features to your Web sites. Most widgets are created in JQuery or AJAX and are designed to work well in a…
CSS Layouts make it easy to create new page designs Dreamweaver CS5 includes a new collection of CSS layouts which you can customize to create a variety of Web page designs. These layouts are designed to work well in a variety of Web browsers, so they can help you avoid common problems caused by the different ways Web browsers display CSS. Starting with a CSS layout gives you a great head start when creating new…