Creating Page Layouts and Publishing a Web Site


Student Learning Outcomes:

1. Identify page templates and site templates
2. Define the CSS box model
3. Use a Dynamic Web Template
4. Edit a Dynamic Web Template
5. Create a document using a template layout
6. Manage the editable regions of a dynamic web template
7. Format a page to adopt a template design
8. Publish a page to a local web site.

Important Points:

1. a Site template is a developed web site that you can customize for your own purpose.
2. A page template is an existing web page layout that you can modify.
3. a style template is an already created CSS style sheet that is ready for you to attach to a web page. 

4. The CSS box model establishes a web page layout buy creating rectangular or square regions for content.
5. Dynamic Web Template is an xhtml base master copy of a web page that can be used to create settings, formatting, and page elements.
6. Editable regions areas where the content can be changed.
7. New web site using dynamic web template:
a. Click file on the menu bar and point to new, then click web site.  You will see:
New Dialog box
b. Select Templates You will see:

Template List for web site

c. Select the template you want.
d. click in the specify the location of the new web site and type in the location or browse to it.
e. click ok, after a few minutes the folder list will be populated with

8. To view site settings, click site on the menu bar then click site settings:  You will see:

Site setting dialog box

a. here you can change the web site name and other advance settings.

9. Editing a dynamic web template. In the folder list double click master.dwt. to open it. You will see:

Master dwt

a. Here you can make changes to the page layout by editing a style in the layout.css file.  To do so:
b. open the manage style task pane
c. right click a style
d. click modify style from the shortcut menu
e. edit the style in the modify style dialog box.

10. To attach a dynamic web template to a new page.  click format on the menu bar, point to dynamic web template, click attach dynamic web template.

Attach Dynamic Web Template

a. type in master in the file name box and click open. You will see:

Match editable regions dialog box

b. click ok you will see:

alert that dwt has been attached

c. If you modify the dwt and save it you will see:

Alert that modified dwt will be update to files

11. Template layouts - predefined page layouts tat will create page divisions for you using <div></div> tags. Each division can have separate content.
a. click file on menu bar, point to new, then click page.  You will see:

layout templates css

a. Click on CSS layouts, select the layout you want and click ok.  Two files will be created:  Untitled_1.css and untitled_1.htm
b. click on the untitled_1.css and go to code view you will see:

Code for untitled_1.css
c. click on untitled_1.htm and go to code view you will see:

code for untitled_1.htm


12. importing files:  click file on menu bar, point to import, click file.  You will see:

Import dialog box

a. click on add file.  you will see:

Add file to import list

b. Navigate to the file or files you want and select them.  Click open-  you will see:

Import files with attached files

c. click Ok, and the files will be added to the web site.  Press F5 to refresh the folder list in the web site.

13. Copy and past content from one web page to another.
a. Select content to be copied by dragging mouse, control-a if you want all the content or hold your shift key down and use arrow key to select content.
b. Control-C to copy or right click, click copy.
c. Put cursor where you want content to be copied in web page.
d. Control-V or right click, click paste.

14. Create a new division- enter the content, select the content for the division, click the <div> button in the toolbox task pane, right-click and then click wrap.

15. Creating a dynamic web template -
a. on page that will become the dwt delete all text that will ben in editable regions
b. click file on menu bar then save as.
c. click the save as type list arrow.
d. click dynamic web template
e. click save.

16. Creating an editable region in the dwt.
a. right click the area of the dwt where you want an editable region.
b. Click manage editable regions You will see:

Editable regions dialog box

c.enter a name for the editable region and click add.  You will see:

Editable Regions with name added
d. click close and save the file with a name.dwt

17. Publishing a web site - transferring your file from the hard drive to a web server. Expression web keeps track of which files have been published, where they have been published, and the date the files were published.
a. Click file on menu bar, click publish site - you will see:

Remot web site properties

b. FrontPage Server Extensions- select this option if you are publishing to an IIS server. 
you will see:  Type in the remote web site location in the text box or browse to it.

Romote web site frontpageserver

c. File system - select this option if you are publishing to a folder on your computer or the network server.
you will see:  Type in the folder location in the text box or browse to it.

remot web site file system

d. click browse and you will see:

New publish location

e. Once you identify the new publish location click open or ok.
You will see:

Publish romote and local

f. Local to remote - publish from your hard drive to a remote location.
g. Remote to local - publish from you server down to a local site
h. synchronize - transfer files from the remote that are new to the local and transfer files from the local that are new to the remote.
i. view your remote web site
j. Open your remote web site in expression web.
k. Publish web site- click on this to publish after you have selected the appropriate site.


Best Practices: