Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P16 pps

When you check the FrontPage Server Extensions option in the Remote Web Site Prop-erties dialog, you tell Expression Web 3 that the server you are publishing the site to has FrontPage Se

Figure 24.3 shows the FTP setup for the MyKipple.com site with the username blocked

out Note that the FTP protocol is specified in the prefix of the address, so the addressstarts with ftp:// instead of http://

Finally you have the option to turn on passive FTP if active FTP is not available

(Active FTP is often blocked by firewalls but you can normally get through using sive FTP.)

pas-Secure Shell File Transfer Protocol (SFTP/SSH)

In spite of what the name suggests, Secure Shell File Transfer Protocol is not regularFTP run under Secure Shell (SSH) but rather a file transfer protocol in its own right

Whereas FTP transfers all your file content and other data (including your usernameand password) in plain text between your computer and the server, SFTP transfers thisinformation under encryption making it extremely hard to intercept or exploit Thatsaid, for you, the user, there is no discernable difference between the two The setupfor SFTP is almost identical to that of FTP with the exception of SFTP not having theoption of using Passive FTP

Six Different Publishing Options 433

File Transfer Protocol over Secure Sockets Layer

(FTPS/SSL)

FTPS is an FTP protocol that uses a Secure Sockets Layer (SSL) for added security An

oversimplified explanation of the difference between SFTP and FTPS is that whereas

SFTP encrypts the data as part of the transfer protocol, FTPS adds a layer of

encryp-tion on top of the FTP transfer Another way to think of the difference is that SFTP

encrypts all the data to binary code before it is transferred whereas FTPS sends the

plain text data inside an encrypted connection that can be read only by the clients

and servers that share the same authentication key

As the name Secure Sockets Layer implies, FTPS employs a second layer of constant

challenging and verification of the authenticity of the transfer between the client and

the server For this reason FTPS works only with hosts that have a valid SSL certificate

and supports SSL And in many cases to get this service, you have to pay extra

Setup of an FTPS connection is identical to the setup of a regular FTP connection because

with the exception of the added secure layer, there is no difference between them

FrontPage Server Extensions

You were briefly introduced to FrontPage Server Extensions in Hour 21, “Working with

Flash and Silverlight,” when you used them to create an email form FrontPage Server

Extensions are a set of small programs that run on the web server and give you the

ability to add functionality (such as the ability to generate and send emails) to

web-sites More than that, they keep tabs on your files both locally and on the server to

ensure that elements such as hyperlinks are updated if a file is moved from one folder

to another, and so on They follow your web-authoring process to tell you what files

have been altered either by yourself or someone else on your team and whether the

files on your computer are newer or older than the ones on the server As the name

suggests, FrontPage Server Extensions were introduced with Microsoft’s old web design

program, FrontPage, and they have become common throughout web servers,

espe-cially those running Microsoft Windows Server software The name FrontPage Server

Extensions might be a bit confusing because you are actually talking about many

dif-ferent things: the extensions that run at the heart of the server, the extensions that

run independently inside your files (such as the email form functions), and the

exten-sions that run in your authoring program keeping tabs on your files and your work

When you check the FrontPage Server Extensions option in the Remote Web Site

Prop-erties dialog, you tell Expression Web 3 that the server you are publishing the site to

has FrontPage Server Extensions installed and that you want to use this technology to

To set up FrontPage Server Extensions as your upload option, select the option fromthe list, and enter your Remote Web Site location in the address box along with theusername and password, as shown in Figure 24.4.

You can use FrontPage Server Extensions as your publishing method only if your webserver supports this technology If it does not, you immediately get a warning mes-sage saying the current settings will not work, and you are directed back to the Con-nection Settings dialog where you can make a different choice

FrontPage Server Extensions Are on the Way Out

Despite their popularity, Microsoft has not supported FrontPage Server Extensionsfor some time For this reason, there have not been any security updates to thetechnology for several years, and many web hosts are now stepping away and dis-continuing their support for these scripts entirely If you plan to use FrontPageServer Extensions, it is imperative that you contact your web-hosting service tomake sure it is supported now and in the future

