Drupal Prfile Sites fr Faculty, Staff, and/r Administratrs WYSIWIG Editr Hw-T Drupal prvides an editr fr adding/deleting/editing cntent. Once yu access the editing interface, the editr prvides functins that shuld be familiar t yu if yu have used Wrd, ther editing sftware, r ther cntent management systems. Lking at the arrangement f icn buttns beginning frm the left, the editr has buttns t create bld text (B), italic text (I), underscred text (U), strike-thrugh text (S), align left, align center, align right, justify, bulleted list, numbered list, decrease indent, increase indent, und, red, link, unlink, anchr (t create a link t a place n the page, as ppsed t anther page, smetimes called a jump link), insert picture, superscript, subscript, blck qute, page surce (t view the HTML), insert hrizntal line, paste as plain text, (n the secnd rw in the screen sht) paste frm Wrd, shw blcks, remve frmat. Remving frmatting When pasting in text cpied frm ther surces such as Wrd, emails, web pages, etc. the text will cme with sme frmatting that gets cpied behind the scenes. The paste as plain text, paste frm Wrd, and remve frmat functins can help t remve unwanted frmatting. Heading tags and accessibility When yu arrive fr the first time at a page, yu are likely t scan the dcument t get an verview f the page. This will help yu decide if yu want t stay and where yu will want t start reading. Visually disabled users wh use screen readers t access dcuments will want t d the equivalent. By making use f heading tags, they t can get a scan f the page. They can chse t hear all the headings first, r they may jump thrugh the page by advancing t the next heading. If yu have a fair amunt f cntent that des nt have any headings, the screen reader user may have a hard time reviewing cntent when ging back t review, as the dcument r page is nt very navigable. The user will nt have the ability t tab arund the page easily t find r preview cntent. Heading level hierarchy Pay attentin in particular t what heading styles are brught ver. When cpying, it is imprtant t stay within the heading style numbering scheme that is already in play n SRJC Drupal sites. There are Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6 tags that can be used in the HTML behind the scenes. The numbering needs t reflect a hierarchy that fits with the cntent, and with the headings already assigned n the page. This is imprtant fr accessibility cmpliance and increases semantic value, which may affect search engine ptimizatin (helping search engines index and display yur site in searches). V2 published May 17, 2016 1
The drp-dwn menu fr Paragraph Frmat is lcated directly under the icn buttns. Ntice in the screen sht that the first heading available is a Heading 3. That is because Heading 1 and Heading 2 have already been applied t yur page. If yu cpy text frm ther surces that bring ver frmatting, yu may end up with a Heading 1 r Heading 2 in yur cpied text. Using ne f the remving frmatting ptins will remve the heading tags, allwing yu t assign the crrect tag frm this drp dwn. Adding/Editing Hyperlinks Creating and mdifying links is as easy in Drupal as in Wrd. Highlight the text, use the link icn (chain) t add a link, the unlink icn (chain with an x) t remve a link. Check yur links carefully, it is ne f the first signs that yur site is ut f date and can affect the viewer s perceptin f the cntent s relevance. Accessibility Cmpliance f Hyperlinks There are a few imprtant cnsideratins when creating hyperlinks: Make unique, descriptive hyperlink text. Never make mre than ne link n a page have the same hyperlink text but g t different lcatins. (e.g. tw links that say "Read Mre", but g t different pages). Yu shuld elabrate, and describe in the active hyperlink text where the viewer is ging. D nt use uninfrmative link text such as "Click Here" r "Click Fr Details" r "Read Mre". Yu want t prvide mre infrmatin abut the linked cntent, such as "Read mre abut cute kitties." Make links as cncise as pssible while still being infrmative. Dn't make a whle paragraph be a link. Dn't make yur link area t small, such as ne very shrt wrd, in cnsideratin f thse with mbility issues. Avid URLs as the hyperlink text, unless the URL is shrt. It is very tedius t listen t a lng URL be read by screen readers and they lk bad n the page. Many peple still hang nt the practice f putting the URL in as hyperlink text because f the cncern f thse that print the page will end up with n knwledge f the URL. When printing frm the later versins f Chrme and Firefx, the link URL is printed as well. If yu d want t use the URL yu wn t have t add the hyperlink separately because Drupal recgnizes URLs and adds it fr yu, yu will see it nce yu hit Save. D nt have empty links. This can happen behind the scenes in the HTML when deleting linked text. Smetimes the link tag remains, thugh empty. In mst cases, yu shuld nt have yur links pen t a new windw, as this can be cnfusing fr the screen reader user. There are cases where yu still might want t d this, cnsider ntifying the viewer. Email Links Email addresses will autmatically appear as links nce yu hit Save, but here is the prcess t d it manually: In the Editr, highlight the text that will becme the link Click n the Link icn In the Link dialg bx, change the Link Type drp dwn t E-mail In the E-Mail Address field, input the email address The Message Subject and Message Bdy are ptinal V2 published May 17, 2016 2
Linking t Dcuments such as PDFs and Wrd dcs Linking t dcuments invlves uplading the dcument t yur site files and creating a link t it. Fr thse migrating existing sites t Drupal, be careful nt t link t the PDF where it currently lives n the server. When cpying and pasting existing text frm yur current site, the links may remain intact and yu may think that yu have successfully cmpleted the text migratin. Yu will need t uplad the dcument and change the link r when yur ld site files are remved, yur links will break. Fllw these steps when linking t a dcument: 1. In the Editr, highlight the text that will becme the link a. Make sure the text is descriptive f what yu are linking t b. It is a best practice t include the type f file in the link (PDF r Wrd dc) 2. Click n the Link icn 3. In the Link dialg bx, click n the Brwse Server buttn 4. In the File Brwser dialg bx that pens, yu can select a PDF that is already upladed OR 5. Click n the Uplad buttn in the upper, left f the brwsing dialg bx 6. Click n the Chse File buttn 7. In the brwsing dialg bx that pens, brwse t yur dcument yu want t uplad and select it 8. Select the Uplad buttn 9. The file will uplad and becme highlighted in the list f files 10. Back at the tp f the File Brwser dialg bx, select the Insert File buttn 11. Back in the Link dialg bx, make sure the drp dwn under Link Type is set t http:// Accessibility Cmpliance f PDFs Effrt shuld be made t make accessibility cmpliant PDFs. I.T. will be arranging accessible PDF trainings fr staff in the future. Tables Create data tables in the Drupal editr by accessing the table icn. Style sheets behind the scenes style tables by default t have black text n alternating rws f light gray and white with a 1 pixel brder arund the table. Text size is set t be smaller than bdy cpy, althugh if a user sets text t be in paragraphs, the text will be the same size as bdy cpy. Text can end up in paragraphs when cpying and pasting frm ther surces, r by hitting the return r enter key when inputting text. T set the text t be in a paragraph, yu can select the text and then chse Paragraph frm the Styles drp dwn in the editing bx. V2 published May 17, 2016 3
Table Prperties When creating a new table, yu will be presented with a Table Prperties dialg bx. Yu may als access the Table Prperties dialg bx by right-clicking anywhere in a table and then chsing Table Prperties. In this dialg bx, yu can set the number f rws and clumns, set the width f the table in pixels (yu can als set the height, but it is nt advisable), and brder size (sets the brder size f the cells). Cell spacing and cell padding set the amunt f space between the cells, r the space between the text and the edge f the cell, but these settings are cntrlled by the style sheets, s best t leave them be. Table Captin and Table Summary Use the captin field if yu want t add a captin visible abve the table. Table summaries d nt shw visually, and are used fr accessibility. The table summary has been used t describe a cmplicated table fr the screen reader users befre they read the table. It has been deprecated in the latest versin f HTML, hwever the accessibility cmmunity still recmmends using a summary fr cmplicated tables. Adding r Deleting Rws and Clumns Right-click n the table and chse Rws r Clumns. Yu will be able t Insert a rw r clumn befre r after the selected rw r clumn, and delete them as well. Cell Prperties When right-clicking n a cell, yu can merge and split cells and access Cell > Cell Prperties. In the Cell Prperties dialg bx, yu can set alignment f the text, and set backgrund clrs and brder clrs f the cells. Rws span and clumns span can als be set, effectively merging cells. Table Cell Headers fr Accessibility Table cell headers are imprtant fr accessibility cmpliance and visually help yur viewers understand the relatinship between cells that define cntent t the cells belw r t the right r left f the header cell. Mst cmmnly, table cell headers are used in the first rw t define cntent fr the cells belw them. Yu can set table cells t be header cells in the Table Prperties r Cell Prperties. The style sheet has a style that puts a thick gray brder under the header rw f cells. See the fllwing example f table headers. Phts Phts can be placed n Drupal pages in a number f ways. If yu encunter prblems with uplading images, make sure yu are nt exceeding the allwed size f image in either pixel dimensins r in MB (megabytes), r uplading a size that is t small in pixel dimensins. Size limitatins are listed next t the Uplad buttn. If yu are attempting t uplad an image that has the right parameters and still cannt d s, cntact I.T. Inserting Images in the Drupal Editr Yu can use the Drupal Editr t insert images int the bdy f the page. Yu can als use this methd t place an image at the tp f a page. An image f 800 pixels wide will fit the same width as the bdy f the page in the Baker theme with ne clumn f side navigatin and ne clumn f cntent. The image will shw beneath the Page Heading 1, as ppsed t abve it if yu are using a blck in the featured regin fr an image r slideshw. V2 published May 17, 2016 4
Respnsiveness f images Images that are wider than 360 pixels will cllapse dwn n smaller screens and devices, cnstraining the width but nt the height. T make the image cnstrain prprtinally as it cllapses, click n the image and then click n the image icn, r right-click n the image and chse Image Prperties. In the Image Prperties dialg bx, click n the Advanced tab. In the Style tab yu will mst likely see the width and height f the image. Replace this cde with the fllwing cde: max-width: 100%; Alternative Text n Images fr Accessibility When placing images nt web pages it is imprtant t add what is called alternative text s that visually disabled viewers using screen readers will have infrmatin abut the image. Ideally alternative text shuld be a shrt phrase that succinctly describes the image. T assign alternative text t an image, access the Image Prperties dialg bx either at the time yu are placing an image, r afterwards by right-clicking n the image and chsing Image Prperties. On the Image Inf tab that usually be selected by default, see the Alternative Text field directly under the URL field. Basic Tips n Writing Alternative Text Keep in mind that the text will be machine read. Use wrds as ppsed t abbreviatins. Write a phrase that is succinct, but adequately describes the image. If there is text in the image that is imprtant, that shuld be included in the alternative text. Dn't include "Image f..." r "Graphic f...". Screen reader sftware annunces "graphic" befre reading the alt text. See the article n the WebAIM site abut writing effective alternative text Empty Alternative Text The Drupal system is cnfigured t create empty alternative text if yu leave the Alternative Text field blank in the Image Prperties dialg bx. Cnsider if the alt text is useful cntent, if nt, give it empty alternative text by nt inputting any text in the Alternative Text field If the explanatin fr the image is in the bdy text adjacent t the placed image, use empty alt text Aligning Images t the Left r Right In the Image Prperties dialg bx, access the Alignment drp dwn t flat an image right r left. Put in numbers fr pixel values t add mre space arund the image in the HSpace r VSpace fields. Width, Height, Brder Width and Height values can be set n the image t resize it, and a brder value may be added t put a brder arund the image. Again, the number yu enter int the brder field will be in pixels. The clr will be the marn red that yu see in the header f all SRJC pages and is cntrlled by the style sheet behind the scenes. V2 published May 17, 2016 5