网站设计ch2页面设计

第二讲网页设计HTMLxhtmlCSS网站设计（教材第2章）1页面中内容文本图片超链接音乐/视频表单1-1HTML标记结构htmlhead头部…/headbody正文…/body/html1-2HTML特点简单spanGoodMorning/span国际标准浏览器解释，与OS无关1-3标记语法标记对象/标记标记属性1=参数1属性2=参数2事件=方法对象/标记标记2XHTML结构!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/scripttype=text/javascriptsrc=js/common.js/scriptlinkrel=stylesheettype=text/csshref=css/style.css/linkrel=shortcuticonhref=images/favicon.ico/titleExample|xHTML1.0/title/headbody正文…/body/html2-2XHTML标准XHTML文档验证XML规则标记小写页面内容、样式、操作设计分离3常用HTML标记内容组织类样式表示类界面操作类3-1head中标记：页面信息标题、文档关键词、内容描述、语言字符集、编辑器等。headtitle学习网页设计/titlemetaname=keywordscontent=web,html,css,xmlmetaname=descriptioncontent=Thiswebpage…metahttp-equiv=Content-Typecontent=text/html;charset=gb2312metaname=GENERATORcontent=MicrosoftFrontPage6.0/head3-2body中标记：层、端、行、片段bodydivpspan…span/pp…/p/divdiv.../div/body3-3标题h1…/h1一号标题h2…/h2二号标题…b…/b粗体i…/i斜体u…/u加下划线…3-4图片imgsrc=Sunset.jpgwidth=800height=600图片格式bmp位图图片jpeg网页图片gif动画图片3-5序列表olli高等数学/lili工程数学/lili计算方法/li/ol3-5-1列表ulli高等数学/lili工程数学/lili计算方法/li/ul3-6表格tablecaption表格标题/captiontrth表格头/thth表格头/th.../trtrtd表格数据/tdtd表格数据/td.../tr.../table4超链接和书签ahref=信息学院/aaname=m1/a书签…ahref=#m1start/a连接到书签ahref=到其他网页的书签4-1链接目标路径绝对路径:ahref=…/a相对路径ahref=“bbs/bbslist.html在线论坛/a基于根目录的路径ahref=/index.html回到主页面/a在另外浏览器窗口中打开超链接ahref=…target=_…/a5表单表单:用户浏览网页时向Web服务器提交信息的界面。5-1表单元素标记h2用户登录/h2formname=form1method=postaction=logon.asp姓名inputtype=textname=xmbr密码inputtype=passwordname=mmbrinputtype=submitvalue=提交inputtype=resetvalue=全部重写/form5-2表单处理程序页面文件扩展名为php，如login.asp页面文件中嵌入标记%…%%…xm=Request.Form(“xm”)‘vb脚本程序Response.Write(xm)…%asp页面在IIS服务器端执行，生成html页面输出到用户浏览器。5-3常用表单域文本输入框文本输入区单选输入框多选输入框列表选择输入框提交命令按钮重置命令按钮普通命令按钮5-3-1表单域界面文本框、文本区、单选、多选inputtype=textname=addresssize=51maxlength=50textareacols=50rows=4name=brief…/textareainputtype=radioname=sexvalue=malecheckedinputtype=radioname=sexvalue=femaleinputtype=checkboxname=hobbyvalue=footballinputtype=checkboxname=hobbyvalue=tourinputtype=checkboxname=hobbyvalue=chess列表框，提交、重置、普通按钮selectname=ageoptionvalue=018岁以下/optionoptionvalue=118-60岁/optionoptionvalue=360岁以上/option/selectinputtype=submitvalue=提交inputtype=resetvalue=重置inputtype=buttonvalue=计算5-4嵌入脚本标记JavaScript、VBScript，简单计算ScriptLanguage=JavaScript…JavaScript程序/Script5-5嵌入插件标记插件小程序，JavaApplet、Flash等，复杂计算objectsrc=…codetype=…/object6字符实体&符号&<小于号>大于号"双引号'单引号¼四分之一½二分之一¾四分之三°度 非换行空格(space)7样式网页在浏览器中表现的标准选择符{属性：值}body{background-color:yellow}p{color:blue;font-family:方正舒体;font-size:x-large}7-1样式选择符类型HTML标记，如p、h1类按标记的类属性定义，如class=class1选择符.calss1{…}ID按标记的ID定义，如id=ol1选择符#ol1{…}7-2长度单位绝对单位英寸（in）、毫米（mm）、磅（pt）1in=72pt相对单位px像素，em本元素字体大小，ex字符x的高度百分比p{font-size:12px;line-height:130%}7-3盒模所有网页上的对像都放在一个盒（box）中，定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层；盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。~图~3D图7-4样式使用1.标记的样式属性style2.在页面中嵌入样式标记style…/style3.把样式保存为文本文件，用link标记连接到页面文件中7-4-1标记的样式属性bodyh1style=font-family:楷体_gb2312;font-size:20pt;color=red显示CSS的H1文字定义/h1…/body7-4-2在页面中嵌入样式标记headstyletype=text/css!--h1{font-family:楷体_gb2312;font-size:20pt;color=red;}--/style/headbodyh1使用了CSS的H1文字定义/H1/body7-4-3外部调用样式文件htmlheadlinkrel=stylesheethref=sample.css/headbody…/body/html8网页布局表格：基本方法层：Web2.0标准框架8-1表格布局例tableborder=1cellpadding=5width=551eight=331trtdwidth=551height=64colspan=2palign=center标题/td/trtrtdwidth=115height=239pahref=1.htm项目1/a/ppahref=2.htm项目2/a/ppahref=3.htm项目3/a/pp项目4/tdtdwidth=404height=239palign=center项目1内容/td/tr/table图8-2层布局bodydivid=name1信息块/divdivid=name2信息块/div/body8-2-1层样式name1{backgroup-color:#FFFFFF;text-align:left;position:absolute;width:100px;height:100px;left:126px;top:47px}8-2-2层布局演示-主页设计~内容页设计~主页分层~内容页分层~代码分析分层样式内容练习1.熟悉HTML2.熟悉Dreamweaver操作9网页设计设计图纸设计首页、内容页图纸。由策划和美工人员完成。(像素)分析图纸分析由那些页面元素实现图纸样式，页面布局，页面风格，超链接导航等。由网页设计人员完成。拆分图纸使用Fireworks图形处理软件分割设计图纸，处理图片，提取尺寸，配色。由网页设计人员和美工人员完成。设计页面使用Dreamweaver等工具设计实现页面。HTML优化人工或利用工具优化HTML代码。发布测试发布到服务器，使用不同的浏览器浏览测试。10网站设计的内容网站栏目：确定网站发布信息的分类和内容页面布局：设计页面信息块的位置链接导航：规划页面之间超链接存储结构：网页文件在服务器上的文件目录结构10-1栏目主栏目子栏目栏目和信息分类10-2页面布局上下左右复杂11链接导航线性结构全链接结构层次结构簇状结构11-1首页和链接页首页•主页、索引页链接页•栏目的内容页•栏目的再分类页11-2站内页面链接首页以菜单、分类、索引、搜索链接到网站相关页每一页可链接到首页每一页可链接到上一页显示当前页面在网站中的浏览路径：能直接链接到首页，能快速链接到相关页面大型网站提供搜索和索引功能11-2-1线性结构主页下一题目11-2-2全链接结构主页11-2-3层次结构主页页面页面页面页面页面页面页面页面页面页面页面页面11-2-4簇状结构主页页面页面12网站文件组织按网站页面文件类型组织；按网站页面信息内容组织；