Dreamweaver Introduction -- Creating Web Pages with Dreamweaver

Transcription

1 Dreamweaver Introduction -- Creating Web Pages with Dreamweaver This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a webpage including creating tables, inserting images, creating links, and publishing your pages. Participants will: Start Dreamweaver and define a "local site" Navigate Dreamweaver Create and format web pages Create and modify tables Link to images Create hyperlinks in text and images to other webpages Create "image maps" Define a remote site and "publish" to it What are web pages? Web pages are nothing more than text documents that have special tags controlling appearance, linking, and layout. You can see the code behind a webpage by viewing a page s source. In Internet Explorer, chose View > Source and you will something that looks like this: <h1>research Guides, Tutorials and more...</h1> <center> <a href="#course">course-specific Guides</a> <a href="#subject">subject Guides</a> <a href="#career">career Guides </a><a href="#software">software Tutorials</a> <a href="#database">database Tutorials</a> <a href="#research">doing Library Research</a> </center> Why use Dreamweaver? The power of Dreamweaver (and similar) web page editors is that it allows users to create web pages without having to know the tags that make up HTML. Dreamweaver is an especially good web page editor because it is accessible for the novice user, yet is powerful enough to grow with users as they gain experience and demand more complex features. Dreamweaver MX 2004 is available from the macromedia website for a 30 day free trial. In addition, it is the installed on many labs throughout campus, and is available for a substantial educational discount in the college bookstore. Although this workshop specifically addresses Dreamweaver MX 2004, the concepts, ideas, and topics covered in this workshop are applicable to earlier versions too. This workshop is conducted on Windows XP workstations, but all concepts, ideas, and topics are applicable to Macintosh users too. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 1

2 Site Organization Each web site (a collection of web pages, images, and other files) is housed on a server in a directory which is readable by a web browser. Files are linked together in a hierarchical structure that allows users to navigate through the available files. Organizing your site from the outset and maintaining the structure for your site on your local drive could save many hours of debugging broken links and missing files. When you go to publish your site by moving your files to a web server, you will replicate not only the files, but also the hierarchical structure that you have created. The default webpage of any web site directory is called index.html. To prevent users from browsing the files and subdirectories in a website, simply name the lead document in every directory index.html. If there is no document named index.html in a directory (as is the case with the directory shown to the left) the web browser will create one for the user which will be nothing more than an alphabetical list of the files and sub directories. Think of index.html as the table of contents of your website. Everything you want your users of your site to see will be linked to this document to guide them through your content. Step 1: Create a folder locally. If you are at your own computer, feel free to create the folder wherever you are comfortable storing files. In this lab, click the My Documents icon from the desktop and add a www folder. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 2

3 Step 2: Set up the Dreamweaver site editor for editing See also, the step by step instructions for setting up a site at: When Dreamweaver MX opens, it looks like this: Click Create New Dreamweaver Site to walk through a wizard, setting up a new site. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 3

4 Name your site something meaningful Leave the default answer no to the server technology question. Leave the default option to work locally with your files, and specify the location of the local www directory you created: Specify the remote settings for your website. If your website will be at use the following settings, exactly as shown. Choose FTP and the connection type. Type gibson.rit.edu as the host name. Type www/ for the remote folder. Type your RIT User ID. In a public lab like this one, leave password blank and don t save it. Check off Use Secure FTP Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 4

5 Complete the wizard, answering Next or Done, until you are back to the main program. Your site is now available in the Files window. Choose Local View to the right. Finally click, Create New HTML, from the menu in the center. When your blank document is created, save it as index.html The next time that you open Dreamweaver, your site will be already defined and ready to use. Simply select it from the drop down menu on the right hand side. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 5

6 Application Workspace Title Bar The title bar gives the filename, and the local location of the file Menu Bar Like all windows applications, all functions can be reached from the Menu Bar Insert Toolbar Dreamweaver includes several toolbars with shortcuts to insert common objects. Main workspace Where you type and manipulate objects in Dreamweaver Site Panel Shows all the files and subdirectories of your website Properties Inspector A panel to control settings for the type of object you are working with. As you work with different types of object (text, images, tables, etc ), the properties inspector changes. Like all Windows programs, you can customize the look and feel of the workspace. The View Toolbars menu option and the Window menu give you many options on customizing the application. Experiment with these to find what works best for you. If any part of the program should be closed accidentally, try toggling one of these options to see if it reappears. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 6

7 Creating a New Page: There are a numerous ways to start a new document. Choose File > New. OR From the Site Panel chose File > New File OR Ctrl + N OR 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, then double click the new file to open it. Of the four choices, the later is the preferred method, because it forces you to save the file in the proper place. If you choose the other options, you will have to save the document by choosing File > Save or File > Save As. Once you have created a new page, the first thing you should do is set the Page Properties. Page properties are settings that control the look and feel of the entire page. From the Modify menu, choose Page Properties, the following dialog box will appear: Of all the categories, Appearance, Links, and Title are the most useful. Headings, and Tracing Image are beyond the scope of this workshop. These settings control the default font, colors, and margins of a web page. These setting control the appearance and color of fonts. The Title controls what the user sees in her browser s title bar and bookmark file. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 7

