N0t3.weebly.com



PRACTICAL-1

1.Understand website basics and overall website development, usability and Accessibility features.

1.1 Overview of Web Design Concepts:

Relationship between Web technology and design conceptsThe difference between tools and technology

Tools for Web Site Design include, but are not limited to:

* WYSIWYG editors

* HTML editing tools

* Graphics applications

Technology for Web Site Design include, but are not limited to:

* Manual HTML Coding

* JavaScript and other scripting languages

A combination of manual coding and WYSIWYG functionality is the best option from today's development

perspective.

New Technologies

Some of the newest Technologies for Web Design and Development include:

* DHTML

* CSS

* XML

* XHTML

2. Web Development Teams:

The core skill sets needed in a web site development team are:

• Strategy and planning

• Project management

• Information architecture and user interface design

• Graphic design for the web

• Web technology

• Site production

3. Web Project Management Fundamentals:

Program

This course covers the fundamentals of project management for web projects: what it is, why projects go wrong, and what's different about web projects. You will be given an overview of different project management methods (traditional/waterfall, agile and incremental delivery) and be shown how to manage each.

4. Web Site Development Process

[pic]

Learn

It shouldn’t surprise you that learning — discovering and understanding what you need to build in the first place — is the most important part of the entire website design process.

Plan

Once you’ve learned what you need to build, it’s time to start planning how you are going to make it happen. Before you can start designing a website, you need to know exactly what, and how, to design it in the first place — and it all starts with creating a design strategy.

Design

If you’ve already done the legwork of learning and planning, it makes the actual designing much easier. When you don’t have to worry about the little details, it really opens up a whole new level of effectiveness and productivity because you can focus on more important things.

Code

Once you have a killer design, you’ll need to turn it into a real, live website. A safe bet, no matter what content management system you are going to be working with, is to start with a generic HTML and CSS template.

Launch

When you’ve finally perfected the site, it’s time to release it to the public. Launching can mean different things to different people, mostly because there are various content management systems and development circumstances out there.

Maintain

During your planning phase, you should have determined who will be in charge of site maintenance. If a client is unable to maintain the site, you may want to suggest that they hire you on a regular or as-needed basis to manage and perform maintenance tasks.

1.5 Web Page Layout and Elements:

Color

Color is an important element in Web page development. A poor choice of color may ruin the whole Web page's design. The text color must contrast well with the background color. Never put light-colored text on a light background or put dark-colored text on a dark background. Otherwise, the user would not be able to read the text.

Text

There are several attributes that we can be added to text: bold, italic, underline, and blink. Among the four, bold is the most commonly used in that it puts emphasis on the text and therefore, makes the text stand out. Sometimes, blink is also used to make the text stand out

Style

Page Size

Pages with lots of text should always be designed to print properly. If the page is too wide several words of text from each line along the right margin of the page maybe lost when printing. Table 1 shows the maximum width and height for a page layout (Siegel, 1997).

Dimensions of a Page

|Dimensions |Print Well |Screen Usage |

|Maximum Width |535 pixels |595 pixels |

|Maximum Height (one screen) |295 pixels |295 pixels |

Table 1. Relationships between the size of a printable page and actual display page

Graphics

GIF vs. JPEG

|Functionality |GIF files |JPEG files |

|Color bits |8 bits (256 colors) |24 bits |

|Transparent color |Yes |No |

|Animation |Yes |No |

|Interlacing |Yes |Yes |

|Compression |No |Yes |

Table 2. Functionality of GIF files and JPEG files

1.6 Web Site Usability and Accessibility

Usability: International Standards Organization’s standard ISO9241, which defines usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments”

Accessibility: “people with disabilities can perceive, understand, navigate, and interact with the web, and they can contribute to the web”.

1.7 Browsers:

Browser, short for web browser, is a software application used to enable computers users to locate and access web pages

Here are some familiar common web browsers:

• Mozilla FireFox

• Netscape Navigator

• Microsoft Internet Explorer

1.8 Navigation Concepts:

Navigation is the most significant element in web design. Since web-layouts don’t have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn’t mess around with it.

1.9 Web Graphics:

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro.Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

1.10 Multimedia and the Web:

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see.

Examples: Pictures, music, sound, videos, records, films, animations, and more.

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files.

