Web Development with Adobe Dreamweaver CS5.5: Beyond the Basics Session 1: Configuration, HTML and CSS

Prerequisites 1. Previous experience using Dreamweaver to create Web pages 2. A basic knowledge of HTML and CSS 3. Ability to create, edit and manage images and text files

1. Site Access and Configuration Add a site in Dreamweaver 1. Go to Sites > New Site… 2. Type the site name. 3. Paste the local folder path or network address into the Local Site Folder. 4. Click Save.

Access CWIS servers If you are using a network drive such as one of the CSU CWIS web servers to host your content, the Local Site Folder should look like this: \\wsnet.colostate.edu\cwis123\wwwroot\mysite\ Map a network drive You may want to map a network drive to your site or web server for easier access to it. 1. Select an unused drive letter. 2. Type, paste or browse for the network address to be mapped. 3. If needed, check the box “Connect using different credentials”. 4. Click Finish. 5. If prompted, log in with your eID. 6. A new window will open showing the address as a drive letter. 7. Use the drive letter to define a site in Dreamweaver.

2. Web Development in RamCT Blackboard Add HTML files to course files http://bblhelp.ramct.colostate.edu/pdf/training/AddingPresentContentRamCTBB.pdf 1. Open your course. 2. Go to Course Content. 3. Move the mouse over Build Content and click New Page > Content Folder. 4. Give the folder a name, and possibly enter other options. 5. Click Submit. 6. Click the folder you just created. 7. Move the mouse over Build Content and click Create > File. 8. Click Browse My Computer and select a file to upload. 9. Give the file a name, and provide other options if needed. 10. Click Submit.

Upload Multiple Files and Folders 1. Move to Course Management > Control Panel > Files and click the » button. 2. Move to Upload and click Upload Files. Java loads on the Upload Multiple Files and Folders screen. 3. Drag and drop your files from Windows Explorer onto the To begin uploading window in RamCT.

Add a file to deploy an HTML package http://ondemand.blackboard.com/r91/movies/bb91_course_files_using_add_file_to_deploy_html_package.htm 1. Access a content area where you would like to display the HTML files. 2. Create a file. 3. Browse course files. 4. Select the first HTML file in the package (the index page). Click Submit. 5. Change the link name from mypage.html to a descriptive name. 6. Choose whether to open the file in a new window, and possibly enter other options. Click Submit. 7. Check that the link goes to the HTML page, and that the page displays properly. Note that RamCT Blackboard displays Web content in an iframe (inline frame). This may affect JavaScript that refers to the top level window instead of the document.

Set up a web folder for WebDAV http://help.blackboard.com/instructor/Content/_instructor_content/instructor_course_files_files_add.htm - “About Web Folders (WebDAV)” and “How to Set Up a Web Folder for Windows” 1. In Course Files, click the Set Up Web Folder button on the right. 2. Copy the Current Web address: https://ramct.blackboard.com/bbcswebdav/courses/my_course 3. Paste this URL into a new browser tab to view your course outside of the RamCT interface.

Web Development with Adobe Dreamweaver CS5.5 Page 2 of 7 Beyond the Basics: Session 1: Configuration, HTML and CSS © Computer Applications Training, Colorado State University

Add a network location to a RamCT course in Windows 7 1. Open Start > Computer. 2. In the empty area at the bottom of the right-hand pane, right-click and select Add a network location. 3. The Add Network Location Wizard will open. Click Next. 4. When asked where you want to create the network location, select Choose a custom network location. Click Next. 5. When asked for the location of your website, paste the URL above. Click Next. 6. Type your CSU eID username and password. Click OK. 7. Enter a name for the location and select Next. 8. On the Completing the Add Network Location Wizard page, Click Finish. 9. The Web Folder will open. It will now be listed in Computer under Network Location.

Add a Dreamweaver site using the network location to a RamCT course Use this Windows path or paste the URL above to create a site or map a network drive. \\ramct.blackboard.com@SSL\DavWWWRoot\bbcswebdav\courses\my_course Add a WebDAV server to Dreamweaver 1. Click Site > New Site. 2. Click the Servers tab and Connect using: WebDAV. 3. Paste the URL into the URL: field. 4. Type your CSU eID username and password. 5. Click the Test button to assure the URL and login details are correct. 6. Click Save. 7. Double-click and edit any file in this site. The changes will appear in RamCT without needing to upload.

For more information about connecting to remote servers in Dreamweaver, see http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ffe.html Use the page editor in RamCT Blackboard 1. Move the mouse over Build Content and click New Page > Blank Page. 2. Give the page a title. 3. Enter content in the Content section. Mouse over the WYSIWYG controls for a description of each. HTML-related buttons: Clear Formatting, Toggle HTML Source, Preview and Markup Validation. The bottom row buttons can insert images, files and other media.

Web Development with Adobe Dreamweaver CS5.5 Page 3 of 7 Beyond the Basics: Session 1: Configuration, HTML and CSS © Computer Applications Training, Colorado State University

4. Attach files or add other options if desired. Click Submit.

Future HTML capabilities of the page editor The current page editor in RamCT Blackboard cannot edit HTML files, but a new editor that can edit HTML will probably be included in an upgrade in 2013.

