dreamweaver « Christopher Ross

Posts Tagged ‘dreamweaver’

30
Mar
2009

Hyper linking in Dreamweaver

HTML is all about something called Hyper Linking. Actually, that’s what the first two letters of HTML pretty much stand for … Hyper Text Markup Language but what does it actually mean? Well, oddly enough us geeks are not all that tricky to understand, give us a beer mug shaped like Yoda’s head and let us string together a few acronyms and we’re happy.

Hypertext is text on a page that contains a Hyper Link.

A Hyper Link is a piece of text or graphic which links to another document. When a user clicks the Hypertext, they follow the Hyper Link to the new document. Not brain surgery but I completely understand how most people would never need to know that.

Using Hyper Links in Adobe Dreamweaver is, for the most part dead simple. To insert a hyperlink into your Dreamweaver document, simply ensure you are in Design mode and select the text you want to make a hyperlink. Next, using the Property toolbar, type the website address you’d like to link to.

How to make a hypertext link in Dreamweaver

There are actually several things you can do with a hyperlink, called protocols. Most people only ever know about the http:// protocol (the Hyper Text Transfer Protocol) but there’s also a ton of other protocols people could use including the https://, ftp://, mailto://, gopher:// and of course the nntp:// protocol. If you have no idea what these are, congratulations … you’ll almost never need to care in your life unless you’re a hard code web developer.

Once you’ve added an http:// link using Dreamweaver you can also force the clicked link to open in a new web browser simply by adding the phrase _blank to the Target field of your property bar. There are a couple of other neat tricks with anchor tags people should be aware of, but to accomplish them we’re going to have to switch to Code view in order to see the following code:

[source lang="html"]<a href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]
In addition to the href value (where the click will go), you can also add:

accesskey to make the link a keyboard shortcut
class to assign a CSS class
dir (rtl or ltr) to make the text run right to left or left to right
id to make the anchor text have a proper name
lang to assign a language value
style to format the tag
tabindex to index the tab order for the link
title to assign a title tag
rel for the link relationship.

Of these I would recommend most links on a website have an href value to show where people should go, an ID if it’s a critical link, a rel for defining relationship values and the title for SEO value. Typically then, a link should look like:

[source lang="html"]<a rel="nofollow" title="My Great Website" id="mainlink" href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]

Absolute Paths vs. Relative Paths

One of the great debates in web publishing is the choice between using absolute paths vs. relative paths. An absolute path is one which is mapped completely to the final destination (http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/) vs. one that is linked relative to the document you’re currently reading (../placing-page-content-in-adobe-dreamweaver/) the main advantage of an absolutely path is that it’s locked, while the main advantage of a relative path? That’s it’s relative … in the end, it doesn’t matter so long as the link works.

This tutorial is part six in a ten part series.

Preparing a website in Adobe Dreamweaver
Building your first Dreamweaver Template file
Structuring your website with Adobe Dreamweaver
Improving the common elements in Dreamweaver
Placing page content in Adobe Dreamweaver
Hyper linking in Dreamweaver
Working with Images in Adobe Dreamweaver
Adding Cascading Style Sheets with Dreamweaver
Putting your website on a remote web server with Adobe Dreamweaver
Adding Google Analytics to your Dreamweaver Template

Tags: adobe, analytics, anchor text, aware, building, center, content, course, css, design, doc, dreamweaver, google, html, mu, neat tricks, nofollow, page content, relationship, tutorial, web developer, website
Posted in HTML Programming

10
Nov
2008

Placing page content in Adobe Dreamweaver

4 Comments

So far in the tutorial series of building a website in Dreamweaver, I’ve focused a lot on the Template including the header and footer elements but now I want to take a bit of time and look at the content area of a website.

In order to understand how to build a website properly, you first have to understand some basics of Search Engine Optimization, or maybe you have to understand some basics of website publishing to be good at SEO work but either way, publishing web content and optimizing your web pages is interconnected.

A web page needs a specific structure, just like a book needs chapters and paragraphs so does a web page. Some people forget the first real use of the web was for academic papers, today the structure of a web document is still very connected to it’s origins and there are some pretty basic tags used to format pages. Let’s take a look at the basic building blocks of a web page and how to use them properly before we begin placing text in our documents.

