web development · 2017-12-22 · web development using dreamweaver cs4 by: charina ong centre for...

using Dreamweaver CS4

Web Development

Table of Contents

About the Workshop ................................................................................................... 1 Prerequisites............................................................................................................... 1 Workshop Objectives .................................................................................................. 1 Getting Started ........................................................................................................... 2

Dreamweaver Workspace ................................................................................................... 2

Defining a Site............................................................................................................. 4 Creating Page Layout .................................................................................................. 6 Creating a Template .................................................................................................... 7

Designing Template using Table ......................................................................................... 8

Using Cascading Style Sheets ..................................................................................... 10 Adding Content ......................................................................................................... 13

Inserting Images ................................................................................................................ 13 Adding Text ....................................................................................................................... 14

Working with Sprys ................................................................................................... 15

Menu bar Widget .............................................................................................................. 15

Managing Template .................................................................................................. 17

Creating Editable Region in your Template ...................................................................... 17 Creating a Page based on an Existing Template ............................................................... 18

Previewing Pages in your Browser ............................................................................. 19

Setting Browser Preferences ............................................................................................ 19

Publishing the Website ............................................................................................. 20

Putting your website online .............................................................................................. 20 Testing your website ......................................................................................................... 21

Web Development using Dreamweaver CS4 by: Charina Ong Centre for Development of Teaching and Learning

1

About the Workshop

Are you looking for an easy to use method of creating web pages? Adobe Dreamweaver is a professional web editing program that is easy to learn and use with many powerful features. This workshop covers the basics of webpage development, setting up a new site, inserting tables, links, images, formatting using CSS, and uploading to web server.

Prerequisites

Participants would benefit most from this workshop if they have experience with web layouting.

Workshop Objectives

By the end of this workshop, each participant should be able to:

1. Setup your website and project files 2. Create page layout 3. Create and manage templates 4. Use tables to build structure of the page 5. Use Cascading Style Sheets (CSS) 6. Add web content 7. Insert and modify Spry 8. Preview pages in a browser 9. Publish website


2

Getting Started

Dreamweaver Workspace

Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents.

• Application bar- across the top of the application window contains a workspace

switcher, menus, and other application controls.

• Document toolbar- contains buttons that provide options for different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

• Document window- displays the current document as you create and edit it.


3

• Workspace switcher- allows you to switch to different views like Design, Code, and Split (code and design). As a beginner of this course, it is suggested that you use the Design view.

• Panel groups- help you monitor and modify your work. Examples include the Insert panel, the CSS Styles panel, and the Files panel. To expand a panel, double-click its tab.

• Tag selector- displays the hierarchy of tags surrounding the current selection.

Click <body> to select the entire body of the document. To set the class or ID attributes for a tag in the tag selector, right-click the tag and select a class or ID from the context menu.

• Property inspector- allows you to change a variety of properties for the selected object or text. Note that each object has different properties.

• Files panel- lets you manage your files and folders. It allows you to access all the files on your local disk, links to pages and images etc.


4

Defining a Site

The first step to creating a site is to define a new site. Site refers to a local or remote storage location for the documents that belong to a website. It provides a way to organize and manage all of your web documents, upload your site to a web server, track and maintain your links, and manage and share files. To define a site:

1. Click Start> All Programs> Adobe Web Standard CS4> Dreamweaver. 2. In the Create New section, click on Dreamweaver Site.

3. In the Site Definition dialog box, click the Advanced tab. 4. Click the Local Info category of the left navigation. 5. Enter a site name such as your name. 6. Click the folder icon Local root folder to define where you want to store your

files. This will be the default location Dreamweaver will place your files each time you create an webpage.

7. Click the Remote Info category on the left navigation. 8. Select FTP in the Access option. 9. Enter the FTP address, username and password provided by Bytehost.


5

10. Select Automatically upload files to the server on save, and click OK. 11. The Files panel will display the current files stored in your remote server.

12. Enter the website address provided by Bytehost on your browser to see if it is activated.

Information provided by bytehost

Activity: Homepage Create a new page in Dreamweaver that will serve as your homepage. Save the file as index.htm to replace the existing homepage as shown above.


6

Creating Page Layout

A page layout determines how your page will appear in the browser, showing the placement of menus, images, and other kinds of content. Dreamweaver provides several options for creating a new document. You can create any of the following:

• A new blank document or template; • A document based on one of the predesigned page layouts in Dreamweaver; or • A document based on one of your existing templates

In this example, we will be using the layout designed in Fireworks to recreate the following pages:


7

Creating a Template

A template is a special type of document that you use to design a fixed page layout; you can then create documents based on the template that inherit its page layout. As you design a template, you can specify the editable areas which content users can edit. A document that is created from a template remains connected to that template. This means that you can modify the template and immediately update the design in all documents based on it. To create a new template:

1. From the File menu, select New> Blank Template. 2. In the Template Type section, select HTML Template. 3. In the Layout option, select None.