Multimedia files also have their own formats with different extensions like: .swf, .wav, .mp3, and .mp4.

MP4 is the new and upcoming format for internet video. It is supported by YouTube, Flash players and HTML5.

MP3 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, the MP3 format is the choice.

PRATICAL-2

1. Design a static website using various HTML features.

A. Design simple HTML page for insert image & link

Image & Link

This is my first web page.

This is my first web page.

This is my first web page.

This is my first web page.

This is my first web page.

This is my first web page.

I am Savani Vishakha.I m teaching you SWD.(Write a paragraph about your self.)

This is google link

An image:

Output:

(B). Design Registration Page with use of Text Box, Button, Check Box, Radio Button & Dropdown List using form.

Username:

Password:

keep me logged in

Male

Female

Dancing

Singing

Reading

Output:

[pic]

(C). Design Table using HTML Code.

SimpleTable

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

Name

ACP

SWD

Maths

Vishakha

90

95

85

Output:

[pic]

(D). Design 10th mark sheet in HTML using Frame..

10th marksheet

GSHEB

Gandhinagar-2013

Seat No-788990

Name-Vishakha Savani

Sub Code

Sub Name

Total Marks

Obtained Marks

o11

Gujarati

100

80

002

Maths

100

90

003

English

100

85

Grade-A+

255/300

85%

Pass

Output:

[pic]

PRATICAL -3

2. Develop static websites using Development Tools.

1. What is Dreamweaver and explain features of Dreamweaver.

What is Dreamweaver

The common conception with Dreamweaver is that Dreamweaver is designed to or is even capable of completely removing the agency of HTML and CSS coding from web design. This is like saying that a nail-gun can completely replace a hammer. A nail-gun will nail the boards together, but it is an imprecise tool, and there is a certain amount of danger while using it. If you can’t occasionally fall back on the hammer for more detail-oriented work, then there’s a definite limit to what you can build. A skilled carpenter knows how to use the hammer and occasionally does so when the nail-gun just isn’t doing what is intended.

Dreamweaver, like the nail-gun, is designed to make your life easier. You may never learn HTML or CSS, but without knowing them, you are limited to Dreamweaver’s way of doing things. This is not altogether a bad thing: it is simply a slightly narrow perspective on a large field.

Extolling the Virtues

Writing content

HTML can be cumbersome. Dreamweaver writes (for the most part) good, valid HTML using an easy point-and-click interface.

1. Managing files

Unless you are using a scripting language like PHP, managing a large site with many pages and files can quickly become a mess. Dreamweaver has built-in dependency tracking that will automatically manage your files and will update your pages accordingly. Many people use Dreamweaver just for its built-in synchronization tool.

2. Preliminary page layout

Dreamweaver has good tools to assist you in laying out your site. There are also a lot of “pre-fab” layouts and templates available as starting points in Dreamweaver CS3.

Dreamweaver’s layout features are, however, somewhat limiting. Some designs are simply impossible to achieve using the buit-in layout tools. In these cases, you can go in and manually edit the HTML and CSS that Dreamweaver produces to tweak to exactly what you need.

Feature of dreamweaver

1 THE NEW, SIMPLER, SITE SETUP

In version CS5, Adobe streamlined the website setup process. When you first start working on any new or existing site in Dreamweaver, it’s important to begin by setting up the site and identifying your main website folder. The new Site Setup dialog (Site>New Site) requires two settings to get started. First, give your site a name (any name will do, it’s just for your reference). Next, click the folder icon to the right of the Local Site Folder field and select the folder on your hard drive where you’ll store all of the files and subfolders in your site.

[pic]

2 SETTING UP WEB SERVERS

Use the list on the left of the Site Setup dialog to access more advanced features and FTP settings. The new dialog now makes it possible to set up multiple servers for any site, a great way to manage both a testing server and a live server for the same website. Note: You’ll need to click the Add New Server icon (+, plus sign) at the bottom of the

Servers tab to open the FTP settings dialog.

[pic]

3 OPTIONAL IMAGES FOLDER AND MORE

You’ll find many other options in the Site Setup dialog when you click the Advanced Settings tab, including the setting for an images folder in your local site folder. If you identify an images folder, and then insert an image into a page that is outside your root folder, Dreamweaver will copy the image into the folder you identify in this field. You can also use the Advanced Settings tab to specify a folder for spry assets, setup version control, cloaking, contribute, and other advanced features. When finished defining your settings click Save and you’re done.

