Navbars.pdf

(1580 KB) Pobierz
05 BC Using Theme Graphics and the WebPlus Gallery
Getting Started
1
Navigation Bars
Having fantastic content on your website is useless unless your
visitors can get to it! This makes a navigation bar an essential
item. Luckily, WebPlus includes a wide range of professionally-
designed and fully-customizable navigation bars for you to use.
In this exercise, you’ll learn how to:
Work with master page elements.
Add, replace and customize navigation bars.
Add multiple navigation bars and a sitemap.
If you’re unfamiliar with website structure,
we suggest you review the basic concepts
before beginning this tutorial. See Understanding
site structure and navigation in online Help or the
Site Structure tutorial.
690945122.020.png
 
2
Getting Started
Navigation Bars
Navigation Bars
Navigation bars are essential to successful site navigation. Your visitors
would be lost without them! You can create a simple navigation bar by
creating a line of plain-text hyperlinks on every page, which link to the
main pages of your website. However, these can look a little uninteresting
and can be time consuming to set up, especially if you make changes to
your website. Luckily for us, WebPlus has a whole host of professionally
designed dynamic navigation bars for us to use, and the process is easy.
We’ll begin by replacing one of the navigation bars in a design template.
To replace a navigation bar on the page
1 From the Startup Wizard , click Use Design Template .
2 In the Interest category, click the Reactive template and click Open .
The template
opens in the
workspace.
Notice the
navigation bar at
the top of the
Home page.
Normally. The
main navigation
bar is shared by
all of the pages
on a website. As
a result, the
navigation bar is
usually placed on
the underlying
master page. This means
that you only have to place
the navigation bar once,
even though it appears on
each page. Let’s look at
this now.
3 At the top of the Site tab, click the
Master Pages button to display the
master pages for the site, a nd then,
double-click the Master A icon.
690945122.021.png 690945122.022.png 690945122.001.png
Getting Started
3
Navigation Bars
4 On the Master page, click to select the existing navigation bar and
press the Delete key.
5 On the Web Objects toolbar, click Insert Navigation Bar .
6 In the Navigation Bar Settings dialog:
From the Type drop-down list, select Designer (JavaScript) , and
then select the second design in the pane.
Click OK to accept the default settings.
7 Drag the new navigation bar into position next to the ‘Search’ box on
the page.
8 Click Preview Site in {your
browser of choice} . Notice that
the navigation bar has updated
throughout the site, even though
we only changed it once, This is
because it is placed on the master
page.
If you click on the different page menu items, you’ll notice that the
navigation bar’s appearance will vary depending on which page you're
viewing.
To replace the navigation bar
1 On the Site tab, double-click the Master A icon to display the master
page.
690945122.002.png 690945122.003.png 690945122.004.png 690945122.005.png
4
Getting Started
Navigation Bars
2 Right-click on the navigation bar object and click Edit Navigation
Bar... (You can also double-click the navigation bar to edit it.)
3 In the dialog:
Click the Type tab and select the Create New Navigation Bar
option.
Select a Type from the drop-down list (e.g., Designer (Flash) ).
Choose a navigation bar style and click Select.
The navigation bar is updated throughout the site with the new style.
4 Click Preview Site
in {your browser of
choice} to see the effect.
Creating your own style
Now let’s customize one of
the pre-designed navigation
bars to create the navigation
bar used in the Workspace
scuba.wpp site. First of all,
we need to delete the existing
navigation bar.
To prepare the Workspace file
1 On the Standard toolbar, click Open .
2 Navigate to the Workspace folder and click to select the scuba.wpp
project file. In a typical installation, this folder is found in:
C:\Program Files\Serif\WebPlus\X4\Tutorials
3 Click Yes in the dialog to open as a new, untitled site.
690945122.006.png 690945122.007.png 690945122.008.png 690945122.009.png 690945122.010.png 690945122.011.png
Getting Started
5
Navigation Bars
4 Click File > Save As... and save your new file under a new name.
5 On the Site tab, double-click the Master A icon to display the master
page.
6 Select the navigation bar and the object underneath it, and press the
Delete key.
We’re now ready to recreate the navigation bar.
To create the gel navigation bar
1 On the QuickShapes flyout, click the Quick Rectangle and then
click and drag on the page to create a rectangle like the one below.
Drag the left node down to round the corners.
On the Line tab, in the line style drop-down list, select None .
2 On the Tools toolbar, click the Fill Tool .
On the context toolbar, select Linear in the
Fill Type drop-down list.
In the Fill Start drop-down list, select swatch
5 on the Scheme 2 row.
In the Fill End drop-down list, select swatch 8
on the Scheme 4 row.
Adjust the fill path by clicking and dragging the
fill path end node to the top of the shape, and
the fill path start node to the mid-point.
To add a navigation bar
1 On the Web Objects toolbar, click
Insert Navigation Bar .
690945122.012.png 690945122.013.png 690945122.014.png 690945122.015.png 690945122.016.png 690945122.017.png 690945122.018.png 690945122.019.png
 

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin