Adding links to other pages?

1,378 views
Skip to first unread message

hall....@gmail.com

unread,
Sep 30, 2013, 11:03:00 PM9/30/13
to gwd...@googlegroups.com
Hey guys, complete newby here. Wanted to get started with some developing and thought this might be a good place. How in the world do I add a link to another page I'm "creating?"

Thanks,
Hall

Valerio Virgillito

unread,
Oct 1, 2013, 12:25:28 AM10/1/13
to gwd...@googlegroups.com
Hi Hall,

Currently if you are creating HTML pages, you have a few different ways you can do so. First there's always code view where you can manually add links to other pages, otherwise within Web Designer you can use the text tool create hyperlink dialog to turn text into a like to a different page. 
Since we don't have the notion of a project right now, you will have to know the name of the page you want to link. 
Now if you are working with an Ad, then you can use pages.

We are definitely looking into improving this workflow for HTML pages but at the same time balance it with the use of SPA (single page applications). Suggestions of comments are welcome :)

Thanks,
Valerio Virgillito

calebg...@gmail.com

unread,
Oct 2, 2013, 10:22:55 PM10/2/13
to gwd...@googlegroups.com
At the moment, do all hyperlink have to be blue?

jonniegr...@gmail.com

unread,
Oct 3, 2013, 10:52:56 AM10/3/13
to gwd...@googlegroups.com
I don't see why not, Cale.

It's surely just a case of styling the link usign your CSS properties. Even if it's just typing in your pseudo selectors manually.

Eric Guzman

unread,
Oct 3, 2013, 4:29:01 PM10/3/13
to gwd...@googlegroups.com
Hi,

Thanks for your interest and feedback. Here's a little bit about creating links, linking to other .html documents, and using CSS to style all <a> tags.

Creating Links

You can create and edit links using the Text Tool, including their text color. With the Text Tool activated, click on the element to make it editable. Now select the text you would like to convert into a hyperlink and click the "Create hyperlink" button on the Text Toolbar. You will see this dialog:


Linking your other documents

To link to another .html document that you've created, simply type in the path and/or file name in this field. In the above case, the user is linking to an .html document that is in the same directory as the current document and is named "page2.html".


Styling <a> tags - Using CSS rules

As was pointed out, you can easily add a default color for all anchor tags by adding some minimal CSS.

Using the CSS panel, with your element selected, 
  • Click the "+" icon (or, Add Rule button) to create a new rule.
  • Change the selector field to contain "a" and press Enter.
  • Type in the property, in this case, "color" and press Enter.
  • Type in the value, in this case, any color you would like, such as "green".

Now all <a> tags will have the text color green.

Check out this screen shot after I've added a rule so that all <a> tags get a light blue color (or, rgb(111, 171, 255);





John Moss

unread,
Jul 6, 2015, 2:37:36 PM7/6/15
to gwd...@googlegroups.com
I tried this but I get a little yellow question mark ahead of the a and it says "Rule does not apply to selection". If I select a it highlights my link with a red box though. Not sure what's going on.

Eric Guzman

unread,
Jul 6, 2015, 4:13:17 PM7/6/15
to gwd...@googlegroups.com
Hi John,

It sounds like you may have double-clicked the element, which makes it the current container (and adds a red outline around it).

That should be OK. The rule you entered for "a" (for "anchor") tags should still work. Try changing the color value to other supported color values (using the CSS Panel, or in Code View). Here's a link describing browser supported color values: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value. If the color updates in GWD after changing it, then you're controlling hyper-link color with a CSS rule that applies to all hyperlinks.

It should also be mentioned that you can always change a specific link's color by selecting it (blue outline), and changing it's text color using the color chip in the Text Toolbar.

Hope this helps,
Eric

Svein-Tore Narvestad

unread,
Apr 3, 2016, 12:04:23 PM4/3/16
to Google Web Designer beta
Hie Eric!

You are wrong.  I have also tested this, I press the element once, type in a, but I get this yellow questiona mark saying Rule does not apply to selection.  BTW adding i.e.

a {
  color:blue;

In the code view works fine.  


So a better way to do this is to create a new class and add this to alle a-tags who want it.

Svein-Tore
Reply all
Reply to author
Forward
0 new messages