Transcription

[ Not for Circulation ]Creating a Website: Introduction to DreamweaverDreamweaver WorkspaceInterfaceThe Dreamweaver interface is comprised of six main items:1.2.3.4.5.6.Document WindowInsert BarDocument ToolbarProperty InspectorStatus BarPanel GroupsInformation Technology Services, UIS1

[ Not for Circulation ]Document WindowThe document window is where you build your Web page. Every time you openDreamweaver, a blank Untitled Document window appears.At the top of the document windowis the Title bar that contains thename of your Web page as well asthe file name of your document.On the bottom of your DocumentWindow is a pop-up menu that letsyou resize your window to variouspreset or custom pixel dimensions.Next to the Size Window is theapproximate download speed inkilobytes.At the lower left of the page is the Tag Selector. Whenever you highlight elements of yourWeb page in the Document Window, the corresponding tag is highlighted below in the TagSelector. If you click on a particular tag in the Tag Selector, then the corresponding elementof your Web page will be highlighted. This is handy when you are trying to select a nestedtable.Insert BarThe insert bar is one-stop shopping for many operations. Many items found in the Objectspalette are also found under the Insert menu at the top of the page. The buttons areorganized into several categories, which you can switch by clicking the tabs along the top ofthe Insert bar.Information Technology Services, UIS2

[ Not for Circulation ]Insert Bar Categories The Common category lets you create and insert the most commonly used objects, suchas images and tables.The Layout category lets you insert tables, div tags, and frames. You can also choose twoviews for tables: Standard (default) and Expanded Tables.The Forms category contains buttons for creating forms and inserting form elements.The Data category lets you insert dynamic elements like record sets, repeated regions,and record insertion and update forms.The Spry category contains buttons for building Spry pages, including Spry data objectsand widgets.The Text category lets you insert a variety of text- and list-formatting tags, such as b, em,p, h1, and ul.The Favorites category lets you group and organize the Insert bar buttons you use themost in one common place.Server-code categories are available only for pages that use a particular server language.This is beyond the scope of this workshop.Document ToolbarThe Document toolbar contains buttons that let you toggle between different views of yourdocument quickly: Code, Design, and a split view that shows both Code and Design view.The toolbar also contains some common commands and options related to viewing thedocument and transferring it between the local and remote sites.Property InspectorInformation Technology Services, UIS3

[ Not for Circulation ]Usually placed or found at the bottom of your screen is the Property Inspector. The PropertyInspector controls many settings. The default Property Inspector is for formatting text. Thecontent of the Properties Inspector is context sensitive and changes depending on what isbeing edited on screen. To show the Properties Inspector, choose Window Properties. Some properties can only be viewed if the Property Inspector is expanded. To do this,click on the arrow at the lower right corner of the Property Inspector.Status BarThe status bar at the bottom of the Document window provides additional information aboutthe document you are creating. The tag selector shows the hierarchy of tags surrounding the current selection. Click anytag in the hierarchy to select that tag and all its contents. Click body to select the entirebody of the document. The Select Tool enables and disables the Hand tool. The Hand Tool allows you to click the document and drag it in the document window. The Zoom Tool and Set Magnification Pop-up Menu allows you to set a magnificationlevel for your document. The Window Size pop-up menu [visible in Design view only] lets you resize theDocument window to predetermined or custom dimensions. To the right of the Window Size pop-up menu are the estimated document size andestimated download time for the page, including all dependent files such as images andother media files.Panel GroupsOn the right side of the screen are docked panels. Clicking on the arrow on the left side ofpanel expands panels. In the expanded version of panels are tabs of the panels that aredocked in a particular panel set.At the top right of each panel is a context menu that allows you to perform operations on thepanel’s appearance and placement, and provides redundancy of the tasks accessed at thebottom of the panel that manipulate and add functionality to your page.Information Technology Services, UIS4