[pic]

4 THE WIDGET BROWSER

The Adobe Widget Browser makes it easy to add a growing list of widgets to your site. Most are created in jQuery or Ajax and you can use them to add slide shows, drop-down menus, and other interactive features to your webpage. To access the Widget Browser, select it from the Extend Dreamweaver menu (the gear icon) located in the Application Bar (Window>Application Bar) just below the Dreamweaver menu (just to the right of the Help menu on Windows). Note: When you click this option for the first time, read the resulting dialog and follow its prompts to download the Widget Browser from Adobe Labs.

[pic]

5 DOWNLOADING WIDGETS

Click the Adobe Exchange link at the top left of the Widget Browser window to view all of the widgets available on the Adobe Exchange website. To download a widget, click to select it, and then enter a valid Adobe ID and password (if you don’t already have an Adobe ID, you can create one for free, simply click the Create Account button at the bottom of the Sign In dialog).

[pic]

6 ADDING WIDGETS TO DREAMWEAVER

Most widgets are small so they download quickly and once a widget is downloaded to your hard drive, it opens in its own widget browser window automatically. Click the Add to My Widgets button at the bottom right corner of the Adobe Widget Browser window to add the widget to your local widget browser where it becomes available in Dreamweaver. Click the Go To My Widgets button in the Widget Added dialog to open the local widget browser and view the new widget in your local collection; or click on My Widgets, which is located at the top of the Adobe Widget Browser window.

[pic]

7 INSERTING WIDGETS INTO PAGES

You can insert any widget that you’ve added to the Adobe Widget Browser into a page in Dreamweaver by clicking the Widget icon in Insert panel (Window>Insert), or by selecting Insert>Widget. Then, in the Widget dialog, select your desired widget from the Widget drop-down menu and click OK.

[pic]

8 CUSTOMIZING WIDGETS

Each widget is different, but most come with default images or other content in place and need to be customized to feature your content. In this example, I replaced the default images that come with the LightBox widget by changing the image references in the HTML code to reference images in my main images folder.

[pic]

9 ACTIVATING CSS INSPECT

Dreamweaver CS5 adds a new tool designed to help you identify how CSS is used in a webpage. The CSS Inspect option makes it easy to quickly view the CSS that defines the styles used in different parts of any webpage. To use CSS Inspect, click the Inspect button at the top of the Workspace and click the text link Switch Now (it appears just below the Inspect button). The Switch Now link automatically changes the Dreamweaver layout to best take advantage of the CSS Inspect feature.

[pic]

10 USING CSS INSPECT

Once it’s activated, just roll your cursor around the screen to use CSS Inspect. As you do, Dreamweaver highlights content in the Design View area with color-coded highlighting that identifies each tag and associated style, as well as any margins and padding created by the style rule. Simultaneously, Dreamweaver identifies the corresponding code in Code View, and displays the corresponding style rules in the CSS Styles panel (which automatically pops-up when you use Switch Now). Click the Inspect button again to turn off CSS Inspect.

[pic]

11 TESTING IN ADOBE BROWSERLAB

Adobe BrowserLab is designed to help you preview how your pages will display in a variety of Web browsers, even if you don’t have all of those browsers available on your local hard drive. In CS5, you’ll find a new Adobe BrowserLab panel you can use to preview any open page in your local site. To preview a page, save your page (File>Save) and click the Preview button in the Adobe BrowserLab panel (Window>Extensions>Adobe BrowserLab), or go to File>Preview in Browser>Adobe BrowserLab. You must have the page open in Dreamweaver and you must be connected to the Internet to use this feature.

[pic]

12 USING ADOBE BROWSERLAB ONLINE

When you open a page in Adobe BrowserLab, you’re connected to the Adobe BrowserLab website and a screen shot of the page is automatically created using whatever browser was last selected in Adobe BrowserLab. In the top left corner of the Adobe BrowserLab website, click the View button and choose 2-up View menu to display the same page in two different browsers side by side, or Onion Skin to place two previews on top of the other; which makes it easier to identify subtle differences.

[pic]

13.CHOOSING AVAILABLE BROWSERS

