Lesson 2 - Site Definition

In this lesson, I'll show you how to define a site so you can make full use of Dreamweaver's site management tools. You can define a new site or take an existing site and use DW to define it within DW, so that you get to use all DW's site management tools on an already established site. Although a lot of people think of DW as a simple web page editor, DW is truly an application development tool and web site management program.

DW CS4 provides:

• state of the art design tools
• powerful and open integration
• streamlined environment rearchitected around CSS to provide faster and more efficient development of clean coded sites
• relevant CSS panel...which CSS rules apply to current selection...red stripe..overwritten, in-place editing
• improved end user experience with dynamic cross-browser check
• built in graphics editor so you can crop, resize, and perform minor edits using DW's built-in Fireworks technology
• leverage secure FTP to securely encrypt all file transfers and prevent unauthorized access to data, usernames, password
• work in platform-independent environment for CF, J2EE, asp.net, php and other server technologies (not covered in this class - but for more advanced work)
• new ability to copy from MS Word or Excel and paste directly into DW while preserving fonts, colors and CSS styles
• full unicode support for your OS, including double byte character sets
• tight integration with other CS4 suite programs
• streamlined development environment increases productivity as you find what you need faster
• start page appears when no doc is open to provide quick access to recently used files, templates and tutorial resources
• pre-built layouts and snippets to get sites created
• improved table editing, updated insert bar, streamlined file editing
• more efficient coding using time saving enhancements like right-click tag coding tools, revamped Find &Replace, selection inspector for quick comprehensive property editing
• a robust environment to work with html, javascript, xml, css and server side technologies

WOW! That's a lot of functionality. For today, we'll just get introduced to the workspace and the site definition feature in order to create a very basic site to submit for homework.

It's time to launch Dreamweaver and follow along. . .

Depending upon your operating system and the version of DW you are using, you may see a different display of panels and windows when you launch the program on your computer. If you have used a previous version of DW and are upgrading to DW CS4, the new interface may appear a bit daunting. In Windows, you are given the choice to select an interface for either the designer view or the developer view. For our class, select the designer view for your Workspace Setup.

The Designer workspace displays all your Document windows and panels by default with the Document Window on the left of your screen and all the panels grouped on the right of your screen. The layout is customizable. Once you get familiar with the different windows and panels, you may define the layout and group panels to your specifications.

When you launch DW CS4 for the first time, you will see the Start Page. This start page appears whenever there is no open document. The Start Page provides quick access to recently used files (you won't have any if you've just launched DW), templates and tutorial resources.

If you don't want the Start Page to appear each time you launch DW, you can select the "Don't show again" checkbox at the lower left of the page. However, I recommend that you keep the Start Page showing, because there are some wonderful professionally designed templates and sample pages from which to select and learn. You can also create documents from scratch using the Start Page, or open recently used files. If you do select the "Don't show again" checkbox, you can reset that Start Page to appear again in your General Preferences. We'll review the Preferences later in the course.

From the Start Page, select Create New HTML.

Creating a new HTML file will replace the Start Page with a new document window and an untitled HTML page. Please save this new HTML file now by going to the File Menu - File>Save and saving the file with the name: test.html. You are going to trash this file after we're through with this lesson, so it doesn't matter where you save it. You will use it to experiment, but since you haven't yet defined a site, you will not use it in your homework assignments.

Once you create and save your test.html file, you should now see four main areas in the interface:

1. the Application Menu Bar (The Application Menu Bar is the Bar across the top of your screen that has File, Edit, View, Insert, Modify, Format, Commands, Site, Window, and Help)
2. the main Document Window which contains the new HTML file you just created and saved as test.html
3. the Properties Panel on the bottom
4. a series of Panel Groups on the right

Panel groups are sets of related panels that may be expanded or collapsed by clicking anywhere to the right of their name in their title bar. The image on the left is being viewed by name and the image on the right is being viewed by icon. To toggle between either one of these views click on the double arrow located in the upper right corner.