[ Not for Circulation ]Switching between views in the Document windowYou can view a document in the Document window in Code view, Design view, or Code andDesign views.To switch views in the Document window, do one of the following: Select View Code.Select View Design.Select View Code and Design.Use the Document toolbar: Click the Show Code View button. Click the Show Code and Design Views button. Click the Show Design View button.Site StructureManaging your folders is crucial when you construct a website. Dreamweaver has a greattool called the Site Window that allows you to do this in outline and icon form. You canrearrange files and folders within the site window without the consequence of breaking linksor disrupting file paths. Dreamweaver, within the site window environment, automaticallyupdates your changes for you.Information Technology Services, UIS5

[ Not for Circulation ]Root FoldersTo effectively manage your site, Dreamweaver forces you to create a root folder where youkeep all of your files for a particular website. A Root Folder is not particularly special exceptfor the fact that you have defined it through Dreamweaver. The Root Folder is the folderfrom which all other files stem like the roots of a tree. Local Root Folder, Root Folder and justplain Root are all interchangeable terms for the same thing.Defining a Site1.From the Welcome screen of Dreamweaver CS3 you can define your site by selectingDreamWeaver Site in the Create New row. A site wizard appears and asks you to typein a name for your site.Or Select Site New Site. A site wizard appears and asks you to type in a name for yoursite. You do not have to follow file naming conventions, but be sure that your site nameis somewhat related to the project you are working on.2.Click Next at the bottom of the page. Check the radio button, “No, I do not want to usea server technology.”3.Click Next.4.Check the radio button, “Edit local copies on my machine then upload to server whenready (recommended).”5.Click Next.6.Choose None from the drop down menu below the question “How do you connect toyour local server?”7.Click Next.8.Click Done.Information Technology Services, UIS6

[ Not for Circulation ]You may also set up a site using the Advanced tab:1.Select category Local Info. Click on the folder to the right of the text box labeled LocalRoot Folder and browse to the folder that contains or will contain your website. Click onChoose to select that folder as the root folder for this lesson.2.You will then be prompted to create a cache file that keeps the links you are going tocreate up-to date. You may want to check the Use Cache to Speed Link Updates checkso that you do not have to see this message again.3.Click on OK.Note: When you are done defining a site, the site files window appears. It contains all of thefolders and files in your root folder. If you look on the right side, you will see the root folder andall of its sub-folders and files. The left side of the window is empty because that will contain thefolders you have moved to the server that hosts your website.Defining a Browser of ChoiceTo preview your Web pages in a browser, you need to choose a browser.1.Select File Preview in Browser Edit Browser ListorEdit Preferences Category Preview in Browser.Information Technology Services, UIS7

[ Not for Circulation ]2.Click on the plus sign to add a browser, the minus sign to delete, or the Edit to changethe browser from a list of choices.3.When prompted, browse the hard disk to select the browser of your choice.4.To change a browser, click on Edit to the right of the plus and minus signPage FormattingCreating and Saving a New Page1.Select File New.2.Choose HTML in the Page Type list and click the Create button.3.Select File Save and save the page in your website folder.Or Right click on Root folder which is in Files Panel select New File, it creates anuntitled html file and save it automatically. Then rename the file and to open the filedouble click on it.File-Naming Conventions Do not use spaces.Avoid uppercase letters.Avoid characters such as periods, quotes, slashes, colons, and exclamation points.Keep file names short.Information Technology Services, UIS8

[ Not for Circulation ]Setting Page PropertiesFor each page you create in Dreamweaver, you can specify layout and formatting propertiesusing the Page Properties dialog box [Modify Page Properties]. The Page Properties dialogbox lets you specify the default font family and font size, background color, margins, linkstyles, and many other aspects of page design. You can assign new page properties for eachnew page you create, and modify those for existing pagesGiving Your Page a TitleType “Name of Page” into the title text field on the document toolbar. Press the return orenter key or click in the work area of the document to set the title.Creating a Line BreakIf you want to create a line with no space between it and the previous line, you need to inserta line break. Pressing on return [Macintosh] or enter [Windows], creates a paragraph breakthat creates a space between two lines. Line breaks are even coded differently in html. Linebreaks have the tag br . Paragraphs are denoted as p . Position your cursor and create an insertion point in the heading. Press shift return[Macintosh] or shift enter [Windows] depending on your computer operating system.Information Technology Services, UIS9