You can preview your pages in a variety of Web browsers in the Adobe BrowserLab website, including the notorious Internet Explorer 6.0. You can also use the Browser Sets option (located near the top of the Adobe BrowserLab webpage) to create a shortcut to any collection of browsers available on the site that you want to use for testing. Note: You can’t click on the links or test interactive features on your page with this option active because it only takes a screen shot of the page in each browser.

14 SPELL CHECK IN 37 LANGUAGES

As the Internet becomes increasingly multilingual it’s great to see Adobe upgrade the spell check features in Dreamweaver to handle 37 languages (previous versions supported less than half that many). To change the dictionary to any of the included languages, go to Dreamweaver (PC: Edit)>Preferences. In the General category, use the Spelling Dictionary menu to select any of the listed languages and click OK. Then choose Commands>Check[pic] Spelling to use spell check in the language you selected.

[pic]

(2). Write a Basic Steps To Setup Dreamweaver.

Step 1: Plan the website

The first thing to do is define the pages that will be included in the website and the visual theme the pages will use for branding and layout. This can be quite an extensive task for complex websites, but for the purposes of this tutorial, the photo gallery will follow a very simple design (see Figure 2).

[pic]

Figure 2. Overview of the website layout template.

Essentially the gallery is composed of a single layout used to build a home page and detail pages. Since the pages will all follow the same design, it's a good idea to use a Dreamweaver template.

Step 2: Create a new site in Dreamweaver

Dreamweaver organizes projects by website and provides the Files and Assets panels so you can easily organize and deploy content. In this step, you'll set up the website folder and then create a new site in Dreamweaver.

Before you get started:

1. Download the project files (ZIP, 9 MB) and unzip the archive. Save your published files in this folder and use the project assets to follow the steps in the tutorial.

2. Download the completed project files (ZIP, 9 MB) to use as a reference. You can deconstruct these files if you run into any problems.

3. Download the free trial of Dreamweaver CS6 and install the application if you haven't already done so. You can also use your Creative Cloud membership to download and install the product.

Create a new file and start the project:

1. Open Dreamweaver and choose Site > New Site.

2. In the Site Setup dialog box, enter Photo Gallery in the Site Name field and click the folder next to the Local Site Folder field to browse for the dwcs6_project folder, which is included in the project files you just downloaded.

3. Click Save to create the site. Notice that the Files and Assets panels now reflect the content inside the website project folder. Note that you'll use supplied content from the _Source and Images folders.

4. Before you get started, take a moment to explore the Dreamweaver workspace (see Figure 3). The main area of the screen changes depending on whether you're looking at the Code view, Design view, Split view, or Live View mode. This area is where you'll see your work. The Properties panel on the bottom of the screen is context sensitive and displays properties for any selected object. The Files and Assets panels enable you to manage files in the website. The CSS Styles panel enables you to manage text and formatting styles throughout the website. The Mobile Size, Tablet Size, and Desktop Size buttons on the bottom of the screen in Design view enable you to check your work at standard sizes.

5. Close the blank HTML file when you are done.

[pic]

Figure 3. Dreamweaver CS6 workspace.

Step 3: Lay out the website template using Fluid Grid Layout

The Fluid Grid Layout feature is new to Dreamweaver CS6. It provides an easy way to use CSS to create fluid page layouts that can size themselves to any screen or device. In this step, you'll create the foundation for the website template:

1. Choose File > New Fluid Grid Layout to launch the New Document dialog box. Notice that the Fluid Grid Layout options include settings for mobile, tablet, and desktop sizes. The concept is that you'll lay out content in a grid of div tags set to fluidly span the page. Each of the three sizes can define its own CSS layout for each div tag. In this step, you can change the number of columns, spacing, and margins for each layout.

2. Change the column width from 25% to 15% and change the margin setting to 90% for all three sizes (see Figure 4).

[pic]

Figure 4. Fluid Grid Layout options in the New Document dialog box.

3. When you click the Create button, Dreamweaver will generate a CSS file to save your grid CSS settings as you work. Click Create and save the CSS file with the name GalleryTemplate.css in the Assets folder.

4. Notice that Design view updates, and you now see the grid layout in the mobile screen size.

5. Save the file in the root of the project folder with the name layout.html. Dreamweaver will ask you where you'd like to copy the dependent CSS and JavaScript files that go along with the fluid grid page. You don't need to do anything with these files, but they need to be included with the site. Browse for the Assets folder and click Copy.

At this point, the page appears as a series of column guides and one fluid grid layout div tag creating a row in the grid.

Step 4: Add div tags and placeholder content

HTML is simply a tree of nested tags that defines the relationship of content on a web page. In this example, the part of the HTML you see in a browser starts with the tag, followed by nested tags and a closing tag. A div tag is an organizational element used to group content on the page in a logical way. CSS styles can be assigned to each div tag to format text and add layout styles such as position, background, and border.

In this step, you'll create three div tags as rows in the grid and add placeholder content:

1. Select the text in the existing div tag and delete it. This div tag will hold the large image.

2. Place the cursor in the div tag and type Add image here as a placeholder for the template.

3. Click the Split button on the top left side of the workspace to display both Code view and Design view. It's often easier to edit and fix issues in Code view.

4. Add another div tag by selecting the LayoutDiv1 tag in the code or along the tag selector (see Figure 5) and choose Insert > Layout Object > Fluid Grid Layout Div Tag. Click OK to accept the default settings. Selecting the previous div tag before inserting the next div tag is an important step to make sure the tags are next to each other in the code hierarchy.

[pic]

Figure 5. Two ways to select a div tag.

5. Delete the text in the new div tag and type Add text here as a placeholder.

6. Add another fluid grid layout div tag to add another row below the text row. This div tag will hold a series of thumbnail images.

7. Click inside the new div tag and choose Insert > Image. Browse for the image1.jpg file from the Images/Thumb folder and click OK. Enter the alt text Image 1 when prompted and click OK. Repeat this process for the remaining nine thumbnail images. You can also drag the images to the div tag from the Files or Assets panel, or you can add the images by copying and pasting the tag in Code view while updating the file reference.

Right now, the template has all the elements needed to produce the website pages, but it could use some style formatting to refine the layout (see Figure 6).

[pic]

Figure 6. The div tag layout filled with placeholder content.

Step 5: Add styles to format the layout

CSS styles enable you to format the text and visual presentation of the div tag layout. Separating the formatting definition from the definition of the content in the div tags allows for a flexible design workflow.

In this step, you'll format the background color, font styles, div tag layout styles, and thumbnail image styles to format the template:

1. Choose Modify > Page Properties to open the Page Properties dialog box. You can use Page Properties to define global settings for the page.

2. Update the following properties under the Appearance (CSS) category and click OK:

o Page font: Trebuchet MS, Arial, Helvetica, or another sans-serif font

o Size: 16

o Text color: #FFF

o Background color: #333

3. Add more styles to the body tag to center-align all the content and add some top padding. To do this, click the All button at the top of the CSS Styles panel to show all the style rules in the site. Click the body rule below the tree control, which shows the background-color style you just added in the Page Properties settings.

4. To add a property, click the Add Property button, choose the property from the menu, and enter a value in the resulting field. Add the following properties:

o text-align: center

o padding-top: 20px

5. The fluid grid layout page always appears with a parent div tag that contains all your other div tags. Add styles to the parent div by selecting it in the code or by clicking the outermost CSS layout guide box in Design view. Click the Current button in the CSS Styles panel and add the following styles:

o border: solid 8px #000

o background-color: #000

6. Click anywhere in the second div tag to select it. Notice that the div tag's styles appear in the CSS Styles panel. Add the following styles:

o padding-top: 12

o padding-bottom: 12

7. Add some spacing to the images by adjusting their margin style. Click one of the thumbnail images to select it and click the New CSS Rule button on the bottom of the CSS Styles panel. Click OK in the New CSS Rule dialog box. Add the following styles in the Box category in the CSS Rule Definition dialog box and then click OK to apply the style:

o border: solid 1px #000

o opacity: .75

8. Save the file.

At this point, the layout.html page is ready to be converted to a Dreamweaver template (see Figure 7).

[pic]

Figure 7. A website template at mobile size built with CSS formatting applied.

Step 6: Create a Dreamweaver template with editable regions

This website is purposefully designed to be very simple with the gallery pages sharing the same layout. Rather than redoing all the work for each page or copying and pasting the code, you can create a Dreamweaver template (DWT) file. A Dreamweaver template contains editable and non-editable regions that can be used to define consistent approaches to layout and branding. The template remains linked to each page you apply it to, which makes it easy to add global changes from a single location.

