Tải bản đầy đủ - 0 (trang)
Lesson 2. Adding Content to a Page

Lesson 2. Adding Content to a Page

Tải bản đầy đủ - 0trang

propertiessuchasfontandtextsize,howtoformattextinto

severaldifferenttypesoflists,andhowtoincludespecial

characterssuchascopyrightsymbols.

FormattingtextisanimportantpartofmakingyourWebpages

easyforvisitorstoread.Textcanbeavitalelementonyour

pages;takethetimetoorganizeandarrangeyourmaterialso

thatuserscanreadthroughitquicklyandeasily.

YoucanfindanexampleofthecompletedLesson2inthe

CompletedfolderinsidetheLesson_02_Contentfolderonthe

CD-ROM.



WhatYouWillLearn

Inthislesson,youwill:

Placetextonapage

Organizecontentintologicalsections

Positionandformattext

Setdocumentdefaultsforfontandcolor

Insertspecialcharactersandotherelements

Createmultilingualdocuments







ApproximateTime

Thislessonshouldtakeapproximatelyonehourtocomplete.







LessonFiles

StartingFiles:

Lesson_02_Content/index.html

Lesson_02_Content/definitions.html

Lesson_02_Content/sanskrit.html

Lesson_02_Content/Text/home_mac.txt

Lesson_02_Content/Text/home_win.txt

Lesson_02_Content/Text/definitions_mac.txt

Lesson_02_Content/Text/definitions_win.txt

Lesson_02_Content/Text/sanskrit_terms.rtf

CompletedProject:

Lesson_02_Content/Completed/index.html

Lesson_02_Content/Completed/definitions.html

Lesson_02_Content/Completed/sanskrit.html







ImportingText

Youcanaddtexttoapageinavarietyofways,including:

TypingintotheMacromediaDreamweaverDocument

window.

Copyingandpastingfromanotherapplication.Youcanopen

bothDreamweaverandtheapplicationfromwhichyouwant

toobtaincontentandthencopyandpaste(orselectand

dragthetextordesiredelement)intoDreamweaver.

OpeninganHTMLdocument.YoucancreateHTML

documentsfromavarietyofapplications,includingwordprocessingprogramssuchasMicrosoftWord.Tosavea

MicrosoftWorddocumentasHTML,openthedocumentin

WordandchooseFile>SaveasWebPage.Therearea

numberoferroneouscodingissueswiththeHTML

generatedbyWord.Theseproblemsandtheirsolutionsare

coveredinLesson16.

OpeningtextfilesdirectlyinDreamweaver.Youcanuse

Dreamweavertoopenfilesthatwerecreatedinwordprocessingorpage-layoutapplications,providedthatthose

filesweresavedasASCII(AmericanStandardCodefor

InformationInterchange)textfiles.Text(.txt)filesalways

openinanewwindowusingtheCodeviewin

Dreamweaver.AfteropeningatextfileinDreamweaver,you

cancopyandpastethetextyouneedintoanother

document.



WorkingwithASCIIFiles

Simpleformatting,suchasparagraphsandlinebreaks,canberetainedwhen

importingtextfromASCIItextfiles,buttoproperlypreservethelineformats

youneedtoaccountforthedifferencesbetweentheASCIIformatondifferent

platforms.FilescreatedinWindowsuseaninvisiblecontrolcharactercalleda

linefeed(LF)toindicateanewlinewithinthetext,aswellascarriagereturns

(CRs).Macintoshcomputersdonotusetheline-feedcharacteronlyCRs.Unix

usesonlytheLFcharacter.

ToimporttextproperlyfromASCIIfilesandretainthelinebreakformatting,you

needtochangetheDreamweaverLineBreakTypepreferencestomatchthe

operatingsystemonwhichthetextfilesyouwanttoimportwerecreated.

EditthepreferencesbychoosingDreamweaver>Preferences(Macintosh)or

Edit>Preferences(Windows)todisplaythePreferencesdialogboxandselect

CodeFormatintheCategorylist.FromtheLineBreakTypepop-upmenu,select

thelinebreaktypeeachtypeisshownwiththecorrespondingoperatingsystem,

soyoucanpicktheoneonwhichthetextfilewascreated.IntheLineBreak

Typemenu,yourchoicesareCRLF(Windows),CR(Macintosh),andLF(Unix).

ForMacintoshusers,thedefaultisCR(Macintosh).

ForWindowsusers,thedefaultisCRLF(Windows).



[Viewfullsizeimage]



1. UseDreamweavertoopen

Lesson_02_Content/Text/home_mac.txt(Macintosh)

orhome_win.txt(Windows);thenselectandcopyall

ofthetext.OpentheLesson_02_Content/index.html

file,makesurethedocumentisdisplayedinDesign

view,positiontheinsertionpointatthetopofthe

document,andpastethecopiedtext.



Note

Forthisexercise,choosethedocumentthatwascreatedon

thesameoperatingsystemthatyouareusing.Youcan

