Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Transcription

1 Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually create links Point-to-file Browse for file Hyperlink dialog box link Named Anchor link Formatting Add special characters Use CSS styles Publishing Your Site Test your site Publish your site 1

2 Planning Your Website Site Structure Organizing your site structure from the start can save you a lot of time and frustration later. Creating a hierarchy and breaking your site down into categories will keep your site organized and make editing easier. Usually a site is broken down into categories with related items residing in the same folders. For instance, you would create a graphics folder for all the graphics to be used and a separate sound folder for any sound files. Plan Site Design & Navigation A site plan shows how your web pages will look when designed in Dreamweaver. You can create the plan by doing a sketch on paper, creating a design in Microsoft Word, or using an image editing program such as Adobe Photoshop Elements. To assist you in using color schemes, check out This site lets you test different color schemes for page backgrounds, text and links. When designing the navigation for your site, keep the people who will visit your site in mind. Try to make the navigation as easy as possible and consistent from page to page. Drawing out the navigation scheme for the site can help keep you organized. Gather Your Assets Website design is more efficient when you decide on the assets (text, graphics, animations, etc.) before you begin the design process. You can collect your graphics, from photographs or clip art, and store them in a folder prior to creating your first page. You can type your text into a text editor, such as notepad, so that you can import or copy and paste the text into the Dreamweaver. Dreamweaver Workspace Dreamweaver provides many panels, inspectors, and toolbars to assist you with your website design. 2

3 The Menu Bar provides menus to access all the features Dreamweaver offers. The Document Window displays the current document as you create and edit it. The Document toolbar contains buttons and pop-up menus that provide different views of the Document window, various viewing options, and some common operations such as previewing in a browser. The Insert bar contains buttons for inserting various types of objects, such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set various attributes as you insert it. The Property Inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties. Panel groups are sets of related panels grouped together under one heading. To expand a panel group, click the expander arrow at the left of the group s name. To undock a panel group, drag the gripper at the left edge of the group s title bar. The Site panel allows you to manage the files and folders that make up your site. It also provides a view of all the files on your local disk. Document Toolbar Use the buttons on the Document toolbar, located just above the Document window, to switch between Code, Split, and Design views. The Document toolbar also contains commands for naming, previewing, and publishing the current document: Title - Lets you specify a title for the page, which appears in the title bar of the browser's viewer. No Browser/Check Errors - Provides a menu of options for checking browser compatibility with the page. 3

4 File Management - Provides a menu of file management options for the page, including a command to upload the page to your web server. Preview/Debug in Browser - Lets you preview the page in the browser you select. Refresh Design View - Refreshes the appearance of the page in Design view after you've made changes to it in Code view. View Options - Lets you specify various settings for the current view. If you don't see the Document toolbar, select View > Toolbars> Document to show it. Insert Bar The Insert bar contains most of the commands you'll use to add elements to your pages. These include images, hyperlinks, tables, forms, and multimedia objects. These commands are grouped into categories, which you can choose from the drop-down menu at the left side of the toolbar. Common - The default category, which contains commands for adding hyperlinks, tables, images, and multimedia objects. Layout - Used for designing the layout of your page, with commands for tables, layers, and framesets. Forms - Contains commands for adding form elements to your page. Text - Contains commands for applying various formatting to the text on your page, as well as for inserting special characters. HTML - Lets you select various HTML tags to insert into your page. Application - Contains commands for adding database elements to your page. Flash Elements - Lets you insert a Macromedia Flash movie into your page. Favorites - Lets you customize your own toolbar by grouping your favorite commands. To show or hide the Insert toolbar, select View > Toolbars > Insert. Status Bar The status bar is the small row at the bottom of the Document window containing the Tag Selector. The Tag Selector displays the HTML code surrounding your cursor. You can select one of these tags to modify simply by clicking it with your mouse. The status bar also includes a Download Size/Download Time drop-down list, which lets you select a window size for your document. The size of the window (along with the sizes of the objects included in your pages) impacts the speed at which a viewer can download the page. When you select a size from this menu, Dreamweaver automatically updates the speed displayed to the right of the window size on the status bar. Panel Groups The Dreamweaver panel groups, displayed vertically on the right side of the Dreamweaver window, group together the related information and commands used to design pages and build and publish a web site. Panels in Dreamweaver are grouped together into panel groups. The selected panel within a panel group appears as a tab. Each panel group can be expanded or collapsed, and can be docked or undocked with other panel groups. CSS Panel Group The Design panel group has two panels: CSS Styles and Layers. Use CSS Styles to maintain the styles in your document, and to create and attach style sheets. The Layers panel displays all the layers in the current document, which you can show or hide, lock or unlock, rearrange, and rename. The Reference panel includes a comprehensive HTML reference library. 4

