Dreamweaver manual cs5 by itaph

Creating a Website using Dreamweaver An Introduction

Peter Hayton

Page 1

Contents Adobe Dreamweaver ...................................................................................................... 3 Workspace overview ...................................................................................................... 4 Creating a new site .......................................................................................................10 Defining a site in Dreamweaver CS3 .............................................................................. 11 Defining a site in Dreamweaver CS5 .............................................................................. 13 To prepare your site for uploading ................................................................................. 14 NE Holidays Exercise .....................................................................................................16 Creating a template ......................................................................................................16 Creating a page ............................................................................................................17 Saving a page ..............................................................................................................17 Typing text ..................................................................................................................19 Previewing your page ....................................................................................................20 Tables .........................................................................................................................21 Images .......................................................................................................................23 The home page ............................................................................................................24 Links ...........................................................................................................................25 Embedding Movies ........................................................................................................29 Behaviours ..................................................................................................................31 Cascading Style Sheets .................................................................................................33 Forms .........................................................................................................................36 Creating a Password-Protected Webpage .........................................................................41 Adding PayPal buttons / logos ........................................................................................44 How to Make Cool Text ..................................................................................................52 Adding a Google Map ....................................................................................................55 Checking your site ........................................................................................................56 Reports ........................................................................................................................56 Check links....................................................................................................................56 Uploading your site .......................................................................................................57 Exercise to create a new site for a carpet company ...........................................................58

Page 2

Adobe Dreamweaver Dreamweaver is a web design program for the creation, maintenance and management of a website. All the pages that make up a website are written in a language called HTML (HyperText Markup Language). Dreamweaver gives you a design view with many tools to layout and format the pages, whilst writing the HTML code. Beginners can easily access the tools needed for creating the website, whilst more experienced developers can work directly in code if they prefer. Dreamweaver helps speed up production and management of your websites. Topics you will cover using this booklet: 

The Dreamweaver Workspace



Setting up a website



Typing, Importing and Copying text



Formatting text and the page



Using Tables



Adding links – internal, external and anchors



Inserting Graphics – understanding graphic types, buttons and rollovers



Hyperlinks



Creating Templates

Before you begin Make sure that you have the files required for the tutorial within this booklet, they can be found in the folder:

ne holidays In your “my documents”. You need to create a folder in which you will store all your project files. To do this copy the ‘ne holidays’ folder into your “my documents” folder. All of the files you need are within this folder, and you should save any work you produce into it.

Page 3

Workspace overview The Dreamweaver interface is designed to let you create web pages without having to frequently use the menu bar to access commands. Document Toolbar

Panel Group

Insert Bar

Document Window

Property Inspector

Tag Selector 

The Insert bar contains various objects that can be inserted into a document. Each object is a HTML code with various attributes that can be applied. For example, clicking on the Image button in the Insert bar will let you insert an image and apply different image settings into the document.



The Document toolbar contains buttons that let you view the document in different views and buttons that contains common operations such as previewing the page in an Internet browser.



The Document window displays the contents of the document. It can be switched between three views: code, split, and design view using the buttons in the Document toolbar.



The Panel groups are sets of panels grouped together that can be expanded or collapsed.



The Files panel lets you browse and manage your file and folders on your computer or on a remote server.



The Property inspector lets you view and edit the properties for the select object or text. For example, when you click on an image in the Document window, the settings for the image will appear in the Property inspector to let you view or change the settings.



The tag selector shows the HTML tag the selected item is enclosed in and lets you select the contents of the tag by clicking on the tag in the tag selector.

Page 4

Insert bar The Insert bar holds buttons for creating and inserting objects into the document. The buttons are categorized using a tab system. Click on a category tab to view the set of buttons related to the tab.



The Common category contains buttons for creating and inserting commonly used objects such as tables and images.



The Layout category contains buttons related to the creation of the layout. You can insert div tags, Spry objects, tables, and frames.



The Forms category contains buttons for creating forms and elements.



The Data category contains buttons related to Spry data objects and various dynamic elements such as repeated regions, update forms, and record insertion.



The Spry category contains buttons for creating Spry pages and widgets.



The Text category contains buttons that let you insert and format text.



The Favorites category is for you to customize with your favorite or most frequently used buttons.

Document toolbar The document toolbar contains buttons that let you switch to three different view in your document window and contains buttons for viewing and transferring.



The Code, Split, and Design view buttons let you switch the view in the Document window.



The Document Title field lets you enter the title for your document. This title is displayed on the Internet browser's title bar.



The File Management button opens the File Management menu containing commands for setting the status of the document.



The Preview/Debug in browser button lets you preview your document in an Internet browser.



The Refresh Design View button refreshes the document window. This is useful when you made a change in the Code view and want to view the changes in the Split view mode.



The View options button contains visuals and information that you can turn on or off to help you when you're editing a document.



The Visual Aids button contains visual aids that can be turned on or off.



The Validate Markup button lets you check if the current document passes certain validations.



The Check Browser Compatibility lets you check if the CSS code is compatible with different Internet browsers.

Page 5

Document window The Document window is where you do most of the editing for the current document. You can toggle between three different view modes by clicking on the buttons in the Document toolbar.



The Code view button displays the code of the document.



The Split view displays the Code and Design view together.



The Design view displays the WYSIWYG (What you see is what you get) editor.

The Property Inspector

The Property Inspector at the bottom of the screen will display the properties of the object currently selected.

Editing To edit an object, make sure it’s selected and then change the relevant property e.g. to change some typing to Bold, select the text with the mouse and then press B on the Property Inspector toolbar Some of the options are explained below:

Format

This is useful for defining headings, there are 6 levels of heading, 1 being the largest and most important through to 6, the smallest and least important. The format of these headings can be altered using the Page Properties option of the Property Inspector. The use of these HTML headings is important for accessibility. A screen reader which can be used to read the content of a web page to a blind person, can be instructed to find and read all main headings i.e. Heading 1 or all main and sub headings i.e. Heading 2, the way in which we would scan a page looking at headings.

Page 6

Font

There are several font families listed but you can also select Edit font list and pick any of the fonts installed on your computer and add them to the list. The audience for your website may not have the font you choose installed on their computer and therefore the page may not display exactly the same. A font family is a selection of fonts in order of choice.

Size

There is a range of font sizes, fixed and relative. The fixed sizes are a number of pixels or points, which cannot be rescaled when the browser options are altered (not a good idea). A user with sight problems is shown that the text size can be altered in a browser, by holding down the Ctrl key and using the scroll button on the mouse to increase/decrease text size or by using the menu option View, Text size and selecting Largest or Larger. The relative sizes are small, large etc. or setting a number followed by a value of percentages or ems e.g. 100% 120% 1ems 1.2 ems These fonts can easily be made larger or smaller by the user. It is most important your visitors can read your site, occasionally at the expense of a perfect layout.

Colour

Use the colour palette by clicking on the palette icon and then using the dropper to select a colour. The initial palette Dreamweaver displays is the web safe palette, which is a selection of colours that will display the same on all monitors. Notice a hexadecimal value will be entered, this can be copied and pasted to ensure the same colours. To select further colours use colour selector for a larger range

Bold and Italics

