Dreamweaver MX

How to Place Slice in DreamweaverMX? Create a Slice in Photoshop File > Save For Web > Click on SAVE Create a New Folder and named it Give File Name > Click on IMAGES ONLY SAVE Quit Photoshop

Placing slice in Dreamweaver - Open Dreamweaver - File - New > Basic page > Html - Click on LAYOUT > Choose LAYOUT TABLE - Create a Table on the document area - Go to Properties Bar and take the size = 776 x 600 - Now For individual cell, click on DRAW LAYOUT CELL and INSERT>Images > Select the page> Click Insert - Likewise, place all the images Now our home page is ready - Place all the buttons - File > Save > File Name = Index (Always Index is must for the homepage) - Close the file - Go to the particular folder - Choose the file Index - Click on outside the folder - Paste the file > Press F2 for Rename the file name and type file name = About me and again place the file about me in the same folder - Again paste the file outside and named it Gallery and drag to the same folder - Again paste the file outside and named it contact me and drag to the same folder - Now Open the index file in Dreweaver and write the text for home page for example Introduction - Again open the page about me in Dreamweaver and type the text for about me

- Again open the page Gallery in Dreamweaver and insert the photographs for gallery - Again open the page contact me in Dreamweaver and type the text for contact me - Dont forget to save all the pages after typing the regarding text. How to link the document - Open the page INDEX - Click the button home - Go to Link on properties bar > Click Browse and choose the page INDEX > Click OK - Click the button about me - Go to Link on properties bar > Click Browse and choose the page about me > Click OK - Click the button gallery - Go to Link on properties bar > Click Browse and choose the page gallery.htm > Click OK - Click the button contact - Go to Link on properties bar > Click Browse and choose the page contact > Click OK - Now save the document - Now linking for the index page is finished Linking for the page About me - Open the page About me - Click the button home - Go to Link on properties bar > Click Browse and choose the page INDEX > Click OK - Click the button about me - Go to Link on properties bar > Click Browse and choose the page about me > Click OK - Click the button gallery - Go to Link on properties bar > Click Browse and choose the page gallery.htm > Click OK - Click the button contact - Go to Link on properties bar > Click Browse and choose the page contact > Click OK - Now save the document - Now linking for the About me page is finished

Linking for the page Gallery - Open the page Gallery - Click the button home - Go to Link on properties bar > Click Browse and choose the page INDEX > Click OK - Click the button about me - Go to Link on properties bar > Click Browse and choose the page about me > Click OK - Click the button gallery - Go to Link on properties bar > Click Browse and choose the page gallery.htm > Click OK - Click the button contact - Go to Link on properties bar > Click Browse and choose the page contact > Click OK - Now save the document - Now linking for the Gallery page is finished Linking for the page Contact me - Open the page About me - Click the button home - Go to Link on properties bar > Click Browse and choose the page INDEX > Click OK - Click the button about me - Go to Link on properties bar > Click Browse and choose the page about me > Click OK - Click the button gallery - Go to Link on properties bar > Click Browse and choose the page gallery.htm > Click OK - Click the button contact - Go to Link on properties bar > Click Browse and choose the page contact > Click OK - Now save the document - Now linking for the Contact me page is finished How to see the website in browser - Press F12 - And Check the link Using Frames

Frames are used to distribute the data in a web site. Each page's frame has its own HTML file. For example, in the image on the right you can see a page with three frames. i.e. top frame, left frames, and body (main frame)

Creating frames There are many ways of creating a frame. We will only learn one. File > New > Framesets > Choose the required frame

Saving Frames - Click on the top frame > Press Ctrl + S - Give file name : Top - Click on Left frame > Press Ctrl + S - Give file name: Left - Click on Main frame > - Press Ctrl+S - File name : Body - File > Save all > Give file name = index

Setting up Frames

