So you want to learn how to create a website with Dreamweaver? Well, if you are a web designer, or web developer it’s probably the best way to create a website. But if you are a business owner, entrepreneur or hobbyist, then you should definitely consider the article How to Create a Website with WordPress as an faster, cheaper and better alternative or 5 Reasons You Should NOT Create a Website with Dreamweaver.

This process of building a website actually requires more that Dreamweaver, and that’s a big reason I’m writing this article. You see, my goal is to help you decide what would be the best way for you to create a website. So I’ll share the web design process with you, then you can decide for yourself.

Process of How to Create a Website with Dreamweaver

Alright, so like I said, there’s a lot to the web design process, so I’ll just outline the main steps.

1. Sketch Out Layout – I usually just look at some website layouts that I like, along with my goals and objectives, then I do a quick sketch of the homepage and interior page layouts.
2. Design Mock-Up in Photoshop – Also known as a design comp, this is a graphic representation of your website done in layers that includes the header, navigation bars, graphic elements, backgrounds, specific layout and placement, and all other visual elements. The end result is a PSD file called a comp or mock-up.
3. PSD-to-HTML Conversion – Also known as the production stage, this is where you map out the graphical elements for use within the html. In other words you slice and export the images from the PSD file(s). During this process you usually create the HTML and CSS in Dreamweaver based on the slices created in Photoshop. The end result is usually the homepage and an interior page with working navigation bars.
4. Build Your Dreamweaver Template(s) – Using Dreamweaver templates is usually the most efficient way to build and update your web pages and because of the PSD-to-HTML conversion, you already have the starting point. I will usually turn the interior page into a template, since it is the basis of many pages. For more complicated websites there are often multiple interior page layouts. Dreamweaver templates are made up of fixed and editable regions. This fixed areas are non editable are usually element that you wish to have on each page like the header, navigation bars, call-to-action, etc.
5. Web Pages Creation – Next you can create the individual web pages. The web pages are based on the Dreamweaver template(s) and the content is inserted into the editable regions. Typically the contents of the web pages is text, photos, videos and links. But of course there are other elements like forms, Flash or scripts like jQuery that get inserted into these pages as well.
6. Create Homepage – This could be done in step #5 as well. Often times there are elements like a featured area that utilizes a jQuery script (formerly Flash) to display content in an aesthetic way. Additionally, text and photos are placed according to the original comp designed in Photoshop.
7. Setup Navigation - Depending on how you setup your website, you may have an navigation bar that is setup as an “included” file inserted in both your home page and your template(s). That way, you just need to modify the navigation file, and it will update all across all of your web pages.
8. Publish Your Content – You will need web hosting that provides FTP access.Once your web pages have been created, you can publish your content to a web server to make it available on the Internet.
9. Test Web Pages – Once you’ve built and published your website it is important to surf through your web pages and ensure that everything is working correctly.

Skills Needed

• Photoshop – Intermediate to advanced skill level to create, slice and export graphic imagery.
• HTML / CSS – Intermediate to advanced skill level to create the html, css and forms necessary.
• Dreamweaver – Intermediate to advanced skill level to create Dreamweaver templates, content insertion, photo insertion, link building, navigation setup and publishing.
• jQuery – Intermediate to advanced skills to implement necessary scripts for menus, featured sliders and miscellaneous website functionality.

Do You Know How to Create a Website with Dreamweaver?

Anyway, I thought I might as well make this available for the nice folks who come to SiteBuilder in search of Dreamweaver tutorials, templates, and other web design stuff.

View Web Template Example

Enjoy the templates!
Scott

What’s Included with the Free PSD and Web Templates?

There are several psds and 2 versions (different colors) of the working web template.

• .psd of original orange design
• .psd with slices of indigo color scheme, modify this file if you want to change the color scheme
• .html files
• jquery menus and other magic
• .jpg, gif, .png image files

Enough Already, Give Me the Darn Free PSD and Web Templates!

Dreamweaver Fireworks Tutorial

Got Adobe Fireworks and Dreamweaver? Did you know there is a way to integrate the two, but just don’t know how?  This Dreamweaver Fireworks tutorial will tell you exactly what to do.

1.  In this tutorial we are going to insert a table that was created in Fireworks (be sure to check out the Fireworks tutorial on Creating a Navigation Bar). Once we have inserted the Fireworks HTML into our Dreamweaver document, we will add the corresponding links using the Point-to-File method we learned about in an earlier tutorial.

Let’s get started!

2.  In this example, I have created a page with a couple of tables. The top table is 760 x 86 pixels and contains the header graphics. The second table, which we will use for the navigation and body text, is 760 pixels wide and has 2 cells, 150 pixels (navigation) and 610 pixels (body).

Note: In the below graphic, the second table appears as a single row. We will insert the Fireworks navigation bar that we created into the first cell.

Hint: In both cells, set the Vertical Alignment to Top. This will ensure proper placement when the body text is long.

3.  Place your cursor in the column where you want to insert the table, and on the Objects Toolbar click the Insert Fireworks HTML button.

