Paw An
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
More details
- Words: 3,981
- Pages: 29
DOS-
PART A 1. What is the use of Style Sheets in Dreamweaver. How can you add elements into Layers? ANS- Use of style sheets in Dreamweaver are:1 TABLES STILL HAVE THEIR PLACE Before explaining why you shouldn’t use tables to create page layouts, it’s important to acknowledge the one remaining legitimate use of tables—tabular data. If you’re creating a page with consistent data split into columns and rows (i.e., an Excel spreadsheet or the contents of a database), then you can still use tables; just make sure your tables are accessible by using the table header tag ( ) and including descriptive text and other accessibility features. For more on creating tables, see Laurie Brown’s “Creating Accessible Tables for Data Using
Dreamweaver 8”
2 STUDY CODE IN OLD DESIGN FIRST Before redesigning an old webpage, use Code or Split views in Dreamweaver to study the code. If the site was built with tables, it’s likely to have other old tags
that are no longer recommended, such as the font tag shown here. To ensure your pages meet contemporary Web standards, get rid of font tags (and other deprecated code) while you’re at it. The font tag is best replaced with standard HTML tags and CSS. For example, you could use heading tags and then create a CSS tag style to change the font, color, and size.
3 USE DIV TAGS AND CSS IN PLACE OF TABLES Think of HTML div tags as the building blocks of good CSS layouts. Use div tags to create boxes for all your content, and then create CSS styles that define the size, alignment, margins, padding, and borders of those boxes. Instead of merging and splitting cells to create designs using tables, you can create styles that align columns to the left or right of a page and precisely define margin and padding space on any or all sides of each div. Note that div tags are all but invisible unless you create borders. Turn on CSS Visual Aids to better see what you’re doing.
4 CREATE DIV TAGS FOR CONTENT To re-create a design with CSS instead of tables, start by creating a series of div tags. Click on the Insert Div Tag icon in the Common Insert panel, or choose Insert>Layout Objects>Div Tag. Using the border settings, you can create borders on any or all sides of a div tag. Tip: Defining a border on only one side of a div is a great way to create dividing lines between columns or other elements. Use margin and padding settings to define the space between borders.
5 CREATE ID STYLES FOR DIVS As you insert div tags in Dreamweaver CS3 and CS4, you have the option of defining styles at the same time. I like to create a style for each div tag as I create them, but usually define the styles later. You want to insert a div tag for each of the content areas of your page. For example, I created a div tag and a corresponding ID style named #container to surround all of my content and then created separate div tags for the top section, left and right columns, and the footer inside the #container div. (Note: ID style names always start with #.)
6 COPY-AND-PASTE CONTENT Before you create styles for all your div tags, it’s often helpful to add a little content so you can better see what you’re doing as you create the page design. Most designers simply copy-and-paste text, images, and other content from the old pages into the new ones, which is fine as long as you’re careful not to bring along any old deprecated code (like the font tags shown in Step 1). Consider using the Edit>Paste Special option to add text without any formatting and then create styles to handle formatting in the new design.
7 CREATING ID STYLES FOR DIV TAGS With your div tags and some content in place, it’s time to define your ID styles. The ID selector in CSS is limited to use only once on a page, which makes it ideal for the main content areas of a page. Using CSS, you can control the width, alignment, padding, and margins, which all add up to great design control. So you could define the style for the left column to be 300 pixels wide with right and left margins of 50 pixels each (to separate it from the left side of the page and the right column) and set the Float to align left.
8 USE CLASS STYLES FOR RECURRING FEATURES Class styles are ideal for recurring features, such as the captions under each image. Thus you could create a Class style called .caption that defines the font, size, and color of the text. (Note: Class style names always begin with a period or dot.)
9 USE TAG STYLES TO PRESERVE HTML CODING Whenever possible, it’s best to use standard HTML tags, but that doesn’t mean you can’t control the formatting options with CSS. For example, there are many advantages to formatting a headline with the h1 tag (search engines put greater value on words in an h1 tag, and heading tags convey the hierarchical importance of content on a page). But you don’t have to settle for all your headlines displaying in Times, 24 pt, bold text. By creating a style using the tag selector, you can change the text formatting option for the h1 tag, and any other tags you use.
10 USE EXTERNAL STYLE SHEETS When you create styles in Dreamweaver, you have the option of saving them in an internal style sheet (meaning the styles are saved in the same document), or in an external style sheet (a separate file that can be linked to one or more pages in a website). External style sheets offer the advantage that you can use the same styles on many pages and that if you ever want to change a style, you can make the change once in the external style sheet and automatically apply it to all of your pages.
11 SAVE TIME WITH TEMPLATES Once you’ve redesigned your page using CSS, create a template with your new layout. Templates and CSS play well together and combine to make creating new pages for your site much easier. If you redesign your site, you can simply edit the style sheet to change styles and edit the template to make changes to the HTML tags and the page content. Tip: If you edit a template, you change all of the pages created from it and all need to be uploaded to your server. If you change an external style sheet, you only need to upload the style sheet to the server.
12 COMPARE TABLES AND CSS LAYOUTS To help you appreciate that you can re-create any tables design using CSS, the layout shown on the left was created with tables, the one on the right was created with CSS. In the CSS version, I used the margin settings to create columns that better align the text with the images so that the text doesn’t extend beyond the width of the photos, as it did in the layout that uses tables. Using CSS, you can create much more complex and precise page designs.
2. Discuss Designer Panels. Create home page of any sports website using designer labels. Also create buttons which have hyperlinks.
ANS- Dreamweaver is one of the most popular professional Web development software packages available. It offers power and flexibility to create pages that meet your needs. I use it for everything from JSP, XHTML, PHP, and XML development. It is a good choice for professional Web designers and developers, but if you're working as a solitary freelancer, you might want to look at one of the CS suites like Web or Design to get graphics editing capability as well.
<meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="San Francisco Bay Area Sports website design and search engine optimizing company">
<meta name="keywords" content="website design, soe, search engine optimizing, sport website design, sport seo, website development" />
<META NAME="author" CONTENT="Jigsaw Design"> <META NAME="GOOGLEBOT" CONTENT="INDEX, FOLLOW"> <meta name="robots" content="index,follow"> <meta name="revisit-after" content="7 days"> <script type="text/javascript" src="styles/reflection.js"> <script src="styles/prototype.js" type="text/javascript"> <script src="styles/scriptaculous.js?load=effects" type="text/javascript"> <script src="styles/lightbox.js" type="text/javascript">
| |||||||||||||||||||||||||
var sc_partition=5; var sc_security="4c471b89"; var sc_remove_link=1; <script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"><noscript>