4. You will get a blank document. Save it by pressing CTRL + S. 5. You will get a message that the template does not have any editable regions.

Enter a name for your template, and click Save. This template will be saved in the folder you defined earlier.

6. In the Document toolbar, enter a page title. Search engines will use this Meta

when the page is already uploaded on the net.


8

Designing Template using Table

Below is the layout designed in Fireworks that we will recreate in Dreamweaver:

As you notice, some portions will need to remain as images such as logo and special fonts used. These images have already been created, sliced and exported from Fireworks as web optimized images and are available for use within the images folder. To start recreating the structure of this page layout, we will be using tables. To do this:

1. From the Insert panel, Common category, select Table.

2. Enter the following properties to the table, and click OK. • Rows: 7 • Column: 2 • Table width: 770pixels Border: 0 • Cell padding: 0 • Cell spacing: 0


9

3. This will give you an empty table. From your Desktop, open about.png in Fireworks. You will refer to this layout to build the inside pages.

4. Go back to Dreamweaver application. Select the first row of the table. Set the height to 100 pixels. This space will contain the logo.

5. Select the second row. Set the height to 27 pixels. This space will contain the navigation buttons.

6. Select the third row. Set the height to 41 pixels. This space will be used to display the page title.

7. Select the fourth row. Set the height to 10 pixels. 8. Select the fifth row. Set the height to 398 pixels. This space will contain the main

content such as images and text. 9. Select the sixth row. Set the height to be 10 pixels. 10. Select the last row. Set the height to 14 pixels. This space will be your footer. 11. Select column 1 and set the width to 415 pixels. 12. Select column 2 and set the width to 355 pixels. 13. Make sure that main table has a total width of 770px, and height of 600px. 14. Save the file by pressing CTRL + S.

100px

41px

14px

27px

10px

398px

10px


10

Using Cascading Style Sheets

Now that you have made the correct structure of your layout, the next step is set format and position of your web content using CSS. CSS stands for cascading style sheets. It is a collection of formatting rules that control the appearance of the content on a web page. Using CSS to format a page separates content from presentation. The content of your page resides in the HTML file, and the CSS defining the presentation of the code reside in another file, an external style sheet. This means that you can change the appearance and layout of all the pages just by editing a single file. Below is an example of a style:

A selector is normally the HTML element you want to format. Each declaration consists of a property and a value. Property refers to the style attribute you want to change and each property has a value. CSS declarations always end with a semicolon, and declaration groups are surrounded by curly brackets. To define a style:

1. Open the CSS Styles panel, and then click New CSS Rule.


11

2. In the Selector Type, select Class. 3. Enter a name. In this example, let us use photography_style. 4. In the Define In drop down list, choose New Style Sheet File and then click OK.

5. Enter a filename and then click Save. 6. In the Type category, define the font properties to be applied to the body text.


12

7. In the Background category, specify whether you want to use a background color or image. In this example, let us use a background image. Click Browse and locate bgimage.gif from the images folder on your desktop.

8. To keep the layout always at the center of the page, click the Box category. In the margin section, uncheck the Same for all option. Enter 0 for the top and bottom margins, while set left and margins to auto.

9. Click Apply and then click OK. If you do not see the changes, right click the <body> tag, choose Select Class> photography_style.

10. Follow the same steps above to define another style. This will be added to your existing style sheet file.

11. Refer to the design layout in Fireworks to help you define the other styles.


13

Adding Content

Inserting Images

The three graphic file formats generally used in web pages include GIF, JPEG, and PNG.

• GIF files use a maximum of 256 colors, and are best for displaying flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones.

• The JPEG file format is the superior format for photographic images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time.

• The PNG file format supports indexed-color, gray scale, and true-color images,

and transparency. PNG is also the native file format of Fireworks. It retains all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times.

To insert an image:

1. Click on the cell on where you want to insert the image. 2. There are two ways to insert an image:

a. From the Files panel, drag the image to the cell. b. From the Insert menu, select Image > browse the image file.

Select from the list and then drag to the cell


14

Adding Text

There are three ways to add text to a document. You can type the text directly in the Document window; use cut and paste command; or import text from other documents. When you paste text into a page, you can use either the Paste or Paste Special command. The Paste Special command lets you specify the format of pasted text in different ways. For example, if you wanted to paste text from a formatted Microsoft Word document into your Dreamweaver document, but wanted to strip out all of the formatting so that you could apply your own CSS style sheet to the pasted text, you could select the text in MS-Word, copy it to your Clipboard, and use the Paste Special command to select the option that lets you paste text only. When using the Paste command to paste text from other applications, you can set paste preferences as default options To add text to your document:

1. Type text directly into the Document window. To import text from another application:

1. Open the document in MS-Word. Select the text that you want to copy by pressing CTRL + C.

2. Switch to Dreamweaver, click on the cell where you want to paste the text. From the Edit menu, and select Paste Special or press CTRL + SHIFT + V.