After selecting a frame through the Frames panel, its properties can be established through the properties inspector. You can define Src, Borders, Border Color, Width, Scroll, Margin Width and Height etc using frame properties panel. Frame content _blank: Opens the file linked in a new browser window. _parent: Opens the linked file in the frame window that has the link or the set of main frames. As you know, the main frame is the frame where the initial file is and where the rest of the frames have been inserted. _self: Is the predetermined option. It opens the linked file in the same frame or window as the link. How to use Marquee behaviours - Click on Code - Place the cursor in front of any text which you want to use for behaviour - Type the code - <marquee behaviour =scroll> Nepal is a land of festival </marquee> - Go to Design - Press F12 Creating Pages - Create a introduction page with using file body - Type the text for introduction

- Save this file> Close the file> - Go to the folder on desktop - Copy the introduction page > Paste outside > rename it and make the different pages for about me, links and contact - Change the information accordingly opening the pages in dreamweaver Linking pages - Select the button home - Go to link on properties bar - Click on the folder > select the page introduction - OK - Choose Mainframe on target - Similarly link all the pages like about me, links, contact etc - Press F12 to see in the preview browser.

The Properties Toolbar It is easy to change the size and colour of the font as Dream weaver works almost like a word processor.To modify text, you will be using the properties toolbar, which looks like this: Window > Properties To Change the Font To change the font, hightlight the text and choose one of the options available on the Font pulldown menu on the properties toolbar. To Change the Font Size

To change the color of the text, highlight the text you want to change and click on the Font Size pulldown menu on the properties toolbar. The default size is 3. To Change the Font Color To change the size of the text, highlight the text you want to change and click and hold on the little arrow on Font Color button-box on the properties toolbar. To Change Properties of the Text To change the properties of the text (bold, italic, left justify, center, right justify), highlight the text you want to change and click on the appropriate properties button on the properties toolbar To Bullet or Number Text To bulle, number, or shift the text, highlight the text you want to change and click the appropriate button on the properties toolbar. Shifting text is similiar to indenting/tabbing the text.

- bullet 1 - bullet 2 - bullet 3

1. - number 1 2. - number 2 3. - number 3

Inserting Images Insert> Image > Choose the picture

Horizontal Rules Horizontal rules are used to divide information up in a mainly one-paged site. Use the button on the tool bar A horizontal rule looks like this: You can change the shape of the rule by double-clicking on it. The rule above was shaded and the one below is not. Creating CSS Styles Cascading Style Sheets (CSS) provides a flexible way to format text and allows designers to separate content from presentation. CSS also makes it easy to institute global changes -- you can change the appearance of 100s of pages by changing body color in the core stylesheet. - Go to Window - Choose CSS Styles - Click on New CSS styles of Design (+) - Type the name of the Design - Go to Design in choose NEW STYLE SHEET FILE or THIS DOCUMENT ONLY (CHOOSE ONE) - Choose Background color, Fonts, fonts color etc. - Click OK How to Use this CSS Stylesheets - Highlight the text - Go to Properties Bar

- Go to Style and Select the required style Formatting Table Create a Table with sufficient rows and tables Select the table Go to COMMANDS Choose FORMAT TABLE Select the required format OK

What is a form?
Forms allow you to collect information from users via the web. Forms can be used for surveys, information gathering, online quizzes, applications, etc. Results from forms at Wellesley can easily be sent to an email address or to a FirstClass conference that is set up to receive internet mail. Results can also be stored in a CSV file on the server, then downloaded and opened in a spreadsheet application. CSV files should be stored in a separate, local-only folder to prevent from appearing in search results. You can use Dreamweaver to create and add objects to your forms. At Wellesley your forms can include objects such as text fields, buttons, checkboxes, radio buttons, and list/menus as well as text, tables, and images

Creating a new form

1. From the Insert menu choose Form. A red border will appear.

This red border marks the boundaries of your form. All of your form objects MUST appear inside this border. You should have only ONE of these red borders on each webpage. As you add objects to your form, be sure that you are inserting them within the red border. 2. Next, set the properties for the form so it knows how to process the data it receives.

In the Action Field enter http://www.wellesley.edu/cgi-bin/wcform.pl

Verify that the Method is set to POST.

Adding an object to a form

Form objects include things like check boxes, buttons, and text fields that users can type into. For each object you add to a form you must complete two steps: you must first insert the object and then you must set the properties for that object in the Property Inspector. You must do BOTH steps for every object you insert.

There are two ways to insert form objects into your Dreamweaver document. 1. From the Insert menu choose Form Object and then select an object from the menu or 2. Click on the object you would like to insert on the Forms panel of the Insert window. To see the Forms panel of the Insert window, click on the small black arrow next to the panel title (this probably says Common). In the menu that appears, select Forms.

You can continue reading through this document, or you can click on a form object to jump to instructions on how to insert it.

Text Fields

An Example text field:

Text fields allow users to type text into the form. The entered text can be displayed as a single line or as multiple lines. You can type text in this text field to try it out. To insert a Text Field:

From the Insert menu choose Form Object and then Text Field (or click the button on the Forms panel of the Insert window)

To set the Text Field properties:

1. Click on the text field in your Dreamweaver document 2. In the Property Inspector find the TextField box and type a descriptive name for your text field. (By default this may already be called textfield, or textfield1, etc. but it is important that you give it a better name. In the above image, the text field has been named Comments.) If this is a required field, the name must begin with an underscore. For example, to make the above required, the name would be _Comments. Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-). 3. In the Char Width box, specify a width (number of characters) for your text field 4. Choose whether you would like your text field to be a Single line or a Multi line box. 5. If you choose to have a Single line box: In the Max Chars box, enter the maximum number or characters you would like users to be able to enter. If you leave this box empty, users will be able to enter an unlimited number of characters. 6. If you choose to have a Multi line box: o In the Num Lines box, specify a height (number of lines) for your text field o From the Wrap menu, select a wrap setting (Choosing Virtual will allow the text to wrap in the text box and also to wrap properly in an email or conference posting.)
o

Buttons

A button performs a task when clicked, such as submitting or resetting the form. You can label a button with any title. To insert a button:

From the Insert menu choose Form Object and then Button (or click the button on the Forms panel of the Insert window)

To set the button properties:

1. Click on the button in your Dreamweaver document 2. In the Property Inspector find the ButtonName box and type a descriptive name for your button. If this is a required field, the name must begin with an underscore. Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-). 3. In the Label box, specify a button label (the text that appears on the button) . The Label does not have to be the same as the ButtonName and can include spaces and punctuation if necessary. 4. Choose an action for your button. Usually you will choose either Submit form or Reset form.

Checkboxes
Choose as many as you like: red orange yellow green blue purple

Checkboxes allow users to select multiple items from a single group of options. To insert a checkbox:

From the Insert menu choose Form Object and then Checkbox (or click the button on the Forms panel of the Insert window)

To set the checkbox properties:

1. Click on the checkbox in your Dreamweaver document. 2. In the Property Inspector find the CheckBox box and type a descriptive name for your checkbox. Note: If you are inserting a group of checkboxes (like the example group above) all of the checkboxes in the group must have a DIFFERENT CheckBox name. For example, in the group of checkboxes above I could choose to name them Color, Color1, etc. Sometimes it makes sense for the name and the value of each checkbox to be the same. Note: If this is required, the name must begin with an underscore. For example, to make the above required, the name would be _Color. Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-). 3. In the Checked Value box, type in the value of the checkbox. This is the value that is set (and sent in the email/conference posting) when the checkbox is selected (checked). 4. Choose whether you would like the checkbox to be Checked or Unchecked by default.

Radio Buttons
Select one: one two three

Radio Buttons allow users to select only ONE item from a group of options To insert a radio button:

From the Insert menu choose Form Object and then Radio Button (or click the button on the Forms panel of the Insert window)

To set the radio button properties:

1. Click on the radio button in your Dreamweaver document. 2. In the Property Inspector find the RadioButton box and type a descriptive name for your radio button. Note: If you are inserting a group of radio buttons (like the example group above) ALL of the radio buttons in the group must have the same RadioButton name. Each group of radio buttons will need to have a distinct name. Note: If this is required, the name must begin with an underscore. For example, to make the above required, the name would be _Number. Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-). 3. In the Checked Value box, type in the value of the radio button. This is the value that is set (and sent in the email/conference posting) when the radio button is selected. 4. Choose whether you would like the radio button to be Checked or Unchecked by default.

Lists or Menus
Using the shift or control (apple) keys Select one state from the menu: select multiple towns from this list:

Lists and Menus present a set of values from which users can choose. A List will display a number of values in a scrolling list and will allow the user to select multiple items at once. A Menu displays all of the options when it is clicked on and will allow the user to select only one item. To insert a list or menu:

From the Insert menu choose Form Object and then List/Menu (or click the button on the Forms panel of the Insert window)

To set the radio button properties:

1. Click on the list or menu in your Dreamweaver document. 2. In the Property Inspector find the List/Menu box and type a descriptive name for your list or menu. If this is a required field, the name must begin with an underscore. For example, to make the above required, the name would be _States. Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-). 3. In the Type box, choose whether you would like to have a Menu or a List 4. If you choose List: o In the Height box, specify a height (number of items) for your list . This does not limit the number of items in the list. It only limits the number of items that are visible before the user begins to scroll. o Choose to allow multiple selections by checking the Selections - Allow Multiple box 5. Click the List Values... button. A List Values window will open.

6. To add an item to the list, click on the + button. 7. Click under Item Label and type the label that you would like to appear in the list. 8. Click under Value and type the value. Although they do in this example, the Label and the Value do not need to match. 9. To change the order of the items, select an item and use the arrow buttons to move the item up or down in the list. 10. To remove an item from the list, click on the button. 11. When your list is complete, click OK. 12. In the Property Inspector, choose the item you would like to display by default in the Initially Selected box.

Jump Menus

A jump menu is a pop-up menu of options each of which can link to documents , URLs, etc. Because this menu acts as more of a navigation tool, it is described with the other navigational menu options on the Beyond the Basics page. Click here to learn how to insert a Jump Menu.

Publishing Website There are some sites where we can publish our sites freely. One is www.150m.com - Connect Internet - Go to Address bar and type : www.150m.com - Click on Sign-up now - Type the address like: http://sugambaba.150m.com - Click on Sign-up now - Click on Free - Click on Continue with sign-up - Click No thanks.. - Fill up the form - When the site will be created, open the email which you have given before - Click there to activate your account with 150m.com - To activate click on login here - Open Dream weaver - Open your site which you want to publish - Site - Manage Site - Click on new > site - Name the site i.e. web - Choose Local root folder (means your folder with all the images and pages) like sss and select - Click on Remote info - Choose access = FTP

Click on FTP host and type your host name : like 150m.com Go to login and type : sugambaba.150m.com Type your password : ***** Click TEST After connection, OK OK DONE Click on Expand/Collapse Click on connects to remote host Click on Put Files OK Click on Disconnects.

Updating websites For updating we use some FTP host softwares like CuteFTP or WSFTP etc. Open the program Ipswitch WS-FTP Home Go to Address bar and type : pravin.150m.com Copy the same website name for user name: pravin.150m.com Type your password: ****** Click GO Now you can see the list of your pages Select the page which you want to update Right click on the page Copy

Paste on the desktop (outside the folder) After pasting, Right click and choose Edit with Dream weaver Make Necessary changes in Dream weaver File > Save To update this page, Select the file from the left side of the FTP Home After selecting the page, Click Right Arrow After sometime it will update to remote folder Like the same way you can update all the pages After finishing, click on Disconnect Close the software Go to address bar and type your URL (Universal Resource Locator) i.e. pravin.150m.com - Now you can see your pages with update information