5 Application Panel Group The Application panel group is used to include dynamic content in your web sites. Here, you can specify a data source, define recordsets, and add advanced server behaviors. Tag Inspector The Tag Inspector displays all the attributes of your page elements. Here, you can modify any attribute of a selected HTML tag by typing directly into the attribute's corresponding box, or by selecting it from a menu that pops up when you click inside the box. In addition, the Behaviors panel lets you add client-side behaviors to your page using JavaScript. Examples of the behaviors you can add include: Check Browser and Swap Image (used to create rollover effects). You can use the Relevant CSS tab to change the properties of the style applied to the current selection. Files Panel Group The Files panel is used to manage your web site files, and to upload and download files to and from your web server. You can also use this panel to define new web sites and to quickly switch between your various sites. The Assets panel is used to manage the reusable elements of your web pages, including object libraries and templates. The Snippets panel lets you save code snippets, which you can reuse later. Property Inspector The Property Inspector lets you specify the properties of the text or object that's currently selected on your page. The fields and buttons shown in the Property Inspector depend on the type of selection; for instance, when text is selected, the Inspector provides you with fields for changing the font style, type, size, color, and alignment. Open the Property inspector (Window > Properties), if it isn t already open. Select the text you want to format. Set the options you want to apply to the selected text. Format sets the paragraph style of the selected text. Paragraph applies the default format for a <p> tag, Heading 1 adds an H1 tag, and so on. Font applies the selected font combination to the text. Use the pop-up menu to choose the font combination you want to apply, or select Text > Font > Edit Font List to create or edit a font combination. CSS Style - use CSS Style to apply or remove CSS styles. Size applies either a specific font size (1 through 7) or a font size (+ or 1 through + or 7) relative to the basefont size (the default is 3). Text Color displays the text in the selected color. Select a color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field. Bold applies <strong> to the selected text. Italic applies <em> to the selected text. Left, Center, and Right Align applies the respective alignment. 5

6 Link lets you create a hypertext link of the selected text. Click the folder icon to browse to a file in your site; type the URL; drag the Point-to-File icon to a file in the Site panel; or drag a file from the Site panel into the box. Target lets you specify the frame or window in which the linked document will load: o o _blank loads the linked file in a new, unnamed browser window. _parent loads the linked file in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window. o _self loads the linked file in the same frame or window as the link. This target is implied, so you generally don t need to specify it. o _top loads the linked file in the full browser window, thereby removing all frames. Unordered List creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started. Ordered List creates a numbered list of the selected text. If no text is selected, a new numbered list is started. List Item opens the List Properties dialog box. Indent and Outdent indents or removes indentation from the selected text by applying or removing the blockquote tag. Document Views Dreamweaver offers three document views: Design view, Code view, and Split view, which displays both Design and Code views in a split window. In Design view (shown above), you can draw individual layers and table cells on the page, drag and drop graphics, and type text as you would in a word processor. The page appears as it will to viewers. Code view lets you edit the HTML and any other code (such as scripts) included in the page. Create a Website Defining a Site Before you begin creating your web pages, you need to define your site, or create a folder to hold everything in your website. To define your website, follow these steps: 1. Start Dreamweaver. 2. From the menu bar, select Site > New Site. The Site Definition dialog box opens. 3. Click the Basic tab to use the Site Definition Wizard. Or select Manage Sites from the dropdown menu in the Files panel. Type the name of your new website in the Name Your Site field. Click Next. 6

