SCITO 四川信息职业技术学院 开放课程 Webpage Design 网页设计与制作 C巴四行急水装教本爷配 由静美图 可思食然 a品形阁 四川川信息职业技术学院精品开放共享课程
Sichuan Information Technology Colle 四川信息职业技术学院开教共亨移 中面设计与制作 单元3：排版制作 授课教师：廖若飞
单元3：排版制作 授课教师：廖若飞
SIC Sichuan Information Technology Colleg 四川信息职业技术学院开教共亨课移 中面设计与制作 制作 学习DIV+CSS布局
制作 学习DIV+CSS布局 4.局部设计
S Sichuan Information Technology College 四川信息职业技术学院开教共意让移 中鱼设计与制作 原型 ea ou宜搜 中国领先的中文手机望素引琴 会员登 帐户： 登录■应舒我风 网监备宝公备5108020000
原型
SITC Sichuan Information Technology College 四川信息职业技术学院开教共亨 网页设计与制作 分析 首先分析一下网页的结构。整个网页可以看成上下两大 部分构成。上半部分是整个图片背景、L0g0、登录框； 下半部分是网站的版权信息。通过观察，可以发现，整 个网页是水平居中的，可以通过设置上下半部分别水平 居中来解决
分析 首先分析一下网页的结构。整个网页可以看成上下两大 部分构成。上半部分是整个图片背景、Logo、 登录框； 下半部分是网站的版权信息。通过观察，可以发现，整 个网页是水平居中的，可以通过设置 上下半部分别水平 居中来解决
SI Sichuan Information Technology Colleg 四川信息职业技术学院开教共亨袜移 化面设计与制作 实现-html Copyright?2009-2012www.ou33.cn宜搜顶告版权所有 ICP备案号：蜀ICP备12006xxx号 网监备案号：广公网备51080202000xxx
实现 – html
实现-css body background-color:#E2E2E2; font-size:14px; color:#6A6A6A; font-family:微软雅黑，黑体，Helvetica,Arial,Verdana,aan-3erif: #mid margin:0 auto; padding:Opx; width:1100px; height:580px; background:url('images/login bg.png')no-repeat; #footer text-align:center; margin:0 auto; padding:Opx; padding-top:10px; font-family:微软雅黑，黑体，Helvetica,Arial,Verdana,3ans-aerif;
实现 – css
S Sichuan Information Technology Colleg 四川信息职业技术学院开教共亨法移 化顶设计与制作 解释 ·首先，设置了boy元素的背景颜色，字体、字体大小，字 体颜色，当然它是对整个网页有效的。公共的属性设置在 body里，可以节省很多代码。 ·其次，设置了mid元素，它应用到了大半部分的div上， margin:0auto用来控整个div水平居中，当然必须指定它 的宽度，否则浏览器不知怎么计算dv的宽度，还指定了 mid的背景。显然，mid的宽、高依赖于背景的大小。 ·最后，设置了footer元素。让它水平居中，里面的文本水平 居中，内边框为10px
解释 • 首先，设置了body元素的背景颜色，字体、字体大小，字 体颜色，当然它是对整个网 页有效的。公共的属性设置在 body里，可以节省很多代码。 • 其次，设置了mid元素，它应用到了大半 部分的div上， margin:0 auto用来控制整个div水平居中，当然必须指定它 的宽度，否则浏览器不知 怎么计算div的宽度，还指定了 mid的背景。显然，mid的宽、高依赖于背景的大小。 • 最后，设置了footer 元素。让它水平居中，里面的文本水平 居中，内边框为10px
Information Technology Colleg 四川信息职业技术学院开教共亨法移 化贡设计与制作 “登录框”问题 现在要解决的问题是如何让真正的"登录框"(input控件)， 挡住背景图片上的假的"登录框"。 ·实现方法有很多，最简单的办法是把"登录窗口"上的所有 html控件全部放到一个div中（命名为LoginDiv),只要调整 最外面的div的位置，就可以把每一个html控件放到适当的位 置上。按从上到下，从左到右的顺序对html进行编号，分别为： input1(帐号)，inputz2(密码)，input:3(验认码输入框)，input44(验 认码图片)，input5(错误信息)，inpute6(登录按钮)，input7(找回 密码按钮)
“登录框”问题 现在要解决的问题是如何让真正的"登录框"（input控件）， 挡住背景图片上的假的"登录框" 。 • 实现方法有很多，最简单的办法是把"登录窗口"上的所有 html控件全部放到一个div中（命名为LoginDiv），只要调整 最外面的div的位置，就可以把每一个html控件放到适当的位 置上。按从上到下，从左到右的顺序 对html进行编号,分别为： input1(帐号), input2(密码), input3(验认码输入框), input4(验 认码图片), input5(错误信息), input6(登录按钮), input7(找回 密码按钮)
S Sichuan Information Technology College 四川信息职业技术学院开教共言让移 中面设计与制作 “登录框”实现-html kdivid="loginDiv"> ap:TxtBox runat=erver"ID-"loginId"Cclas="input1"/> asp:TextBox runat=vrIDpd"CsClas="iut2"TextMode="Pasword"/> Kasp:extBox runat="rverID=chkCode"Cacla=inu> img r"admin/GeneratecheckCode.aspx"alt=i"cla="input4"onclick="this.rthis./> diainut5"runat=erver"id"mIfo/div diatyle="clear:both"/div> asp:IageButto rver"ImageUr=images/btnLogin.jp"Cca=input6"nici click"/> ahref="javascript:volid(0)"imimage/findpwd.jpg"atclas=iput7//a
“登录框”实现 - html