ptgSix Different Publishing Options 435

FIGURE 24.5

The error sage generatedwhen WebDAVfails can be mis-leading becauseWebDAV andFrontPageServer Exten-sions are mutu-ally exclusive

mes-Web Distributed Authoring and Versioning

(WebDAV)

WebDAV stands for Web Distributed Authoring and Versioning and is an extension of

the HTTP protocol that provides better security in the form of encrypted transmissions

(to keep your data secure), file versioning (to prevent files from being overwritten

when more than one person is working on them at the same time), and

authentica-tion Unlike FrontPage Server Extensions, which are add-ons, WebDAV is already built

in to your operating system to handle external links to HTTP addresses

Setting up WebDAV as the publishing method is done the same way as setting up

FrontPage Server Extensions: Simply select the WebDAV option and insert the

destina-tion address, username, and password Also as with FrontPage Server Extensions,

WebDAV has to be supported by your web server for it to work If it is not supported or

not turned on for your specific plan, you cannot access the server, and Expression

Web 3 generates an error message Unfortunately, this message causes a lot of

confu-sion because the first item on the list of possible reasons why the connection failed is

that the server does not have the FrontPage Server Extensions installed (see Figure

24.5) This suggestion is misleading because WebDAV and FrontPage Server

Exten-sions are mutually exclusive In fact if WebDAV fails, it could mean that FrontPage

Server Extensions is installed on the server and is blocking WebDAV If you get this

message, contact your web-hosting provider and ask whether WebDAV is supported,

and if so whether FrontPage Server Extensions is interfering with your connection

File System

The final option is to host your website in a folder on your local computer or in your

local network That option can also be used to place your files on removable devices

such as data discs, USB (Universal Serial Bus) keys, PDAs (Personal Data Assistants),

MP3 players, or any other storage device that can be connected to the computer Thatway you can bring the website with you without having to lug around your entirecomputer The file system option is frequently used when publishing to local networksand corporate intranets in which the web server is on the same network as the com-puter used

If you publish to a local drive, all you need to do is insert the folder name in theaddress bar If you publish to a local network location or a mapped drive, you need toinsert the Universal Naming Code (UNC) path for this location A UNC path lookslike this: \\myServer\sites

Example: Publishing Content Using SFTP

You now have a basic idea of what the six different publishing methods offer andwhen to use them After you select a preferred method, the actual publishing process

is the same The method that is most readily available and at the same time secure isSFTP; so in this example you see how to use SFTP to publish your website to an exter-nal web host

1 With the MyKipple site open, in Site view, click the Add publishing destinationlink in the middle of the window, or click Publishing Settings in the top-rightcorner, and under the Publishing tab press the Add button to open the Connec-tion Settings dialog

2 In the Connection Settings dialog, set the name to MyKipple SFTP

Connection Select SFTP; enter the destination address provided by your

web-hosting service If you publish to a specific folder, enter the folder name in theFTP Directory box

3 Under Credentials insert the username and password provided by your webhost Leave the Maximum simultaneous connections at 4 and click Add If youstarted by opening the Publishing Settings you need to click OK in the Publish-ing Settings dialog to complete the process

When you add the new connection, the blue link in the middle of the Publishing viewchanges to say “Connect to the current publishing destination.” Clicking this link logsinto your new connection automatically Depending on your Internet connection andyour web host, this initial login procedure might take a little bit of time, and while it

is working the control bar at the top of the Site panel will be blurred out

After successfully logging in, you are presented with a view like in Figure 24.6 withthe local website on the left and the remote website on the right The left column

shows all the files in the folder you defined as your website project in Expression Web

3 The right column shows all the files currently at the remote location you defined in

the address bar in step 2

Expression Web 3 uses icons to tell you about the status of the files in your local and

remote locations In front of every file is an arrow pointing right (file to be published

to the remote location) or left (file to be downloaded from the remote location), a

question mark (Expression Web 3 is unsure what to do with this file), or a red balloon

with an x in it (don’t publish this file) When you log in to your remote location for

the first time, all the files in your local view have an arrow pointing right because