[ Not for Circulation ]Adding a Horizontal Rule1.Choose Insert HTML Horizontal Rule.2.With the horizontal rule selected, type 70 in the W text field on the property inspector.Choose % from the drop-down menu to the right of the value you just typed.3.Deselect Shading. Type 1 in the H text field.4.Save your work and preview it in the browser by pressing F12.Working with Colors in DreamweaverIn Dreamweaver, many of the dialog boxes, as well as the Property Inspector for many pageelements, contain a color box, which opens a color picker. Use the color picker to select acolor for a page element.To select a color in Dreamweaver, click Text Color box in the Property Inspector. The colorpicker appears. Use the eyedropper to select a color swatch from the palette. All colors in the ColorCubes [default] and Continuous Tone palettes are web-safe; other palettes are not. Use the eyedropper to pick up a color from anywhere on your screen--even outside theDreamweaver windows. To pick up a color from the desktop or another application,press and hold the mouse button; this allows the eyedropper to retain focus, and select acolor outside of Dreamweaver. If you click the desktop or another application,Dreamweaver picks up the color where you clicked. However, if you switch to anotherapplication, you may need to click a Dreamweaver window to continue working inDreamweaver. To expand your color selection, use the pop-up menu at the top right corner of the colorpicker. You can select Color Cubes, Continuous Tone, Windows OS, Mac OS, Grayscale,and Snap to Web Safe.Note: The Color Cubes and Continuous Tone palettes are web-safe, whereas Windows OS, MacOS and Grayscale are not. If you are using a palette that is not web-safe and then select Snap toWeb Safe, Dreamweaver replaces the selected color with the closest web-safe color. In other words,you may not get the color you see.To clear the current color without choosing a different color, click the Default Color button.Information Technology Services, UIS10

[ Not for Circulation ]Adding a Date1.Place the insertion point where you want to the date to appear.2.Click on Date in the Common tab in the insert bar to place the current date on the page.3.From the Day Format drop-down menu, choose the Thursday option. From the DateFormat drop-down menu, choose March 7, 1974. From the Time Format menu, choose10:18 PM.4.Check the Update automatically on save check box to update the date on your page eachtime you save your document.5.Click OK.Creating LinksInserting an E-mail Link1.Select the text you wish to convert into a link.2.Click the Email Link button in the insert bar [Common tab]. The Email Link dialog boxis displayed.3.In the E-mail text field type the e-mail address.4.Click on OK.Note: There are two kinds of links, relative and absolute. Relative links are those that are definedlocally within your website. For example, when you create a link from one document to another, youcreate a relative link. A link to an external file, such as an external website, is an Absolute link.Creating a Relative Link1.Select a word or a phrase that you wish to convert to a link.2.In the Property Inspector, click on the folder icon to the right of the Link text field.3.Navigate to your website folder and select a file that you wish to link to.4.Click on Open, Choose [Macintosh] or OK [Windows].5.Save your work and preview in a browser.Information Technology Services, UIS11