7 4. In the next dialog box, select No, I do not want to use a server technology and click Next. 5. In the next dialog box, select Edit local copies on my machine, then upload to server when ready. In Where on your computer do you want to store your files?, select the drive and directory where you want to store your files. For instance, you may have created a folder in My Documents to store your website. You would point to this folder. Click Next. 2. In the next dialog box, you are asked how you connect to your remote server. Your web or network administrator will provide you the information to enter in the fields for this screen. For most ACC accounts, you will enter the following: How do you connect to your remote server? FTP What is the hostname or FTP address of your Web server? What folder on the server do you want to store your files in? /public_html/ What is your FTP login? Myusername What is your password? Mypassword 7

8 After entering in the information, click Test Connection. If Dreamweaver is able to connect to the server you will receive a message Macromedia Dreamweaver MX connected to your Web server successfully. Click Next. 3. In the next dialog box, select No, do not enable check in and check out. Click Next. 4. You have completed the site definition process. Dreamweaver will display the Site Definition Summary. Click Done. With a site defined, use the Files panel to create the folders that will contain your site files. At the very least, you should create a folder for images: 1. In the Files panel, right-click the root folder and select New Folder. 2. Name the new folder images and press Enter. The folder appears below the root folder. 8

9 You can create multiple sites and then easily switch between them using the drop-down menu on the Files panel. When you need to switch to a different site, simply select it from the menu. The Files panel refreshes to display the files for that site. Create an HTML page After defining your website, you are ready to begin creating your pages. You will create your home page (or index page) and add content. To create your homepage: 1. Select File > New. The New Document dialog box opens. The General tab contains various document types to select from, including basic HTML pages, dynamic pages that use server technologies, style sheets, and pre-built designs. The Templates tab will contain any templates you define for the site. 2. In the Category column, select Basic Page. 3. In the Basic Page column, select HTML. 4. Click Create. You will save the document before you begin making changes. 1. Select File > Save As. The Save As dialog box opens. 2. Select the folder you created to store the files. 3. Name your page index.html. Modify Page Properties Use the Page Properties dialog box to specify a variety of options for the page. To modify the page properties select Modify > Page Properties. The Page Properties dialog box opens. Choose from the following options: 9

10 By default, the Appearance category is selected. Here, define the appearance of the default text on your page by selecting a font, size and text color. You can also choose a background color and image, and set the page margins. Select the Links category to define the default appearance of hyperlinks. The Headings category lets you specify the appearance of various heading styles on your page. Later, when you enter text, you can apply these styles to create headings and subheadings. If you decide to change the appearance of your headings, you need only make the changes to the styles in this dialog. Use the Title category to enter a title for the page. This is the text that appears in the title bar of the viewer's browser window. You can also enter the page title directly into the Title field on the Document toolbar. The Tracing Image category is used to apply an image to the background of your page over which to trace your design. This image does not appear on the final page itself, but you can use it to help you determine the size and position of elements you place on the page. If you use a tracing image, you can also select the opacity here. When you've finished setting the document properties, click OK. Tables for Page Layout When entering content in your web page, text or any other content you add in flows from one margin to the other unless it is inserted in a container, such as a layer or a table. You can use tables to structure the layout of visual elements (such as Flash buttons, images, or paragraphs of text). Dreamweaver creates a table based on options you select in the Insert Table dialog box. You can modify the initial table structure by merging and splitting cells, and by inserting rows and columns. You use the table cells to control the placement of text and images in a web page. To create a table: 1 Select Insert > Table. Or, select the Layout category on the Insert bar. The Insert Table dialog box opens. 10

11 2 In the dialog box, set the following options: Rows determines the number of rows the table has. Columns determines the number of columns the table has. Table Width specifies the width of the table in pixels, or as a percentage of the browser window s width. Border Thickness specifies the width, in pixels, of the table s borders. Note: If you don t explicitly assign a value for the border thickness, most browsers display the table as if the border thickness were set to 1. To ensure that browsers display the table with no border, set the border thickness to 0. To view cell and table boundaries when the border thickness is set to 0, select View > Visual Aids > Table Borders. Cell Padding determines the number of pixels between a cell s border and its contents. Cell Spacing determines the number of pixels between adjacent table cells. Note: When you don t explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0. 3 In the Header section, select one of the header options: None does not enable column or row headings for the table. Left makes the first column of the table a column for headings, so that you can enter a heading for each row of the table. Top makes the first row of the table a row for headings, so that you can enter a heading for each column of the table. Both enables you to enter column and row headings in the table. Note: It s a good idea to use headers in case any of your website visitors use screen readers. Screen readers read table headings and help screen-reader users keep track of table information. 4 In the Accessibility section, specify the following options: Caption provides a table title which displays outside of the table. Align Caption specifies where the table caption appears in relation to the table. 11