These commands work in a similar way to Microsoft. There is no underline as this usually implies a link on web pages. If you select Bold and have a look at the HTML code you will see the tags <strong> and </strong> around the text. This can be altered in Edit, Preferences from the menu, to <b> and </b>. Similarly italics will use <em> and </em> this can be altered to <i> and </i>

Page 7

Alignment

Alignment will affect paragraphs. If you want a whole page to be aligned, select the page and then the alignment option. To undo an alignment option select the relevant button again.

Bullets and numbering

Creates either bulleted or numbered indented lists. When the list has been created there will be an Options button on the Property Inspector so you can change the type of numbering or bullet etc.

Page Properties

Any options selected in the Page Properties will only affect the current page i.e. you will have to set these for every page (there are other ways to do this using Style Sheets, covered on a later course).

It is useful to set the default font size and colour here (they can still be overridden by the other objects on the Property Inspector). Setting a background colour will affect the whole page, as will setting a background image. Background images will tile across and down the page. Under the Headings category you can specify how Headings 1 through 6 will be displayed.

Page 8

Page Title For every web page, you will create a Page Title that is descriptive of the page content and will contain the main keywords for the page (it can have uppercase letters and spaces), it will describe the page in the browser title bar and is also very important for search engines as they will use this when indexing your site. The page title can be entered via the Page Properties dialogue box or it can be entered in the document title bar.

HTML Code Dreamweaver writes the HyperText Markup Language for you as you type and select different options within Dreamweaver. Getting used to the HTML will help you use some more advanced features of web page design. Dreamweaver enables you to look at the code and edit it if you require. On the Document toolbar, there are three buttons that let you alter the view of Dreamweaver Code, Spilt (which shows you part of a screen of code and part of a screen of the equivalent design) and Design which is what we currently use. Select the Code button

The screen will display the HTML code that the browser will read to display the page (explained under previewing your page). HTML is a tagged language, with most tags being in pairs <html> this is the beginning of the tag </html> this is the end of the tag <title> beginning of the title tag </title> end of the title tag everything in between is the title <p> </p>

beginning of a paragraph end of a paragraph

line break has no end tag

Use the Design, Split and Code buttons to change your view of the page.

Page 9

Creating a new site A website needs to be planned to get a better understanding of your project. It is worth creating an outline or a flowchart to develop your ideas and thoughts about your website before you start creating it. Some points to consider: Who is the intended audience? It is vital to know the target audience for your site. This will help you decide what technologies they have e.g. Will they have the latest browser, plugins such as Flash, what operating systems, if the audience is children, bright colours may be more appropriate than if the site is for the elderly etc. Why is the site needed? What should visitors of your site come away with? Is it information, is it a purchase, should they contact you What content? Deciding what content is need for the site and then collecting that information is a major part of preparing your site. Gather together any text and graphics that will be needed for the site. Make sure your message is clear It is important your website communicates clearly to your visitors. Information should be clear, easily readable and in a language suitable for your audience (no geek speak or jargon if not appropriate). Structure of your site Think carefully about how to organise your site. The whole website will be contained within a folder. Images are usually organised in a subfolder called images. Use sub folders in the planning of your structure to keep your site manageable. The example below is a holiday site, which will have a home page (the main page of the site) with links to holidays in America, Australia, Beach holidays, Europe etc. There will be many pages for holidays in America e.g. Callifornia, Florida so these are organised into a subfolder, the same for Australia etc.

Page 10

Defining a site in Dreamweaver CS3 When using Dreamweaver it is important that you work within a site, as you will then be prompted to keep all files within the sites’ root folder. From the Opening screen, select Create New Dreamweaver Site (or from the Site menu shown below). NB. If you have an existing site, make sure you can see it in the files panel. You may have to select it from the files drop down list or create a new site on the computer and browse for your site folder. Dreamweaver will now take you through several dialogue boxes to define your site. Some of the questions are explained below: 

Name of your site: a description for use in Dreamweaver e.g. ne Holidays

If you have a domain for your site, enter it into this box



Do you want to work with a server technology (this is used when your site links to a database) for this introduction answer No

Page 11



How do you want to work etc. At this screen select Edit local copies, then use the yellow folder icon to browse to the folder that will contain all your website e.g. Holiday Site. If the folder doesn’t exist at his point you can create a new folder



How do you connect to the Remote server, this is where you would enter details of your web server: From the list of choices, select none, and click on Next.

You will then get a summary screen.

Click on “Done” to finish.

At the right hand side of the screen you will notice the files panel. This shows any folders and files on your site.

When you have obtained your domain and hosting, you will be given your ftp details. Instead of selecting “none” you can select “ftp”. This takes you to this screen where you can enter your ftp details. 

Enter the ftp details supplied by your host



Click on Save to accept

 

You will then get a summary screen. Click on “Done” to finish.

Page 12

Defining a site in Dreamweaver CS5 When using Dreamweaver it is important that you work within a site, as you will then be prompted to keep all files within the sites’ root folder. From the Opening screen, select Create New Dreamweaver Site (or from the Site menu shown below). NB. If you have an existing site, make sure you can see it in the files panel. You may have to select it from the files drop down list or create a new site on the computer and browse for your site folder. Dreamweaver will now take you through several dialogue boxes to define your site. Some of the questions are explained below:



Name of your site: a description for use in Dreamweaver e.g. ne Holidays



Locate the folder you have created for your site.



Select Save

When you return to your dreamweaver screen, you will see you will notice the files panel at the right hand side. This shows any folders and files on your site.

Page 13

To prepare your site for uploading 

Select “Site”

Then 

“Manage Sites”



Select the site, in this case “ne holidays”



Click “Edit”



Click on Servers

Then “Add New Server”

Page 14



Enter the ftp details supplied by your host



Click on Save to accept

Page 15

NE Holidays Exercise Templates When you design a template, you layout the consistent elements of your page e.g. the Company heading, a set of links then you specify which bits of the template are allowed to change, these are called Editable Regions e.g. page content, heading. Pages are then built using the template, then saved. This enables quick and consistent pages. The next exercise will use templates to build pages for the ne holidays site. If changes are made to the template, all pages built from the template will be updated. When Dreamweaver creates templates, they will be stored in a Templates folder that Dreamweaver creates and they will have a file extension of .dwt

Create a new page  

From the file menu, select New and from the dialogue box, Create Basic Html Page You will have a blank page onto which you can now enter text, images etc.

Creating a template  Either save an existing document as a template by selecting, File, Save as Template  Or from the Assets panel click on the New Templates button  Insert a table with 3 rows and 1 column  In the top row we will put the site header,eg logo, name, contacts etc  The second row will contain the navigation, ie menu bar  The third row will contain the editable region  The editable regions of a page will be the only areas that can be changed when pages are being built  Design your page layout including tables and empty cells for the editable regions Editable regions 

Highlight a cell to be editable and use the template button on the Common Insert bar, drop down and select the Editable Region button



Enter a name for the editable region (the region will appear with a blue box around, this does not show in the browser) Repeat this for each editable region you may need on the page (see below) Save the template

 

Page 16

Using the template to build pages    

