Play Demo 
In Microsoft Office FrontPage 2003, the new Split view
gives you simultaneous complete control over both the design and the code of your Web pages.
In previous versions of FrontPage, you had to bounce back and forth between your
design and code. Well, bounce no more. As you work with the design in Split view, you see the tags updated in the code. If you prefer to edit the code in Split view, one click shows your changes in the design. Save time, save work. This Split decision is a knock-out.
Note For screen reader text detailing the onscreen actions and a screen reader version of the audio script, click Demo text version.
Demo text version
| Screen Action |
Audio Script |
|
FrontPage is open, showing the home page for a soccer company in Design view. The pointer selects the
soccer sportswear text and clicks the Highlight button. The text acquires
a yellow highlight.
|
Does this sound like you? You’re spicing up a Web page so that it looks more interesting. For example, you’re highlighting text like this to catch people’s eyes.
But then you realize you’d like to know what’s happening with the HTML.
|
|
The pointer clicks the Code button. FrontPage shows the code for the page.
|
In previous versions of FrontPage, you’d have to go to a view like this. That still works. But now there’s a cool new way to do it.
|
|
The pointer clicks the Split button. The Split view appears, with the Code pane at the top and the Design pane at the bottom.
|
Behold: Split view—new in FrontPage 2003. It shows you both the design and the code at the same time in two separate panes.
|
|
The pointer selects soccer sportswear
in the Design pane, and the Code pane highlights the code for that text.
|
And check this out: When you select something in the Design pane, the Code pane automatically identifies the code for that item. This is great: no more hunting through the code for the part you need.
|
|
The pointer scrolls through the code and selects an <img> tag in the Code pane. The Design pane scrolls and identifies the image by selecting it and showing its sizing handles.
|
You can also find things the other way around. For example, here’s an image tag in the code.
But what’s it for? Click the tag in the Code pane, and the Design pane scrolls and identifies the image.
|
|
In the Design pane, the pointer selects the word extremely
and clicks the Bold button. In the Code pane, <b> and </b> tags appear around that word. The pointer then clicks the image of the soccer ball in the Design pane, and a line of code is highlighted in the Code pane. The pointer clicks the Align Left button.
The design changes, and the Code pane adds
align="left".
|
And that’s not the half of it. You can also edit in Split view. Make this text bold, and the tags appear in the code automatically. Maybe change the alignment for this image.
There! You see the result of your changes in the code, without having to switch between views. And this works from the Code pane as well.
|
|
Two lines down in the Code pane, text is entered after a <p> tag saying
class="mystyle".
The pointer clicks the Refresh button, and the Design pane shows the style change.
|
Apply a new style to this p tag,
click Refresh, and the Design pane shows the change. Imagine how easy this makes previewing your code changes.
|
|
The pointer clicks the Design button. Split view closes, and Design view appears, showing all the changes made during the demo. Next the animated text Experience Your Own Great Moments appears. Under it appears the static text For more information, followed by a URL: http://www.microsoft.com/office.
|
From designing pages, to controlling your code, it’s all a lot easier with FrontPage 2003.
|
United States
Problems watching the video? Try our troubleshooting tips.
Email this link
Printer-Friendly Version
Share
Hide All
