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 CS3 provides:
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 CS3, 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 CS3 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:
Panel groups are sets of related panels that may be expanded or collapsed by clicking on the triangle to the left of their name in their title bar. They may be undocked by clicking and dragging on the gripper or grabber at left edge of title bar, or re-docked by dragging the gripper back onto group. See the following 2 images to see how to undock and move a panel to a new location. Put the cursor on the gripper which looks like two vertical dotted lines to the left of the open/close triangle arrow.
Drag the gripper of one panel away from its associated panel group and place it in any location on your screen. Release the mouse.
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 CS3 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 with the interface. 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 hidden 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. Above the Document Window lies the menu insert bar. It contains a selector drop down menu which contains categories of logical groups of objects. To insert an object in the current cursor location, click on the object's icon in the Insert Panel. You can also drag and drop the object on the page. 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.
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 Properties Panel. Don't spent 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 an option to define a Basic or Advanced site. First, we will create a site using the Basic way. After that 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 that you will be brought to another window or dialog box to select some settings. The Manage Sites... command opens the 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 Window/Wizard for Unnamed Site 1 will display. Stay on the Basic tab. Basic Tab:
Select a Site Name. This name won't be used anywhere but within Dreamweaver so it doesn't need to conform to most naming conventions or standards. I'll call mine coin74. Select a name that is descriptive of the site's contents and purpose. coin74 lets me know that this particular site is about this particular Dreamweaver course. Click the Next > button and select the default of No, I do not want to use a server technology. Click the Next > button again.
Select the default Edit local copies on my machine, then upload to server when ready.
How do you connect to your remote server? From the remote server drop down menu, select FTP and for now, enter Foothill's UNIX file server information: losaltos.fhda.edu
No, do not enable check in and check out. Click the Next > button.
A Summary of your Basic Site Definition is presented. Click the Done button.
Once you press the Done button, you've created a new site within Dreamweaver whose structure will mirror the structure on your local system. If you delete a file on your hard drive, it will be gone when you refresh your Dreamweaver site, and vice versa. Tip* If you know your ftp information now, you can enter it at the time you define your site. From now on, when we use the term root, we mean the base folder or location from which all your other files will originate for a particular site. Advanced Tab:Bring up the Manage Sites menu and select New and select site like you did for the basic tab. This time select the Advanced tab. Click the Local Info selection in the Category box.
There are 2 fields you must fill in for the Local infotab.
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.
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. 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 *
|