12 Summary provides a table description. Screen readers read the summary text, but the text does not appear in the user s browser. 5 Select OK. You can modify a table that has already been created by adding rows or columns, or by splitting or merging cells. You can modify the table using the Modify > Table menu or by using the Property Inspector. To add a row or column: Place your cursor in the cell above where you want to add a row or to the right of cell where you want to add a column. Select Modify > Table. Select Insert Row or Insert Column from the expanded menu. To split a cell: Place your cursor in the cell you wish to spit. 1. Select Modify > Table. The Split Cell dialog box opens. 2. Select Row or Columns. 3. Enter the number of rows or columns you want to split the cell into. 4. Click OK. Layout View Dreamweaver also provides you with the option to lay out tables visually using Layout view: 12

13 1. On the Insert bar, select the Layout category. 2. Click the Layout button. 3. If the Getting Started in Layout View dialog opens, click OK. 4. On the Insert bar, click the Layout Table button. 5. You can position the table in any open area of the page. When the pointer changes to a crosshair, click and drag to draw the table. 6. If necessary, use the Property Inspector to specify the table's properties. 7. Next, click the Draw Layout Cell button to add a cell to the table. 8. Click and drag the mouse to draw a cell of any size inside the table. 9. Continue to draw cells as needed. Hold down the Ctrl key as you draw your cells to keep the Draw Layout Cell button selected. 10. You can reposition cells by dragging them around the table. You can also resize them by clicking and dragging the selection handles on the cell borders, as long as you don't attempt to drag one cell over another. Cells cannot overlap; for this reason, when two cells are adjacent to each other, Dreamweaver does not allow you to resize them using their shared border. You can, however, use the Property Inspector to define a cell's width and height. To return to Standard view, click the Standard View button on the Insert bar. Adding Text to Your Web page There are several ways for you to add text to your web page. You can copy and paste text from a document, import a Word HTML document or type directly into the Dreamweaver document window. To add text from another document: 1. Open the document that contains the text you want to paste into your web page. 2. Select the text using Ctrl + A, Edit > Select All or dragging your cursor across the text to select it. 3. Copy the selected text using Ctrl + C or Edit > Copy. 4. Open the page in Dreamweaver you want to contain the text. 5. Paste the text using Ctrl + V or Edit > Paste. When you save a Word document in an HTML format, Word includes extraneous code primarily to format and display documents that are not needed to display the HTML file. Dreamweaver will clean up the HTML code generated by Word. To import a Word HTML document into Dreamweaver: 13

14 1. Select File > Import > Word HTML. Dreamweaver opens the file and then automatically opens the Clean Up Word HTML dialog box. 2. Click OK. Choose which options the Clean Up Word HTML feature should use. The Basic tab displays the following options: Remove all Word Specific Markup removes all Word-specific HTML. Clean up CSS removes all Word-specific CSS, including inline CSS styles when possible. Clean up <font> Tags removes HTML tags, converting the default body text to size 2 HTML text. Fix Invalidly Nested Tags removes the font markup tags inserted by Word outside the paragraph and heading tags. Set Background Color allows you to enter a hexadecimal value to set the background color of your document. If you do not set a background color, your Word HTML document will have a gray background. Apply Source Formatting applies the source formatting options you specify in HTML Format preferences and SourceFormat.txt to the document. Show Log on Completion displays an alert box with details about the changes made to the document as soon as the cleanup is finished. Adding A Graphic The three common image formats for web pages are GIF, JPG (JPEG) and PNG. Use GIF s when there are large areas of uniform color and the total number of colors is smaller than 256. Use JPEG format when the images are scanned pictures or photographs. The PNG format is a newer format and older web browsers do not support the format. To add a graphic: 1. Place your cursor at the location where you wish to insert the graphic. 2. Select Insert on the menu or click the Image icon from the Common tab. The Select Image Source graphic box displays. 14

15 3. Select the filename of the image you want to insert. 4. Click OK. Linking Dreamweaver provides a number of ways to insert hyperlinks into your web pages. You can: Type them directly into the Property Inspector. Use the Point to File button in the Property Inspector. Use the Browse for File button in the property Inspector. Use the Hyperlink button on the Insert Bar. Manually Create Links When linking to another file in the same folder in your site, it s often easiest to simply type the file name directly into the Link field in the Property Inspector: 1. On your web page, highlight the text you want to convert to a hyperlink. 2. In the Link field in the Property Inspector, type the name of the file you want to link to. 3. Press Enter. By default, when a user clicks the link, the new page will replace the old one in the browser window. To set the page to open in a new window, select _blank from the Target menu below the Link field. If the file you re linking to resides in a subfolder within the site, you need to include the subfolder (or subfolders) when typing the link (for example, graphics/mypic.gif). It isn t necessary to specify the complete web site address (URL) unless you re linking to a page in a different web site. In that case, use the format: Point to File The Point to File feature lets you create a link using drag and drop. 1. On your web page, highlight the text you want to convert to a hyperlink. 2. In the Property Inspector, click the Point to File button next to the Link field and, holding down the mouse button, drag the mouse to the Files panel. 3. As you drag, Dreamweaver draws an arrow between the Property Inspector and the Files panel. For each file you move over, the Links filed displays the correct link. 15

16 4. Release the mouse button when the link you want appears in the Links field. Browse for a File You can also browse to the file you want to link to by clicking the Browse for File Property Inspector. button in the 1. On your web page, highlight the text you want to convert to a hyperlink. 2. In the Property Inspector, click the Browse for File button next to the Link field. The Select File dialog box opens. 3. Browse to the file you want to link to and click OK. If the file is located outside the root folder of your website, Dreamweaver asks you if you want to copy the file to your site. Click Yes; otherwise, the file may not be included when you publish the site. Use the Hyperlink Dialog Box The Hyperlink dialog offers additional options when creating a link. 1. On your web page, position your cursor where you want to insert the hyperlink. 2. On the Insert bar, make sure the Common category is selected, and then click the Hyperlink button. The Hyperlink dialog box opens. 3. In the Text field, enter the text that will appear as a hyperlink on the web page. 4. In the Link field, enter the path to the file you want to link to, or click the Browse to File button to select a file. 5. The remaining fields are optional: The text you enter in the Title field is displayed in a yellow pop-up when the user moves the mouse over the link. The Link is where you want to go when the text is clicked. Target specifies the window or frame the linked file should be opened in; by default, the new page will replace the old one in the same window. 16

17 The Access key is a one-character keyboard shortcut that users can press to access the link. The Tab index specifies the order in which users can tab from link to link, just as they might use the Tab key to move from one text field to another. 6. Click OK to close the dialog box and create the link. Address Link You insert addresses in much the same way that you insert other types of links. To enter an address directly into the Links field in the Property Inspector, type mailto: and then the complete address (for example: mailto:me@austincc.edu). Then pres Enter to create the link. You can also use the Link button on the Insert bar. 1. Position the cursor where you want the link. 2. Click the Link button. The Link dialog box opens. 3. Enter the text for the link and the address. You do not have to include mailto: before the address. 4. Click OK. Named Anchor Links Named Anchors are markers you can set within your web page. You can then create links that will direct a user to the named anchor. This is often used when the content of a single web page requires scrolling down a page. To create a named anchor: 1. Place the cursor where you want the named anchor. 2. Select Insert > Named Anchor or press Control+Alt+A. 3. Select the Common tab in the Insert bar and click the Named Anchor button. The Named Anchor dialog box opens. 4. In the Anchor Name field, type a name for the anchor. 5. The anchor marker appears at the insertion point. To link to a named anchor: 1. Select text or an image to create a link from. 2. In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor. For example: a. To link to an anchor named top in the current document, type #top. b. To link to an anchor named top in a different document in the same folder, type filename.html#top. Note: Anchor names are case sensitive. 17