You can change and customize your panel groupings through the options button on the top right of the panel group's title bar.

You can open and close panels by going to the Window Menu or using keyboard shortcuts.

 

For this project, close all panels except the Document Window by pressing the key F4 at the top your keyboard. F4 toggles the visibility of the panels on and off. Remember that in Dreamweaver as in most applications, there are many ways to do a task. You'll eventually settle into a routine that's best for you.

I prefer using keyboard shortcuts and context sensitive menus rather than Menu Commands from the Menu Toolbar at the top of the screen. The hotkey shortcut is usually to the right of the Menu Command so you can learn them by paying attention as you mouse over a command on the menu. For example, on the previous image of the Window Menu, the Files panel has a check to the left of its name which indicates that the Files panel is open. The keyboard shortcut to toggle the Files panel is F8.

For Windows users, the Integrated view for DW CS4 shows all the windows and palettes within one main window. There is one menu toolbar at the top. For Mac users, the Floating Palette view is consistent with the Mac Interface. This means that your desktop and other applications will show behind your open DW windows and panels. Whichever platform you use to author your pages, you will find the arrangement of palettes that suit you. All the palettes can be detached and float and collapse and expand from their individual title bars.

Tooltips appear by default when you hold your cursor over a button. Noting the tooltips will help you become familiar

You can customize your work space through the Preferences Menu by going to Edit>Preferences in Windows or the DW Application Menu>Preferences in Mac OS.

For now, be sure to have your panels visible using the F4 toggle key on your keyboard. Start typing in the document window. Just type as if you were using a word processor, hitting your Enter or Return key to create a new line or letting the text wrap as it gets to the right edge of the document window.

Show the Insert Panel by clicking on the title bar next to the name. Select Common from the drop down menu to see all of the objects that you can insert into your document. To insert an object in the current cursor location, click on the object's icon in the Insert Panel. A contextual dialog window with attributes for the selected object will display so you can enter your settings. Once you have an object on the page, the Properties Panel or Properties Inspector (PI) will reflect current attributes for that object. You can modify attributes in the Properties panel. Not all available attributes for the selected object will be displayed in the PI, only the most commonly use attributes. You can access more attributes, by selecting the Code View or Split View buttons at the top left of the document window. Code view has code hinting, code completion and color syntax coding which all update in real time. As you select something in the code, the selection will be reflected in the Design View of the document window, and vice versa.

Take a few minutes to play in the document window. Press buttons on the insert bar to see the contextual dialogs that appear. Click the Code, Split, and Design buttons to see the integration of the display in the design view with the code in the other two views. Title your file in the Title: text field. See how the title differs from the file name in the top menu bar of the document window. Select some text and apply some text formatting by clicking the B for bold and I for italics in the Properties Inspector. Make sure that the HTML button on the left is pressed.

Change the font size, indent, formatting, font color, and anything else you want to try on this test file. Click the Page Properties... button on the Property Inspector. Don't spend too long working on this page. I just want you to see what's there, not necessarily know what everything does just yet. We'll get to that later in the course. But now it's time to get started with your homework assignment by defining a site. Close your test.html file. Did the Start Page reappear? It should reappear if you didn't select the "Don't show again" checkbox.

Building a site: define a site - manage all assets for files - use site management capabilities

It is not necessary to define a site to create pages in DW; however for this class you will always define a site and then work within the site to manage all your assets and files for that site. Defining a site enables you to keep track of all files, rename and relocate files, automatically update the links, and manage your files in the Files Panel of the Site Window. When you define a site, you have the option of doing this two different ways, Basic or Advanced. The Basic way guides you through all of the steps but it is complex and not really needed. We will create a site using the Advanced way.

From the Site Menu on the Application Menu Toolbar, select Manage Sites... . Anytime you see 3 dots following a name it indicates Manage Sites Window for our new unnamed site. On the left pane is a column of sites. You won't have anything in your left pane if you haven't defined any sites in DW yet. You can see that I've used Dreamweaver before and have several sites defined already. Select the New... button.

Select New Site and the Site Definition for Unnamed Site 2 will display. Select the Advanced tab if is not already selected. We will not cover the Basic tab because it is more complex and not needed.

Advanced Tab:

There are only 2 categories to fill out, Local Info and Remote Info. Click the Local Info selection in the Category box if it is not already selected.

There are 2 fields you must fill in for the Local info tab.

• Fill in a Site name, which in our example we are using COIN74.
• Fill in the Local Root Folder which is where the files will reside on your computer for this site. In our example it is set to Users/pschales/dreamweaver.

It is a good idea to select the Default images folder. Normally, it is called images located in the root folder. If you select the folder icon but haven't yet created the images folder you can create it here.

Note that the HTTP address will automatically be filled in after the Remote tab has been completed.

Select Remote Info under Category to bring up the next tab.

There are 6 fields you must fill in for the Remote info tab. We are configuring our new site to use the krypton server that Foothill College provides for students.

• On the Access option menu select FTP.
• Fill in the FTP Host which will be: losaltos.fhda.edu
• Fill in the Host directory which will be: public_html/
• Fill in your login name which is your Unix username on Foothill's the web server
• Fill in you password which is your Unix password on the Foothill's web server
• Make sure to check the box to Use Secure FTP (SFTP). If this is not checked it will not work!

Click the Test button to make sure the connection has been configured correctly. After the test is successful click OK and your site is defined and ready to access.

Note that if you are using GoDaddy as your host then the Host directory is just a forward slash, /, if you are using your top level directory. Make sure to uncheck the box to Use Secure FTP (SFTP) and check the Use firewall box.

In case you are using CS5 then configure your remote info as follows but add your username and password:

Congratulations! You have just defined your first site for this class in DW. Now we'll create some files from within the site and I'll show you how to link them even though they won't have any content yet. We'll create the files from the Files Panel.

On to the Files Panel

Select the F8 key on your computer's keyboard to open the Files Panel. The Files Panel is a representation of your hard drive directory structure within Dreamweaver's Site Window. It's important to know that the files in the Files Panel are not just pointers to the files, but they are the actual files on your computer.  Remember that if you delete a file using DW's Files Panel, the file is permanently deleted from your computer.

Some other panels may have opened with the Files Panel. If so, close the other panels and leave the Files Panel open. Make sure that the folder you just named as your root folder in the site definition wizard is displayed in the left drop down menu, and that the words Local view is displayed in the right drop down menu.

Click on the Expand/Collapse button to expand the Files Panel to display both local and remote files.

The Files Panel is now expanded. Click on the Expand/Collapse button in the top right to collapse it back into the right panel dock.

The expanded Files Panel is divided into two panes. By default, the Remote Site files are in the left column and the Local Folder files are in the right column. You can change this in Dreamweaver's Preferences but I will stick with the default layout. Notice that the root folder directory structure will remain identical to that on my hard drive.

As you create files and folders within other folders, plus icons will appear to the left of the folders to indicate that there is more content within those folders. You can then expand or collapse the folders to see the contents of each folder.

Look at the expanded Files Menu. The Site name appears in the Show: drop down menu, and if other sites have been defined, you could quickly move from one site to another using this drop down menu. We are going to create a few .html pages within the expanded Files Panel, and link them to create your first web site in DW. You'll see how simple it is to get started with your web site. Remember that DW is a program that edits and manages SITES rather than individual web pages. Always define a site before beginning creation of any pages or modification of a previously designed web site, and always use this Files Panel to rename files, or change the structure of your directory in order to have DW automatically update all links. It's really a great feature of site management!

* click the link below to continue with this lesson *
Site Navigation

Top

Copyright © 2010 - 2011 Robert D. Cormia - December 14, 2010