From the menu bar select File, New and select the Template tab. The template you have just created should be listed, select the file and click Create A new document based on the template is opened. For this exercise you will create four pages for California, Florida, Bahamas, Hawaii Fill in the editable bits using text from the text folder and images from the images folder and save the file in the America folder

Amending a template       

Open the template from the files panel or from the assets panel Select each one of the links on the template and use Point to File or the browse button on the Property Inspector to link to the relevant file Save the template A dialogue box will prompt you to Update. All pages built using the template will be updated Save the pages Amend the template and change fonts and colours using Page Properties on the Property Inspector Save the amendments and Update all pages when prompted

Occasionally the pages built from the template may not be updated, if this happens, from the menu bar, select Modify, Template, Updates Pages. This makes Dreamweaver check you site and Update any Template pages necessary.

Creating a page 

Create a new page based on the template, 

click on File – New Page - page from Template



Choose the template you have created, and click on create.



and save in the root folder name it index.html, this will be used later as the homepage

Saving a page   

From the File Menu, select Save As Make sure the file is saved into the correct folder and give it the filename index.html. The file name will have a .htm or .html extension Use only lowercase characters with no spaces, in all file and folder names (this is because many web servers are case sensitive and do not allow spaces)

Check where the page is saved, it should be in the root folder of the site i.e. NE Holidays

Page 17

 Create a new page based on the template and save in the root folder name it

france.html

 Create a new page based on the template and save in the root folder as spain.html  Repeat for belgium and italy You will have created 5 new pages in the root folder.

Page 18

Typing text Text will automatically wrap round at the end of the line in the Dreamweaver window, however this may not be the same position when viewed in Internet Explorer or another browser(see later) If you hit the Return key, this will start a new paragraph and leave a blank line, Dreamweaver writes the HTML tag <p> To start a new line without the blank line i.e. for an address use Shift Return this creates a <br> tag There are many ways to bring text into Dreamweaver, rather then typing it again. Some of the ways are mentioned below.

Copy and Paste You can copy text from any source and then paste it into Dreamweaver. Sometimes the formatting of the original text may be lost and will need to be reformatted in Dreamweaver.

Import from a Word document If you have text already created in a word document this can be imported into a Dreamweaver page.    

Open the Dreamweaver page (or create a new one) Position the Insertion point From the File menu select Import, Word document then select the Word document. Dreamweaver will try and keep any formatting but it takes the word document through several filters to get rid of inconsistent code so appearance may change).

Drag and Drop a Word document   

Open a Dreamweaver page or create a new one. Make sure you can see the Word document in the Files panel Drag the Word document from the files panel onto the Dreamweaver page.

Open a HTML page created by Word When Microsoft Word creates a html pages, quite often there is a lot of redundant HTML code which can add to the size of the web page and also cause extra code for a browser to read, possibly resulting in the page taking longer to load. Dreamweaver had an option to clean up Word HTML will get rid of any redundant code.   

Within Microsoft Word you have an option to Save as a web page, this will save a page with an .htm extension Open this page in Dreamweaver From the Commands menu, select Clean Up Word HTML. This will get rid of any unnecessary code.



Drag the About France.doc on the “france” page’s editable region and save again



Drag the text for spain onto the “spain” page and save again



Repeat for belgium and italy

Page 19

Previewing your page Dreamweaver is not a browser like Internet Explorer, Firefox, Netscape, AOL etc. Some options will not display correctly in Dreamweaver, so it is very important that you constantly save pages and preview them in a browser. The job of a browser (Internet Explorer, Mozilla Firefox, Netscape, Opera, Aol etc these are all browsers) is to read the HTML code that has been written and display it as a web page. You don’t usually know what browsers your audience will be using. As web designers you have to be very aware of the different browsers, also different versions of browsers and the differences in appearance when a web page is viewed. Web browsers are generally free to download so it is worth trying at least a couple. To Preview your files in a browser    

 

Save your page Either o select File, Preview in browser and pick one (there may only be iexplore) from the list Or o Press the shortcut key e.g. F12 Or o Use the Preview/Debug in browser button on the Document toolbar

This opens a browser window Close the browser window when finished, every time you press F12 it will generate a new window.

Page 20

Tables Tables can be used in Dreamweaver for tabular data which is the example we are about to do, or tables can be used to layout pages, this gives much more control over the placement of items on a page.

Inserting a table From the Insert Bar select the Table icon The following dialogue box will be displayed

    

Enter the number of rows and columns for the table (this can be modified later and extra rows and columns can be inserted) The table can either by a fixed width specified in pixels (use this option if you do not want the table display to change) or a width in percentages relative to the size of the browser window (this will result in the size of the table increasing or decreasing depending on the browser window) The header information is for your row or column titles, this is displayed and most importantly this information is read by a Screen Reader for every item in the table A caption is a brief description of the table and is displayed in the browser Summary is a more detailed description of the table. This is not displayed in the browser window but is read by a Screen Reader

As you enter data in the table, the widths of columns may alter to accommodate the data. It is often easier to enter the data and then amend column widths later.

Page 21

Exercise Open the page called france.htm in the europe folder Add the following table specifying 4 columns and 8 rows and a width of 600 pixels

Modifying a table To modify any part of a table, select the relevant part i.e. cell, cells, row, column, table and use the Property Inspector to modify the selection Other options for modifying a table are available from the Modify menu and select Table Exercise   

Insert a new row above Saturday, to do this click anywhere on the Saturday row and Modify Table, Insert Row Select all the cells in the new row and then Modify, Table, Merge cells Enter the following text Weekend schedules must be checked with the airline

 

Use the Property Inspector to improve the appearance of the table Save and preview your page

Using Tables to Layout Pages Positioning objects on a web page is limited (left, centre or right align). Tables can be used to layout web pages with objects (text, images etc.) being placed in table cells, this offers a lot more flexibility with positioning. 

Select Layout from the Insert bar drop down category

       

Select the layout option This needs to be done at the start of a new document because the whole page is now a table. Use the button for draw layout cell Drag the position of the cell on the page, position any objects into the cell (text, images etc.) Cells can be resized by dragging the handles Continue positioning cells until you have the page layout required At any time you can switch to Standard layout mode Design a new home page using table layout

Page 22

Images There are only 2 types of images that can be reliably used on the web .jpg or .gif A paint program like Fireworks can be used to convert images to these formats and also reduce the physical size and quality of the image so it is suitable for the web i.e. a smaller file size.

Image icon To insert an image onto a Dreamweaver page use the image icon on the Insertbar

Modifying image properties Make sure the image is selected and use the Property Inspector

Alternate text For every image on a Dreamweaver page there must be some Alternate text (Alt in the Property inspector) this description will be read out by a screen reader for the benefit of people who have a visual impairment.

Align The Align option in the Property Inspector is for the alignment of text against an image e.g. left would align the image into the left side of a paragraph of text, right would align it to the right side of a paragraph. The other options available from Align will align one line of text to the image.

Border The value for border is a number of pixels e.g. the higher the number the thicker the border. A value of 0 is no border

Image editing tools

image editing tools There is a bank of 6 image tools on the property inspector when an image is selected, the first 2 require Adobe Fireworks to be installed.    