3. HTML HTML elements A tag is enclosed in brackets, e.g. . It has either a closing tag or slash . An attribute is inside a tag. Important attributes include href, src, class and id. The attribute’s value is enclosed in double quotes, e.g. "http://www.colostate.edu/". The element’s content is between the opening and closing tag, e.g. Colorado State University. An HTML element is everything from the start tag to the end tag, e.g. a hyperlink element: Colorado State University HTML document structure The DOCTYPE tag determines the version of HTML you are using (HTML 4, 5 or XHTML). The html tag contains the head and body tags. The head tag contains the document title, scripts, style sheets, and meta tags. The body tag contains the document content. Code view and Coding toolbar Code view lets you view and edit the HTML source code of the page.

The coding toolbar appears vertically on the left. (It is rotated here to save space.) It has buttons to collapse and expand selected code, show line numbers, highlight invalid code, word wrap, apply and remove comments, indent and format source code, and add code snippets.

4. CSS CSS rules A rule consists of a selector, and one or more declarations separated by semicolons. A declaration is a property and value separated by a colon.

Dimensions Width and height can be specified by themselves, or prefixed with min- or max-.

Web Development with Adobe Dreamweaver CS5.5 Page 4 of 7 Beyond the Basics: Session 1: Configuration, HTML and CSS © Computer Applications Training, Colorado State University

Units include px (pixels, for exact layout) and em or % (for scalable layout, recommended). Common Selectors A class starts with a dot (e.g. .alert) and can select one or more elements, which can use different tags (e.g. p.alert, a.alert). An id can select only one element. (e.g. #main-heading) A nested selector selects one element within another, e.g. li a selects a link within a list item. A pseudo class or element can select certain elements by their visited or hover state, by their siblings (first-child), for their content (first-line, first-letter), or to add text before or after. An attribute selector can select only elements with certain attributes, e.g. a[href~=colostate]. CSS Styles panel Click Window > CSS Styles. View styles for a selected element, or all styles. View a rule by clicking it, and then add or edit properties for it.

New CSS Rule dialog A selector can be a tag, class, ID or a combination of these.

A rule definition can be saved in this document (in the head tag), or an existing or new .css file (recommended).

Click OK and specify one or more properties, which Dreamweaver organizes into categories:

Type Define font family, size, weight (bold), style (italic), variant (small caps), text transform (case), text decoration (underline), and color.

Background Define background color, image, repeat (x/y), attachment (scroll) and position (x/y).

Block Define block word and letter spacing, vertical and horizontal (text) alignment, text (hanging) indent, white space (nowrap) and display (block, inline, inline-block, none).

Web Development with Adobe Dreamweaver CS5.5 Page 5 of 7 Beyond the Basics: Session 1: Configuration, HTML and CSS © Computer Applications Training, Colorado State University

Box Define box width, height, float, clear, padding and margin. (See the CSS box model at http://www.w3schools.com/css/css_boxmodel.asp.)

Border Define border style, width and color for top, right, bottom and left margins.

List Define list style, image and position.

Positioning Define position (absolute, fixed, relative or static), width, height, visibility, z-index, overflow, placement, and clip.

Extensions (browser-specific) Define page break, cursors, and filters (Microsoft-only extensions similar to CSS3). Page layout templates Using Dreamweaver’s page layout templates can help you design your own layouts. 1. Click File > New… 2. Click a layout in the Layout: column. Dreamweaver CS5.5 comes with several page templates with common layouts (1 to 3 columns, liquid or fixed width, left or right sidebar, header and footer). 3. Use the DocType: menu to select the document type for any layout (HTML 5 for new sites, XHTML 1.0 Transitional for compatibility with old sites). 4. Use the Layout CSS: menu to determine where to put the CSS code for the layout (Add to Head, Create New File, or Link to Existing File). 5. Click Create. Learn from the HTML and CSS code, and the instructions in the content and comments.

Web Development with Adobe Dreamweaver CS5.5 Page 6 of 7 Beyond the Basics: Session 1: Configuration, HTML and CSS © Computer Applications Training, Colorado State University

5. Other Dreamweaver Coding Features Live View, Inspect, and Live Code

Click Live View to see how the page will look in a (webkit-based) browser. Split view displays code and page together. Click Inspect and click any element in the live page to see its CSS in the CSS Styles panel. Changes to the code show in Live View if you click Refresh. Click Live Code and click any element in the live page to see its HTML in the Code window. Type or paste any URL in the Address: field of the Browser Navigation toolbar to see the HTML and other code files (stylesheets and scripts) of any site on the Internet. Click a link to load a different page and see its code files.

6. Dreamweaver Preferences Click Edit, Preferences. You can customize many Dreamweaver settings, including: General: Use and tags, history steps, etc. CSS Styles: Use shorthand Code Rewriting: Automatically fix code from older pages File Types/Editors: Extensions of files to open in code view Invisible Elements: Show scripts, CSS or comments in design view New Document: Select the default type for new documents (e.g. HTML5) Preview in Browser: Select browsers to preview pages (IE, Firefox, Safari, Chrome, Opera) Window Sizes: Preview a page in common sizes for phones, tablets and browsers

7. Adobe CS6 Product Update Adobe will be presenting a new Product update –Creative Suite CS6 on April 12. Two Sessions are being held in the Lory Student Center, room 205. The invitation and Registration information can be found at the following links: Colorado State Invite: http://edu.adobeeventsonline.com/NDA/2012/CSU/invite.html Registration: http://edu.adobeeventsonline.com/NDA/2012/CSU/registration.html

Web Development with Adobe Dreamweaver CS5.5 Page 7 of 7 Beyond the Basics: Session 1: Configuration, HTML and CSS © Computer Applications Training, Colorado State University