静态网页设计divcss（静态网页设计实训报告）

本文目录一览：

• 1、静态网页制作
• 2、网页设计中采用div+css布局,这里的DIV是什么意思?
• 3、静态网页设计制作中的布局模式
• 4、网站开发为什么使用div+css布局?
• 5、DIV+CSS有什么优点?

静态网页制作

1、在Dreamveaver中“文件—新建—常规—基本页—HTML”，这就建好了一个页面，英文版的默认为文件名untitled.htm。中文版的默认为文件名“无标题文档”。htm表示的是这个网页文件是一个静态的HTML文件。

2、打开页面后，选着设计窗口，如图所示。设计窗口可以快速布局网页，不需要自己编辑代码。打开你要设计的网页的设计图，本经验是百度经验首页为例，首先我们制作顶上的搜索条，点击插入—表格（如图所示）。

3、*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。1024*768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

4、电子商务网站规划设计以后，就开始进入网站的建设阶段，这一阶段主要有域名注册，网站配置，网页制作和网站测试的四个部分。

5、MicrosoftFrontPage，是一款轻量级静态网页制作软件，特别适合新手开发静态网站的需要，目前该应用很少用于制作网页。

网页设计中采用div+css布局,这里的DIV是什么意思?

1、div就是层，把网站结构和网页内容分开。div负责网页内容，用css控制内容在页面上的表现形式。如文字、图片、视频等在网页上的位置、字体、字号、大小、颜色、背景等等。

2、DIV是指的层、CSS是编辑网页的一种样式。DIV即每一个网页打开时看到的不同方框或收缩框，那些就是一层一层的DIV制作而成。

3、中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。

4、CSS div是一种常用的HTML元素，它可以被用来创建一个独立的区域，用来存储和呈现HTML文档的各种内容。这个独立区域被称为“div”，它具有一个独特的CSS选择器，可以在HTML文档中指定它的位置和样式。

5、首先需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说给这个 DIV 的名字是 truck。给名字的目的是以后可用JavaScript来控制它， 比如说移动它或改变它的一些性质等等。

6、css+div中的“div”是一个概念，一种行为。不单指“div标签”或“绘制层”，而是涵盖两者还有其他对于div的操作。APdiv是指“有绝对位置的div”，也是一个概念，不是动作，也不等同于“div标签”。

静态网页设计制作中的布局模式

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

2、静态布局 在传统的网页设计中，网页上所有元素的大小都是px。布局特征 无论浏览器的确切大小如何，页面的布局始终与第一次编写代码时相同。

3、T型布局是指页面顶部为横条网站标志和广告条，下方左半部分为主菜单，右半部分为显示内容的布局。因为菜单背景饺探，整体效果类似英文字母T，所以称之为T型布局，这是网页设计中使用最广泛的一种布局方式。

网站开发为什么使用div+css布局?

1、由于使用了DIV+CSS制作方法，使内容和结构分离，在修改页面的时候更加容易省时。

2、可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页总代码的比重），因此使用CSS＋DIV的web标准制作的网站具有搜索引擎友好的一定优势。

3、搜索引擎更加友好。相对与传统的table，采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。

4、DIV+CSS布局，其实更准确的叫法是“HTML+CSS布局”，是选择合理的标签利用CSS来完成页面布局，其主要特点与优势如下：符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

5、使页面载入得更快 将大部分代码写入CSS中，使得云提交容量变小，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。

6、使用 div 和 CSS 可以使页面结构更加清晰，代码更易于维护。可重用性： CSS 可以被多个页面重用，减少了代码冗余。易于修改： 使用 CSS 可以轻松地更改页面的布局和样式。

DIV+CSS有什么优点?

CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

Div+CSS的优点： 可以更好地控制网页布局：Div+CSS可以更好地控制网页布局，使得网页布局更加灵活，更易于维护，更容易实现复杂的布局效果。

保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。