Headings

xHTML allows for up to six headings on a page, each should be used in a hierarchal structure starting with the most important and proceeding to the lowest value.

<h1> – There should only every be one <h1> tag on a web page, the level one heading is most often also the title of the document and is extremely important both in standardization practices and search engine optimization
<h2> … <h6> – Used as hierarchal structure tags, the lower headings are used to identify the importance of each level of the document. <h2> contains content more important than <h3> for example

Lists

Web pages can also contain lists, as we saw in our earlier lesson about menus. Lists come in two flavors, each must contain list items (<li>) to be used correcty.

<ul> – An unordered list, most commonly presented with a bullet character (•)
<ol> – An ordered list, most commonly presented with a numbered value (1,2,3,…)

Paragraphs

The basic building block of a web page, the paragraph (<p>) tag defines a paragraph.

Example of a Page Structure

Because web page content is structured in a standard manner, we can demonstrate that structure in a simple document tree such as:

<h1>
<p>
<h2>
<p>
<h3>
<p>
<h2>
<p>
<ul>
<p>
<p>

This document structure demonstrates an easy to understand, mechanical overview of the document but also acts to help new web publishers understand that web page publishing and web page design are two different things, we’ll get to design later.

Working in Dreamweaver

Now that we have a basic understanding of how to create web page content, we need to write something for our pages. To save time, I’ll let you into another publisher trick. Using Lorem Ipsum to generate gibberish text for websites allows us to save time by filling in our content. Later, when we know what we want to place on each page we can go back and fill in the real text.

For now, pop over to the Lorem Ipsum generator and create five random paragraphs of text. Windows users will want to take an extra step here … when you copy text of the Internet, Windows tries to also copy the xHTML tags. Let’s get rid of the excess content:

Copy the text from the Lorem Ipsum Generator
Create a new Dreamweaver document (Control – N)
Switch to Code View
Select All (Control-A) and Cut (Control-X) it
Paste the text from the Lorem Ipsum Generator
Select All (Control-A) and Copy (Control-C) it
Close the new document

What this did was created all the special codes, and leaves you with just the plain text.

Next, open the about.html file in your Dreamweaver File document and ensure you’re in Design View. Remember when we created the template we created an Editable Region named Content? In that area, Dreamweaver placed the word Content, now I want you to select the word and Paste (Control-V) the Lorem Ipsum text into place. This will replace the existing text on this page with the content from the generator.

Take a bit of time and format the text using only the text format tool on your Properties toolbar. This will allow you to apply <p> and <h1> … <h6> tags to your Lorem Ipsum text.

Once you’ve got the hang of adding some <p> and <h1>, <h2> tags to your document, try adding an unordered list (<ul>) and some list items (<li>) to your page. Notice that Dreamweaver automatically creates the list items for you in an ordered or unordered list.

picture 6 300x154 Placing page content in Adobe Dreamweaver image

Now that you have an understanding of how to create paragraphs, headings and lists for your web page content take a bit of time and add real text to your website pages for all for of the pages. Before you add anything however, as yourself where the content belongs and try to understand that every element needs to belong to a document hierarchy.

One of the best documents to see a document hierarchy demonstrated in is a traditional resume, take a few minutes to study this example of a document structure:

<h1> – Christopher Ross
<h2> – Career Objectives
<p> – A paragraph about my objectives
<h2> – Previous Employment
<ol><li> – My employers
<h2> – Education
<ol><li> – Schools

Once you appreciate the structure of a document, creating HTML pages is easy.

This tutorial is part four in a ten part series.

Preparing a website in Adobe Dreamweaver
Building your first Dreamweaver Template file
Structuring your website with Adobe Dreamweaver
Improving the common elements in Dreamweaver
Placing page content in Adobe Dreamweaver
Hyper linking in Dreamweaver
Working with Images in Adobe Dreamweaver
Adding Cascading Style Sheets with Dreamweaver
Putting your website on a remote web server with Adobe Dreamweaver
Adding Google Analytics to your Dreamweaver Template

Tags: dreamweaver, html, xhtml
Posted in Learning

10
Nov
2008