Crop which will allow you reduce the area of an image by cutting the outside edges Resample which will try and fill in missing bits of an image if it is resized Brightness and Contrast lets you adjust the brightness and contrast settings Sharpen increases the contrast of pixels around the edges of objects to increase the image’s definition or sharpness

Page 23

Image Rollover An image rollover is how one image will change to another when the mouse is rolled over

Hold down the black arrow at the side of the image icon until you see the Rollover image icon Fill in the dialogue box specifying the original image then the image it should change to when the mouse rolls over. You will need to save the file and then Preview in the browser (F12) to see the effect Exercises Using the files in the Europe folder add images to improve the appearance of the pages.

The home page The home page of a website will have a specific name, which will depend on the Web Server that will host the site. The name is usually : index.htm or index.html This is the page the web server will offer when someone types in your site address. Exercise Using the page created earlier, create a new page and save it at the root of the NE holidays folder (i.e. not inside any other folder), and call it index Using the skills you have learnt create an attractive home page with text and images

Page 24

Links Links are usually indicated on a website by underline (this is optional) and the appearance of the hand when the mouse is positioned over the link. There are many types of link:     

Links to other pages on this site Links to other sites Email links Named anchors (like bookmarks) Images as links

Using Page Properties on the Property Inspector you can change the colour of each type of link and specify whether the link is to be underlined or not.

Links to other pages   

Select the text that is to be a link Make sure you can see the files panel at the right hand side of the Dreamweaver window Use the point to file icon , hold it down and drag the pointer to rest on the file it should link to and let go

point to file icon

Page 25

Exercise         

Create a new page and save it in the europe folder as europe Type in the following text that will become links France | Italy | Spain | Belgium | Information | Home Select each country and use point to file to link to the relevant file Select Information and link it to europe_info.htm Select Home and link it to the index file at the root folder Save the europe page and test the links in the browser Copy the set of links to the other pages in the Europe folder (use copy and paste) On the Home page (index.htm) set up a bank of links at the bottom of the page

Europe | America | Countryside | Beach | Other holidays | Contact Us Europe links to europe.htm in the europe folder America links to america.htm in the america folder Countryside links to countryside.htm in the countryside folder Beach links to beach.htm in the beach folder The other links will be set up in the next exercise Save and test the file in the browser

Named Anchors Named anchors can be set at any point in a page and then a link on the page can point to the anchor eg. set a Named Anchor at the top of the page called top and then set a link further down the page to link back to top 

To set an anchor use the Anchor icon on the Common Insert bar



Give the anchor a name eg. top



Elsewhere on the page type a description for the link eg. Back to Top



Select the description and use point to file to point to the anchor eg . #top

Exercise   

Open the File called Europe_info Set anchors at the beginning of each paragraph Select the items at the top of the document and point to the relevant anchor

Page 26

External links Links to other websites cannot be pointed to but need to be typed into the link box

The address that is entered into the link box is the full URL e.g. http://www.thomascook.co.uk Exercise Select the text for Other holidays on the home page and type in the link for Thomas cook as above

Email links When an email link is selected the browser will open up an email client e.g. Outlook express, Outlook etc. so people visiting your website can easily send you an email 

Select the text to be the email link e.g. Contact Us



In the link box type mailto: followed by your email address e.g. mailto:anita@abc.com

This will work when your site is on the web server but may not work as you are testing it on the local machine Exercise  

Select Contact Us on the home page and set up an email link On the America page use the button images provided to create rollover images eg. california.gif rolls over to California_over.gif and link the rollover to the relevant page eg. California.htm

Page 27

Image Map An image map is an image that has been divided into regions, or "hotspots"; when a hotspot is clicked an action occurs, for example a new file opens. The image of Europe at the bottom is an example of an image map. All the links are in one image which are linked to different pages.

  

Select the image on which you would like to make multiple links. Click on the rectangular hotspot tool found in the Properties Inspector. Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot.

You can also choose the oval or polygon hotspot tool to make an oval or polygon selection.

  

In the Property inspector link to the relevant file Fill in the Alt text (for accessibility) When you preview the file in the Internet Explorer, as the mouse moves over the hotspot you will see the Alt text in a yellow box.

Create hotspots to link to the pages for France, Belgium and Italy

Page 28

Embedding Movies Flash movies are created by Adobe Flash. The published movie i.e. the file that ends with .swf can be inserted into your web pages 

Hold down the arrow at the side of the media button and select SWF



Browse for the Flash movie to insert (the file will end in .swf)



Using the property inspector you can make some changes



Save and Preview the Movie in the browser

Exercise  Open the Countryside document and insert the flash movie called animals1.swf  Save and Preview  Open the page called beach and insert the flash movie called seaside.swf  Save and Preview

Page 29

Steps to Embedding a Youtube Video onto Your Site 1. Get the Embed Code Go to the page where your video is displayed in YouTube, or whatever video sharing service you're using. With youtube click on “Share”, the select “Embed” .

The embed code that you will insert so that the video will appear on your web page looks something like the following: <iframe width="420" height="315" src="http://www.youtube.com/embed/Y6G0nfkeNH o" frameborder="0" allowfullscreen></iframe>

 

Select the code, and copy it to your clipboard. That is, after selecting the entire block of text in the "Embed" box, click "Edit" on the menu bar and select "Copy" on the menu that appears. Open Your Web Page in Dreamweaver Now start Dreamweaver, and load the web page where you want the video to appear, and click the spot on the page where the video should be placed. The blinking text cursor should appear in that location.



Insert the YouTube Embed Code in the Code Mode The simplest way to insert the YouTube code is to switch to Dreamweaver's "Code" mode, which allows you to see the actual HTML that is produced by the editor for your web page. To do this, click the "View" menu, and then select the "Code" menu item on the menu that appears. The screen should switch from the visual layout displayed by the "Design" mode to show you the "raw" HTML for your page. Since you have already positioned your cursor at the place you want the movie/video clip to appear, all you have to do at this point is to insert the code you copied earlier. To do this, click the "Edit" menu and select "Paste" from the menu that appears. Switch back to the "Design" mode by selecting "Design" from the "View" menu. Although you won't be able to view your video clip in Dreamweaver, a placeholder box should be visible on your page. If the position of the box is not satisfactory, for example, if the video is placed on the same line as an existing line of text, you can move that text away by simply hitting the ENTER positioning the cursor at the beginning of the text in question. Once you're satisfied, publish your page onto your site and test it by visiting the page with a web browser.

Page 30

Behaviours The behaviours panel in Dreamweaver ( Window, Behaviours) can be used to add interactivity to web pages. This produces some javascript code on your web page.

Adding a behaviour  

Select the object that requires the behaviour e.g. an image, a link, a tag Click the + button on the Behaviours panel

 

The options available will depend on what object is selected If the majority of options are greyed out, it is because you are trying to attach behaviour to an inappropriate object, or the option for Show Events For needs altering to a newer browser. Select the behaviour required (e.g. Popup message) and fill in the relevant dialogue box The event that triggers the action can also be modified, by clicking on the event e.g. onClick and selecting a different option from the list e.g. onMouseOver

 

Page 31

Removing a behaviour   

Select the object that has the behaviour In the Behaviours panel click the – button This will remove the behaviour and tidy up the html and javascript code

Exercises PopUp Message  