none of the files are in the remote location yet

How you proceed from this point depends on what you want to achieve For example,

if you publish your entire site to the remote location for the first time, all you need to

do is press the blue arrow button in the middle going from left to right This sends a

copy of all your local files and folders to the remote location

Depending on how many files you have in your website, publishing the entire

web-site to a remote location can take quite a bit of time And it might look like

Expression Web 3 stalls in the process In general, publishing large sites to a

remote server is a test of patience, so I usually start the process and then leave

the computer to work on its own to avoid getting annoyed at how long it takes

Watch

Out!

If you have previously published files to your remote server and you have madechanges to only some of your local files, Expression Web 3 inserts the arrow icons ononly the files that have been changed, and you can use the same option as before tooverwrite the old files on the remote location with the new ones

If files on the server have been changed since you last uploaded them, ExpressionWeb 3 signifies that by attaching an arrow pointing to the left to the files in theremote location This usually happens if you or a colleague uploads new files from adifferent computer or if someone made changes to the file directly on the server Totransfer these files from the server to your local computer, you simply click the arrow

in the middle pointing left

In some cases, alterations have been made to both local files and remote files If that

is the case, you can use the Synchronize files button in the middle column (the onewith two arrows pointing in opposite directions) Use this function with cautionbecause sometimes even though the files on the server are newer than the ones inyour local folder, they might not be the ones you want to keep, and you could inad-vertently overwrite important files in your local version of the site

In addition to using the publishing options from the menu, you can also drag anddrop files and folders between Local and Remote view This is actually an effectiveway to perform targeted updates and give you detailed control of which files arelocated where

You often find that your local folder contains many files that should not be put onthe remote location for different reasons For example, there is no reason to uploadthe Dynamic Web Template file to the server because it is functional only withinExpression Web 3 To prevent a file or folder from being included when ExpressionWeb 3 suggests files that should be uploaded or downloaded, right-click on the fileand select Exclude from publishing from the pop-up menu (see Figure 24.7) A redballoon icon is attached to the file, and it will be ignored in the publishing process

Advanced Publishing Settings

You can change the way Expression Web 3 handles local and remote files by defaultand configure the application to make changes to the files as they are uploaded This

is all done from the Publishing tab in the Site Settings dialog

Optimizing HTML

Under the Publishing tab you have an option called Optimize HTML during ing If you check this option and click the Customize button that becomes available,

Advanced Publishing Settings 439

FIGURE 24.7

To prevent a filefrom beinguploaded ordownloaded,right-click on itand selectExclude fromPublishing fromthe contextmenu

you are taken to the HTML Optimization Settings dialog From here you can instruct

Expression Web 3 to remove all or part of the nonfunctional code in your HTML

pages (see Figure 24.8) This option is available because both designers and

developers using Expression Web 3 tend to insert a lot of nonessential elements in

HTML pages to make them easier to understand Among these elements are

com-ments explaining the different sections, Dynamic Web Template comcom-ments, and

whitespace You can also remove code generated by the application The rationale

behind removing this content is usually to either reduce the file size to improve load

FIGURE 24.8

You can ure ExpressionWeb 3 to removeall nonfunctionalcode from yourHTML pages

Here is a quick rundown of each option:

. All HTML Comments—All HTML comments whether inserted by Expression

Web 3 or yourself will be removed HTML comments are ignored by the webbrowser and are visible only in the source code They always start with <! and end with >

. Dynamic Web Template Comments—In Hour 19, “Dynamic Web Templates,”

you learned that the editable regions in pages based on Dynamic Web plates are inserted with HTML comments These code sections relate only toExpression Web 3 and have no purpose outside the application

Tem-. Layout Tables Comments—When you use the Layout Tables function to create

layouts in Expression Web 3, the application includes comments to thesetables

. Script Comments—Expression Web 3 includes comments when inserting

JavaScript and other script elements in your HTML pages Likewise, it is mon to attach comments to scripts to help remember what they do

com-. All Other HTML Comments—This option covers all comments not covered by

the other categories and can be used to remove only the comments youinserted without touching the comments Expression Web 3 created