In the Insert Fireworks dialog box, browse to the location of the html file we created in Fireworks. I saved my file as navigation.htm in the images folder. Click OK.

Remember, we are not just inserting a Fireworks graphic, we are inserting all of the html that Fireworks has created for the graphic we have sliced and diced so it will render perfectly.

4. Now we’re cookin’ with gas. Let’s go ahead and position our current Document and Site window as shown so we can start creating our links.

Select the Home button then from the Properties window drag the Point-to-File icon from the Property Inspector to the page you wish to link to. Home button to index.htm, Company button to company.htm, you get the picture.

Now we’re rockin. Check out the next tutorial, where we find out how to edit our graphics with Roundtrip Graphic Editing between Dreamweaver and Fireworks.

Links or if you prefer, hyperlinks, create connections to many types of files including html pages, movies, PDFs, sound, etc. Other types of Dreamweaver links include Anchors, Null links, and email links.

Links can be created a number of ways in Dreamweaver, i.e. the Site window, Document window or via the Property inspector.

In this tutorial we will explore the different types of links, if you are interested in how to create links using Dreamweaver make sure to check out that tutorial next.

Dreamweaver Links (Hyperlinks)

In HTML, hypertext links are represented by an anchor tag
<a xhref=”http://www.yahoo.com”>This is a link to Yahoo</a>

This is a link to Yahoo

You can link to documents within your website using Document-relative or Root-relative paths. Important: If you are linking to a site outside of your website, you must use the Absolute path including the protocol http:// , for example http://www.yahoo.com/

The Target drop down box specfies how the link will open:

_blank loads the linked document in a new, unnamed browser window

_parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window

_self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it

_top loads the linked document in the full browser window, thereby removing all frames

Named Anchors in Dreamweaver

Named Anchors allow you to link to a specific place in a document. Often times you will see a FAQ that will have linked questions listed at the top of the page, and when you click the link, it will take you to the answer somewhere down the page. Usually there will be a link that will take you back to the questions. This is an example of a Named Anchor.

I frequently use named anchors to allow visitors to return to the top of the page, specifically if there is a very long page.

This requires 2 steps.

Create the Named Anchor

Locate your cursor to the linking point

• Hit Control + Alt + A or from the menu Insert > Invisible Tags > Named Anchor
• Create an intuitive name i.e. Top

If you are working with Show Visual Aids on (Control + Shift + I), you will be able to see your named anchor.

Link to the Named Anchor

• Select the text or image that will trigger the link
• In the Property Inspector, type a pound sign # and the name of the anchor (these are case sensitive) i.e. #Top
• Note: you can also link to Named Anchors in other pages by providing the name of the page i.e. services.htm#Top

Test this link to move the page to the start of the Named Anchors section.

Learn how to create Null and Script links next!

Null and Script links in Dreamweaver

Null and Script links are also very useful when building pages in Dreamweaver.

Null Links – An undesignated link that you can use to attach behaviors to. For example, when using Dreamweaver Pop Up Windows feature, a Null link is used to launch the Pop Up window (This will be a future tutorial). I often use null links when I create mock up websites to be able to view the link properties (colors of links, css rollovers, etc.)

Type a pound sign # in the Property Inspector’s Link field to create a Null link.

Script Links- Execute JavaScript code or call a specific JavaScript function.  The back link and image at the bottom of this page is a script link.  Here is a look at the Property Inspector with the JavaScript.

Next stop, email links…

Email Links in Dreamweaver

Creating an email link (mailto: link) is very simple, and with a little magic, you can take the email link much further. An email link will launch a user default email program will the email address already insert in the new message. Beware some visitors do not have email clients configured correctly, potentially causing a problem in not actually sending the email message. Use forms to capture data when possible.

• From the Common pallet on the Objects Tools, click the Envelop icon.
• Create the text for the link, and enter the email address that will be used.

Basically what happens, is Dreamweaver turns the above info into a mailto: link with the information you provided. Let’s take it a step further and see what happens. Make sure to click the example links at the left!

To:you@yourdomain.comThis email address is being protected from spam bots, you need Javascript enabled to view it
Subject:you@yourdomain.comThis email address is being protected from spam bots, you need Javascript enabled to view it?subject=This Text will appear in the Subject line.
CC:you@yourdomain.comThis email address is being protected from spam bots, you need Javascript enabled to view it?cc=anotheremail@otherdomain.comThis email address is being protected from spam bots, you need Javascript enabled to view it
BCC:you@yourdomain.comThis email address is being protected from spam bots, you need Javascript enabled to view it?bcc=youremail@otherdomain.wsThis email address is being protected from spam bots, you need Javascript enabled to view it
Body:you@yourdomain.comThis email address is being protected from spam bots, you need Javascript enabled to view it?body=I would like information regarding the new Dreamweaver Tutorials and Templates.

And of course you can combine these by using an “&” like this:

you@yourdomain.comThis email address is being protected from spam bots, you need Javascript enabled to view it?subject=Dremweaver&body=Please send me some Dreamweaver Templates.

