Basic Web Design using Dreamweaver




          By Joseph M. Charnin
           September 10, 2007
Table of Contents
Table of Contents..........................................................................................
Introduction
         What is Dreamweaver?
               Adobe’s Dreamweaver (previously Macromedia’s Dreamweaver) is a
 ...
What will be covered?

     1.   Creating Dreamweaver files
     2.   Page properties
     3.   Image placement
     4.   ...
7. Click on ‘HTML’ listed under Create New.
   8. Once the blank .html document loads click on ‘Site’ on the top menu bar ...
Page properties
       What are page properties?
              Page properties control the appearance for all of the fonts...
white.
       6. Finally the margins will control the distance between the site content and the frames
          of any In...
Placing an Image and Adding a Border
             By default the logo will be aligned to the top left of the page.

      ...
Your page should now look similar to the one below.




       Creating a Link
             Images and words can be turned...
3. The new window controls the general formatting of table that is about to be inserted.
        Rows stack up on each oth...
Upcoming SlideShare
Loading in...5
×

Basic Web Design In Dreamweaver

20,383

Published on

What is Dreamweaver?
Adobe’s Dreamweaver (previously Macromedia’s Dreamweaver) is a WYSIWYG web design tool for users of all skill levels. Dreamweaver is an all in one web design tool capable of creating websites and uploading them via FTP . Dreamweaver does not assist in the creation of graphics. However, since Adobe purchased Macromedia all the new versions such as those found in the CS3 suite integrate with Photoshop. This makes it easier to manage images while working in Dreamweaver, Fireworks, and illustrator.