Improving the common elements in Dreamweaver

2 Comments

Since we’ve been working with a fairly basic website my previous tutorials, I want to take a bit of time and improve the common areas of your site by adding some additional structure to our common areas.

To do this, let’s open up our Template in Dreamweaver and look at adding some <div> tags to define our content. The <div> tag is a Division tag, it’s used in xHTML to differnentiate between different areas of our website. In previous tutorials we used it to structure the Header, Content and Footer. Now we want to further break down those areas include distrinct regions.

The header currently has a few basic elements, the word Header, an unordered list and four items. To improve our effectiveness as web publishers we want to help browsers (and people) know what those areas are, so we’re going to add the <div> tags to:

Define our Site Name
Add and Define a Slogan
Define our Site Menu

First, let’s select the word Header and change it to My Site Name, then select the new text and add a <div> tag called “sitename”. Remember to use the ID, not the Class to define the name of your new area!

Next, here’s a shortcut for selecting content in Dreamweaver … put your cursor in the text and press Control-A (or Apple-A on the Mac). This will select all next tag in the hierarchy, so the first click should select the paragraph and the second will select the <div> tag named sitename.

Once you have the proper <div> selected, click the right arrow button to place your cursor after it and create a new <div> tag named “siteslogan”. Dreamweaver will now automatically add the tag along with some instructional text reading “Content for id “siteslogan” Goes Here“, we can leave that there for now.

Next step, let’s tell people that the unordered list is a menu. To do this, we need to place our cursor somewhere in the menu and use the Control-A trick until we’ve selected the whole menu. Now insert a new <div> tag labeling it with the name menu.

We are going to do the same for the footer but instead of replacing the text “Footer”, let’s delete both it and the <p> tag it’s sitting in. Now, let’s select our footer menu and create a <div> called “footermenu“. Remember, only one object per page can use and ID, so it has to be different from our header menu.

Now it’s time to add a copyright notice. Select the whole <div> for your footermenu and press the right arrow. This will allow us to create a new <div> named “copyright” insert our notice on the footer of the page. Selecting the auto generated content, let’s insert a copyright symbol from the menu using the Insert > HTML > Special Characters > Copyright menu item. This will create a © character in your text. Add the year and your name and you’re done.

There you have it, your HTML document is now properly dividing into divisions and ready for the next part of our tutorial Placing page content in Adobe Dreamweaver. Saving your Template will update your pages to include the new changes.

This tutorial is part four in a ten part series.

Preparing a website in Adobe Dreamweaver
Building your first Dreamweaver Template file
Structuring your website with Adobe Dreamweaver
Improving the common elements in Dreamweaver
Placing page content in Adobe Dreamweaver
Hyper linking in Dreamweaver
Working with Images in Adobe Dreamweaver
Adding Cascading Style Sheets with Dreamweaver
Putting your website on a remote web server with Adobe Dreamweaver
Adding Google Analytics to your Dreamweaver Template

Tags: adobe, dreamweaver
Posted in Learning

21
Oct
2008

Structuring your website with Adobe Dreamweaver

8 Comments

For those of you how have been following my series on building a website in Dreamweaver, you’ll know that we’ve already setup a Site, created the four basic pages of our website and assigned a Template to the files. What we have now is technically a website but it’s lacking a lot.

What we want to cover in this lesson is how to structure your web pages and website to be effective. This isn’t about Dreamweaver, it’s about web standards and ensuring your website is compatible with the expectations of groups like the W3C and search engines such as Google. It’s also common sense and if you can get in the habit of building a website properly, it becomes easy to do maintain it later.

Adding a menu to the Template

So our first step today is to add a menu to our website. To do this, we need to open the Template file we created already and add both text and links to the other files. This is going to be our menu, so let’s start by making sure we’re in Design view and placing a new paragraph after the word Header.

On the new line that we’ve created we want to type the word Home and press Enter. On the new line, let’s make a new entry for Services and add a new line. Do the same for Contact and About.