[ Not for Circulation ]Creating an Absolute Link1.Select the text you wish to convert into an absolute link.2.In the Properties Inspector, type in the URL for the link in the Link text field.3.Save your work and preview in browser.Inserting and Linking to Named AnchorsAnchors are a way to define a relative link one area of a page to another or from one area of apage to another area of a separate page.1.Position the insertion point before the text you wish to insert an anchor.2.Click the Named Anchor button on the Common tab of the Insert bar.3.Type a name in the Anchor Name text field and click OK.4.Select a word or phrase that you wish to define as a link to the anchor.5.In the Property Inspector, type #name of anchor in the Link text field.6.Insert an anchor at the very top of the page and name it top. At the bottom of your page,type “Back to the Top”.7.In the Property Inspector, type #top in the Link text field.8.Save the document and preview it in the browser.Working With ImagesPlacing Graphics on a PageThe most common graphic formats for the Web are JPEG and GIF.Note: Photographic images and images with a large tonal range should be saved as JPEGs. Artworkwith large areas of solid color with little or no blending should be saved as GIFs.1.Place the insertion point in the first line of the document. Choose Insert Image.2.Find the file you wish to insert in the images folder.3.Click Open, Choose [Macintosh] or OK [Windows] depending on your operatingsystem.Information Technology Services, UIS12

[ Not for Circulation ]Setting Image PropertiesResizing and Refreshing an Image Click on the image you wish to re-size. In the Property Inspector, change the width to xxand the height to xx.Positioning an Image Click one an image to select it. In the Property Inspector, chose an alignment optionfrom the list.Adding a Border Around an Image Click on an image to select. In the Property Inspector, type 1 in the Border text field.Assigning Names and Alt Tags to Images1.Click on an image to select it.2.In the Properties Inspector, type “name of image” in Alt text field.3.Save your work.Wrapping Text Around Images1.Place the insertion point at the beginning of a paragraph. Insert an image.2.Select the image and choose Left from the Align drop-down menu in the PropertyInspector.3.Save your work.4.Preview your work in a browser.Information Technology Services, UIS13

[ Not for Circulation ]Adjusting the Space Around an Image1.Click on an image to select it.2. In the Property Inspector, type 10 in the H Space text field and type 6 in the V Space textfield.Working with TablesOne way to have better control of the placement of the elements on your pages is to usetables. Tables allow you to construct Web pages with a greater degree of precision.Inserting a Table1.Place the insertion point where you want the table to appear. On the Insert bar, click onthe Layout tab and click on the Table icon. Or Choose Insert Table.2.In the Table dialog box that appears, define the parameters for your table. 3.Depending on whether the table is used as a data table or layout table, you may want to definethe Width in Pixels or Percent. Similarly, you will have to define a Border for the tableaccordingly.Click on OK. You can add text or images to table cells the same way that you add textand images outside of a table.Selecting an Entire TableTo select an entire table, do one of the following: Click the upper left corner of the table or click anywhere on the right or bottom edge. Click in a table cell, and then select the table tag in the tag selector at the lower left cornerof the Document window. Click in a table cell, and then choose Modify Table Select Table. Click in a table cell, and then select the table tag in the Tag Inspector.Selecting a Row or Column1. Position the pointer to point to the left edge of a row or the top edge of a column.2. When the pointer changes to a selection arrow, click to select a row or column, or drag toselect multiple rows or columns.Information Technology Services, UIS14

[ Not for Circulation ]Selecting a Single Cell Click in the cell, and then select the td tag in the tag selector at the lower left corner of theDocument window. Click in the cell, and then choose Edit Select All.Choose Edit Select All again when a cell is selected to select the entire table. Click in a table cell, and then select the td tag in the Tag Inspector.Selecting Nonadjacent Cells Control-click [Windows] or Command-click [Macintosh] the cells, rows, or columns youwant to select.If each cell, row, or column you Control-click or Command-click is not already selected, it is added tothe selection. If it is already selected, it is removed from the selection.Acknowledgements: Some of the text and images for this handout are from Adobe Dreamweaver, HelpResource Center.Information Technology Services, UIS15

Dreamweaver has a great tool called the Site Window that allows you to do this in outline and icon form. You can rearrange files and folders within the site window without the consequence of breaking links or disrupting file paths. Dreamweaver, within the site window