Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS. The World Wide Web Consortium (W3C) defines the web standards, or specifications, for these languages. It is important to understand web standards to ensure that the different web browsers display your pages accurately. Dreamweaver includes features that allow you to build web pages based on the latest web standards. What is HTML? Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening <element> and closing </element> tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. Here are three common HTML tags: <h1> specifies heading text, good for page titles <p> specifies paragraph text, good for body text <img> displays an image specified by a src (source file) Note: It is best practice to write HTML tags in lower case when coding your own pages. What is CSS? With HTML you ve given a basic structure to your web page, but there s not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page). Creating and Opening Documents Creating a Layout Using a Blank Page You can create a page that contains a predesigned CSS layout, or create a completely blank page and then create a layout of your own. 1. Select File > New. 2. In the Blank Page category of the New Document dialog box, select the kind of page you want to create from the Page Type column. For example, select HTML to create a plain HTML page. 3. If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column; otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the right side of the dialog box. The predesigned CSS layouts provide the following types of columns: Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor s text settings. Help Desk: helpdesk@ipfw.edu Page 1
Liquid Column width is specified as a percentage of the site s visitor s browser width. The design adapts if the site makes the browser wider or narrower, but does not change based on the site visitor s text settings. Dreamweaver Sites Local Root Folder Stores files you re working on. Dreamweaver refers to this folder as your local site. This folder is typically on your local computer, but it can be on a network server. Remote Folder Stores your files for testing, production, collaboration, and so on. Dreamweaver refers to this folder as your remote site in the Files panel. Typically, your remote folder is on the computer where your web server is running. The remote folder holds the files that users access on the internet. Testing Server Folder The folder where Dreamweaver processes dynamic pages. Defining a Site Local Version of your Site To set up a local version of your site, all you need to do is specify the local where you ll store all of your site files. 1. Identify or create the folder on your computer where you want to store the local version of your site files. 2. In Dreamweaver, choose Site > New Site. 3. In the Site Setup dialog box, make sure the Site category is selected. 4. In the Site Name text box, enter a name for your site. This name appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser. 5. In the Local Site Folder text box, specify the folder you identified in step one the folder on your computer where you want to store the local version of your site files. Click the folder icon to the right of the text box to browse the folder. 6. Click Save to close the Site Setup dialog box. You can now begin working on your local site files in Dreamweaver. Element Quick View 1. File > Open and browse to select your file. Enable Design View and Live View options at the top of the document window. 2. Click the </> icon in the bottom left corner of the Document window to open Element Quick View. 3. Select the element you wish to edit. The focus update can be seen throughout Dreamweaver and Live View. Manage Sites Dialog Box Options 1. Select > Manage Sites. 2. Do one of the following: Create a New Site Click the New Site button to create a new Dreamweaver site. Then specify the name and location for your new site in the Site setup dialog box. Import a Site Click the Import Site button to import a site. Help Desk: helpdesk@ipfw.edu Page 2
Create a New Business Catalyst Site Click the New Business Catalyst Site button to create a new Business Catalyst Site. Import a Business Catalyst Site Click the Import a Business Catalyst Site button to create a new Business Catalyst Site. 3. For existing sites, the following options are also available: Delete Deletes the selected site and all of its setup information from you list of Dreamweaver sites; it does not delete the actual site files. (If you want to remove the site files from your computer, you need to do that manually.) To delete a site from Dreamweaver, select the site in the site list and then click the Delete button. You cannot undo this action. Edit Enables you to edit information such as username, password, and server information for an existing Dreamweaver site. Select the existing site in the site list and click the Edit button to edit the existing site. (The Site Setup dialog box opens once you click the Edit button for a selected site.) Duplicate Creates a copy of an existing site. To duplicate a site, select the site in the site list and click the Duplicate button. The duplicated site appears in the site list with the word copy appended to the name of the site. To change the name of the duplicated site, leave the site selected and click the Edit button. Export enables you to export the selected site s settings as an XML file (*.ste). How to Structure a Web Page Hypertext markup language (HTML) provides the foundation of web pages. Desktop and mobile browsers, such as Internet Explorer, Chrome, Firefox, Safari, and Opera, understand and process HTML to display your web pages. Use HTML to define the overall structure of a web page. A well-defined structure provides a good foundation for defining layout and styling later in the process. HTML Structure HTML includes element names that characterize different parts of a web page. The HTML elements are written as tags. Most HTML tags have an opening and a closing tag that include the element name inside angle (< >) brackets. The closing tag has a slash (/) in front of the element name (e.g., <element></element>). Add a div to Hold Generic Page Content A <div> is a division, or generic container, for different kinds of content on a page. A div creates an invisible box around the content it contains to which you can add styling and positioning later in the process. Add the <div></div> tags immediately after the opening <body> tag. This div will include all of the visible content on the page. Add a Header The <header> includes the introduction section of a page such as a banner image, navigation (or menu) section, and page headings. Note: Code hinting helps you code faster and with fewer mistakes. When you type an open angle bracket (<) to start writing an HTML tag, Dreamweaver presents a list of elements you can use. For example, if you type <he, the header element comes into the list. Hit Enter or Return to add a highlighted tag to your code. When you type the </ to close a tag, Dreamweaver knows which tag to close and finishes writing the tag for you. Add a Navigation Section The <nav> includes the navigation links which typically serve as the main menu for the page. Add a Section to Hold Related Content A <section> has a more specific purpose than the generic <div> in that it can be used to include a group of information related to a specific topic. The <section> for a page could include general information about a topic as well as a sidebar quote to accompany it. Help Desk: helpdesk@ipfw.edu Page 3
Add an Article to Hold Main Content and Sidebar An <article> includes information on a specific topic that can stand on its own. Creating and Attaching Style Sheets 1. In the Sources pane of the CSS Designer panel, click the plus, and then click one of the following options: Create a New CSS File: To create and attach a new CSS file to the document. Attach Existing CSS File: To attach an existing CSS file to the document. Define in Page: To define a CSS within the document. 2. Based on the option you choose, Create A New CSS File or Attach Existing CSS File dialog boxes will appear. 3. Click Browse to specify the name of the CSS file and, if you are creating a CSS, the location to save the new file. 4. Do one of the following: Click Link to link the Dreamweaver document with the CSS file. Click Import to import the CSS file into the document. 5. (Optional) Click Conditional Usage and specify the media query that you want to associate with the CSS file. Switching Between Views Switch to Code View View > Code. In the Document toolbar, click the Code button. Switch to Split Code View Split Code view splits your document in two so that you can work on two sections of the code at once. Select View > Split Code. Switch to Design View In the Document toolbar, click the drop-down list adjacent to Live option and click Design. To switch to full Design view, click the Design button. Split Views Vertically or Horizontally 1. Make sure that you are in the Split view (Split Code or split Design/Live view). 2. To split the view vertically, select View > Split Vertically. To split the view horizontally, deselect View > Split Vertically. Creating a Hyperlink Linking to an External Page 1. Add anchor tags <a></a> around the text desired. 2. Add the href= attribute to the opening <a> tag and enter the full web URL inside the quotes. For example, (<a href= www.ipfw.edu >IPFW</a>). Note: When linking to a page outside of your site, it is recommended to open the page in a new window so the user does not navigate away from your site. To do this, add the target= _blank attribute. For example, (<a href= www.ipfw.edu target= _blank >IPFW</a>) Linking to an Internal Page 1. Add the anchor tags <a></a> around the desired text. 2. Type href= in the opening <a> tag and browse to the desired internal page. Click Open. For example, (<a href= its.html >ITS</a>). Linking to a Section within a Page Add a unique id to the desired section of the page. 1. Add id= in the tag of the text or part of the page to be linked. 2. Insert an id that relates to that part of the page. For example, (<div id= its >ITS). 3. Add the href= attribute to the opening <a> tag and add the id name after a pound sign # in between the quotes. For example, (<a href= #its >Information Technology Services</a>). Help Desk: helpdesk@ipfw.edu Page 4
Adding Images Adding an Image with HTML Use the <img> tag in HTML to place images when the image is part of the content or for accessibility purposes. 1. Click on Source Code and scroll to the desired place to add an image. 2. Type <img src= and browse for the image. Click Open. Note: The <img> tag is self-closing, so just place the / before the > (i.e., <img src= images/its.jpg />) Setting Width, Height, and Alt Properties HTML images are added at full size by default. You can use the height and width to scale the image. To do that, add the following properties and desired values. (e.i., <img src= images/its.jpg width= 500px height= 500px />) The alt attributes provides a short description of the image in case the image does not load in a user s browser and is also read by screen readers for users with disabilities. (e.i., <img src= images/its.jpg width= 500px height= 500px alt= ITS Banner />) For more information about how to code, visit http://www.w3schools.com/html/html_basic.as p Help Desk: helpdesk@ipfw.edu Page 5