8 All of these settings are optional. If you do not choose to set a color or font, you are passing the choice of color or font to your users browsers. Unless specified, the user s browser will use whatever color or font it normally uses. Since web pages are meant to be displayed on your users computers, designing for them can be tricky. Graphic design and traditional printing professionals are used to having total control of their documents setting up exactly how they want the document to appear. Web pages do not allow total control of appearance. This is first apparent to most novice web page authors when setting fonts or colors for the page properties. Notice that you can not specify a single font. Instead, you specify a font list. A font list, is asking the user s browser to first try rendering the text in Arial. If the user s PC does not have Arial, then try Helvetica, and if Helvetica is not available, then use whatever font is set up to be the default sans-serif font. If you leave the choice default font, then the text will be whatever font is specified as the default font in the user s browser. Colors are chosen in Dreamweaver by specifying a hexadecimal number. Although you can specify one of several million different colors, you should be careful doing so. You user may have a monitor that will be unable to display the color you have chosen. Dreamweaver s color picker gives you a choice of 216 web safe colors that almost all computer displays can render. Of course, there is nothing stopping you from choosing a more obscure color, as long as you are willing to live with the fact that some of your users may not be able to display it. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 8

9 Working with Text Working with text in Dreamweaver is similar to working with text in a word processor. From the properties inspector, you can set the font family, font color, font style (bold, italics) justification, and create bulleted or numbered lists. Previous versions of Dreamweaver did not preserve formatting when you pasted in text from a word processing program. Dreamweaver MX 2004, fixes this problem, and now text is properly formated. Besides the font family and color selections already noted above, there are several additional differences between standard word processing and authoring HTML in Dreamweaver. Tabs don t 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. 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 spaces into HTML, but it requires you to go into the HTML code view and add the HTML code for a space - ). 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. Unlike the Desktop publishing world, your output is not controlled by you. You user may have different monitor settings and if you do not let the text wrap for you, you could end up with strange results. Line Breaks: If you want a line break, use SHIFT+ENTER (or SHIFT+RETURN). Spell checking: Available in the Text Menu. It is best to type all your text first, letting the lines wrap for you, and then go back and do your formatting. It is best to use a dark colored font on a light background. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 9

10 Links, Anchors, & Mailtos What are Links? Links are clickable items that connect to other documents on the web. (other web pages, media files such as video, audio, PDF files, etc ) Commonly, underlined text or image buttons are used as links. Links draw the users eye to the navigable sections of the page. There are 4 types of links: 1) External Links: Used to connect to an external web page. Also called Absolute Links because you must use the fully qualified URL in order to create the link. 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 part and the full web address. For example: 2) Internal Links used for links to another page at your site. Also called a Relative Link because the user provides the relative path from the current document to the one you wish to link to. They should not include the part of a URL. 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 want to link to. The address that appears in the relative path to the your file. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 10

11 3) Links to an Anchor These are links to a section on another web page. It requires one to first insert a named anchor into the text. 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. 3. When naming the anchor, avoid spaces, special characters, and don t forget that capitalization matters. Linking to a Named Anchor 1. To link to a named anchor, simply use a pound sign # before the name of the anchor. For example, if you are linking to the named anchor section1 and: 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 it s named anchor: page2.html#section1 c. The anchor is on another page outside of your site, type the complete URL, with the part, the filename, and the named anchor. For example, 4) Mailto Links These are special links that when clicked launch the user s program. Creating a Mailto Link 1. Type your address and highlight it. 2. In the properties inspector link box, type mailto: followed by an address. For example, mailto:jjjwml@rit.edu Checking Links Once you have created a page with links, it s a good idea to check them. There are several ways to do that: File > Preview in Browser will open your document in a web browser so that you can manually check the links. File > Check Page > Check Links will check all the links in your document for you. To edit a broken link, select it and make corrections in the Properties Inspector link box. To remove a link, select the text and delete the contents of the link box of the Properties Inspector. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 11

12 Images and Image Maps Images are displayed on HTML pages by linking to them in a similar manner to page linking. You can either link to an image on your site, or link to an image on another site. Although it is considered bad form to link to images from other sites, there is nothing technologically stopping you from doing so. When working with images for the web, you should prepare all your images outside of Dreamweaver in a program such as Photoshop, Fireworks, or paint or graphics program. Copyright is a serious issue. You should not under any circumstances use someone else s images without getting permission. But if you wanted to, you can download existing images from Internet Explorer, by right clicking and choosing Save Image As. Two basic file formats are supported in HTML JPG and GIF. Image formats used on the web Image Format GIF JPEG General Use Considerations File name convention Icons, graphics, animated gifs Photographic images The 216 web-safe colors will show well on vast majority of 256 (8-bit) color monitors. Balance between compression and image quality. Has 8 bit adaptive-24 bit color (millions) but not necessarily web safe. Example: icon.gif Example: photo.jpg All image files you plan to use should be named and organized in your local web site folder before you link them in your documents. When you insert an image into an HTML document, you are merely referencing the image file. If you move or delete your images outside of Dreamweaver, your webpage s will have broken image links. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 12

