Adobe Flash Player not installed or older than 9.0.124!
Contents
Module 1: Getting started with Dreamweaver CS4 1
Setting up your site in Dreamweaver CS4 with FTP 1
Six Steps to Building Your Website: 11
Designing your site: 12
Content Creation: 13
Creating a single page website (minisite) 14
Module 2: Laying out your page with Tables 18
Creating a Table 18
Adding a Banner Graphic 25
Adding text from an external text file 26
Formatting Text 29
Creating Links 38
Background Graphics 45
Creating a Navigation Bar with Graphics 50
Using Forms 55
Using Tables to Organize Your Page 61
How to position Images and Text 63
Module 3: Multipage Site with Navigation & Templates 67
Using Templates 67
Creating a new file from a template 73
Module 4: Advanced Layout using CSS 79
Styling with Cascading Style Sheets (CSS) 79
Attaching our Style Sheet to an existing webpage 83
Module 5: Utilities in Dreamweaver CS4 86
Switching Views: Code View vs. Design View 86
Spell Checker: 89
Find and Replace: 91
Link Checker: 93
Module 6: Uploading your Website 94
Upload the site to a web server using FTP 94
Module 7: Quick Reference and Advanced Topics 98
Top 10 Keyboard Shortcuts used in our Tutorial: 98
Stepwise Instructions: 99
Alt Tags: 100
Anchors: 101
Graphics: 104
Page Properties and Link Colors: 105
Rollover images: 107
Meta Tags: 109
Module 1: Getting started with Dreamweaver CS4
Setting up your site in Dreamweaver CS4 with FTP
In this section we will learn how to create a website using the website creation wizard. Double-click the Dreamweaver icon on your desktop to open the program. After Dreamweaver has finished loading, the start page will appear. The start page is a quick launch tool that gives you the possibility to open recent items, create new web pages and websites or create them using Dreamweaver’s gallery of sample templates.
To set up a new website, Click on the Dreamweaver Site… link from the Create New section of the start page. Another way to set up your website is to go to the Site menu and choose Manage Sites…, click the New… button and choose Site from the context menu. A new window will open, which allows you to configure the new site’s definition under the Basic tab
The first step is to select a name for your site. This is the name that you will later use to identify this project, when you will have more websites created. Let’s say we want to name this one “Beaver Cheese Secrets”. Type “Beaver Cheese Secrets” in the edit box and click the Next > button.
Using a server technology (like PHP, JSP or ColdFusion) is very useful when you are developing dynamic pages. For example, if you have a product page containing hundreds of products and you can see the details for each product, by simply clicking on it. It would be very time consuming to create a hundred HTML pages, one for each product.
What you need to do is use a database to store all your product information (specification, pictures, etc.) and use only one dynamic page to show the details. Clicking on one of the products in the products page should redirect you to the details page and also transmit the selected product to this page.
For our first project we will not be using any server technologies, so just click Next >.
The next step is to choose whether to edit your files locally or directly on the server. The recommended option is Edit local copies on my machine, then upload to server when ready, leave this selected. Now verify where files will be stored, they should be within your My Documents folder, then within a folder with the name of our site, in this case Beaver Cheese. Click Next >.
Note: the files have been saved to our My Documents folder under the Beaver Cheese Secrets folder.
The next step is to select the way you connect to your remote server which will host your website. For our examples, we will use FTP or File Transfer Protocol. This is the simplest method of publishing online. Once you select this option, Dreamweaver can communicate with your hosting company's computer. Your domain is one half your investment in your web site. The next half will be your hosting service provider.
Purchasing hosting service is the virtual equivalent of renting an apartment. You may opt to pay monthly, bi-monthly, semi-annually, or annually. This fee will purchase a space on their server, much like a "room" where all your files will be stored. Your web pages, images, and media will all be held in this allotted space for visitors to come.
In Dreamweaver terms, publishing your files is called either "uploading" or "putting." Downloading, likewise, has its own terms. Downloading is "getting." Dreamweaver wants to know the publication address (most often a variation of ftp.mydomain.com). You will also need your password and username.
Select FTP from the dropdown menu and enter the FTP provided to you by your ISP or that you created. Once you have this information entered, click the Test Connection button to verify that Dreamweaver is able to communicate with your website.
Click Next > to continue.
The second to the last step is to enable or disable Check in and out. If more than one person will be working on your website at the same time, it is a good idea to enable the checking in and out of files. If you are the only person that is going to be editing your website, select No, then click Next >.
The last screen is a summary of your settings. Click the < Back button to go through the previous pages to make any additional changes. Otherwise, click Done to finish setting up your new website.
Notice that in the Files panel on the right our new site has been created.
Changes from CS4 and Earlier Versions:
There are a number of changes to this version that differ. It is important to discuss these so you won't waste valuable time searching for them. The Dreamweaver programmers completely eliminated many features of Dreamweaver's earlier versions.
Common features no longer in Dreamweaver are:
o Flash elements (Image Viewer)
o Flash text and Flash buttons
o Timelines
o Web services
o Layout mode
o Site Map view
The two buttons highlighted in the diagram above are amid the major changes with Dreamweaver. These are the "HTML" and "CSS" buttons. These two buttons will open up very different functions in your program.
HTML has long been hailed as the design language. However, it is quickly becoming obsolete for any design use. The simple fact is that CSS keeps your code cleaner. It is not only easier for you to work on, it loads faster, and makes using media simple.
HTML will help you link, indent, and use ordered or unordered lists.
CSS will help you create designs that are merely a drop-down menu away. Instead of adjusting font size, color, and family for each entry. You can create one section of complete code. You can use the drop-down menu to apply this particular code to as many entries as you wish.
More will be mentioned on these features throughout this book.
| Next > |
|---|
Comments
RSS feed for comments to this post