18 Formatting Adding Special Characters Special characters like the copyright and trademark symbols are available from the Text category of the Insert bar. Click the Characters button on the toolbar to choose from a menu of special characters. Additional characters are available from the Insert menu: 1. Place the cursor where you want to insert the special character. 2. Open the Insert menu and select HTML, and then Special Characters. 3. From the Special Characters submenu, select Other. In the Insert Other Character dialog, click the character you want to insert and then click OK. Working with Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) offer you more control over the appearance of the elements on your web pages by implementing a series of rules that describe those elements. The use of styles prevents the appearance of text from being determined by the viewer s browser preferences, as is often the case with standard HTML. For example, you can use a style sheet to define the font, color and size of the text you use for various headings, for paragraphs, and for special purposes such as tips in a tutorial. Even if the viewer s browser uses a default font different from the one you ve used, the text on your site will appear as you ve defined it. Finally, you can use cascading style sheets to create custom classes, essentially allowing you to create your own tags, rather than being limited to only existing HTML tags. This means that you can define rules that control the appearance of virtually any element on your page, and then update those elements globally simply by changing the style sheet. The CSS Styles panel in the Design panel group lets you easily alter the style of existing HTML tags, as well as create custom classes. To create a new CSS style: 1. Select Window > CSS Styles to open the CSS Styles panel. 2. Click the New CSS Style button located in the lower right area of the panel. The New CSS Style dialog box opens. 3. Define the type of CSS style you want to create: To create a custom style that can be applied as a class attribute to a range or block of text, select Make Custom Style (class), then in the Name field, enter a name for the style preceded by a period (.). To redefine the default formatting of a specific HTML tag, select Redefine HTML Tag, then in the Tag field, enter an HTML tag or choose one from the drop-down menu. To define the formatting for a particular combination of tags or for all tags that contain a specific ID attribute, select Use CSS Selector, then in the Selector field, enter one or more HTML tags or choose one from the drop-down menu. The selectors available from the drop-down menu are a:active, a:hover, a:link, and a:visited. 4. Select the location in which the style will be defined: 18

19 To create an external style sheet, select New Style Sheet File. To embed the style in the current document, select This Document Only. 5. Click OK. The Style Definition dialog box opens. 6. Choose the style options you want to set for the new CSS style. 7. When you are done setting style attributes, click OK. To edit the styles in the style sheet: 1. In the CSS Styles panel, click the Edit Styles button to show available styles. A dialog box opens, showing the names of the styles in the style sheet. 2. Select one of the styles, such as body, and click Edit. The CSS Style Definition dialog box opens. 3. Adjust options as you like. 4. Click OK to redefine the style. Publishing Your Site Testing Your Site Before uploading your site to a server, it s a good idea to test it locally. You should actually test the site throughout its creation. You should make sure that your pages look and work as expected, that there are no broken links, and that the pages don t take too long to download. Before uploading your web pages to the server, perform the following checks: Preview your site in your web browser. Use F12 to preview your web page. Check your site for broken links and fix any broken ones you find. Run a site report to troubleshoot the entire site. To run reports to test a site: 1. Select Site > Reports. The Reports dialog box opens. 19

20 2. Choose a category to report on and a report type to run. 3. Click Run. Depending on what you chose to report on, you may be prompted to save your file, define your site, or select a folder. A list of results appears in the Site Reports panel (in the Results panel group). Publishing Your Site Once you have created your site, it is time to publish it by uploading it to the remote server you defined when setting up your site. The Put Files command copies files from the local site to the remote site. Note: Do not use special characters (such as é, ç, or ) or punctuation, such as colons, slashes, or periods, in the names of files you intend to put on your remote site. These characters may be changed during the upload process, which causes any links to the files to break. To upload your pages to a remote site: 1. In the Site panel, select the site s local root folder. 2. If you are not already connected click the Connect to remote host button. 3. Click the Put Files button. 4. All of the site s files are uploaded to the remote site. 5. Open your remote site in a browser to make sure everything uploaded correctly. Resources ACC Website Rules and Procedures ACC s web resources. ACC logo, photographs and web template. Help Desk Documentation 20