1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
20,383
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
603
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Basic Web Design In Dreamweaver

  1. 1. Basic Web Design using Dreamweaver By Joseph M. Charnin September 10, 2007
  2. 2. Table of Contents Table of Contents.............................................................................................................................2 Introduction......................................................................................................................................3 What is Dreamweaver?...............................................................................................................3 Getting Started............................................................................................................................3 What will be covered?................................................................................................................4 Creating Dreamweaver files............................................................................................................4 Page properties.................................................................................................................................6 What are page properties?...........................................................................................................6 Appearance.................................................................................................................................6 Links...........................................................................................................................................7 Headings.....................................................................................................................................7 Title/Encoding.............................................................................................................................7 Image placement..............................................................................................................................7 Inserting an Image.......................................................................................................................7 Placing an Image and Adding a Border......................................................................................8 Text placement.................................................................................................................................8 Formatting Text..........................................................................................................................8 Creating a Link...........................................................................................................................9 Basic use of tables............................................................................................................................9 Inserting a Table.........................................................................................................................9 Formatting Tables ....................................................................................................................10 Site preview...................................................................................................................................10
  3. 3. Introduction What is Dreamweaver? Adobe’s Dreamweaver (previously Macromedia’s Dreamweaver) is a WYSIWYG1 web design tool for users of all skill levels. Dreamweaver is an all in one web design tool capable of creating websites and uploading them via FTP2. Dreamweaver does not assist in the creation of graphics. However, since Adobe purchased Macromedia all the new versions such as those found in the CS33 suite integrate with Photoshop. This makes it easier to manage images while working in Dreamweaver, Fireworks, and illustrator. Getting Started Web design is made simple by this program and allows anyone to create a site with minimal effort. This reference guide will cover the basics of Dreamweaver but will not cover the basics of html, style sheets, or template creation. This reference will give the class of ENC4294 the basic understanding of Dreamweaver. It is assumed that everyone using this guide already has the basic understandings of fonts and layout principal such as the use of colors. This guide will cover creating Dreamweaver files, page properties, image placement, text placement, basic use of tables, site validation and site preview. The image and Lipsum Ipsum text referenced in this manual is available under the main discussion for our class in Webct. Dreamweaver can be purchased via Adobe’s web site for about $398.99 or at the UCF bookstore for $199.95 with the proof of current student enrollment. 1 What you see is what you get 2 File Transfer Protocol is used to connect a users computer to a server in order to upload a website to the web 3 CS3 is a bundle of Adobe of products, which includes Dreamweaver, Photoshop, Flash, illustrator, and other software available for designing websites.
  4. 4. What will be covered? 1. Creating Dreamweaver files 2. Page properties 3. Image placement 4. Text placement 5. Basic use of tables 6. Site validation 7. Site preview Creating Dreamweaver files 1. Create a folder named ‘web site’ by right clicking on the Desktop and selecting ‘Create New Folder’. • This is the location you will save your .html files to. 2. Open the ‘web site’ folder and create another folder entitled ‘images’. • This is the location you will save images to. 3. Go to the main discussion for our class and download the logo image provided in the Dreamweaver files post. 4. Save this image to the recently created ‘image’ folder. 5. Open Dreamweaver by clicking on the Dreamweaver 2004 MX link located on the Desktop. 6. Once Dreamweaver loads you will see the menu below.
  5. 5. 7. Click on ‘HTML’ listed under Create New. 8. Once the blank .html document loads click on ‘Site’ on the top menu bar and then select ‘New Site…’. 9. Select the ‘Advanced’ button from the top of the new window. 10. On the new screen you will need to edit the following fields. • Site Name: This should either be the domain name, company name, or something short and descriptive. For this project please use ENC4294. • Local root folder: Change this to the recently created folder ‘web site’ located on your desktop. To do so click on the folder icon next to the text field to browse to your ‘web site’ folder. • Default images folder: Change this to the recently created folder ‘images’ located on your desktop within ‘web site’. To do so click on the folder icon next to the text field to browse to your ‘images’ folder. The other options presented are not required when creating files for CD publication. 11. After changing the required fields click the ‘ok’ button located at the bottom of the window. 12. Finally click on ‘File’ from the top menu bar and select ‘Save As’. 13. Change the file ‘untitled1.html’ to ‘index.html’ and save the file. Dreamweaver is now setup and ready to be used.
  6. 6. Page properties What are page properties? Page properties control the appearance for all of the fonts, text colors, links, headings, and the background. The title field is also found in this menu and should be changed because it will appear at the top of every browser that views the page. Below is an example of the basic settings, which will affect all text that is not a link. Page properties are being used in place of complicated style sheets commonly known as .css. This section will not cover the ‘Tracing Image’ tab because it is used for more complicated designs and will not affect your web site. The options for background images will also be skipped; these fields should be left blank. Appearance 1. Click on ‘Modify’ and select ‘Page Properties’ from the top menu bar. 2. By default page properties opens to the ‘Appearance’ tab. Change the font type to something suitable such as “Arial, Helvetica, sans serif”. 3. Set ‘Size’ to one that will appear the most on your site, generally 12 is standard and should be used for this site. This setting only affects texts that are not listed as a header or a link. For more information on headers and links please refer to their section below. 4. The text color can be set to any color, but for this exercise please choose black. 5. The background color can be set to any color, but for this exercise please choose
  7. 7. white. 6. Finally the margins will control the distance between the site content and the frames of any Internet browser. Set these all to zero for this exercise. Fonts, text color, and size can be altered while working within any .html file just as they could be in a Microsoft Word document. These settings are used to help create an organized appearance in the final product. Links 1. Headings 1. Title/Encoding 1. Image placement This section will cover the basics of inserting an image, positioning it, and applying a border to it. For this exercise we will use the ENC4294 logo located within your image folder. Inserting an Image 1. Click on ‘Insert’ and then select ‘Image’. 2. Select logo.jpg from your ‘images’ folder. 3. Use the ‘Alternate text’ field to label pictures. This is an optional step and can only be seen if the image doesn’t load or if the image is large and takes a while to load. In either case once done leaving it blank or filling it in click on ‘ok’.
  8. 8. Placing an Image and Adding a Border By default the logo will be aligned to the top left of the page. 1. Click on the logo so that the properties of the image are displayed. 2. By default the box below will be displayed on your screen. To control the position of the image choose a position from the ‘Align’ field. For now pick any placement. 3. The ‘Border’ field will create a black border around the image. The border is based on pixels and is optional. These Steps can be performed on any image to achieve the same results. Text placement This section will cover the basics of creating a link, formatting text and applying new attributes besides those set in the page properties. For this exercise you will need to copy the Lipsum Ipsum text that was provided and paste it into your .html document below the logo image. The shortcuts that are used in Microsoft Word will also work within Dreamweaver. Formatting Text Text formatting in Dreamweaver is similar to that of Microsoft’s Word. The formatting for text can be found within the property box and listed under ‘Text’ on the main menu. For this site we will only cover the basic options. 1. Highlight the two paragraphs so that all of the text is highlighted. 2. The property box will now show the basic formatting option for the text. Select ‘Align Left’. 3. Type “Welcome to ENC4292” Below the image. 4. Highlight “Welcome to ENC4292” and choose ‘Heading 1’ from the ‘Format’ field.
  9. 9. Your page should now look similar to the one below. Creating a Link Images and words can be turned into links by highlighting them and placing a URL into the ‘Link’ field located in the property box. 1. Highlight the words “Lorem Ipsum” at the bottom of the page. 2. Insert this link into the ‘Link’ field without the quotations “http://www.lipsum.com/”. 3. Choose ‘blank’ from the ‘Target’ field. This will cause the link to open in a new window when it is clicked on. Basic use of tables Tables are used to organize text and pictures. Tables can have borders or be invisible. The space inside of a table is called cells and these are organized into rows and columns. The following set of instructions will give you a basic understanding of how tables work. Inserting a Table 1. Place the cursor at the top of the page and press enter so that the logo and text are moved down. 2. Click on ‘Insert’ and select ‘Table’.
  10. 10. 3. The new window controls the general formatting of table that is about to be inserted. Rows stack up on each other and columns are next to each other. For this exercise Choose three rows by 1 column with a border that is set to two. 4. Make sure the table width is set to “100” percent and not to “800” pixels. 5. Click ‘ok’. Formatting Tables 1. Highlight and drag the logo into the first black box. 2. Highlight and move the text into the second box 3. Type your name in the bottom box so that your page looks similar to this one. <Image> 4. Click on any of the black lines that create the new table, this will display the tables properties within the properties box. 5. You can now align the table as you would an image or paragraph. Please center the new table. 6. The Cellpad and Cellspace control the spacing between the context within the tables and the spacing between the cells. The spacing is based on pixels and can help to create white space. For this project they can all be left at 0. 7. You can now use the other features listed under the properties to change border colors and the background colors of the table. If a single cell is highlighted only that cell and it’s content will be affected. 8. Once you have formatted the table to your liking go to ‘File’ and ‘Save’. Site preview You can now preview your website. 1. Minimize Dreamweaver and browse to your ‘web site’ folder on the desktop. 2. Right mouse click the index.html file and choose to open it with ‘Internet Explorer’. Your site should look similar to this depending upon how you formatted your table. <Final Image>

×