experimentwithimportingtextfilesfromdifferentplatforms

byopeningtheversionofthisdocumentthatwascreatedon

theotherplatform;home_mac.txtwascreatedona

Macintoshcomputerwhilehome_win.txtwascreatedona

Windowscomputer.Ifyouchoosetoexperimentonyour

ownwiththisadditionalfile,rememberthatyouwillneedto



adjusttheLineBreakTypepreferencesaccordingly,as

describedintheWorkingWithASCIIFilessidebaratthe

beginningofthisexercise.

Theindex.htmldocumentisanXHTMLdocumentsimilarto

theoneyoucreatedinLesson1.Foradditionalpracticewith

usingDreamweaver'stools,youcancreateanewdocument

intheLesson_02_Contentfolderandtitleit,usingtheskills

learnedinthepreviouslesson.You'llneedtosaveitwitha

differentnamebecauseyoucan'thavetwodocumentswith

thesamenameinthesamefolder.

YoucanusetheEditmenutocopyandpastethetext

(chooseEdit>Copyand/orEdit>Paste);oryoucanuse

thefamiliarkeyboardcommandsCmd+C(Macintosh)or

Ctrl+C(Windows)tocopy,andCmd+V(Macintosh)or

Ctrl+V(Windows)topaste.

2. Savetheindex.htmlfileandclosethehome_mac.txt

orhome_win.txtfile.



Youcanleavetheindex.htmldocumentopenforthenext

exercise.







IdentifyingContentStructure

Settingupthedocumenthierarchybydefiningtheorderof

pagecontentisanimportantstepintheprocessofdeveloping

yoursite.Inthisexercise,andthroughoutthislesson,you'llbe

definingthearchitectureofthematerialthroughanumberof

HTMLformattingoptions,alsoknownasstructuralmarkup.The

correctwaytousethiskindofmarkupistoorganizeand

structurecontentnotforthevisualstylingofmaterial.HTML

formattingisextremelylimitedintermsofdesignyoudon'thave

agreatdealofcontroloversize,spacing,andalignment

becausetheoptionsareintendedfordescribingdocument

hierarchy,nottocreatethegraphicappearance.You'llworkon

visualtreatmentsandadjustmentstothelookofthecontentin

laterlessons.Itisnecessarytodevelopthestructure,asyou

willbegindoinginthisexercise,beforegettingintothe

aestheticdetails.



Note

Forspecificcontrolovertheappearance,youneedtouse

CascadingStyleSheets(CSS)todefinethelookandplacement

ofelementsonyourpage.CSSwillbecoveredinLesson4.



1. Intheindex.htmlDocumentwindow,placethecursor

inthetextYogaSanghalocatedatthetopofthe

page.

Thistextistheprimarytitleforthispage.

2. FromtheFormatpop-upmenuintheProperty

inspector,chooseHeading1.



YoudefinedthetextformatasaLevel1heading.Thetext

hasbeenformattedasablock-levelelement.Alloptions

chosenfromtheFormatmenuapplytoanentireblocka

headingoranyothertypeofblock-levelformattingcannot

beappliedtoasinglewordortoaportionofablock.Asa

result,youdon'thavetoselectthetexttoapplya

headingalltextcontainedinthetextblockautomatically

usestheformattingyouselectfromtheFormatmenu.



[Viewfullsizeimage]



Otherblock-levelelementsincludeparagraphs,lists,

horizontalrules,andthealignmentoptionsavailableinthe

Propertyinspector.You'lllearnhowtoworkwiththese

formattingtoolsthroughoutthislesson.

Headingsaredisplayedinlargerorbolderfontsthannormal

bodytext.HTMLhassixlevelsofheadings,numbered1

through6.Heading1hasthelargestfontsize;Heading6

hasthesmallest.Taggingatextblockasaheading

automaticallygeneratesaspacearoundtheheading,which

variesaccordingtotheheadingyouselect.Youcan'tcontrol

thisspacingunlessyouuseCSStocontrolformatting.



[Viewfullsizeimage]



Headingscanbeusefulforsplittingupyourcontentinto

sectionsandcallingattentiontocertainportionsofthepage.

UsersgenerallyscanWebpagesquicklyanddon'tread

everything.Takingthewaysinwhichusersinteractwiththe

Webintoaccountwhiledesigningyoursitehelpsyou

developpagesthataremucheasierforvisitorstouse.

Formattingyourtextwithheadingsandtheothertechniques

usedthroughouttherestofthislessonenableyouto

differentiatebetweenyourcontentandcreateaclear

hierarchy.



Note

Inmanydocuments,thefirstheadingonthepageis

identicalincontenttothetitle.Inmultiple-partdocuments,

thetextofthefirstheadingshouldberelatedinformation,

suchasachaptertitle.Thetitleyousetfortheentirepage

shouldidentifythedocumentinawidercontext(including

boththebooktitleandthechaptertitle,forexample).



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Lesson 2. Adding Content to a Page

Tải bản đầy đủ ngay(0 tr)

×