Get the web design facts : search engine market share for europe
Below are the web design services which we can offer potential clients
Web Design Ireland
Website Design tools & tips compliments of top samples :
How To Insert A form into Your Contact Us Page
article 7/7
Open up Dreamweaver and click on the contact us page ( contactus.html ) that we created in a previous lesson which should be in your files on the very right hand side of your Dreamweaver workstation.On the second menu down from the top of your workstation you will see | Common | Layout | Forms | Data | Spry | Text | Favorite |
Click on forms and this opens up a sub-menu directly beneath with a multitude of icons.To view what these icons stand for just pass your mouse over them and it should read something like the following : form text field,hidden field,text area,checkbox,radio button,radio group,list/menu,image field,file field,button and so on.Then follow the following steps :
1. Click on the icon form in this sub menu ( This icon should be the first icon in this sub menu going from left to right ) This will insert a thin red dotted rectangle across your page.This represents the framework of your contact us form.- - - - - - - - - - - - - - - - - - - - - - ---- -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - -- - - -- - - - - - - - - -- - -- - - -- - - -- ---- - - - - - - - - - - - - - - - - - - - - - - -----------------------------
2. Return again to the second menu down from the top of your workstation | Common | Layout | Forms | Data | Spry | Text | Favorites | and click on common.
This opens up a new sub menu with a list of various icons ( these icons are specific to that particular item within the menu, eg common has specific icons,layout has specific icons,forms has specific icons and so on ),and to view what these icons stand for just pass your mouse over them.It should read like the following :Hyperlink,Email link,Named Anchor,Table,Insert div tag,Images,Media : plugins and so on.
3. Make sure at this point that you have your cursor positioned within the red dotted rectangle and on the very left hand side of this red dotted rectangle,and click on the icon table within the common icons list.
4. This will open up a properties box which you have to fill out.The first item to fill out is number of rows and columns--make it 6 rows and 2 columns.The second item to fill out is table width--make it 90 percent ie 90 and choose percent not pikels,and click OK.
You will notice now that a table has been inserted into your red dotted rectangular form.In order to see your table when you access the virtual internet icon ( the small blue globe ) you must give your table a colour.This can be done by just clicking on any line within the table until your cursor turns into a small cross,because when this happens it will display the properties of the table below within the properties inspector box.In this box you will see bg colour,and just choose any colour that you like ( except white ),and it will insert the required colour into the table.
5. In order to align the table within the very middle of your red dotted rectangular form all you have to do is to click on any line within the table until your cursor turns into a small cross and right click your mouse.This will open up a list menu.Scroll down to the word align,sub-menu opens up-and click on center.This puts your table in the center of your form ( red dotted rectangular form )
6. There are two rows in your table.Click on the line in the center of your table and drag it across to the left until it is about a quarter of your table : see table below at step 9.
7. In the first row of your table on the extreme left hand side type in the word name.In the second row of your table again on the extreme left hand side type in the word address.In the third row (again on the left side) type in the word email,and on the 4th row type in the word query : see table below at step 9.
8. Return again to the second menu down from the top on your Dreamweaver workstation : | Common | Layout | Forms | Data | Spry | Text | Favorites | and click on forms.This opens up the sub-menu icons list : form,text field,hidden field,text area,checkbox,radio button,radio group,list/menu,image field,file field,button and so on.
Make sure that your cursor is flashing on the extreme left hand side of the first row but in the 2nd column ( as near as you can get to the word name but on the other side of the column line ),and click on the icon text field within this sub-menu.A properties box will open up but just ignore it and click OK.You will notice now that a text box has been inserted into your table : see table below at step 9.
9. Click within side this text box,and look down at the very end of your Dreamweaver workstation where the properties inspector is located.This box contains all the information about this specific textfield and it can be changed.Where you see textfield typed in ( on the very left hand side of the properties inspector ),erase it and type in name.Char width will be blank so just type in the number 30.Type will be single line so just make sure that the single line box is checked : see below
name |
|
address |
|
email |
|
query |
10. Make sure now that your cursor is located in the same row as the word address but in the 2nd column,and repeat the process ie click on text field--ignore property box questions but just click OK--the textfield will be inserted.However,click within the newly inserted textfield box to edit its properties down in the properties inspector box at the end of your workstation.Where you see textfield typed in replace it with the word address.Where you see type : single line or multi line,make sure the multi line box is ticked.When you tick the multi line box you will see Char width and a new field called num lines open up.Put the number 2 in this box and this will make the textfield expand to two lines,and just put the number 30 into the Char width box .
11. Repeat the process for email but when you click within the inserted textfield just erase the word textfield within the properties inspector box and type in email.
12. The same rules apply for query.Replace the word textfield in the properties inspector box with the word query and also make it a multi line and add as many lines as you want,and as many Char width characters as you like.( Char width is just the number of characters that you are going to allow people to type into your textfield ).
13. Finally we have to insert a submit button,and in order to do this place your cursor within the last row of your table,and on the extreme left hand side of the second column.
14. Return again to the second menu down from the top on your Dreamweaver workstation : | Common | Layout | Forms | Data | Spry | Text | Favorites | and click on forms.The sub menu opens up and navigate to the icon called button : form,text field,hidden field,text area,checkbox,radio button,radio group,list/menu,image field,file field,Button and so on.Make sure that you choose just Button and not radio button from this icon menu,and click on it.A properties box will open up but just click OK ( nothing else ),and this will insert the button where your cursor was flashing : see below
name |
|
address |
|
email |
|
query |
|
15. Finally when the submit button is inserted just click on it to open up its properties within the properties inspector box below and erase the word button and type in submit.
signing out for now top samples, web design ireland.
| previous article |