In this step, you'll create a DWT template from the layout.html file with editable and non-editable regions:

1. With the layout.html file still in the view, choose File > Save As Template. The Save As Template dialog box appears.

2. Add a brief description and change the Save As filename to GalleryTemplate.

3. Click the Save button to create the template. In the Files panel, you can see that a new folder named Templates appears in the site, and the file has been saved as GalleryTemplate.dwt.

4. Select the Add image here text and choose Insert > Template Objects > Editable Region. The New Editable Region dialog box appears. Enter the name Image Area and click OK.

5. Select Add text here and repeat step 4. Name the editable region Text Area.

6. Save the file.

At this point, you're ready to create the gallery pages using the DWT template (see Figure 8).

[pic]

Figure 8. Dreamweaver template in editing mode.

Step 7: Create the website pages by adding images and text

Creating the gallery pages is easy. All you have to do is create a new page using the template and drop the supplied images and text into the placeholder areas.

In this step, you'll create the detail pages using the template and supplied assets:

1. Choose File > New > Page From Template > GalleryTemplate and click Create. Explore the new page and notice that only the three editable regions can be changed.

2. Create a home page by saving the file with the name index.html. Web servers will automatically show the index.html page when you browse to the URL of the website.

3. Delete the template text in the Image Area and place the cursor in the Image Area editable region.

4. Choose Insert > Image and browse for the HomePageImage.psd file in the _Source folder. Because the image is a Photoshop file, Dreamweaver asks for publish settings in the Image Optimization dialog box. Click OK to accept the default publish settings in JPEG format and save the resulting image in the Images folder. If you happen to update the PSD file in Photoshop, Dreamweaver will automatically update the JPEG file. Enter the alt text Home Page when prompted.

5. Delete the text in the Text Area editable region and type Click a thumbnail to view the image.

6. Save the file.

7. Create another new page from the template and save the file with the name page1.html.

8. Delete the template text in the Image Area and replace it with image1.jpg from the Images/Full folder. Enter the alt text Image 1 when prompted.

9. Delete the text in the Text Area and add the text Photograph 1 in its place.

10. Save the file.

11. Repeat steps 7 through 10 for each of the remaining images to change the filename and text to match the image number in the sequence.

At this point, your pages are filled with content, and they are ready to be linked together (see Figure 9).

[pic]

Figure 9. The home page after content was added to a Dreamweaver template instance.

Step 8: Create a navigation bar

Navigation bars are a common feature in website design and can appear in many forms. Essentially they create hyperlinks between pages in the website (or elsewhere), and they provide a visual cue as a call to action.

In this step, you'll convert the thumbnail images to a navigation bar:

1. Return to the GalleryTemplate.dwt page (which you can open from the Templates folder in the Files panel if you need to). You'll add the navigation links to the template so each of the pages implementing the template inherit the update.

2. Click the first thumbnail on the left (image1.jpg) to select it. Click the Point To File icon next to the Link field in the Properties panel and drag the cursor to the file you want to link to in the Files panel (see Figure 10). You can manually enter any URL in the Link field, but using the Point To File feature ensures that the link from the template in the Templates folder to the target HTML page is correct.

[pic]

Figure 10. Create a hyperlink using the Point To File tool (click to enlarge).

3. Repeat step 2 for each thumbnail image and HTML file.

4. Save the file and choose update links when prompted.

Step 9: Add CSS3 page transitions

CSS3 transitions provide a new level of animation support directly to the HTML environment, enabling Flash like effects using web standard technologies.

In this step, you'll add CSS3 rollover transitions to the thumbnail images to create a visually engaging experience:

1. Return to the GalleryTemplate.dwt page if you're not already there.

2. Select a thumbnail image and choose Window > CSS Transitions to open the CSS Transitions panel.

3. Click the Create New Transition button (+) to launch the New Transition dialog box (see Figure 11).

4. Change the following parameters:

o Target Rule: .gridContainer.clearfix #LayoutDiv3 img

o Transition On: Hover

o Duration: .5s

o Delay: 0s

o Timing Function: Ease-Out

5. The rollover effect will add a white highlight to the border of the thumbnail image, and the image will become completely visible. Click the Plus button under the Property area and set the following styles and values:

o border-color: #FFF (white)

o opacity: 1

6. Click Create Transition to add the transition styles to the site.

7. Save the file.

Tip: CSS transitions are supported in the following browsers: Chrome 1.0, Safari 3.2, Firefox 4.0, Internet Explorer 10, and Opera 10.5.

At this point, you've created the home page and detail pages, and you've added the finishing touches to the navigation bar with a CSS3 transition.

[pic]

Figure 11. New Transition dialog box.

Step 10: Preview and deploy your work

It's a good idea to preview your work often as you build the website. Dreamweaver CS6 provides several ways to preview, including using Design view, using Live View, using Multiscreen Preview, and previewing in a browser.

You'll find that using Design view and Live View are the easiest ways to check your work before publishing. Previewing in a browser is a common task that shows your work in your default browser. Multiscreen Preview is useful when checking your work for mobile and tablet sizes. In this step, you'll explore your options for previewing your work.

Check your work using Live View:

1. Click the Live button at the top left of the workspace. Once you enter this mode, you can preview CSS3 and HTML5 features in the workspace.

2. Click the Live button again to return to Design view.

3. Save the file.

Check your work by previewing in a browser:

1. Choose File > Preview In Browser to launch the current page in the target browser. You can also launch the page using the Preview/Debug In Browser button above Design view.

2. Change the size of the browser window to see the fluid layout resize itself.

Check your work using Multiscreen Preview by choosing Window > Multiscreen Preview.

Now that the website is complete, you'll need to upload it to a server so that people surfing the Internet can see it. You can use any FTP tool to accomplish this, but the Dreamweaver Files panel has FTP capabilities built into it. Dreamweaver CS6 includes performance improvements so you can upload large files and large websites faster and more efficiently than before.

Explore using the Dreamweaver FTP tool:

1. In the Files panel, click the Expand To Show Local And Remote Sites button in the upper right. This button expands the panel to show the file system locally and on your remote server.

2. From the main menu, choose Site > New Site to bring up the Site Setup dialog box.

3. Click the Plus button to add a new server.

4. Enter your server's name, FTP address, username, and password, and click Save.

5. Click Save in the Site Setup dialog box to save the change.

6. From here, you can click the Connect To Remote Server button to log into your FTP server. Then select files to upload and click the Put Files button (up arrow). You can add, remove, and synchronize files as needed.

7. Click the Expand To Show button (now called Collapse) and click Show Only Local or Remote Site. Return to editing view.

PRATICAL -4

3. Develop an animated website using Flash.

A) Explain Flash Basic and menu bar.

i. Use File->Open to open a *.fla file you are working on

ii. Open a "recent" item either through the File Menu or Thebutton.

Create a new Flash file.

[pic]

The Menu Bar

File

Opening and creating new files

Definition of Publication Settings (you may change settings you initially defined)

Edit

Editing the scene

Editing elements that are active

View

Define zoom level, grids, snapping (i.e. how the workspace displays)

Note: Other important "view" items are in the Windows menu

Insert

Add new layers, frames, symbols etc. into the timeline

Add a new scene

Modify

Modify elements on the workspace, e.g. convert a graphic to a symbol (make it a reusable object) or change the shape of a drawing

Modify timeline elements

Text

Change text properties

Spell checking

Commands

Run macros

XML export / import

Control

Test animation in various ways (including just sub-elements)

Debug

Tools to find errors in your scripts

Window

Configure the workspace (add/remove panels)

Help

Built-in help and links to useful on-line resources

(B) Create Symbols and Buttons using Flash.

• In the Create New Symbol dialog box, enter the name PushButton and set the Type menu to Button (see Figure 8). Click OK to create the symbol and enter its timeline for editing.

[pic]

• Add graphics by importing the supplied share button artwork or use your own graphics, if you prefer. Choose File > Import > Import to Stage and browse for the PushButton.ai file located in the assets folder. Click Open to open the file and then click OK in the Import to Library dialog box to accept the default import settings. Notice that artwork appears on the Timeline across two layers named "+" and "back"

• Add a new layer named actions above the button layer.

the Script window of the Actions panel