Select an Image Add a Pop up Message with more explanation about the image

Show and Hide Layers        

Using the Draw a layer icon on the Insert Bar, Layout Category Draw a layer give it an ID of info Inside the layer type some text Using the Draw a layer icon on the Insert Bar, Layout Category Draw a layer next to the info layer Give it an ID of more info Inside the layer, type more text Using the Property Inspector make this layer hidden

       

Click on the layer called info (the moreinfo layer will disappear because it is hidden) Make sure you can see the behaviours panel Click the + to add a behaviour to Show/Hide Layers Click the moreinfo layer and the show button, then OK Change the event to onMouseOver Test in the browser When the mouse moves over info, the moreinfo layer should show Add another behaviour to the info layer so onMouseOut the moreinfo layer hides

Page 32

Cascading Style Sheets There are two main ways to use Cascading Style Sheets (CSS) External – web pages link to the external style sheet Embedded – the styles are contained in the head of the document. Dreamweaver creates when you alter any of the fonts egg. style1, style2 etc.

This is what

Using External style sheets means it is very easy to attach the style sheet to many pages. When the style sheet is modified the pages attached to the style sheet will updated.

Creating an external style sheet 

To open the CSS Styles panel select Window, CSS Styles



To create a new style, click on the New CSS Style button on the bottom of the CSS panel



This will open a new CSS style box

Page 33



Class style – provide a name for the style and Dreamweaver will create a class selector, which can be applied to any tag egg. grey_box



Tag – this will provide a drop down list of all the HTML tags that can be changed egg. body



Advanced – this will allow you to select a pseudo class selector from the drop down options egg. a:hover



Define in – this option determines whether your style sheet is embedded or external (if a new external style sheet is to be created you will be prompted to name the file, this will have an extension of .css). An external style sheet might be called e.g. main_styles.css



When you create new styles they will be visible in the CSS panel.



One of the most common elements to alter on a style sheet is the body tag. You will see the CSS panel below and can change Font type, Background colour etc.



Click the Apply button to see the changes as you make them and the OK button when you have finished.

Page 34

Edit Styles  

In the CSS panel, click on the style you wish to change Use the Edit style sheet button on the CSS panel



This will bring up the Style sheet definition box (as before) and you can change any of the properties.

Attach the external style sheet The External style sheet can be attached to any pages and this will apply the same styles to those pages. It’s quick and it ensures you have consistent styles across your site. 

Open CSS styles Panel



Use the attach button at the bottom of the CSS panel and link to your external style sheet You may need to click on the + at the side of the style sheet name (in the CSS panel) to expand and see all the styles When you Edit or Add new styles (using the buttons at the bottom of the CSS panel) make sure the changes are in the Style Sheet file (not in this document only)

 

The .css file must be saved as you would save any of your other files

Page 35

Forms Creating HTML forms This section describes how to create HTML forms in Dreamweaver. You can also use Dreamweaver to create ASP.NET web forms. For more information, see Creating ASP.NET forms. To create an HTML form: 

Open a page and place the insertion point where you want the form to appear.



Select Insert > Form, or select the Forms category in the Insert bar and click the Form icon.

Dreamweaver inserts an empty form. With a page in Design view, forms are indicated by a dotted red outline. If you don’t see this outline, check that View > Visual Aids > Invisible Elements is selected. 

Specify the page or script that will process the form data. In the Document window, click the form outline to select the form. In the Property inspector (Window > Properties), type the path in the Property inspector’s Action text box. This will be the address of a form mail program or you may send data via email e.g. in the action box type the mailto protocol, followed by the email address of the person to receive the form data eg. mailto:student@hotmail.com

Specify the method to use to transmit the form data to the server. In the Property inspector, select one of the following options in the Method pop-up menu: POST embeds the form data in the HTTP request. GET appends it to the URL (suggest you will you POST as GET can be seen in address bar).

Page 36



Insert form objects. Place the insertion point where you want the form object to appear in the form, and then select the object in the Insert > Form menu, or in the Forms category of the Insert bar.

Insert form

Text Field

Radio group Check Box

List/Menu

Set the properties of the form object after inserting it in the page. For more information, select the form object and click the Help icon in the Property inspector. 

Adjust the layout of the form as desired. You can use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form (that is, you cannot overlap tags), but you can include more than one form in a page. When designing forms, remember to label the form fields with descriptive text to let users know what they’re responding to--for example, "Type your name" to request name information. Use tables to provide structure for form objects and field labels. When using tables in forms make sure all the table tags are included between the form tags.

Page 37

Writing using PHP Script: Feedback Form Script 1. Feedback Form Script Create a new blank page, not based on the template. Click on the code button and delete all the code that is displayed, leaving the page totally blank. Cut and paste the code below onto that page and save it as "feedback.php". If you attend the dreamweaver course this code will be available for you to download. Note that in the CONFIGURABLE SECTION below, the first 5 lines need to have your details entered ie email address and domain name. <?php /* IMPORTANT: If you see this notice in your web browser when you test your feedback form, it means that your web host does not have PHP set up correctly, even if they tell you they have. This is a PHP script, which means your web server must have PHP installed for it to work. You should *never* be able to see this notice in a browser on your website with a working PHP system, not even when you use "View, Source" in your browser. Script for feedback form */ // ------------- CONFIGURABLE SECTION -----------------------$mailto = 'your email address' ; $subject = "Feedback Form" ; $formurl = "http://www.your domain name/feedback.php" ; $thankyouurl = "http://www.your domain name /thankyou.html" ; $errorurl = "http://www.your domain name /error.html" ; $email_is_required = 1; $name_is_required = 1; $comments_is_required = 1; $uself = 0; $forcelf = 0; $use_envsender = 0; $use_sendmailfrom = 0; $smtp_server_win = '' ; $use_webmaster_email_for_from = 0; $use_utf8 = 1; $my_recaptcha_private_key = '' ; // -------------------- END OF CONFIGURABLE SECTION --------------define( 'MAX_LINE_LENGTH', 998 ); $headersep = $uself ? "\n" : "\r\n" ; $content_nl = $forcelf ? "\n" : (defined('PHP_EOL') ? PHP_EOL : "\n") ; $content_type = $use_utf8 ? 'Content-Type: text/plain; charset="utf-8"' : 'Content-Type: text/plain; charset="iso-8859-1"' ; if ($use_sendmailfrom) { ini_set( 'sendmail_from', $mailto ); } if (strlen($smtp_server_win)) { ini_set( 'SMTP', $smtp_server_win ); } $envsender = "-f$mailto" ;

Page 38

$fullname = isset($_POST['fullname']) ? $_POST['fullname'] : $_POST['name'] ; $email = $_POST['email'] ; $comments = $_POST['comments'] ; $http_referrer = getenv( "HTTP_REFERER" ); if (!isset($_POST['email'])) { header( "Location: $formurl" ); exit ; } if (($email_is_required && (empty($email) || !preg_match('/@/', $email))) || ($name_is_required && empty($fullname)) || ($comments_is_required && empty($comments))) { header( "Location: $errorurl" ); exit ; } if ( preg_match( "/[\r\n]/", $fullname ) || preg_match( "/[\r\n]/", $email ) ) { header( "Location: $errorurl" ); exit ; } if (strlen( $my_recaptcha_private_key )) { $resp = recaptcha_check_answer ( $my_recaptcha_private_key, $_SERVER['REMOTE_ADDR'], $_POST['recaptcha_challenge_field'], $_POST['recaptcha_response_field'] ); if (!$resp->is_valid) { header( "Location: $errorurl" ); exit ; } } if (empty($email)) { $email = $mailto ; } $fromemail = $use_webmaster_email_for_from ? $mailto : $email ; if (function_exists( 'get_magic_quotes_gpc' ) && get_magic_quotes_gpc()) { $comments = stripslashes( $comments ); } $messageproper = "This message was sent from:" . $content_nl . "$http_referrer" . $content_nl . "------------------------------------------------------------" . $content_nl . "Name of sender: $fullname" . $content_nl . "Email of sender: $email" . $content_nl . "------------------------- COMMENTS -------------------------" . $content_nl . $content_nl . wordwrap( $comments, MAX_LINE_LENGTH, $content_nl, true ) . $content_nl . $content_nl . "------------------------------------------------------------" . $content_nl ; $headers = "From: \"$fullname\" <$fromemail>" . $headersep . "Reply-To: \"$fullname\" <$email>" . $headersep . "X-Mailer: chfeedback.php 2.16.8" . $headersep . 'MIME-Version: 1.0' . $headersep . $content_type ; if ($use_envsender) { mail($mailto, $subject, $messageproper, $headers, $envsender ); } else { mail($mailto, $subject, $messageproper, $headers ); } header( "Location: $thankyouurl" ); exit ; ?>

Page 39

2. Contact Page - HTML Code Create a new page based on your template. You may have a paragraph of introductory text. Place your cursor where you want the form to be displayed, select the Code button and cut and paste the code below. Save that page as “contact.html” <form action="feedback.php" method="post"> <table border="0" cellpadding="8" cellspacing="8"> <tr><td><label for="tswname">Name</label>:</td><td><input type="text" name="fullname" id="tswname" size="25" /></td></tr> <tr><td><label for="tswemail">Email address</label>:</td><td><input type="text" id="tswemail" name="email" size="25" /></td></tr> <tr> <td colspan="2"> <label for="tswcomments">Comments</label><br /> <textarea rows="15" cols="45" name="comments" id="tswcomments"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="Send Feedback" /><br /> </td> </tr> </table> </form>

3. Thank-you and Error pages Create two pages based on your template. a) Thankyou page – Write a short paragraph where you can thank the user for making the comment etc. Save that page as “thankyou.html” b) Error page - Write a short paragraph where you say that they have made an error and should resubmit the page. Save that page as

“error.html”.

Page 40

Creating a Password-Protected Webpage Using password protection you can prevent people from viewing the content of a website. Security is a major issue in web development, and there are many different levels of protection you can give to the data on a website. If you have a page on your site that you don't want just anyone to be able to access, you can add a password protection function to it. Step 1 Create a generator page which creates an encrypted code for a username and password

Create a new blank html page in your website, it can be used by you as the editor but not to be made visible on your site. Save the page as â&#x20AC;?encryption generatorâ&#x20AC;?. Click on the code button and copy this code onto the page. <script> function calculate(){ passworda = document.password1.user1.value.toLowerCase() passwordb = document.password1.pass1.value.toLowerCase() var user = 1 var pass = 1 for(d=0;d<passwordb.length;d++) { pass*= passwordb.charCodeAt(d); } for(e=0;e< passworda.length; e++) { user *= passworda.charCodeAt(e); } document.password1.outputuser1.value = user; document.password1.outputpass1.value = pass; } </script> <p align="left"><strong>Directions: </strong></p> <p align="left"><strong>Step 1:</strong> First, generate the encrypted username/password set by typing the desired selections in the box below (ie: &quot;john&quot; and &quot;good&quot;) and press calculate (the generator is NOT case sensitive):</p> <form name="password1" id="password1"> <strong>Choose a UserName:</strong> <input name="user1" /> <br /> <strong>Choose a Password:</strong> <input name="pass1" /> <br /> <input onclick="calculate()" value="Calculate" type="button" /> <input value="Reset" type="reset" /> <p><strong>Encrypted Usercode: </strong> <input name="outputuser1" /> <br /> <strong>Encrypted Passcode: </strong> <input name="outputpass1" /> </p> </form>

Page 41

Choose a username and password for your page and enter them into the relevant boxes.

Encrypted code for the username and password is then generated. If you decide at any time that you want to change the username and password, simply change them by calculating a new code.

Step 2 Create a password entry form. This form can be placed in any page of your site or you may wish to create a new page for it. The code for this step produces a small username and password entry form.

To place it in a page, place the cursor where you want it to be located. Click on the code button and copy this code onto the page.

Page 42

<td><strong>Enter username:</strong></td> <td><input type="text" name="username2" size="15" /></td> </tr> <tr> <td><strong>Enter password:</strong></td> <td><input type="password" name="password2" size="15" /></td> </tr> <tr> <td>&nbsp;</td> <td><input type="button" value="Submit" onclick="submitentry()" /></td> </tr> </table> <p>&nbsp;</p> <p><br> </p> <p>&nbsp;</p> </form>

You will need to enter the encrypted code previously generated. To do this, locate the following lines of code //CHANGE THE NUMBERS BELOW TO REFLECT YOUR USERNAME/PASSWORD if(usercode==15108578688&&passcode==124082891469900) //CHANGE THE NUMBERS ABOVE TO REFLECT YOUR USERNAME/PASSWORD And change the codes to reflect the ones you have generated. To direct to the password protected page, locate this line of code window.location="destination page.html"} and change the wording â&#x20AC;?destination page.htmlâ&#x20AC;? to the page you want it to direct to. If you decide at any time that you want to change the username and password, or the destination page, simply change them in these lines of code.

If the user has entered the correct username and password, the content of your page should be displayed. Step 3 Upload your page to your web server and test it in your web browser. Try entering the incorrect username and password as well as the correct ones to verify that the content is only displayed when it should be. Test the reliability of your password protected page in different web browsers.

Page 43

Adding PayPal buttons / logos To add PayPal buttons or logos to your website, log in to your PayPal account at www.paypal.com/uk and then click on Merchant Services at the top of the page. If you would like to add a PayPal logo to your website: 1. 2. 3. 4.

Go to www.paypal.com/uk/logos Choose the type of logo you need. Accept the terms of the Logo Centre User Agreement. Copy the HTML code for your preferred logo and paste it into the HTML code for your website.

You can easily create or modify your PayPal buttons / logo settings. To create customised payment buttons for your website: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Log in to your PayPal account. Click Profile near the top of the page. Select My Selling Preferences. Under ‘Selling Online’, in the ‘PayPal Buttons’ section, click Update. In the ‘Related Items’ box on the right, click Create New Button. Select the category for the payments you will be accepting in the Accept payments for drop-down menu and fill in all required fields. Select Step 2 and Step 3 for additional features. Click Create Button. Click Select Code to select the button code. Copy the HTML code for your button and paste it into the HTML code for your website.

To edit a button: 1. 2. 3. 4. 5. 6. 7. 8.

Log in to your PayPal account. Click Profile near the top of the page. Select My Selling Preferences. Under ‘Selling Online’, in the ‘PayPal Buttons’ section, click Update. From the ‘Action’ menu next to the button you want to edit, select Edit button. Enter your edits, and then click Re-create Button. Click Select Code to select the button code. Copy the HTML code for your button and paste it into the HTML code for your website.

Page 44

What type of buttons does Paypal have Using PayPal Payments Standard and HTML coding, you can integrate PayPal with your website or ecommerce application. With PayPal Payments Standard, you add buttons for different kinds of payments to your webpages. Shoppers click the payment buttons to pay for their purchases. Payment Buttons PayPal Payments Standard lets you add these kinds of HTML payment buttons to your website.

How do I create a button? To create a button quickly and easily, just complete step 1 in the Button Factory as follows: 1. Go to the Button Factory 2. Under Step 1, select the type of button you want to create in the drop-down menu. 3. Enter the item name, price and currency type of the item which you are creating the button for. 4. The 'Customise button' box offers various display options. For example if you offer different prices depending on the size of a product, or have open or fixed amounts for donations, you can include a dropdown box next to your button (in this case, leave the price field blank in the previous step). 5. Once you've finished setting up your basic requirements, simply click the 'Create Button' link at the bottom of the page. You will be taken to a new page that gives you the HTML code for the button, which you can copy and paste onto your website. To email the button to someone, click the Email tab and copy and paste the given link. You can then email that link and the recipient can click on it to make a payment.

Page 45

How do I copy and paste a button using Dreamweaver? When you have created your button in the Button Factory, the HTML code will be automatically generated for you. Click 'Select Code' to highlight the code, then copy it with the key combination ‘Ctrl’ and ’C’ on your PC keyboard. Step 1 Open the webpage on which you want to display the payment button. Step 2 Click within the page to place the insertion point where you want your payment button to appear.

Step 3 At the top of the window, click the Split button to display the code for your webpage. The window displays the HTML code in the top pane and the Design view in the bottom pane.

Page 46

Step 4 In the Code pane, place the insertion point where you want the button code to appear. In the example, the insertion point is between two elements, corresponding to the location of your cursor in the Design view. Step 5 Press Ctrl+V to paste the HTML code that you copied from PayPal. The Design pane shows the button image. Step 6 To see how the button you pasted will look when it is displayed on your website: - Save your page. If you do not save your page now, Dreamweaver prompts you to save it before you can preview the page. - At the top of the window, click the Preview icon.

The default browser opens and displays your webpage. Step 7 Upload the finished page to your website.

How can I test my buttons? Your web page does not need to be live to test the button. It can be tested from a saved location on your local hard drive. However, you do need to be logged in to the PayPal Sandbox. The PayPal Sandbox is a testing environment that is a duplicate of the live PayPal site, except that no real money is exchanged. The Sandbox allows you to test your entire integration before submitting transactions to the live PayPal environment. 1. Log in to https://developer.paypal.com, click the Test Accounts tab, select the desired test account, and click 'Enter Sandbox Test Site'. 2. Open the HTML file containing the button. 3. Click the button you want to test. 4. Log in using your test buyer account. 5. Follow the on-screen instructions to complete your test payment.

Page 47

PayPal's Custom Payment Pages: An Overview With the Custom Payment Pages feature, you can tailor PayPal's payment pages to the style of your website and give customers a seamless payment experience. Choose custom page colours and add images to make PayPal's payment flow yours. To learn more about creating and applying customised page styles, explore the links below. Availability Custom Payment Pages can be used with all PayPal Website Payment pages, including those for Buy Now Buttons, Donations, Shopping Cart, and Subscriptions. The page style you select will apply to every page in the payment flow, including account creation for new PayPal users. The ability to create Custom Payment Pages is available exclusively to Premier and Business Account holders. Examples When you create a page style for your Custom Payment Pages, you can add special page colours and an image of your own. You'll see the difference these customisations can make in the examples below. Figure 1: A payment page in the regular, PayPal page style.

Figure 2: The same payment page with a Custom Payment Page Style applied. This page style includes a custom header image and header border colour.

Page 48

Figure 3: The same payment page with a different Custom Payment Page Style applied. This page style includes a custom header image, header border colour and background colour.

Getting Started To start using Custom Payment Pages, go to the Custom Payment Page Styles page: 1. To update your Custom Payment Pages, go to My selling tools in your Profile. You can add, edit, preview, and remove page styles, as well as make any style your primary page style. Adding a Page Style You may add up to three page styles. To add a page style: 1. Begin at the Custom Payment Page Styles page (see 'Getting Started' above) 2. Click Add 3. Enter your page style preferences: Page Style Name (required)Enter a name up to 30 characters in length. The name can contain letters, numbers and the underscore mark - but no other symbols or spaces. The Page Style Name will be used to refer to the page style within your PayPal account and in the HTML code for your PayPal Website Payment buttons. Header Image URL (optional) Enter the URL for an image that is a maximum size of 750 pixels wide by 90 pixels high; larger images will be cut to this size. The image must be in a valid graphics format such as .gif, .jpg, .png, and .swf. The image will appear at the top left of the payment page. PayPal recommend that you enter an image URL only if the image is stored on a secure (https) server. Otherwise, your customer's web browser will display a message that the payment page contains nonsecure items. Header Background Colour (optional) Enter the background colour for the header using HTML hex code. The colour code must be six digits long and should not contain the # symbol. If the Header Image URL is present, then the header will be a 750 pixel wide by 90 pixel high space at the top of the payment page. If the Header Image URL is not present, the header height will be reduced to 45 pixels.

Page 49

Header Border Colour (optional) Enter the border colour for the header using HTML hex code. The colour code must be six digits long and should not contain the # symbol. The header border is a 2 pixel perimeter around the header space. Background Colour (optional) Enter the background colour for the payment page using HTML hex code. The colour code must be six digits long and should not contain the # symbol. 4. Click Preview to preview your page style, or click Save to save it When you next create a button, you will have the option to apply a page style to the payment pages associated with it. To do so, click Add More Options on the button creation page, and select a page style from the Custom Payment Page Style menu. Editing a Page Style 1. 2. 3. 4.

Begin at the Custom Payment Page Styles page (see 'Getting Started' above) Click the radio button next to the page style you wish to edit Click Edit Keep or modify your page style preferences: Page Style Name (required)Enter a name up to 30 characters in length. The name can contain letters, numbers and the underscore mark - but no other symbols or spaces. The Page Style Name will be used to refer to the page style within your PayPal account and in the HTML code for your PayPal Website Payment buttons. Header Image URL (optional)Enter the URL for an image that is a maximum size of 750 pixels wide by 90 pixels high; larger images will be cut to this size. The image must be in a valid graphics format such as .gif, .jpg, .png, and .swf. The image will appear at the top left of the payment page. PayPal recommend that you enter an image URL only if the image is stored on a secure (https) server. Otherwise, your customer's web browser will display a message that the payment page contains nonsecure items. Header Background Colour (optional)Enter the background colour for the header using HTML hex code. The colour code must be six digits long and should not contain the # symbol. The header is a 750 pixel wide by 90 pixel high space at the top of the payment page. Header Border Colour (optional)Enter the border colour for the header using HTML hex code. The colour code must be six digits long and should not contain the # symbol. The header border is a 2 pixel perimeter around the header space. Background Colour (optional)Enter the background colour for the payment page using HTML hex code. The colour code must be six digits long and should not contain the # symbol.

5. Click Preview to preview your page style, or click Save to save it Previewing a Page Style 1. Begin at the Custom Payment Page Styles page (see 'Getting Started' above) 2. Click the radio button next to the page style you wish to preview 3. Click Preview You also can preview a page style when adding or editing it, by clicking Preview.

Page 50

Making a Page Style Primary When you make a page style Primary, it will be applied to all of your payment pages unless you specify otherwise. To learn how to apply a page style other than your Primary style, see 'Overriding Page Style Settings' below. 1. 2. 3. 4.

Begin at the Custom Payment Page Styles page (see 'Getting Started' above) Click the radio button next to the page style you wish to make your Primary style Click Make Primary Click Make Primary to confirm your choice

Removing a Page Style When you remove a page style, the payments pages to which the style applied will no longer be customised with those specifications. Instead, your Primary page style will be applied to those pages. If you remove your Primary page style, the PayPal page style will become Primary. 1. 2. 3. 4.

Begin at the Custom Payment Page Styles page (see 'Getting Started' above) Click the radio button next to the page style you wish to remove Click Remove Click Remove to confirm your choice

Overriding Page Style Settings Your Primary page style will automatically be applied to all your payment pages unless you specify otherwise. To apply a different page style, select the one you want when creating your Buy Now button, Donate button, PayPal Shopping Cart button or PayPal Website Payments button. Just click Add More Options on the button creation page, and choose a page style from the Custom Payment Page Style menu. To change the page style for a button you have already created, you can modify the button's HTML code. Replace the value of the 'page_style' variable with the Page Style Name of the style you wish to apply. The next time the button is clicked, its payment pages will appear in the new style. Specifying the 'cs' and 'image' variables in the button code will also override your Primary page style.

Page 51

How to Make Cool Text

"Cool Text" is the trade name of a web-based graphics generator that can be used to create logos, buttons or other graphics that involve text. The service is free to use at the cooltext.com website. Making text that is cool in general is subjective but can be done with any graphics application that has special-effects filters. How "cool" your text is depends simply on the level of design and creativity you put into it. o

Navigate with your web browser to the CoolText.com website.

Choose a logo style or button-design style from the home page.

Creating a Logo 



Enter the text for your logo, then choose the font, font size and other style attributes from the choices on the web page. All directions are clear and easy to follow. Choose a File Format for your logo or button from the File Format drop-down menu at the bottom of the web page. PNG is the default choice. Other choices include GIF, JPG, PSD and XCF, with some background transparency options as well. Click the "Render Logo" button to create your Cool Text graphic file. A progress screen will show how many jobs are ahead of yours. The process moves quickly.



Click the "Download Image" link



Click on the Save button, and save it into the images folder of your website.



The image can then be inserted into your website, using the standard graphic insertion techniques.

Page 52

Creating a Button 



Enter the text for your button, then choose the font, font size and other style attributes from the choices on the web page. All directions are clear and easy to follow. Click the "Render Logo" button to create your Cool Text graphic file. A progress screen will show how many jobs are ahead of yours. The process moves quickly.

If you choose to create a flat button ie with no effects, then the button can be saved in the “images” folder, and placed in the navigation bar as an image. Interactive buttons are different in that 2 images are produced, a “flat” button and a “mouse over” button. You can select an effect which will be seen when the mouse is placed over the button.

If you selected some effects from the “Other” box, you will be presented with this screen. You have two images to download 1. The flat button 2. The effect button Plus a piece of HTML code, which needs to be copied.

The buttons need to be saved into the folder(s) where pages they are to be seen on are located. Eg If you have created a template, then the buttons need to be saved into the template folder

and also the folder in which the page to be viewed is in.

Page 53

In dreamweaver place the cursor where you want the button to be placed.

Select the code tab

And paste the generated cooltext html code where the cursor is on the code page

Select the design tab, and you will see the button in position, repeat for the remaining buttons.

If you are tempted to rename the button, then you MUST rename the button text in the HTML code,

Page 54

Adding a Google Map

Search for a location on maps.google.com

Specify the map type you want Select a view type in the top right corner of the map. Click "More" drop-down menu for more map type options.

Adjust map to desired center and zoom level

Click on

"Link"

Copy and paste to an HTML Page to display map

You are done!

The Map appears right where you placed the HTML

Page 55

Checking your site Once the site is finished it is very important that you check it thoroughly before uploading to the web server. Below is a checklist of important points:    

Correct spelling and content All images must have Alternate text (set in the Property Inspector), accessibility is an important factor for your websites Each page should have a Title (in Page Properties) All links should work

Reports Dreamweaver can run reports to check that you have titled all your pages (important for accessibility, search engines and bookmarks), that you have provided Alt text (alternate text for images that people with visual impairments, may not see), broken links etc. In a Dreamweaver page: From the menu bar Site, Reports Drop down the Report on options, you may change this to check the Entire Site

Check the relevant box(es) e.g. Missing Alt text, and click the Run button You will see a report at the bottom of the screen

Double click on a file with a warning and Dreamweaver will take you to the file and the object with the error

Check links From the Site menu Select Check links sitewide It will show you broken links, orphaned files and external links (which it cannot check).

Page 56

Uploading your site You should have purchased a domain name and hosting package. The hosting provider will have given you a username and password



Open Dreamweaver



Load the Index page of your site



Click on the connect button.



Make sure “Local veiw is selected.



To upload your files click on the blue upload arrow



All the files will be uploaded to your server and you will be able to veiw them on the internet.



To download the files from your server, change the veiw from “Local” to “Remote”, and select the green download arrow.

Page 57

Exercise to create a new site for a carpet company Sketching out a structure before creating a site can save you lots of work later. Once your site's goal is defined, you'll probably be eager to start designing your site, right? Not so fast. I recommend sketching out the structure of your site beforehand, as shown here. Use a pencil and paper to draw boxes for pages and arrows for links. Remember to keep your goal in mind as you do this. This is essentially the process of creating a visual outline. And it will save you a lot of time to do this on paper before your site is constructed. Just think: It's easier to erase a few boxes and start over than it is to delete and rebuild pages in an already-built Web site.

After you've sketched a map of your site, it's time to start sketching a common layout for each of your pages. You could start designing the page layout using dreamweaver, but I recommend keeping it on paper at this point. Pencil and paper can be easier to change, as I noted before, but it's also handy to compare different layout sketches side by side. Some of the things you will want to consider as you are sketching the layout are: Should your site have a header and footer that's common to each page? Should your site have a consistent method of navigation on each page? Do you have any marketing requirements that must be fulfilled? For example, should you stick to certain fonts and color schemes? Does your site need any legal requirements, like a copyright notice?

Page 58

A suggested site map is as follows:-

Home Page

 Title & logo  Contact details  Picture of fully fitted carpets  Link to the “Carpet Foundation” – www.comebacktoc arpet.com