. HTML Leading Whitespace—The leading whitespace is the empty space

before the first character in each line

. HTML All Whitespace—In addition to leading whitespace, you can have

inline whitespace and empty lines

. Expression Web Tracing Image and Interactive Button Attributes—When

tracing images and interactive buttons are inserted into a page, ExpressionWeb 3 adds attributes to them for editing purposes (that is, allowing you toopen and edit the interactive buttons) These attributes relate only to Expres-sion Web 3 and have no function in a web browser

. Generator and ProgID Tags—The Generator and ProgID tags used to be

inserted in HTML pages to tell the browser what program was used to createand edit them This is not done by Expression Web 3 but can apply to pagesoriginally created in other web-authoring applications

Advanced Publishing Settings 441

All the changes made by the Optimize HTML options are applied as the files are

pub-lished to the remote location Your local files are not changed However, if you apply

any of these options and then later overwrite your local files with ones from the

remote location, all the content that was removed when the files were published will

be removed locally as well

The Publishing Tab

From the Publishing tab (see Figure 24.9), you can add, edit, or delete the publishing

destinations for the current siteIn addition, and you can tell Expression Web 3 to

publish subsites and generate a log file each time it publishes content

By default, only pages and folders contained within the main site are published by

Expression Web 3 But if you have subsites defined in your project that you want

published at the same time, you can check the Include Subsites option

When you open the Publishing view of your Site, Expression Web 3 makes an

edu-cated guess as to what files it thinks you want to replace in your local and remote

locations By default it does this by comparing the modified dates of the files in both

locations However, if you work on the remote files as a team, from several different

computers, or on the server itself, it can be almost impossible for Expression Web 3 to

know which file is the correct one

Finally, you can choose whether to let Expression Web 3 create a log file during

pub-lishing If this box is checked, an HTML page is created and stored in your

Tempo-rary Internet Files folder so that you can check to see that the publishing process

went according to plan

FIGURE 24.9

You can add,edit, or deletethe publishingdestinations forthe current site

To view the log file after publishing a site, click on the View Your Publish Log Fileoption under Status in the Publishing view This opens the log in your web browserfor you to inspect If you want to save the log file, select Save As under File in yourbrowser

At the bottom of the Publishing view panel there is a new section added in sion Web 3 that provides information about your publishing status This area liststhe Last publish status (whether files were published successfully, and if there wereproblems what they were) as well as last publish time and also provides a link thatsays “Open destination site in Expression Web.” This link opens the external site in anew instance of Expression Web 3 and sets it as the local site for that instance Thatway you can work directly on the files in the remote location as if they were on yourlocal computer

Expres-Summary

By following the tutorials in this book, you have created a basic website with a lot offunctionality The last step of any web design process is to publish the site so thatothers can access it and enjoy the results of your hard work That is when ExpressionWeb 3 goes from being a web design and authoring tool to becoming a file and web-site management tool

When your site is completed and ready for the world to see, Expression Web 3 offersyou six different methods for publishing your content, all with benefits and setbacks

Those methods are FTP, FTPS, SFTP, FrontPage Server Extensions, WebDAV, and filesystem In this hour, you learned what each of these options mean and when theyare used

There is no correct answer to the question “Which method should I use?” And aftersetup, the actual publishing and file-copying processes are the same regardless ofwhat method you choose

Expression Web 3 keeps tabs on what you do with your files in the program andmakes educated guesses about what files you want to publish to your site Even so,you can change these options either by selecting or deselecting files for upload orchanging the publishing settings You can also use the program to strip your HTMLfiles of nonfunctional content such as comments and whitespace All this is donefrom the Remote Web Site Properties dialog

In this hour, you learned how to set up your site in Expression Web 3 for publishing

to the desired location And with that you have reached the end of the road of theinitial design and deployment process But this is just the beginning When your

website goes live and you start getting visitors, you probably want to make additions

and changes to the site or build a subsite Now that you know how to use Expression

Web 3, you can apply the techniques you have acquired to build your knowledge of

