DIV+CSS布局实战:切割与页面构建详解
"网页设计与布局教程-使用DVS+CSS实现" 本教程主要讲解如何利用DVS(Div+CSS)技术进行网页标准布局,通过一系列步骤来构建一个完整的网站页面。首先,我们从建立站点开始,然后进行结构分析、框架搭建、效果图切割,到最后的页面布局和细节调整。 一、建立站点 在Dreamweaver (Dw) 中建立站点是网页设计的第一步,这涉及到本地工作环境的设置,包括文件夹的创建、站点配置以及文件管理。在此阶段,我们需要创建一个名为“主页”的HTML文件,并定义文档类型DTD,确保浏览器以标准模式解析页面。 二、结构分析 分析页面结构至关重要,它决定了后续的布局策略。在这个案例中,页面被划分为四个主要部分:头部、导航、主体(包含左右两列)和底部。通过对效果图的细致观察,我们可以规划出每个部分的HTML结构,以便更好地组织内容。 三、搭建框架 在HTML文件中,我们使用`<div>`标签来创建各个部分的容器。例如,创建`<div id="header">`表示头部区域,`<div id="nav">`表示导航区域,`<div id="maincontent">`包含`<div id="main">`和`<div id="side">`分别代表主体的左右两列,最后是`<div id="footer">`表示底部。通过这种方式,我们构建了一个基本的页面结构。 四、切割效果图 切图是将设计稿转化为网页元素的关键步骤。可以使用Photoshop(PS)或其他工具如Fireworks进行切片,将不同的视觉元素分离出来,以便在网页中作为图像使用。在PS中,可以通过切片工具选择需要的区域,设置切片名称便于管理和引用。 五、布局页面 布局页面涉及CSS的应用,我们将使用CSS来控制各个`<div>`的样式,包括位置、尺寸、颜色等。对于居中显示的网页,通常会在所有主要`<div>`外添加一个父级`<div>`,如`<div id="container">`,并设置其宽度和居中属性,使得内部的所有子元素自然居中。 六、细节调整 完成基础布局后,我们需要关注页面的细节,如字体、颜色、边距、对齐方式等。此外,还需要处理相对路径和相对于根目录的路径,确保链接和图片能正确加载。例如,设置内部链接和引入外部CSS、JavaScript文件的路径。 七、CSS布局实例 在CSS中,我们可以使用以下技术来实现布局: 1. 浮动布局:通过`float`属性使元素浮动,实现多列布局。 2. 定位布局:使用`position`属性(如`relative`、`absolute`或`fixed`),精确控制元素的位置。 3. 盒模型:理解`margin`、`padding`、`border`对元素尺寸的影响,进行精确布局。 4. 静态布局与流体布局:结合使用固定和百分比单位,适应不同屏幕尺寸。 通过以上步骤,我们可以创建一个响应式且具有良好用户体验的DVS+CSS布局网页。在实践中,不断学习和优化,才能不断提升网页设计和开发的技能。
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/d9e6911b6c0a4bbf9f41d45e8052a81a_weixin_42186728.jpg!1)
- 粉丝: 23
- 资源: 2万+
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 新型矿用本安直流稳压电源设计:双重保护电路
- 煤矿掘进工作面安全因素研究:结构方程模型
- 利用同位素位移探测原子内部新型力
- 钻锚机钻臂动力学仿真分析与优化
- 钻孔成像技术在巷道松动圈检测与支护设计中的应用
- 极化与非极化ep碰撞中J/ψ的Sivers与cos2φ效应:理论分析与COMPASS验证
- 新疆矿区1200m深孔钻探关键技术与实践
- 建筑行业事故预防:综合动态事故致因理论的应用
- 北斗卫星监测系统在电网塔形实时监控中的应用
- 煤层气羽状水平井数值模拟:交替隐式算法的应用
- 开放字符串T对偶与双空间坐标变换
- 煤矿瓦斯抽采半径测定新方法——瓦斯储量法
- 大倾角大采高工作面设备稳定与安全控制关键技术
- 超标违规背景下的热波动影响分析
- 中国煤矿选煤设计进展与挑战:历史、现状与未来发展
- 反演技术与RBF神经网络在移动机器人控制中的应用
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)