Now for something really cool. What is a menu? It’s a list of pages on our website so, let’s make it a list and let’s tell Google that it’s a list. To create a list in Dreamweaver, we are going to highlight the four lines Home, Services, Contact and About by holding down our left mouse button and dragging the cursor over the four lines. Then, using the unordered list button on our Property panel (if you don’t have a Property panel go to Windows > Properties) we will make our menu an unordered list.

Adding the hyperlinks to our menu is our next step. Select the word Home and again using our Property panel, let’s add a new link by clicking the folder icon. Find your index.html page from the list and select it. This will turn the word Home blue, indicating that there is now a hyper link on it. Do the same for Services, About and Contact and you’ve built a menu for your website. As a note, you can also add the hyperlink by dragging the target (circle with a target on it) to your Files panel to the right and point it at the filename.

Applying your changes to your site

Pressing Control-S at this point will Save your file and also prompt you to see if you’d like to update the rest of your website. Yes, we want to update the website. This will apply the changes from your template to the other four pages we’ve already created.

Building the footer for your pages

A header and a footer are basically the same on a web page, the difference being that we want one at the top and the other at the bottom but it’s best practice to have a menu on both. To add a menu to our footer we could follow the above steps or we could use Dreamweaver to make our life easier.

Place your cursor anywhere in the top menu, say for example beside the word About. You’ll notice at the bottom of your Design View document that there’s a string of HTML that reads something to the effect of <body><ul><li><a>, this is the document structure of your current object. Basically it’s saying that your cursor is located:

Within the Body of your document
Within an Unordered List
Within a List Item
Within the Anchor tag

Your document may not be exactly the same but what’s important is that you’re within the <ul> of your list. Along the bottom of your window, click the <ul> tag and you’ll see that you’ve selected the whole list (all four items). Simply Copy (Control-C) the object and you’ll have the whole menu in memory.

Now, you can go to the bottom of your document and place your cursor after the word Footer and Paste (Control-V) the menu. If you did it right you should now have a copy of your menu at the top and the bottom of your page. Click Save and update your pages. If you’d like to see your work before moving on, you can do so by opening the index.htmlfile in your Files panel and Preview (File > Preview in Browser). When you’re done, close the index.html file.

Adding Divisions

Web sites have many parts, in our case we have three distinct areas of our website:

Header
Content
Footer

It’s time that we tell Dreamweaver that we have different areas of our website. This is important later when we get into designing our website. So, to do this we want to select the whole area of each piece and add a Division tag.

Let’s start by selecting the whole Header of our document. We do this by placing our cursor in front of the word Header and selecting all the way to the end of the word Contact. Once that’s done, we need to make sure we have the Common area of our Insert panel (Window > Insert) up and select the icon for the Division tag. The icon for our Div tag is the fifth from the left, between the Table and the Image icon. Clicking this icon will prompt us for an ID or a Class name.

I’m going to take a moment and pause here, to describe the difference between the two.

A Class is used to describe a Div tag for example, you could describe a Class a needing padding, or telling the browser that this class is blue.

An ID on the other hand is giving the Div a unique identifier on the page. I’m reluctant to use the word Name because that has a different meaning in HTML but for lack of a better word, the ID is the Name of the Division.

We want to set the ID of the Div tag to header. This will tell web browsers that the material contained within this section is for the header of our document. When you’re done that, Dreamweaver should wrap a Div tag around your entire header which will appear to have no difference to you (except putting a grey line around the area) but for our layout purposes it’s huge.

Now do the same to the Footer area, calling this Div tag footer.

Finally we have to set the Div for our content area. To do this, we need to place our cursor at the end of the word Content and along the path of our document structure (at the bottom of the page) we need to select mmtemplate:editable. This will select the whole of the editable region. Adding a Div tag called “content” at this point will be our final step in making our document structure for this tutorial.

I’ve included a screen shot to the right (you can click to enlarge it) of the Template file so far. What you should notice is that we have a document with three distinct areas:

Header
Content
Footer

The Header contains:

A Title
A Menu with four items, each hyper linked

The Content contains:

An editable area named Content

The Footer contains:

A Title
A Menu with four items, each hyper linked.

Wrapping up

Save your Template and update your pages, you can preview your work to date and hopefully you’re still with me. If you have any questions or comments please let me know using the comment area below, I hope you’re enjoying the tutorial so far.