13 Inserting an Image 1. Place your courser where you want to image to appear. 2. Select INSERT > IMAGE or click the image icon on the insert toolbar. 3. Locate the image in your local site directory and click the OK button. 4. Click on the newly inserted image, and the properties inspector changes so that you see and can control the image s properties. 5. Fill in the properties as you see fit. (see description below) Name box (unlabeled box below the text Image, 3K) is for naming the image to refer to later from scripts. W and H options set the pixel width and height sizes. When you insert and image in Dreamweaver, these are set automatically for you. You should not adjust the image size using these setting. It could distort the image. If you need to change the size of image, do it outside of Dreamweaver and re-insert. Src specifies the name and location of the image gif or jpg image file. This too is filled in automatically by Dreamweaver when you insert an image. Alt allows you to enter a short text description of what the image is illustrating. When users hold their mouse over the image, this text will pop-up. It assists users who use voice readers on their web pages and this text will display if the user has turned off images on their web browser. Link allows you to make the image a clickable hyperlink. Just like text links, it can either be an absolute URL, a relative URL, a link to a named anchor, or an link. Border specifies the thickness in pixels or a border around the image. By default it is left blank which means no border. will left justify, center, or right justify the image. Align sets the alignment options for text near an image. By default, text is set to align with the baseline of the image. Use the drop down box to experiment with the setting for your page. Map defines the clickable parts of an image. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 13

14 Making an Image Map 1. Highlight your image. 2. Choose the shape that will best create the hotspot you want (rectangle, circle, or polygon). When you begin drawing your hotspot, properties inspector will change so that you can set the properties for your hotspot. 3. Fill in the Link Box with the link for that hotspot. Just like text links, it can either be an absolute URL, a relative URL, a link to a named anchor, or an link. 4. Optionally repeat for each hot spot you want to create. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 14

15 Tables Tables are used to either layout data in a spreadsheet format, or to create nicely organized, sometimes complex, web pages. A cell can hold anything: formatted text, images, links, headings, horizontal rules, lists, or another table (nested tables). This webpage uses a very simple table to layout data in a spreadsheet like format. The cell borders are visible, so you can easily see the columns and row. This web page makes extensive use of tables to organize content. The borders of the tables are invisible, but if you study the page long enough, you can tell that there are at least 20 rows and 4 columns. Inserting a Table 1. Select Insert > Table or choose the table icon on the Inert Toolbar. 2. Fill in the properties as described below. Rows and Columns specifies the number of rows and columns. Table Width is a two part setting. The drop down box lets you specify if the table should be an absolute size in pixels (so that the size of the table remains the same) or a relative size in percent of screen. Border Thickness sets the thickness of the border around cells. To make this table use an invisible border, set the border to zero. Cell Padding sets the space around the cells border and the content of the cells. Cell Spacing controls how much space exists between cells. Header will apply a pre-formatted style bolding the contents of the top row, the left-most column, or both. Accessibility optionally allow you to specify a caption to include with your table. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 15

16 When you have selected the entire table, by clicking the corner of it, a solid black box appears the entire table, and the Properties Inspector can be used to modify the settings of the entire table. Any of the settings specified when first creating the table can be modified here. In addition, you can set the background color, the border color, and align the table on the page. Any of the settings you set here will effect the entire table. You can also select just parts of a table a single cell, several cells, one or more rows, one or more columns, etc The little green drop down arrows at the base the table, make it easy to select exactly what you want to. Notice that when you select just part of a table (a single column for example) the properties inspector changes back to the text mode. Any text settings such as font, style, etc will only be applied to the contents of that cell. Merge cells together or split one apart Set the horizontal or vertical alignment. Set the cell(s) width and height Set the cell(s) background color Set the cell(s) border size and color If you change any settings for a cell or a selection of cells, it overrides the settings for a table as a whole. For example, if you set up the table s background color to be blue, but select and change the first row s background color to be red, your entire table will have a blue background expect for the first row, which will be red. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 16

17 Publishing your site at RIT To publish your site on the RIT web server you have to first set up your RIT account for the web. Check to make sure that your RIT personal website is set up and permissions have been set by reviewing the tutorial at If you have already set up the site editor (see the site organization section) then all you have to do is click the connection icon from the files window: A password dialog box will appear: Once you connect, change the view of the files by clicking the drop down menu in the far right hand corner of the Files Panel and choose View, Expand Files Panel. Click and drag each of the files, index.html (your lead document) and other affiliated files (jpg s, gif s etc ) from the panel on the right hand side, to the panel on the left hand side dropping them into the www directory. Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 17

18 If Dreamweaver asks you if you want to include dependent files, click Yes to automatically include all linked gif s, jpeg s, and pages. Clicking No will require you to manually move them separately. Congratulations, you have a website. The web address (URL) to reach your site is: (where abc1234 is replaced with your RIT username). Dreamweaver Introduction -- Creating Web Pages with Dreamweaver RIT Libraries pg: 18