天津博奥教育首页>天津博奥教育培训课程学习辅助资料>网页设计培训就业辅导学习资料> div+css网页布局标准教程
注重实战经验传授,打造视觉设计精英
视觉设计培训天津博奥教育全新五合一教学模式线上下同时授课
1.十多年教学经验,由视觉设计行业专家授课
2.视觉设计采用WORKSHOP授课方式,更好吸收教学内容
3.有问题可以随时提出,不积压问题及时解决问题
4.视觉设计培训学习期满后可推荐就业
5.在工作中遇到技术或者设计上的问题给予免费指导
6.视觉设计培训课程可免费重修
平面设计培训视觉设计培训精品设计培训课程推荐
高端平面设计培训课程
UI设计师培训一对一
天津平面设计软件培训
天津平面设计C4D培训
div+css网页布局标准教程_平面设计培训_室内设计培训_网页设计培训学习辅助资料
本文章摘自十多年平面设计培训教学经验的天津博奥教育官网www.boaoit.com
天津博奥教育培训为学生提供最专业的网页设计培训,今天就从建站的流程为学员讲解div+css布局标准教程:建立站点、结构分析、搭建框架、切割效果图、布局页面—头部和导航、布局页面—侧边栏、布局页面—主体部分‘’底部和细节调整、相对路径和相对于根目录路径。
一、建立站点:要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的,所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道,需要先建立一个工程,把原始的视频文件、图片素材分类放好,也是这个道理。下面以在D盘建立一个jiaocheng文夹为例,在dreamweaver(简称DW)里创建一个站点指向这个文件夹,然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。保存后,一个站点就建立起来了,我用的是DW cs5版本不同版本界面有所不同。如果要连FTP,需要设置服务器选项(后面会涉及到)。站点建立好后,我们先建立一个images和css文件夹分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的;dw立需要在文件面板列表的根目录上点击右键,选择新建文件夹后更改名字即可。
二、结构分析:创建完站点后,就需要对页面结构进行分析了,根据效果图,分析页面分为几大块,该怎么布局更合理。
在浏览器中打开效果图预览:整个页面分为头部区域、导航区域、主体部分和底部,其中主体部分又分为左右两列,整个页面居中显示,看明白了这点,下边的框架就好搭建了。
三、搭建框架:首先在dw里新建一个html文件:点击创建后会自动生成如下代码的一个html文件,保存为index.html并把无标题文档改为:主页。强调一点,许多同学喜欢把第一行代码删除掉,认为没用,其实这句话的作用大着呢,它标明以何种形式解析文档,如果删除可能会引起样式表失效或其它意想不到的问题。接下来需要插入以上各个块的标签了,以插入header的标签 为例,其它的插入方法类同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页</title>
</head>
<body>
</body>
</html>
按照上图的方法依次插入标签,或者直接在代码视图中手工输入,代码如下:(注意main和side在maincon tent里包含着呢)
下一篇:在平面设计中什么时候要用四色又什么时候要用到专色印刷它们区别何在
相关培训:天津市平面设计培训、天津市平面设计培训就业班、天津UI设计培训、天津PS培训、天津C4D培训、天津AI培训、天津犀牛Rhino培训、 天津Solidworks培训、SolidWorks培训全科班、天津素描培训、天津CAD培训、天津室内设计培训、天津建筑Rhino参数化设计培训、天津办公软件培训、天津各所大学到天津博奥教育的乘车路线
天津博奥教育地址:天津市南开区鞍山西道百脑汇科技大厦23楼2307室。
培训咨询电话:022-58697923,022-58697932,18222233399。
天津博奥教育网址:www.boaoit.com
乘车路线:45、50、609、662、678、661、829、851、867、879(卧龙里站下)
640、687、859、705、829、849、847(世通大厦站下)