HTML, CSS, ASP.NET, PHP, and all the other technologies available to you and make

informative and entertaining web experiences for the world to see

Q&A

Q I tried uploading my site to my web host using FrontPage Server

Exten-sions/WebDAV, but when I do, I get a warning saying that FrontPage Server

Extensions are not installed on the server What do I do?

A To use FrontPage Server Extensions or WebDAV as your publishing method,

they need to be installed and supported by your server Furthermore they are

mutually exclusive; so if you can use one, you cannot use the other The

warn-ing message Expression Web 3 generates is a bit confuswarn-ing because it tells you

there are no FrontPage Server Extensions installed even if you try to use

Web-DAV to upload your files If you get this message using either method, contact

your hosting provider and find out if either technology is supported with your

plan Most likely it is not, and you will be forced to use FTP as your method for

uploading content

Workshop

The Workshop has an exercise to help you put to use what you have just learned

Exercise

Because this is the final hour, and you are probably tired of answering questions and

doing exercises, I am giving you a challenge instead:

Take all the things you learned from reading this book and use them to create

your own fantastic website When you finish, submit it to the book website at

http://expression.pinkandyellow.com, and I will post it for the world to see

And last but not least, have fun!

ptg

BONUS HOUR 25

Beyond the Basics, Part 2:

Building a Site with ASP.NET

What You’ll Learn in This Hour:

How to use an existing ASP.NET site as a base to build a new site

How an ASP.NET master page works and how to edit it

How an ASP.NET web form or page works and how it relates to the

mas-ter page

How dynamic sites use source files to distribute content to different pages

How to use CSS and HTML techniques to modify an existing ASP.NET site

Introduction

In Hour 19, “Dynamic Web Templates,” you learned about Dynamic Web Templates

(DWTs) and how to use them to create an easily updateable website with a consistent

look Then in Hour 22, “Beyond the Basics, Part 1: PHP in Expression Web 3,” you got

a first glimpse of how server-side scripting can be used to create websites with highly

advanced dynamic content and interactivity Now you put the two together to make

a website controlled by a master page layout filled with dynamic content

Even though Expression Web 3 comes equipped with script support and basic tools

for PHP authoring, it is nothing compared to what the application offers from

Microsoft’s server-side script language, ASP.NET Expression Web 3 is built around

ASP.NET and offers extensive and unprecedented authoring and deployment tools

and support for novice and advanced users

As with PHP, the core concept of ASP.NET is to leave the generation of the content of

the page to the server so that the designer or developer needs to do only minimal

reg-Because building an ASP.NET-based site from scratch requires a relatively high level

of programming know-how and skill, rather than building it from scratch you use aprebuilt site provided by Microsoft to learn about ASP.NET and how it works

To run an ASP.NET website, you need a server that supports this scripting guage In other words, your site needs to be hosted on a Microsoft server Beforeyou start working with ASP.NET, it is vital that you ensure that your server supportsthis language; otherwise, you are wasting your time

lan-Getting a Jump Start by Using a Starter Kit

Building ASP.NET applications from scratch can be quite intimidating for a novice Tohelp with the learning process, Microsoft has created a set of Starter Kits that you candownload from the Expression website The kits contain fully working and fully cus-tomizable sites that utilize both regular and advanced scripts to create highly func-tional and great-looking sites In this hour, you use the Design Portfolio Starter Kit toget a better understanding of what ASP.NET is and how Expression Web 3 can helpyou build sites employing this technology in a fast and efficient manner, even with-out a firm understanding of the code language

Try It Yourself

Downloading and Installing the Starter Kit

The Expression website features learning tools such as videos, articles, tutorials, anddownloads to help you start to use the different applications in the Expression Suite

For Expression Web 3, the Starter Kits can be a great help when taking your first stepswith ASP.NET

1 In your web browser, go to http://expression.microsoft.com, click on the Learntab, and select Starter Kits If you can’t find the page, use this link:

http://expression.microsoft.com/en-us/cc188682.aspx

2 From the Starter Kits page, select Expression Web Starter Kits and download theDesign Portfolio Starter Kit to your computer