3. Specify the paste formatting option that you want, and then click OK.


15

To insert special characters: Certain special characters are represented in HTML by a name or a number, referred to as an entity. HTML includes entity names for characters such as the copyright symbol (©), the ampersand (&), etc.

1. Place the insertion point where you want to insert a special character. 2. In the Text category of the Insert panel, click the Characters button and select

the character from the submenu.

Working with Sprys

Sprys are Java Scripts that allow you to create widgets such as accordions and menu bars to your page. The Spry framework is designed so that markup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.

Menu bar Widget

A menu bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons. Menu Bars let you display a large amount of navigational information in a compact space, and also give visitors to the site a sense of what is available on the site without having to browse it extensively.


16

You can insert two kinds of menu bar: vertical and horizontal. The example below shows a horizontal Menu Bar widget, with the third menu item expanded:

To insert a spry menu bar:

1. Using the Insert panel, select Spry, and then choose Spry Menu Bar. 2. Select either Horizontal or Vertical layout, then click OK. 3. Replace the existing text with the button labels that you want to appear. 4. Use the plus (+) or minus (-) buttons to add or delete a menu or submenu. 5. Use the arrow button to arrange the order of your menu or submenu. 6. Enter the link URL to each menu or submenu. 7. Type in a title to this link to create a tooltip. 8. Specify the target window:

• _blank: opens the linked page in a new browser window. • _self: loads the linked page in the same browser window. • _parent: loads the linked document in the immediate frameset parent of

the document. • _top: loads the linked page in the topmost window of a frameset.

9. Change the default look of the menu bar widget in the CSS Styles panel.

10. Save your work by clicking File> Save All.

Menu item has submenu

Submenu item has submenu


17

Managing Template

Creating Editable Region in your Template

Editable template regions control which areas of a template-based page a user can edit. To insert an editable region:

1. Place the insertion point where you want to insert an editable region. 2. From the Insert menu, select Template, and then choose Editable Region, or

press CTRL + ALT + V. 3. Enter a unique name for the region in the Name box, and then click OK. The

editable region is enclosed in a highlighted rectangular outline in the template. A tab at the upper-left corner of the region shows the name of the region.

To rename the editable region:

1. Click the tab in the upper-left corner of the editable region to select it. 2. In the Property inspector, enter a new name and then press Enter key.

To remove an editable region: 1. Click the tab in the upper-left corner of the editable region to select it. 2. From the Modify menu, select Templates, and then choose Remove Template

Markup. The region is no longer editable.

Editable

Editable


18

Creating a Page based on an Existing Template

1. From the File menu, select New. 2. In the New Document dialog box, select the Page from Template category. 3. In the Site column, select the Dreamweaver site that contains the template you

want use, and then select a template from the list on the right.

4. Click Create. This will give you a new page based on the template you chose. 5. Add the new content to the page. (Thumbnail, title, image, text) 6. Save the document by going to File> Save. 7. Provide a filename and then click Save. This will automatically be stored in the

root folder you specified when you defined the site. 8. Repeat the same steps to create other pages.


19

Previewing Pages in your Browser

You can preview a page in a browser at any time to test if all functions work including JavaScript behaviors, links, ActiveX® controls, etc. Remember to save the document before previewing a document; otherwise, the browser will not display your most recent changes. To preview a page:

1. Press F12 to display the current document in the primary browser. 2. Click links and test content in your page. 3. Close the page in the browser when you have finished testing.

Setting Browser Preferences

You can set preferences for the browser to use when previewing a site and define default primary and secondary browsers.

1. From the File menu, select Preview in Browser, and then choose Edit Browser List.

2. To add a browser, click the Plus (+) button, complete the Add Browser dialog box, and then click OK.

3. To delete a browser, select a browser from the list, and then click the Minus (-) button.

4. Specify the Primary and secondary browser, and then click OK.


20

Publishing the Website

Putting your website online

For the most part, the local site and the remote site are mirror-images of each other and contain the same HTML files, images and other assets in the same folder structure. When you publish a web page, Dreamweaver will ask you if you want to put the dependent files as well. D3pendent files refer to images, Flash movies, Javascript, CSS external stylesheets, server side includes and any other file that is necessary to complete the page. Dreamweaver automatically puts all your dependent files in the proper folders to match their locations on your local site. To put your site online:

1. Click the expand button in the Files panel.

2. Create a new folder in the remote server and name it as photography. 3. Select the folder in the local files that you want to upload and click up arrow button to

start transferring the file to your remote server.

4. Click the expand button again to return to the document window in Dreamweaver.


21

Testing your website

1. Open your browser (Firefox or Internet Explorer). 2. Type the website address provided by Bytehost in the Address bar, and then hit

Enter key. The first page you should see is the homepage you designed earlier. Click the link to will take you to the photography portfolio site.

Your web URL

Homepage

web development · 2017-12-22 · web development using dreamweaver cs4 by: charina ong centre for...

Documents