Editing Text is the most problematic of the feature tested thus far.
Read the preceding two blogs as this blog will make more sense after you have read them.
When first creating text all tested functions of text work fine but upon editing there are a number of bugs and the following are the work a-rounds we used to polish and finish adjusting http://chefleez.com to a central position and 700 px wide using Google Web Designer.
Positioning and Size of containment boxes - see related blog
Adjusting sizes of text.
Centering left aligned text.
Changing color of specific items
Chef LeeZ - work a-round for editing the above is follow the steps below in the specific order and you will have less frustration and accomplish what you are after. First step is to create a copy of the page that you are about to edit so you can always go back to it to if necessary.
1) select the individual text box
2) select the text tool (the T in a box on the left hand tool bar drop down) and click inside the selected box) click again at the start of the text.
3) ctrl A to select all
4) ctrl C to copy all
5) click on the outside edge of the box so as to create a light blue line defining the selected box
6) click your delete (del) button to remove the box and contents (don't worry you can undo many steps backwards)
7) starting from the top most left corner of where you want the new box is to begin, with the text tool still selected , you will see a + sign align with other boxes. To begin the new box right click, hold and drag the outline to the desired size and end location. Let go when positioned and sized (you can always edit this later see position and size blog to edit).
8) Click inside the new box, select your text position now (from text tool bar options top of screen), left, center, right).
9) Ctrl V to paste the last saved text into the new box.
Save Project
10) immediately go about highlighting individual text for sizing and or changing colors
11) After sizing the highlighted text click anywhere inside the box (not outside the box) and your adjustment should be visible. If not try your return or enter key.
Save project
Correcting or changing hyperlinks on text requires locating the link info in the code and changing it on the code and you will have the change on the preview.
Editing text in Google Web Designer beta 1.0.1 is still extremely BUGGY! but the above work a-round, once we discovered, it has greatly reduced the time required to build and especially to edit Chef LeeZ Google Web designer built, cross platform, HTML5 website. http://chefleez.com
Note: when editing long pieces of text we found it necessary to save the project after every color change and close the page and reopen it. We also found that following many of the change saves the screen view is corrupted showing text as having been deleted. Reopening the saved file will prove if the changes were saved or if you have to repeat the last edit over again.
Wednesday, November 27, 2013
Google Web Designer; Editing Position and Size
If you read basic design and set up before reading this blog, this blog will make more sense.
Let's talk of placement of your containment box as the first edit and you will find on the right hand side of your work area a drop down set of controls and therein is a POSITION AND SIZE tab and visible when this tab is open is where you can set the size and the position of the selected object containment box (frame). Do pay attention to your rulers for guidance as to where to set the Left, Top, Width and Height of the containment box.
Left: a setting of zero is farthest left edge of page
Top: a setting of zero is the top edge of the page
Width: this sets the farthest left the box and contents can stretch across
Height: sets the distance down from the top of containment box
Using the Position and Size controls to adjust your contents location on a page is much more accurate, easier and quicker than the drag and drop alternative.
When moving all the contents together as one you must first select the select/move arrow (top left drop down control option) then you can "ctrl A", to select all, then adjust the POSITION and SIZE controls all contents basic left, Top, Right and Bottom locations. If you want all except one two containment boxes you can select all then Ctrl Click to deselect specific boxes within the select all grid shown.
When moving more than one but not all objects with the selection move arrow selected drag the dotted line created by shift drag through the boxes you wish to select and let go of the drag selection then adjust the POSITION and SIZE numbers for the selected containment boxes.
Let's talk of placement of your containment box as the first edit and you will find on the right hand side of your work area a drop down set of controls and therein is a POSITION AND SIZE tab and visible when this tab is open is where you can set the size and the position of the selected object containment box (frame). Do pay attention to your rulers for guidance as to where to set the Left, Top, Width and Height of the containment box.
Left: a setting of zero is farthest left edge of page
Top: a setting of zero is the top edge of the page
Width: this sets the farthest left the box and contents can stretch across
Height: sets the distance down from the top of containment box
Using the Position and Size controls to adjust your contents location on a page is much more accurate, easier and quicker than the drag and drop alternative.
When moving all the contents together as one you must first select the select/move arrow (top left drop down control option) then you can "ctrl A", to select all, then adjust the POSITION and SIZE controls all contents basic left, Top, Right and Bottom locations. If you want all except one two containment boxes you can select all then Ctrl Click to deselect specific boxes within the select all grid shown.
When moving more than one but not all objects with the selection move arrow selected drag the dotted line created by shift drag through the boxes you wish to select and let go of the drag selection then adjust the POSITION and SIZE numbers for the selected containment boxes.
Tuesday, November 26, 2013
Google Web Designer; Tips for Initial Design
Chef LeeZ, learned of the existence of Google Web Designer "GWD" from one of the near 300 social networks Chef LeeZ is a member of. Yup, you can Chef LeeZ on near 300 social networks. Check your favorite and follow or friend us and let us know the URL of your favorite site you don't find ChefLeeZ.
Prior to GWD our websites were built using (MS Publisher) but they discontinued its related WYSYWYG (what you see is what you get) website part of the product and over the past 2 years Chef LeeZ has looked at and tested more than a dozen free WYSYWYGS rejecting all of them for one or more reasons. We were immediately pulled into building a test site using GWD as GWD was promoted as a FREE CROSS PLATFORM HTML5 WYSYWYG.
It is important to understand GWD is a beta project which means its not for everyone as it is expected its users will find the bugs and report them so they can be added to a priority list of necessary fixes. This blog is about what we discovered as work a-rounds for the bugs we found, and there are lots of bugs right now, which resulted in what you see as a GWD website for http://ChefLeeZ.com. and http://KruzOn.com.
The mobile device functionality of the new GWD sites were reviewed in Portland U.S.A on a Motorolla phone, from inside Canada on a I-Phone, and from inside Thailand on a Samsung Galaxy all having 5 inch or less screens so as to check the cross platform functionality. GWD is not, out of the box, cross platform! It takes some muckin around to make it cross platform. We'll save you some time if you follow what Chef LeeZ did below to make GWD work cross platform.
Three other sites we have scheduled to rebuild with GWD were built with MS publisher are http://CookingSchoolsIntl.com, http://ThaiCookingSchoolBKK.com, http://xoproperty.com.
General Page layout:
First step will be to select the HTML option mid way down on the GWD menu options.
So lets start with a General or Template page design statement. We followed the basic design of Facebook, Twitter, and many many others being put the content in the middle and leave the sides blank for later design input. After many hours of muckin around we found that a left border of 150 px with a right border of 850 px worked on all platforms: internet explorer, Google chrome, smart phones and androids o/s above 4.0.
We recommend setting up with the default text size of 16 px and enlarge only where the text will have a minimum of 7 px to spare on the right margin so as to avoid overlapping texts on smart phone screens.
We adopted a basic two column site the first column starting at zero top and 150 left, the second column start left at 300 px but remember this is a WYSYWYG and you are not restricted by a static two columns so you will see text boxes on our sites that are a full 700 px wide while the text boxes following a two column concept will start at 300 px or 302 px (if beside a heavy picture like a logo) and be 550 px or 548 px wide depending on what they are up beside having a left margin 300 px.
Once you have your basic info input you will come up against the next biggest bug filled challenge and that is editing the content and EDITING GWD WEBSITES is the subject of our next post.
All this thinking makes me hungry for gourmet Thai cuisine. Chef LeeZ offers over 60 free vegan or meat gourmet Thai cuisine recipes and how to tutorial videos. Visit us and taste the difference.
Prior to GWD our websites were built using (MS Publisher) but they discontinued its related WYSYWYG (what you see is what you get) website part of the product and over the past 2 years Chef LeeZ has looked at and tested more than a dozen free WYSYWYGS rejecting all of them for one or more reasons. We were immediately pulled into building a test site using GWD as GWD was promoted as a FREE CROSS PLATFORM HTML5 WYSYWYG.
It is important to understand GWD is a beta project which means its not for everyone as it is expected its users will find the bugs and report them so they can be added to a priority list of necessary fixes. This blog is about what we discovered as work a-rounds for the bugs we found, and there are lots of bugs right now, which resulted in what you see as a GWD website for http://ChefLeeZ.com. and http://KruzOn.com.
The mobile device functionality of the new GWD sites were reviewed in Portland U.S.A on a Motorolla phone, from inside Canada on a I-Phone, and from inside Thailand on a Samsung Galaxy all having 5 inch or less screens so as to check the cross platform functionality. GWD is not, out of the box, cross platform! It takes some muckin around to make it cross platform. We'll save you some time if you follow what Chef LeeZ did below to make GWD work cross platform.
Three other sites we have scheduled to rebuild with GWD were built with MS publisher are http://CookingSchoolsIntl.com, http://ThaiCookingSchoolBKK.com, http://xoproperty.com.
General Page layout:
First step will be to select the HTML option mid way down on the GWD menu options.
So lets start with a General or Template page design statement. We followed the basic design of Facebook, Twitter, and many many others being put the content in the middle and leave the sides blank for later design input. After many hours of muckin around we found that a left border of 150 px with a right border of 850 px worked on all platforms: internet explorer, Google chrome, smart phones and androids o/s above 4.0.
We recommend setting up with the default text size of 16 px and enlarge only where the text will have a minimum of 7 px to spare on the right margin so as to avoid overlapping texts on smart phone screens.
We adopted a basic two column site the first column starting at zero top and 150 left, the second column start left at 300 px but remember this is a WYSYWYG and you are not restricted by a static two columns so you will see text boxes on our sites that are a full 700 px wide while the text boxes following a two column concept will start at 300 px or 302 px (if beside a heavy picture like a logo) and be 550 px or 548 px wide depending on what they are up beside having a left margin 300 px.
Once you have your basic info input you will come up against the next biggest bug filled challenge and that is editing the content and EDITING GWD WEBSITES is the subject of our next post.
All this thinking makes me hungry for gourmet Thai cuisine. Chef LeeZ offers over 60 free vegan or meat gourmet Thai cuisine recipes and how to tutorial videos. Visit us and taste the difference.
Subscribe to:
Posts (Atom)