To create a root folder, follow these steps:
- Create a new folder on your desktop or personal partition. On the desktop, right-click and choose New Folder.
- Give the folder a brief, but descriptive name. Do not use capital letters, spaces, or special characters when naming folders and files for your website. All of your pages will be saved within this folder.
- Open the folder, and create another new folder inside. Name this folder images. Put all of your images, buttons, movie files, etc. inside the images folder.
- Make sure that all your pages and images are saved in your root folder, or they will not appear the next time your website is opened.
- Now you are ready to launch Dreamweaver CS3. Click the Dreamweaver CS3 icon from Start > Programs > Macromedia Dreamweaver CS3. Or use the Adobe Dreamweaver CS3 Icon on your desktop.
Creating a WebPage :
- Choose a page to be the homepage of your Web site. This will be the first page that users encounter when they visit your site. Save this file to your local root folder as home.html. Naming the homepage home.html tells the Web browser that this is the first page it should open when someone visits your site.
- To add a new page go to File > New and choose a basic HTML page. Save this page by clicking File > Save As. Name the first page home.html
- After your homepage is created, you can use this page as a template layout for all the other pages in your site. Simply hit Save As and name the file whatever you wish, but be sure to keep the name simple, for example CV.html, resume.html, pictures. etc. Remember not to use capital letters or spaces when naming files; this will make it easier for web browsers to find your files.
- To save the pages of your site simply click File > Save for each page. Make sure your homepage is named home.html, and save all of your files in the folder you chose when you defined your site, i.e. in your local root folder.
Tables help you divide the space on your page. They are similar to tables in Word or Excel but can be used in much more flexible ways. Tables give you the option of making your page a fixed size or making it fit to the user's window the best it can. Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.
To insert a table, follow these steps:
- In the main menu, click Insert > Table.
- Insert the amount of Table Rows and Columns
- Set Table width to between 600 and 800 pixels.
- Set Border thickness. To have a visible border type in 1 or higher, to have no border type in 0.
- Cell padding adds room inside of a cell. Enter 0 for no space or a number to Increase the space.
- Cell spacing adds space between cells. Enter 0 for no space or a number to Increase the space.
- Click OK.
PROPERTIES OF TABLES :
- Name your table;
- Change the number of rows and columns in the table;
- Change the width and height of the table,
- Change the Cell Pad: this is the number of pixels that come between the border of cells and the content of cells.
- Change the Cell Space: this is the number of pixels that come between the borders of each cell.
- Change the alignment: this is the position of the table on the left or right edge, or in the center of the page.
- Change the border: this is the number of pixels that make up the thickness of cell borders.
ADDING DESIGN ELEMENTS :
ADDING TEXT :
- To insert text simply click inside a cell and type in your content. When you click
- ENTER, Dreamweaver automatically adds paragraph spacing. To add a line space, click
- SHIFT + ENTER.
INSERTING IMAGES : To insert an image, follow these steps:
- Click in the cell where you want the image to appear.
- Click Insert > Image.
- Locate the image you want to insert.
- Click Choose to insert the image.
IMAGE PROPERTIES INSPECTOR : The top half of the Image Properties Inspector allows you to:
- Name the image (far left).
- Change the size of the image (W & H).
- See where the image file is located (Src).
- Link the image to a file or a site (Link).
- Edit the image (Edit).
FORMATTING PAGE PROPERTIES :
- To change the background color of your pages or other overall properties of your website, go to Modify > Page Properties. Here, in the Page Properties window, you can set the default font, text size, text color, and background for all of your pages.
You can preview your Web pages in a browser in many ways:
- Choose File > Preview in Browser.
- Hit F12.
- Click on the world icon located on the toolbar at the top of your page.
A hyperlink or link, is an object or text that, when clicked, takes the users to another webpage or opens a file. The various types of hyperlinks are explained below.
- INTERNAL LINKS.
- EXTERNAL LINKS.
- BASIC EMAIL LINK.
Internal links are used to connect users to other pages within the same website. Before linking to other pages, you must make sure that the other pages are saved in your local root folder and contain the file extension .html.
To create an internal link, follow these steps:
- Select the text or image you would like to make a hyperlink.
- Click on the small folder next to the Link field in the Properties Inspector
- Browse through the files, and select the page you would like to link.
- Click OK
External links : External links are used to connect the users to pages from other websites.
To create an external link, do the following:
- Select a text or an image you want to make a hyperlink.
- Click the cursor inside of the link text field in the Properties Inspector.
- Type the complete URL (web address) of the website you want to link
- Select the Target type as -blank.
NOTE: If you select the Target type as -blank, it will open the link in a new window while keeping your website open in another window. Doing this is good practice because it will prevent the user from being frustrated and leaving your site.
Email Link : E-mail links are links that will automatically open the user's default email program with a blank e-mail addressed to the specified e-mail link. There are two ways to create an email link. You can:
- Click on the Insert menu at the top of the screen and select Email Link.
- Type in text for the hyperlink name or label, for example: My Email or Click here to email me.
- Type in your email address, i.e. where the email is to be sent.
- Click OK.
There are four panel groups available in Dreamweaver:
- CSS Styles: Apply CSS styles to the current selection
- AP Elements: Manage the AP (absolutely positioned) elements in your document
- Databases: Create and inspect database connections, insert database code
- Bindings: Locate and insert dynamic content
- Server Behaviors: Create, insert and edit server behaviors into the page
- Components: Create, inspect, and insert components or component code
- Attributes: Edit or add attributes and their values
- Behaviors: Attach or modify behaviors to page elements such as tags
- File: Track local and remote files, and upload files on the Web.
- Assets: View and insert site assets such as images, HTML colors, links, Flash movies, scripts, templates, and library items.
- Snippets: Create, delete, edit, or insert code snippets in the document.
Type the location in the Bg text box, or drag the Point-to-File icon to the file in the Site panel; or click the Folder icon to browse for a file.
Click the Brdr Color list arrow and select a color from the palette.
Document Toolbar : Document toolbar contains :
- Code View: View or edit the page in HTML.
- Split View: View the page in HTML code and Design view (WYSIWYG) at the same time.
- Design View: View or edit the page in the WYSIWYG (What You See Is What You Get) editor.
- Title: Type the Web page title you want to appear in the title bar of the browser.
- File Management: Access already-published files or upload files directly from the document window.
- Preview: Choose from a list of browsers installed on the computer to preview the page.
- Refresh: Click to update changes made to the page after working on the HTML code.
- View options: In Design view, apply a grid or ruler to the page. In Code view, change how the HTML code is displayed.
- Visual Aids: Choose from different aids to help you design your pages.
- Validate markup: Validate current document or tag.
- Check Browser Compatibility: Check the compatibility of your document with different Web browsers
Insert Toolbar :
- Common: includes objects commonly inserted in a Web page (ex. tables, images)
- Layout: insert layout tables and frames on the page
- Forms: insert elements often found in a Web form (ex. text fields, option buttons, check boxes)
- Data: insert Spry data objects and other dynamic items like update forms.
- Spry: includes Spry objects and widgets for making Spry pages.
- Text: apply formatting to text (ex. bold, italic, list item)
- Favorites: allows you to group the buttons youuse most often.
• To Format Text: Select the text and apply formatting from the Property Inspector.
• To Create a Hyperlink: Select the text and type the URL in the Link textbox; or drag the Point-to-File icon to the file in the Site panel; or click the Folder icon to browse for a file in the Web site.
• Specify Link Target Frame: Specify in which frame the hyperlink should appear.
• To Add a Hyperlink to an Image: Select the text and type the URL in the Link textbox; or drag the Point-to-File icon to the file in the Site panel; or click the Folder icon to browse for a file in the Web site.
• To Create an Image Map: Select the Rectangular, Oval, or Polygon command, draw a shape and set the link location.
• To Edit an Image: Use the image editing buttons.
• To Align an Image: Click the Align button arrow and align the image relative to text nearby; or click the Left, Center or Right Align button in the Inspector.
• To Insert an Image: Press <Ctrl> + <Alt> + <I>, or select Insert → Image from the menu.
Table Properties :
- To View Table Properties: Click a table border.
- To Add or Delete Rows or Columns: Type the number of rows or columns you want to add or delete in the Rows and Cols text boxes.
- To Change Table Width: Type a number in the W text box.
- To Display the Table in Pixels or Percent: Click the pixels or percent button arrow and select the display option.
- To Add Cell Padding or Cell Spacing: Enter the amount in the CellPad or CellSpace text boxes.
- To Add a Background Color: Click the Bg Color list arrow and select a color from the palette.
- To Add a Border Color: Click the Brdr Color list arrow and select a color from the palette.
- To Add a Background Image: Type the location in the Bg text box, or drag the Point-to-File icon to the file in the Site panel; or click the Folder icon to browse for a file.
- To Add a Table Border: Enter the width in the Border text box.
Property Inspector :
- Select an item to view its properties.
- To Get Help: Click the Help button for more information on options.
- Format Text in HTML Code: Click the Quick Tag Editor button to apply an HTML tag to selected text or object.
- To Expand/Contract the Property Inspector: Click the Expander arrow in the lower right corner to view or hide all the options in the Property Inspector.