Epic India
Unit 3- Intensive web designing with word and XML
3.7 Adding basic content .1 Choose a site theme
181 prospect. So why not build a desktop app for web design around WebKit? I‘m not talking about an in-browser AJAX toolkit for dragging elements around and changing fonts, but an actual desktop application built with WebKit as the core to its display. It could have accurate rendering and previews for the way page elements would look, but with some of the WYSIWYG tools desktop design apps have. We wouldn‘t just approximate pixels in a flat comp, our CSS would be baked in to the layouts we draw and create on the page. And as Webkit grows, so too could this new app, always taking advantage of the latest and greatest functionality. Just like a browser, it could pull assets from remote servers; and just like a desktop app, it could make use of local processing power and OS-level functionality. This would allow it to effectively combine some of the best of both worlds, with a foot firmly planted in the web.
The advantages would be monumental, allowing a strong creative and explorative process, while seeing how things could react on a live stage. It would fulfill many of the items on my wishlist because these are already part of core browser functionality.
We would essentially be designing with live page elements; not a picture of a text field—but a text field you could click into and start typing, and then drag to a different area of the page entirely.
I know I‘m generalizing; I‘m a designer first and most certainly not a developer, but I‘ve been occupying this space and using these tools long enough to have a hunch for what works and what doesn‘t. An application like this could change the process of web design considerably. Most importantly, it wouldn‘t be a proxy application that we use to simulate the way webpages look—it would already speak the language of the web. It would truly be designing in the browser.
3.7 Adding basic content
182 To select a theme, follow these steps:
1. Sign in to Office Live Small Business. On the Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Theme. A list of theme categories appears.
4. In the drop-down list, click the theme category that you want. For each category, a list of images appears.
5. Click the image that you want to use in your header. It is automatically selected and placed in the header on all of the Web pages on your site.
3.7.2 Apply a style
After you have chosen a theme that suits the purpose of your Web site, you can select a style. The style controls the placement of all elements in your Web site header. The
183 header elements that are affected by your style choice include the logo, theme image, and the site title and slogan.
When you select the style, the header is reconfigured according to the definition of that style. For example, one style may show your logo as left-justified and another may show your logo as right-justified.
To select a style, do the following:
1. On the Office Live Small Business Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Style. A list of styles appears.
4. In the drop-down list, click the style you want to use. You can select different styles until you find the one that works for your site.
184 3.7.3 Use balanced colors
Color arguably has the most immediate visual impact on your Web site. The color you select should correspond with the theme you chose and should also work well with your logo, if you have one on your site. If the color is out of balance with the other elements, a site can sometimes look unprofessional.
Fortunately, it's easy to choose or change colors on your site. You can select colors and see what they look like with your theme and logo before you save your choices.
There are several color choices for you to make. For example, one color is used for the background of the site while another color is used for the menus. To simplify the decision-making, Office Live Small Business groups all colors used on a Web site into color themes and gives them names that in some way describe the overall feel of the theme. The Ocean color theme uses mostly blue colors, for example, while the Mustard color theme uses mostly orange and brown shades. You can select one of these predesigned color themes, or you can create your own custom color scheme.
3.7.4 Select a pre-designed color scheme To select a color theme for your site, do the following:
1. On the Office Live Small Business Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Color.
4. In the drop-down list, click the color theme that you want. You can select different color themes until you find the one that works for your site.
185 3.7.5 Create a custom color scheme
If you don't want to use one of the predesigned color schemes, you can create your own in Site Designer.
1. On the Office Live Small Business Home page, at the top, click Web Site.
Page Manager appears.
2. In Page Manager, on the actions bar, click Design Site.
3. In the drop-down list, click Design site. Site Designer appears.
4. In Site Designer, click Color, and then click Create custom color scheme.
5. In the Create custom color scheme dialog box, under Theme colors, a list of color groups appears. Click the color group name to expand the list of colors.
The color groups are areas of your Web site where you can apply color — for example, Header or Body.
6. Click an item in the list to select it, and under Select a color, select a color that you want for that item.
7. To specify a custom color, click More colors.
8. Under select a color, set the slider on the right to the hue that you want. On the left, click and hold the color selector circle, and drag it to the shade and saturation that you want. The hex number for the color you are currently selecting appears in the Hex box. You can also specify a precise color by typing the hex number into the Hex box.
186 Note: Note the Hex number of the color you select if you want to use it
elsewhere on your site.
9. Click Apply.
10. Repeat these steps for each color group that you want to apply a custom color to, and then click OK.
After you create your custom color scheme, it appears in the Color drop-down menu in Site Designer. You can switch between this custom color scheme and any of the predesigned schemes; however, you can have only one custom color scheme. If you create another custom color scheme, it overwrites the previous one.
3.7.6 Choose the right font
Another important visual element for your Web site is the font you choose for the content. You can select a font to use on all of the pages on your site, or you can pick a different font for different pieces of text. Applying a font to the whole Web site enables you to quickly and easily give the entire site a common look and feel, which typically is more attractive to site visitors.
The fonts that you select should be applicable to the message you want to portray. For example, if you have a Web site that displays legal content, you would probably not want to use a font with a lot of embellishments, such as Trebuchet MS. Instead, you would use a font that is easy to read, such as Arial or Times New Roman.
Note: Not all fonts render correctly on all Web browsers (for example, Windows Internet Explorer and Mozilla Firefox). The available fonts have been tested on a range of browsers to ensure that the text renders correctly, regardless of the browser that your site visitors use.
To select a font for your site, do the following:
1. On the Office Live Small Business Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Font, and then, in the drop-down list, click the font that you want.
There are several ways that you can add impact to the look and feel of your Web site.
By making a few simple changes to the theme, the colors, and the font, you can give your site a professional and personalized look that will appeal to your visitors.
187 3.7.7 Add special background effects
You can enhance the appearance of your Web site by adding a background image to a Web page or by adding a color gradient to the background of your entire Web site.
3.7.8 Add a background image to a Web page
A background image appears in the content area of the page.
1. On the Office Live Small Business Home page, at the top, click Web site.
2. In Page Manager, locate the page you want to add a background image to, and click Edit.
3. On the Page Editor tab, In the Advanced group, click Page background.
4. Select the Use background image check box.
5. Next to the Image file box, click Select.
6. In the Select an image box, under Choose images from, do one of the following:
To use an image that is located on your computer, select My
computer. Click Browse for an image, locate the image that you want to use, and then click Open. If you want to optimize the image for the Web, select the Optimize my image check box. Then click Insert image.
188 Note: If you select this option, the image is converted to JPG (if it is not already in this format), and the JPG conversion quality level is set to 100%. The image is resized to a maximum of 640 pixels,
maintaining its aspect ratio. These improvements help the image load faster in Web browsers.
To select an image that you uploaded to the Image Gallery, select My uploaded images. Select the image, and then click Insert Image.
Note: For more information about the Image Gallery, see Add or remove an image.
7. In the Page background dialog box, in the Position list, select the place on the background you want to position the image. If you want to tile the image on the page, in the Tiling list, select how you want it to be tiled. Click OK.
3.7.9 Add a gradient color background to your Web site
You can add a gradient to the background of your entire site. The background color will be the same on each page.
1. On the Office Live Small Business Home page, at the top, click Web site.
2. In Page Manager, click Design Site, and then select Design site.
3. On the Site Designer tab, in the Advanced group, click Options.
4. In the Site Options dialog box, under Display options, select Gradient in the drop-down list.
Note: You can also select Flat color for a solid color or Blank for no color in your site background.
5. Click OK.
3.8 Working with XML data