ZAMBAK_IT_ExpressionWeb2
.pdf
General Overview
Expression Web provides flexibility and functionality to help you build better Web sites. It includes the professional design, authoring, data and publishing tools needed to create dynamic and sophisticated Web sites.
Some features in Expression Web
• Standards-based Web sites
Design sites to today's exacting standards with task panes and menus just where you need them and see results in better browser rendering and more relevant search engine indexing. Design high-quality Web sites and applications with professional toolset and design surface.
• Sophisticated CSS-based layouts and templates
Get up to speed fast with professionally designed templates that are fully XHTML and CSS compliant. Separate design from content with Cascading Style Sheets. Make your own CSS designs from a host of DIV-based
• Extensive CSS formatting and management
Generate CSS styles automatically or manually for absolute control over the type of rule created and its precise location. Get a visual overview of CSS rules with CSS management tools.
• Rich data presentation
Design customized views of industry-standard XML data using powerful drag-and-drop tools, and see how your data will look within your CSS site design. Include, filter and sort and style data from any XML source easily. Present data using XSLT, even editing views on live XML data.
• Powerful ASP.NET 3-based technology
Create, edit, and deploy Web pages with deep support for the newly released ASP.NET 3.5 standard. Capture the power of ASP.NET with easy drag-and-drop controls, a wide variety of controls, including navigation, calendars, logins and database integration.
• PHP editing
Open and edit PHP pages directly in Expression Web 2 and apply the full range of standards-based design tools to PHP.
22 Chapter 2
Expression Web At First Glance
|
Title bar |
|
|
|
|
|
|
|
|
|
|
|
|
displays the name of |
|
|
|
|
Help |
|
the Web site |
|
Web page name |
|
shows help for the |
||
|
|
|
|
|||
|
|
|
The name of a current page |
|
written text. |
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
Switch pages using Ctrl+Tab |
|
|
|
|
|
|
|
|
|
|
Toolbars
contain buttons that let you access common Expression Web commands easily.
Folder List
organizes files and folders
Close
Closes the web page
Quick Tag Selector Bar
Task panes
shows HTML tags in nested order.
display and organize common Expression Web tasks so you can access them quickly
Editing window
where you edit web pages
Page Views
Design: to design a web site
Code: to show the written code for a web page
Split: to see the Design and Code together
Switch tabs using Ctrl+PageUp
Scroll Bars
Scroll to another part of the page
Status Bar
shows the information about hyperlinks, download speed, page size and etc.
Your Fırst Web Site 23
Create a Web Site using Templates
You can develop a complete web site more quickly using Templates. Expression Web does most of the structural work for you and you can spend your efforts customizing your site.
Each template is a framework that you can customize by adding and removing text and making other changes. After completing a web site with a template, you simply customize the template’s content and then replace the site’s other pages with your own content.
In these site templates, you'll find valid HTML code and layouts that use cascading style sheets rather than tables for positioning, ensuring uniform display in as many Web browsers as possible. Each site relies on a Dynamic Web Template to control page layout and presentation and change site-wide items, such as the masthead and navigation links, in one place and have them automatically updated on all your pages.
Expression Web contains many templates, and you should select which one you need. For example if you want to create a web site about yourself, you should select ‘Personal Web Site’ template, if it is about your company, then select ‘Organization’ or ‘Small Business’.
In this chapter you will create a web site about Mevlana Celaleddin Rumi, containing the pages such as Life, Works, Legacy and Links.
To create a Personal Web Site:
Select File>New and then click Web Site. The New dialog box opens.
Important
When you create a web site, put all files, folders, pictures, sounds, videos etc. in the same folder.
Otherwise when you take this site to another computer or the Internet, you’ll have problems in finding your files.
Expression Web adds new pages, pictures and objects to the folder automatically.
Select Templates>Personal 5 on the Web Site tab.
Selecting a template
24 Chapter 2
You can specify another location for your web site using the Browse button. The default location is My Web Sites folder in My Documents.
Type a folder name for your web site, Rumi.
Click OK to complete your web site.
Folder List shows Web site folders and files. If you cannot see the Folder List, select View -Folder List or press
Alt+F1
A complete web site has just been created for you. The home page, the initial page is ‘default.html’. All other pages are connected to the
default. You can see all files and folders in the ‘Folder List’. The files with the extension ‘.html’ are web site pages such as about_me.htm, contact.htm etc.
In the Folder List, double-click the default.htm page to open the site’s home page.
When the page opens, some areas can be clicked, which means their contents can be replaced, content and sidebar. Other areas of the
page, such as the site’s name and navigation bar, cannot be clicked or changed because these areas are created through the template.
You can make any changes to the template itself by directly editing the Dynamic Web Template, master.dwt.
Click the Preview button |
to see the web site in your |
browser and click the links to the other pages within the site to examine them.
Site home page
Making a Web Site Plan
You introduce your visitors with a home page. It is a good spot to let visitors know the purpose of the Web site on the home page. The home page gives visitors an impression of your site's style. Before you create a web site, you need to make a web site plan and design and decide which parts and pages your web site will contain.
Default.html is the home page. You can add a new or existing page, delete or rename a page
Your Fırst Web Site 25
To rename a folder/page:
Right-click the folder or page and select Rename in the Folder List.
Rename the folders and pages.
‘about_ me’ to ‘life’, ‘contact’ to ‘works, ‘resume’ to ‘legacy’.
When you rename a file in the Folder List, it asks you to update the given hyperlinks to those pages. Never rename a folder or file name in Windows
Renaming a folder |
Explorer since the hyperlinks will be broken. |
|
The updated hyperlinks
How to change page size
You can modify web page size by selecting View>Page Size and choose a page size
or
Click the Page Size section on the Status Bar and choose a page size.
Click the Yes button to update the hyperlinks.
To delete a folder/page:
You can delete a folder or a file. When you delete a folder, it also deletes the files containing in it. You are going to delete the photo_gallery folder because your
web site will not have a photo gallery.
Right click the folder which you want to delete and select the Delete option. It warns you that you are sure to delete or not.
Deleting a folder
Click the Yes button to confirm delete.
To add a page:
Right-click in the Folder List and select New>HTML, or from the menu select File>New>Page. New the dialog box opens.
Click General>HTML on the Page tab and click OK to complete.
Creating a new HTML page
26 Chapter 2
The default name given to the new web page
And now you have just created a blank web page. Its default name is Untitled_1.htm and when you save the web page, you can give it a different name.
A new page's codes
To save a page:
Select File>Save (Ctrl+S). The Save As dialog box opens, or click Save button on the common toolbar.
The default location for saving a file is
My Document/My
Web sites A web page extension is
HTM or
Hyper Text
a template-based page:
click the page whose elements you want to and select New From Page from the drop-
Saving a page
Type a name for the web page in the File name box.
Click the Change title button to give a new title for the web page.
Type the new title in the Set Page Title dialog box. 
Another way to set the Page Title
-click on the page and Page Properties
your title in the Title text on the General tab.
all pages’ titles.
Typing a title name
master.dwt file in the Folder List
The title of a page is displayed in the Web browser's title bar. It is also used by search engines.
Click the Save button.
The web page file name is created and its name is changed from
Untitled_1.html to poems.html.
Modifying Web Site Content
Adding data
You can add your data in all pages by deleting the existing text and typing the new one.
Double click the master.dwt file in the Folder List.
You can click and change the contents after the template page opens.
Select and replace the site name and navigation labels. These elements are used by all pages and the changes are applied to all pages.
Select the Photo Gallery navigation label and press the Del key to delete.
|
Press Ctrl+S to save the template. |
|
A dialog box opens and warns you that the files attached to the |
|
template will be updated. |
A warning dialog box for updating |
|
files |
Click Yes and then click the Close button. |
The changes in the template are applied to the pages. The * sign in the pages’ tab shows that the page has been modified and has not been saved.
28 Chapter 2
Select File>Save All to save all pages.
You can replace headings, text, and images on all pages as you need. You can select a heading or a paragraph and type your own. The template’s styling is applied automatically.
Type your text into the Heading 2 on the default page.
Select the Center button on the common toolbar to place it at the center.
Select the text, open the Style pull-down menu, and pick one of the six heading sizes.
You can change its heading style by opening the Style pulldown menu and picking one of the six heading sizes. Headings range in size from 1 (largest) to 6 (smallest).
Inserting pictures
Select an image by clicking on it.
Select Insert>Picture>From File and navigate to the image you want to use and click Insert.
Important
For arranging line spacing;
pressing the Enter key starts a new paragraph (paragraph break),
pressing the Shift+Enter keys starts a new line (line break).
Selecting an image
Choosing a picture to insert
The Accessibility Properties dialog box opens.
Typing an alternate text for picture
Your Fırst Web Site 29
Add a brief description to the Alternate text field and click OK.
Your image replaces the original image.
Resizing Pictures
All graphic images appearing in web sites usually come in two file formats: GIF, JPEG, and PNG. Expression Web can convert many different types of graphic images into either of these file types.
The replaced picture |
If the size of the inserted picture is large, you may want to make its size smaller. |
|
|
|
To resize the picture |
|
Select the image by clicking on it. |
|
You will see sizing dots at the corners and sides of the image. Move your |
|
mouse pointer over the right bottom dot. The pointer will turn into a two- |
|
headed arrow. |
want a transparent image animated image, then you
need to use:
30 Chapter 2
Click and hold your mouse button, then drag your mouse to change the size of the image. Keeping pressed Shift key while dragging will constrain the proportions of the picture.
or
Double click the picture. The Picture Properties dialog box opens.
Click the Appearance tab and specify a size value for the Width of the picture in the Size section.
Specifying size of the picture
The Keep aspect ratio keeps the height and width of your picture in proportion. Although you change only the width of the picture, the height of the picture will also be changed since the Keep aspect ratio option is checked.