import flash.events.MouseEvent; import .navigateToURL; import .URLRequest; function onButtonClick( event:MouseEvent ):void { // Open a URL navigateToURL(new URLRequest("")); } myButton.addEventListener(MouseEvent.CLICK, onButtonClick);

(C) Create Layers using Flash.

Creating new layers and deleting layers

When you create a Flash document, it only contains a single layer, i.e. less than you need.

To create a new layer, either:

• Insert->Timeline->Layer

• Click on layer icon (left most item in the Edit bar just below the timeline)

• Right-click on an existing layer, then Insert Layer

[pic]

Inserting a new layer

As soon as you create a new layer, you should give it meaningful name. Right-click on its name (something like Layer 2) select Properties and change the name. Alternatively, to display this properties panel, just double-click on the layer name.

To delete a layer and its contents: Right-click->Delete Layer. You also can lock/hide other layers with this menu. Before you delete a layer make sure that you save its objects if you plan to keep them. You can insert them in the library as symbols or copy them to another layer.

PRATICAL-5

4. Design a uniform formatted website by implementing CSS

A) Design simple CSS page.

body {color:red;}

h1 {color:#00ff00;}

p.ex {color:rgb(0,0,255);}

This is heading 1

This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.

This is a paragraph with class="ex". This text is blue.

Output:

[pic]

B) Design uniform website using formatting text.

h1 {text-align:center;color:#00ff00;text-decoration:overline;}

p.date {text-align:right;}

p.main {text-align:justify;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

CSS formatting text Example

May, 2009

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone.

This is heading 2

This is heading 3

This is heading 4

Output:

[pic]

C) Selectors using CSS and style your sheet.

[title]

{

color:blue;

}

Will apply to:

Hello world

W3Schools

Output:

[pic]

D) Develop a page using Embedded Style Sheet and Attaching External Style Sheet.

• Embedded style sheet

Embeded level style sheet

h1

{

font-family:Arial;

color:green;

}

h2

{

font-family:Arial;

color:red;

left:20px

}

h3

{

font-family:Arial;

color:blue;

}

p

{

font-size:14pt;

font-family:verdana

}

this page is created using embeded style sheet

this line is aligned left and red color.

the embedded style sheet is the most commonly used style sheet.

this paragraph is written in Verdana font with font size of 14.

this is a blue

coloredline.

Output:

[pic]

• External Style Sheet

Extcss.html

External style sheet

this page is created using external style sheet

The External Style sheet is the compact representation of Cascading Style sheets.

This Paragraph is written in Monotype Corsiva font with font size 14.

This is a blue

coloredline.

Ex1.css

h1

{

font-family:arial

}

h2

{

font-family:times new roman;

color:red;

left:20px

}

h3

{

font-family:arial;

color:blue;

}

p

{

font-size:14pt;

font-family:Monotype Corsiva

}

Output:

[pic]

PRATICAL-6

5. Design a website by implementing CSS with tables

A) Design Table using CSS with various property.

table, td, th

{

border:1px solid green;

}

th

{

background-color:green;

color:white;

}

Firstname

Lastname

Savings

Peter

Griffin

$100

Lois

Griffin

$150

Joe

Swanson

$300

Cleveland

Brown

$250

Output:

[pic]

(B)Design Styling Table using CSS.

#customers

{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:100%;

border-collapse:collapse;

}

#customers td, #customers th

{

font-size:1em;

border:1px solid #98bf21;

padding:3px 7px 2px 7px;

}

#customers th

{

font-size:1.1em;

text-align:left;

padding-top:5px;

padding-bottom:4px;

background-color:#A7C942;

color:#ffffff;

}

#customers tr.alt td

{

color:#000000;

background-color:#EAF2D3;

}

Company

Contact

Country

Alfreds Futterkiste

Maria Anders

Germany

Berglunds snabbköp

Christina Berglund

Sweden

Centro comercial Moctezuma

Francisco Chang

Mexico

Ernst Handel

Roland Mendel

Austria

Island Trading

Helen Bennett

UK

Königlich Essen

Philip Cramer

Germany

Laughing Bacchus Winecellars

Yoshi Tannamuri

Canada

Magazzini Alimentari Riuniti

Giovanni Rovelli

Italy

North/South

Simon Crowther

UK

Paris spécialités

Marie Bertrand

France

Output:

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download