1. Links or if you prefer, hyperlinks, create connections to many types of files including html pages, movies, PDFs, sound, etc. Other links may include Anchors, Null links, and email links.

Links can be created a number of ways, i.e. the Site window, document window or via the Property inspector.

Let’s first explore how to create links, then we will look at the types of links.

2. Document window. From the document window

• Select the word(s) that you would like to become the link
• Right click to bring up the context menu
• Click Make Link
• Browse to the html page and click the Select button

Note: Once your link has been created, you can follow these same steps, and click Change Link to modify a link. You can also click Open Linked Page to open the linked page within Dreamweaver.

3. Site window and Property Inspector. Depending on workflow, there are sometimes that I use the Site window in conjuction with the Document window or just the Property Inspector.

Linking using the Site and Document windows.This allows me to use the Property Inspector’s Point-to-File icon.

• position the document and site windows adjacent to one another
• select the word(s) that you would like to become the link
• From the Property Inspector, drag the Point-to-File icon to the document you would link to in the Site window as demonstrated below

Linking using only the Property Inspector

• Selecting the word(s) that you want to become the link
• Type or browse to the page you are linking to using the Property Inspector

Note: You can use the Target drop down box to specify how the link opens, i.e. in the same window, new window, etc. Additionally, if you are linking to an external page, you must include the entire url (http://www.sitebuilder.ws) including http://

More information about the types of links on the next page!

Dreamweaver Templates Tutorials

How can I insert html code into the editable region of a Dreamweaver template?  Read this tutorial to find out!

1. Open the page based on the Dreamweaver template.
2. Insert your cursor into the editable region where you want to insert the html code and type INSERT CODE HERE. This is just a place holder.
3. Next we need to change our VIEW so that we can see the code. You can choose either CODE or CODE and DESIGN (Split View). I prefer the latter so I can view both the code and design at the same time. Make this choice from the menu View > Code and Design.
4. Now, you should see two panes with both code and the design. From the design view, click and highlight the text INSERT CODE HERE. This will also highlight it in the CODE VIEW. This is where we will insert the HTML code into the Dreamweaver template.
5. Now you can paste the HTML code into the CODE VIEW. Make sure that you paste over the sample text you inserted.
6. Finally, publish and preview your page to make sure that the code is working properly.

You have now learned how to insert HTML code into the Editable regions of a Dreamweaver Template.

Coming Soon!

In just a few days, I will be releasing a new free Dreamweaver  Template. I call it Perpetual Momentum and am happy to offer this template at no charge. You can download this template by becoming a free member here at SiteBuilder.ws.

You will be blown away by how easy it is to have a stylish website in just a few minutes. This free Dreamweaver Template and Dreamweaver Video tutorial will take you to the next level.

The first step in building your website is to Define Your Site in Dreamweaver. There are several Categories in the Site Definition window; we will focus our attention on the Local Info and the Remote Info. This is key since we will be building our website on our local computer, then publishing it on a remote webserver.

Let’s start by launching Dreamweaver. Open the Site Definition window by selecting Site > New Site from either the Site window or a blank document.

We’ll spend the next couple of minutes here in the Site Definition window. In the first part, we’ll define the Local Info as follows: Site Name: Make up an intutive name that makes sense to the people who will be working on this website.

Local Root Folder: Use the folder icon to browse to the folder where your files reside on your local computer.Because I have installed PWS (Personal Web Server) on my computer, I generally keep my websites in the C:\Inetpub\wwwroot in their own folder. If you haven’t installed PWS, you should have a designated location for all of the websites that you work on, like C:\websites. For example, I may have 20 websites that I am working on, so for organization, each would have its own folder under C:\Inetpub\wwwroot, in this example the contents of the new site are in the sitebuilder folder.

HTTP Address: This is the final destination of our website; In other words, when I transfer the publish the SiteBuilder website to the web, I will access the website by typing http://www.sitebuilder.ws. Additionally, Dreamweaver will manage our relative links throughout the site.

Let’s move on to the next step by clicking Remote Info in the Category column.

Now we will define our Remote Info. In other words, the place where our website will be hosted. It could be any number of places, but most likely at an ISP, or on your company’s webserver. In this example, we will be using an ISP and publishing our web pages via FTP.

One of the cool things about Dreamweaver is that it has a FTP client built right in, which makes it easy to publish web docs. By default, FTP is set to disconnect at 30 minutes. You can change this setting by going to Edit>Preferences>Site.

(Note: these settings will vary depending on where your website is hosted, your ISP or Web Administrator should provide the FTP Host, Host Directory, Login, and Password information)
Access: Select FTP from the drop down box.
FTP Host: Enter the hostname or IP address of your FTP site
Host Directory: Make sure that identify where you content will go. This website will go into the root directory. My isp has assigned my websites root directory as a folder called web, therefore, the setting is web
Login/Password: Enter the information that your ISP or System Administrator gave you.
Check In/Out: This is a good feature if your are collaborating with other web professionals on this website. Since we are working alone, we will leave this box cleared.

Now that you can have defined your website with the Local and Remote Info, you can publish your work and view it live.