This tutorial is part three in a ten part series.

Preparing a website in Adobe Dreamweaver
Building your first Dreamweaver Template file
Structuring your website with Adobe Dreamweaver
Improving the common elements in Dreamweaver
Placing page content in Adobe Dreamweaver
Hyper linking in Dreamweaver
Working with Images in Adobe Dreamweaver
Adding Cascading Style Sheets with Dreamweaver
Putting your website on a remote web server with Adobe Dreamweaver
Adding Google Analytics to your Dreamweaver Template

Tags: adobe, dreamweaver, html, tutorial
Posted in Learning

21
Oct
2008

Building your first Dreamweaver Template file

7 Comments

If you’ve made it this far, you’ve most likely already completed my first step in this tutorial called Preparing a website in Adobe Dreamweaver. If not, I’d suggest hopping over and following the steps, it should only take a few minutes and will get you ready for the next part. So far, you should have created a Site in Dreamweaver, opened your Files tab and made four new web pages each with a little bit of silly content in them. With luck if you open any one of the pages you’ll see different content depending upon which one you open.

Now this is important so please read this part … building web pages is not about designing web pages. The two are very different subjects and we’ll get to the design a little later but for now, let’s keep your View in Design (View > Design in the menu) and focus on making our website technically accurate. Once that’s done, we can make it really cool.

In Adobe Dreamweaver we can create short cut files called Templates which allow us to store the common aspects of multiple pages in a single file. These common files most often include the header and footer areas as well as common side bars of a website which allows us to address some of the most basic principles of website design.

CRAP. Yes, I said it.

CRAP is a basic principle of design which breaks a creative project into four areas, my belief is that if your layout features all four it’s a good design but if it’s lacking any one of the four, it isn’t. CRAP stands for:

Contrast
Repetition
Alignment
Placement

Each of the lessons we cover in this series helps reinforce these four basic concepts, in this tutorial we’re talking about Repetition. Each web page in your website should have the same basic design and layout regardless of the page. We’re also addressing Placement by placing the correct content in the correct areas. Just wait, in lesson three we’re going to talk about the structural hierarchy of xHTML documentation publishing … very exciting.

Creating a Template in Adobe Dreamweaver

If we wanted to we could just add the header and footer HTML into each of our pages but that would lead to human error and sloppy coding, more importantly as the site grew it would mean that we had to change dozens or hundreds of pages instead of just a few. I’m too lazy to be faced with hundreds of updates every time I want to change a common element so instead we need to find an easier way and luckily with Dreamweaver it’s a pretty simple short cut.

Under the File > New option you can create a Template by selecting Blank Template > HTML Template > <none> this will open a new window similar to the one we created in our last Tutorial but this time it’s a Template file. Saving the file will prompt us with a new dialog box which is going to prompt us for the name of our new Template. I’ll call mine Untitled-5 but you can name yours anything you’d like.

Once you’ve saved your Template you should notice a new folder in your Files panel called Templates. This is where your template files are stored, if you double click the folder you’ll see a new file with the extension .dwt, this is your template file.

Adding an Editable Region to your template

While Templates are amazing for duplicating you’re content across multiple pages, you’ll need to be careful so that you have the ability to have unique content on each page. By default a Template will apply itself over top of all your local content so we need to add an Editable Region.

Before we do this, I want you to type the following three words in your Template document, each word should be on a line by itself.

Header

Content

Footer

Now that we have these three key elements of the website design labeled, I want you to add an Editable Region by first selecting the word Content and then going to the menu item Insert > Template Objects > Editable Region. It will ask you to name your region, let’s call it Content to make thing easy. When you’re done this process the work Content should be surrounded by a blue outline with the title Content. Congratulations, you’ve just added an Editable Region to your template. Now, when we update the content across your website you’ll be able to instruct Dreamweaver where to put the content you previously entered.

Let’s save the Template file and close it now.

Applying your template to pages

A Template is great but useless if we don’t apply it to pages so that’s exactly what we need to do now.

Open about.html and select Modify > Templates > Apply Template to Page … so that we can apply the template file to your page. We need to select the template from the Templates list and click OK to continue. Next we’ll be asked where we want to put pre-existing content, this is the content we placed in lesson one and it’s important that you select the content and specify you that original content to appear in the proper area. If you named the Content area Content as I wrote, you should select that from the drop down box. Once you’ve done that, click OK and you’re done.

When you view your about.html file in Dreamweaver you should see a yellow line around the main text area and the words Header and Footer outside those areas. This yellow line represents your Editable Region in your Template object. Everything outside the yellow is stored in your template file and can not be edited while on this page.

Save your work and apply the same template to your three other files, when you’re done your website has a proper Dreamweaver Template file attached and you’ll be ready for lesson three, in which we’ll cover how to structure your HTML document.

This tutorial will be broken down into the following chapters, each published individually over the coming weeks.

Preparing a website in Adobe Dreamweaver
Building your first Dreamweaver Template file
Structuring your website with Adobe Dreamweaver
Improving the common elements in Dreamweaver
Placing page content in Adobe Dreamweaver
Hyper linking in Dreamweaver
Working with Images in Adobe Dreamweaver
Adding Cascading Style Sheets with Dreamweaver
Putting your website on a remote web server with Adobe Dreamweaver
Adding Google Analytics to your Dreamweaver Template

How are you doing so far? Leave me some feedback so that I know how to improve this template as we move along.

Tags: adobe, dreamweaver, templates, tutorial
Posted in Learning

20
Oct
2008

Preparing a website in Adobe Dreamweaver

8 Comments

Let’s take a look at how to create a website properly using Adobe Dreamweaver, this tutorial will go over the straight from the start of the process to uploading your website to a web server on an Internet Service Provider. I’ve purposely tried to keep this tutorial fairly basic as it’s designed to a new web designer and can be considered fairly basic but at the same time, I wanted to introduce some of the more complex concepts we find in Dreamweaver and on the web in general.

Preparing a website in Adobe Dreamweaver

As we prepare to create a website in Adobe Dreamweaver, we first have to understand what a website is and how we can make the most of it. Frankly, anybody can create a website and there are a million tutorials out there which will teach you how to do it but if I’m going to take the time to write about it, I’d like to help you learn to do it the right way.

What is a website?

A website is a collection of documents, images, text, media and links associated in a common place. Most likely it’s hosted on the Internet but it doesn’t have to be, most importantly it’s a collection of web pages.

What is a web page?

A web page is a document written in the Hyper Text Markup Language and is designed to be read by web browser software. A web page may contain text, graphics, images, rich media and links. Why am I taking the time to explain it to you at this basic a level? Ironically in my career I’ve found a lot of web professionals who don’t really understand the basic concepts so if you’re new to this, it’s worth a review.

Now, a web page may seem like a simple thing but before we go and start creating a million fancy pages we want to create the website container in Dreamweaver so that all of our pages are properly associated and we can take advantage of Dreamweaver’s site management functions. If you don’t already have a copy of Dreamweaver, you can download a trial version at www.adobe.com

Creating your first site in Dreamweaver

Adding a site in Adobe Dreamweaver is fairly simple, along the top menu you can create a New Site … under the Site menu item. Once created a dialog box will appear. The are two modes to add a website to Dreamweaver, Basic and Advanced. Let’s make sure you have Basic selected and take a look at the options provided.

First, you’ll need to create a name for your website. You can call it what ever you like, this title is for you and you alone. I’m going to call mine Unnamed Site 2 because I’m original and like the sound of it.

The HTTP address is the website address of your site. If you don’t already have a domain name, don’t worry about it. Otherwise, fill in the URL of your website here. For example, my website address is http://www.thisismyurl.com.

Clicking on the Next button will bring us to a screen asking about Server Technology. For now, let’s say that we do not want to use a server technology. Using this option later will let us use a scripting language such as PHP but we’ll get to that later.

We click the Next button again and Dreamweaver wants to know where we’d like to edit our site. We can choose to edit on our local computer, in which case we’ll need to add a local folder to our hard drive or we can edit remotely on an FTP server. So let’s add a local folder and link it in the dialog box provided.

