Dreamweaver Introduction -- Creating Web Pages ?· Dreamweaver Introduction -- Creating Web Pages with…

  • Published on

  • View

  • Download

Embed Size (px)


<ul><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 1 </p><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver </p><p>This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a </p><p>webpage including creating tables, inserting images, creating links, and publishing your pages. </p><p>Participants will: </p><p> Start Dreamweaver and define a "local site" </p><p> Navigate Dreamweaver </p><p> Create and format web pages </p><p> Create and modify tables </p><p> Link to images </p><p> Create hyperlinks in text and images to other webpages </p><p> Create "image maps" </p><p> Define a remote site and "publish" to it </p><p>What are web pages? </p><p>Web pages are nothing more than text documents that have special tags controlling appearance, linking, and </p><p>layout. You can see the code behind a webpage by viewing a pages source. In Internet Explorer, chose View &gt; </p><p>Source and you will something that looks like this: </p><p> Research Guides, Tutorials and more... </p><p>Course-Specific Guides || Subject </p><p> Guides || Career Guides<br></p><p> Software Tutorials || </p><p> Database Tutorials || Doing </p><p> Library Research<br></p> <p>Why use Dreamweaver? </p><p>The power of Dreamweaver (and similar) web page editors is that it allows users to create web pages without </p><p>having to know the tags that make up HTML. </p><p>Dreamweaver is an especially good web page editor because it is accessible for the novice user, yet is powerful </p><p>enough to grow with users as they gain experience and demand more complex features. </p><p>Dreamweaver MX 2004 is available from the macromedia website for a 30 day free trial. In addition, it is the </p><p>installed on many labs throughout campus, and is available for a substantial educational discount in the college </p><p>bookstore. </p><p>Although this workshop specifically addresses Dreamweaver MX 2004, the concepts, ideas, and topics covered </p><p>in this workshop are applicable to earlier versions too. </p><p>This workshop is conducted on Windows XP workstations, but all concepts, ideas, and topics are applicable to </p><p>Macintosh users too. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 2 </p><p>Site Organization Each web site (a collection of web pages, images, and other files) is housed on a server in a directory which is </p><p>readable by a web browser. Files are linked together in a hierarchical structure that allows users to navigate </p><p>through the available files. </p><p>Organizing your site from the outset and maintaining the structure for your site on your local drive could save </p><p>many hours of debugging broken links and missing files. When you go to publish your site by moving your </p><p>files to a web server, you will replicate not only the files, but also the hierarchical structure that you have </p><p>created. </p><p>The default webpage of any web site </p><p>directory is called index.html. </p><p>To prevent users from browsing the files </p><p>and subdirectories in a website, simply </p><p>name the lead document in every </p><p>directory index.html. </p><p>If there is no document named </p><p>index.html in a directory (as is the case </p><p>with the directory shown to the left) the </p><p>web browser will create one for the user </p><p>which will be nothing more than an </p><p>alphabetical list of the files and sub </p><p>directories. </p><p>Think of index.html as the table of </p><p>contents of your website. Everything </p><p>you want your users of your site to see </p><p>will be linked to this document to guide </p><p>them through your content. </p><p>Step 1: Create a folder locally. </p><p> If you are at your own computer, feel free to create the folder wherever you are comfortable storing files. </p><p> In this lab, click the My Documents icon from the desktop and add a www folder. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 3 </p><p>Step 2: Set up the Dreamweaver site editor for editing </p><p>See also, the step by step instructions for setting up a site at: </p><p>https://people.rit.edu/people/tutorials/dreamweaver.php </p><p>When Dreamweaver MX opens, it looks like this: </p><p>Click Create New Dreamweaver Site to walk through a wizard, setting up a new site. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 4 </p><p>Name your site something meaningful </p><p>Leave the default answer no to the server technology question. </p><p>Leave the default option to work locally with your files, and specify the location of the local www directory </p><p>you created: </p><p>Specify the remote settings for your website. If your website will be at www.rit.edu, use the following settings, </p><p>exactly as shown. </p><p> Choose FTP and the connection type. </p><p> Type gibson.rit.edu as the host name. </p><p> Type www/ for the remote folder. </p><p> Type your RIT User ID. </p><p> In a public lab like this one, </p><p> leave password blank and dont save it. </p><p> Check off Use Secure FTP </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 5 </p><p>Complete the wizard, answering Next or Done, until you are back to the main program. </p><p>Your site is now available </p><p>in the </p><p>Files window. </p><p>Choose Local View to </p><p>the right. </p><p>Finally click, Create New </p><p>HTML, from the menu in </p><p>the center. </p><p>When your blank </p><p>document is created, save </p><p>it as index.html </p><p> The next time that you open Dreamweaver, your site will be already defined and ready to use. Simply select it </p><p>from the drop down menu on the right hand side.</p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 6 </p><p>Application Workspace Title Bar </p><p>The title bar gives the filename, </p><p>and the local location of the file </p><p>Menu Bar </p><p>Like all windows applications, </p><p>all functions can be reached from </p><p>the Menu Bar </p><p>Insert Toolbar Dreamweaver includes several </p><p>toolbars with shortcuts to insert </p><p>common objects. </p><p>Main workspace </p><p>Where you type and manipulate </p><p>objects in Dreamweaver </p><p>Site Panel </p><p>Shows all the files and </p><p>subdirectories of your website </p><p>Properties Inspector A panel to control settings for </p><p>the type of object you are </p><p>working with. As you work with </p><p>different types of object (text, </p><p>images, tables, etc), the </p><p>properties inspector changes. </p><p>Like all Windows programs, you can customize the look and feel of the workspace. </p><p>The View Toolbars menu option and the Window menu give you many options on customizing the </p><p>application. Experiment with these to find what works best for you. If any part of the program should be closed </p><p>accidentally, try toggling one of these options to see if it reappears. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 7 </p><p>Creating a New Page: </p><p>There are a numerous ways to start a new document. </p><p> Choose File &gt; New. OR </p><p> From the Site Panel chose File &gt; New File OR </p><p> Ctrl + N OR </p><p> In the Site Panel find the place the new document will reside, and with a right mouse button click, choose New File. Name the file immediately, being sure to use .htm or html as the file extension, </p><p>then double click the new file to open it. </p><p>Of the four choices, the later is the preferred method, because it forces you to save the file in the proper place. If </p><p>you choose the other options, you will have to save the document by choosing File &gt; Save or File &gt; Save As. </p><p>Once you have created a new page, the first thing you should do is set the Page Properties. </p><p>Page properties are settings that control the look and feel of the entire page. </p><p>From the Modify menu, choose Page Properties, the following dialog box will appear: </p><p>Of all the categories, Appearance, Links, and Title are the most useful. </p><p>Headings, and Tracing Image are beyond the scope of this workshop. </p><p>These settings control the </p><p>default font, colors, and </p><p>margins of a web page. </p><p>These setting control the </p><p>appearance and color of fonts. </p><p> The Title controls what the user sees in her browsers title </p><p>bar and bookmark file. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 8 </p><p>All of these settings are optional. If you do not choose to set a color or font, you are passing the choice of color </p><p>or font to your users browsers. Unless specified, the users browser will use whatever color or font it normally </p><p>uses. </p><p>Since web pages are meant to be displayed on your users computers, designing for them can be tricky. </p><p>Graphic design and traditional printing professionals are used to having total control of their documents </p><p>setting up exactly how they want the document to appear. Web pages do not allow total control of appearance. </p><p>This is first apparent to most novice web page authors when setting fonts or colors for the page properties. </p><p>Notice that you can not specify a single font. Instead, you specify a </p><p>font list. A font list, is asking the users browser to first try </p><p>rendering the text in Arial. If the users PC does not have Arial, then </p><p>try Helvetica, and if Helvetica is not available, then use whatever font </p><p>is set up to be the default sans-serif font. </p><p>If you leave the choice default font, then the text will be whatever </p><p>font is specified as the default font in the users browser. </p><p>Colors are chosen in Dreamweaver by specifying a hexadecimal number. </p><p>Although you can specify one of several million different colors, you should </p><p>be careful doing so. You user may have a monitor that will be unable to </p><p>display the color you have chosen. </p><p>Dreamweavers color picker gives you a choice of 216 web safe colors </p><p>that almost all computer displays can render. Of course, there is nothing </p><p>stopping you from choosing a more obscure color, as long as you are willing </p><p>to live with the fact that some of your users may not be able to display it. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 9 </p><p>Working with Text </p><p>Working with text in Dreamweaver is similar to working with text in a word processor. </p><p>From the properties inspector, you can set the font family, font color, font style (bold, italics) justification, and </p><p>create bulleted or numbered lists. </p><p>Previous versions of Dreamweaver did not preserve formatting when you pasted in text from a word processing </p><p>program. Dreamweaver MX 2004, fixes this problem, and now text is properly formated. </p><p>Besides the font family and color selections already noted above, there are several additional differences </p><p>between standard word processing and authoring HTML in Dreamweaver. </p><p> Tabs dont work: The tab key does not work in web page editors. Use the indent and outdent arrows on the Property Inspector for a similar effect. </p><p> Multiple spaces are treated as one: The HTML treats multiple spaces as a single space. So, pressing down the space key to line up text is not possible. (If absolutely necessary, you can place multiple </p><p>spaces into HTML, but it requires you to go into the HTML code view and add the HTML code for a </p><p>space - ). </p><p> Paragraph Breaks: In HTML all paragraphs have a blank line between them. Using the ENTER key (or RETURN Key) will create paragraph breaks. When typing text, let the processor wrap lines for you. </p><p>Unlike the Desktop publishing world, your output is not controlled by you. You user may have different </p><p>monitor settings and if you do not let the text wrap for you, you could end up with strange results. </p><p> Line Breaks: If you want a line break, use SHIFT+ENTER (or SHIFT+RETURN). </p><p> Spell checking: Available in the Text Menu. </p><p>It is best to type all your text first, letting the lines wrap for you, and then go back and do your formatting. </p><p>It is best to use a dark colored font on a light background. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 10 </p><p>Links, Anchors, &amp; Mailtos What are Links? Links are clickable items that connect to other documents on the web. (other web pages, </p><p>media files such as video, audio, PDF files, etc) Commonly, underlined text or image buttons are used as </p><p>links. Links draw the users eye to the navigable sections of the page. </p><p>There are 4 types of links: </p><p>1) External Links: Used to connect to an external web page. Also called Absolute Links because you must </p><p>use the fully qualified URL in order to create the link. </p><p>Creating an External Link 1. Type your text and highlight it. 2. In the properties inspector, type the complete URL of the site including the http:// part and </p><p>the full web address. For example: http://wally.rit.edu/electronic/electronic.html. </p><p>2) Internal Links used for links to another page at your site. Also called a Relative Link because the user </p><p>provides the relative path from the current document to the one you wish to link to. They should not include </p><p>the http:// part of a URL. </p><p>Creating an Internal Link 1. Type your text and highlight it. 2. In the properties inspector, use the folder icon, to select the document on your site that you </p><p>want to link to. The address that appears in the relative path to the your file. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 11 </p><p>3) Links to an Anchor These are links to a section on another web page. It requires one to first insert a </p><p>named anchor into the text. </p><p>Inserting a Named Anchor 1. Position your cursor exactly where you want the named anchor to be. 2. From the Insert Menu choose Insert Named Anchor. </p><p>3. When naming the anchor, avoid spaces, special characters, and dont forget that capitalization matters. </p><p>Linking to a Named Anchor 1. To link to a named anchor, simply use a pound sign # before the name of the anchor. </p><p>For example, if you are linking to the named anchor section1 and: </p><p>a. The anchor is on the current page, simply type #section1 into the link box. b. If the anchor is on another page in your site, simply type the name of that page, then </p><p>its named anchor: page2.html#section1 </p><p>c. The anchor is on another page outside of your site, type the complete URL, with the http:// part, the filename, and the named anchor. For example, </p><p>http://wally.rit.edu/electronic/electronic.html#section1 </p><p>4) Mailto Links These are special links that when clicked launch the users email program. </p><p>Creating a Mailto Link 1. Type your email address and highlight it. 2. In the properties inspector link box, type mailto: followed by an email address. </p><p>For example, mailto:jjjwml@rit.edu </p><p>Checking Links Once you have created a page with links, its a good idea to check them. There are several </p><p>ways to do that: </p><p> File &gt; Preview in Browser will open your document in a web browser so that you can manually check the links. </p><p> File &gt; Check Page &gt; Check Links will check all the links in your document for you. </p><p>To edit a broken link, select it and make corrections in the Properties Inspector link box. </p><p>To remove a link, select the text and delete the contents of the link box of the Properties Inspector. </p></li><li><p>Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 12 </p><p>Images and Image Maps </p><p>Images are displayed on HTML pages by linking to them in a similar manner to page linking. You can either </p><p>link to an image on your site, or link to an image on another site. Although it is considered bad form to link to </p><p>images from other sit...</p></li></ul>


View more >