When we click the Next button again you’ll find yourself on a screen asking about remote access. This is for people who want to FTP or upload their websites to a remote web hosting company. By default Local/Network is selected but I want you to change it to None and press Next. We’re going to cover how to FTP our site and things later on, so let’s not get too bogged down in technical talk at this point.

If you’ve done everything correctly you’ll now see a Done button and you’re ready to get started with your website. At this point, you’re going to notice that it’s not very exciting. In fact, it’s empty but that’s OK because that is exactly how we want to start a website.

Adding files to your website

If the purpose of a website is to hold web pages, we now need to add a web page. To create a new web page in Dreamweaver we have a few choices:

You can create a new page using the short cut key Control-N (Apple-N on a Macintosh)
You can create a new page using the menu option File > New …
You can right click (ctrl-click on a Macintosh) the Site name in your Files panel to the right. If you don’t have a Files panel, hit F8 or go to your Windows > Files menu item.

Now, if you took the first two options you’ll see a big and scary dialog box (the third option skipped this step) asking you what type of page you want to create. Let’s keep the ball rolling on the simple tutorial and select Blank Page : HTML : <none> from the menu. Don’t worry about the rest of the items, just click Create to continue. This will create a new file but it’s not added to our site yet.

To add the site to your website you need to File > Save (Control-S / Apple-S) your document. For the sake of compatibility down the road, I’d like you to name this file index.html and save it. Now, on in your Files tab you should see your Site as well as a single file named index.html. Congratulations, you’ve created your first (single page) website.

You can repeat the steps outlined above to add three more pages to your website, in the end you should have:

index.html
about.html
contact.html
services.html

In our next lesson we’ll learn how to create a website Template file which is used to control the structure of your website. Before then, why don’t you take the time to add a couple paragraphs of text to each of the pages? Remember to make sure you’re in Design view by going to your View > Design option (if there’s a check mark on it you’re OK). Having a hard time thinking about what to say? No problem, at this point in the process why not just copy some Lorem Ipsum into each page?

This tutorial will be broken down into the following chapters, each published individually over the coming weeks.

Preparing a website in Adobe Dreamweaver
Building your first Dreamweaver Template file
Structuring your website with Adobe Dreamweaver
Improving the common elements in Dreamweaver
Placing page content in Adobe Dreamweaver
Hyper linking in Dreamweaver
Working with Images in Adobe Dreamweaver
Adding Cascading Style Sheets with Dreamweaver
Putting your website on a remote web server with Adobe Dreamweaver
Adding Google Analytics and other neat tricks to your Dreamweaver Template

Was this tutorial easy enough to follow? Let me know through your comments below.

Tags: adobe, cs3, dreamweaver, tutorial
Posted in Learning

16
Oct
2008

Winter Wonderland Flash Animation Contest

11 Comments

November 16th – Thanks to everybody who showed interest in the contest, I had a lot of emails about it and there seemed to be some real interest but in the end, nobody sent in an entry.

What could be better than building awesome Flash animations? What about building great Flash animations that reward you with up to $1,000 and a free copy of the Adobe CS4 Creative Suite (Production or Web)? I was reading a great article over at Upstart Blogger this morning and I thought, what better way to reward my readers than to give away a copy of something we could all benefit from.

Create a Flash animation no longer than two minutes in length about winter, the winter season or holidays in winter. Contest closes November 15th and voting begins the next day! There are five different prizes, so best of luck.

Now, I have some ground rules that you need to agree to first.

You must use legitimate, licensed versions of Adobe Flash to create your animation.
You must own the content or permission to use the content of your animation.
You may enter multiple animations in this contest, but only one per entry.
You may have a team or work independently but there is only one prize per entry.
Your animation may be no longer than two minutes in length.
Your animation may not contain anything vulgar, vile, disgusting or nasty.
Your animation must focus on winter holidays, the winter season or winter related subject matter.
Your animation must be original and will be exclusively hosted here.

How to enter:

Create your totally awesome animation in Adobe Flash.
Send me your SWF of your animation by email along with:
- name
- age
- email address
- telephone number
- link to your website
- a brief bio (100 words or less)
- name of the animation
- a brief description of the animation
Wait for the confirmation email. If you don’t get one within 24 hours, send me a message to confirm I received your animation.
Once your animation is posted, I’ll send you a second email and you’ll be able to see it online!

Prizes:

First Place wins $500 and a copy of Adobe CS4 Creative Suite (Production or Web).
Second Place wins $250.
Third Place wins $100.
Most commented video wins $75.
Most linked to video wins $75.

Legal stuff and things I’m required to say:

If you don’t get a confirmation email from me, you’re not entered in the contest.
Contest entry ends November 15th, 2008 at midnight here in Fredericton.
Voting begins November 16th, 2008 at midnight here in Fredericton and closes on December 15th, 2008 at midnight here in Fredericton.
Adobe has nothing to do with this contest, nor do they endorse or sponsor it.
You grant me the right to display your video here on my website.
No purchase required to enter.
I have the right to limit, refuse or reject animations for any reason.
I reserve the right to terminate or withdraw the contest at any time without prior notice.
The contest is subject to all federal, provincial, and municipal laws.
This contest is operated under the laws of the province of New Brunswick, Canada.
Comments, votes, links etc. are counted based on the data available on my website at the time of closing.
It must be legal for you to enter this contest in your own jurisdiction.
The prizes must be accepted as awarded. No substitutions or exchanges for cash or other items of value are permitted.
Winners will be selected by a panel of three judges.

Best of luck! If you have questions, feel free to ask.

Tags: Address Telephone, adobe, adobe flash, Animation Contest, Animation Flash, brief description, Confirmation, Create Animation, creative suite, cs4, dreamweaver, flash, flash animation, flash animations, Free Downloads, Giveaways, prizes, subject matter, swf, telephone number, two minutes, upstart, winter contest, winter holidays, winter season, winter wonderland
Posted in Blog Posts

17
Jan
2008

Adobe Dreamweaver Tip – Cleaning Up Unused Files

3 Comments

Here’s a great tip for Dreamweaver users, ever finish a website design and then not know which files are active and which are not? It happens to me all the time, lots of spare graphics, even some HTML or PHP files that are simply not in use anymore. So how do I clean them out?

Step One – Backup

It may sound silly but the first thing I do is click on the file folder icon under Files and select Reveal in Finder which opens the folder on my hard drive. I back this folder up completely but copy and pasting it to my desktop.

Step Two – Recache

Under the Site menu I select Advanced > Recreate Site Cache to make sure I have the most up-to-date data about my site.

Step Three – Web Documents

Now here’s where Dreamweaver gets sexy. In your File list, simple start selecting files that you think are suspect and hit the delete key. If they’re linked anywhere in the site, Dreamweaver will warn you that the file is links … and you don’t want to delete it. I do this with whole groups of files to save time, if it doesn’t let me delete them then I know at least one file is still live.

Step Four – Graphics

Once I’ve cleared out the Files list, I move onto images and start doing the same things. If the image is found in a web document, it will warn you before deleting this but an even better way to do it is to use the Copy dependent files option on the original files. This option is seriously cool … set your Remote folder to a new folder on your desktop and then back in the file list, select all your files but not the images folder. Now, upload your website to the remote folder. Dreamweaver will ask you if you want to include dependent files which includes any CSS, JavaScript, rich media or images that are included on the pages. The resulting folder will contain everything you need to upload to a website but none of the junk.

Tags: adobe, advice, Dependent Files, Desktop, dreamweaver, Dreamweaver Users, File Folder, Folder Icon, Four Graphics, hard drive, Icon Files, images, New Folder, Php Files, Remote Folder, Sexy, Site Dreamweaver, Site Web, upload, web document, Web Documents
Posted in Learning

Posts Tagged ‘dreamweaver’

Hyper linking in Dreamweaver

Absolute Paths vs. Relative Paths

Placing page content in Adobe Dreamweaver

Improving the common elements in Dreamweaver

Structuring your website with Adobe Dreamweaver

Building your first Dreamweaver Template file

Preparing a website in Adobe Dreamweaver

Preparing a website in Adobe Dreamweaver

Winter Wonderland Flash Animation Contest

Adobe Dreamweaver Tip – Cleaning Up Unused Files

Step One – Backup

Step Two – Recache

Step Three – Web Documents

Step Four – Graphics

Pages

Archives

Categories