CSS图文混排.docx
《CSS图文混排.docx》由会员分享，可在线阅读，更多相关《CSS图文混排.docx（20页珍藏版）》请在冰豆网上搜索。
CSS图文混排
CSS 图文混排
Div+CSS 混合布局实例
一、准备工作目录及素材
1、在D：
盘上创建名为myweb 的新文件夹。
2、准备所需素材。
拷贝F:
\网页素材\网站重构\源文件\第4章中的images文件夹到D:
\myweb 文件夹中。
3、在D:
\myweb 文件夹中新建子文件夹style。
二、定义站点
1、启动Dreamweavercs4，选择“站点”>“管理站点”。
2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。
3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。
4、在“站点名称”文本框中，输入科技之窗作为站点名称。
5、在“本地根文件夹”文本框中，指定D:
\myweb文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。
6、在“默认图像文件夹”文本框中，指定D:
\myweb文件夹中已有的images文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。
7、从“分类”列表中选择“远程信息”，“访问”选：
“FTP”并填写好相关信息。
8、从“分类”列表中选择“测试服务器”，“访问”选：
“FTP”并填写好相关信息，“URL前缀”须根据实际情况做相应修改。
9、从“分类”列表中选择“本地信息”，“HTTP地址”须根据实际情况做相应修改。
10、单击“确定”。
随即出现“管理站点”对话框，显示您的新站点。
11、单击“完成”关闭“管理站点”对话框。
此时“文件”面板显示当前站点的新本地根文件夹。
“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。
三、了解你的任务
下图是一张为科技之窗站点设计的完整的和符合要求的设计草样。
作为Web设计人员，你需要对草样进行转换，使之最终形成可以使用的Web页面。
四、创建并保存新页面
建立站点并检查设计草样后，你就可以开始创建Web页面了。
首先你将创建一个新页面，并将它保存到你的Web站点的本地根文件夹D:
\myweb 中。
该页面最终将成为远航WirelessServices 站点的主页。
1、在Dreamweavercs4中，选择“文件”>“新建”。
2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“HTML”，在“布局”列表中选择“无”，然后单击“创建”按钮，从而创建一个新的HTML文档。
3、在新文档顶部的“文档标题”文本框中，输入“科技之窗欢迎您！
”。
这就是页面的标题。
站点访问者在Web浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。
4、选择“文件”>“另存为”。
5、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的 D:
\myweb 文件夹并打开该文件夹。
6、在“文件名”文本框中输入index.html，然后单击“保存”。
文件名即出现在应用程序窗口顶部的标题栏中。
制作页面布局及顶部内容
五、制作页面布局及顶部内容
1、在Dreamweavercs4中，选择“文件”>“新建”。
2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“CSS”，然后单击“创建”按钮，从而创建一个新的CSS文档。
3、选择“文件”>“另存为”。
4、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的 D:
\myweb 文件夹并打开该文件夹，双击打开style子文件夹。
5、在“文件名”文本框中输入css.css，然后单击“保存”。
6、在css.css创建一个* 的CSS规则和一个body 的CSS规则：
复制代码
1.*{
2. margin:
0px;
3. padding:
0px;
4. border-top-width:
0px;
5. border-right-width:
0px;
6. border-bottom-width:
0px;
7. border-left-width:
0px;
8.}
9.body{
10. font-family:
"宋体";
11. font-size:
12px;
12. background-color:
#f4ebdc;
13. text-align:
center;
14.}
7、按快捷键Ctrl+S保存好该CSS文件。
8、再次在菜单栏中选择“文件”>“新建”。
9、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“CSS”，然后单击“创建”按钮，从而创建一个新的CSS文档。
10、选择“文件”>“另存为”。
11、在“另存为”对话框中，定位到文件夹 D:
\myweb\style。
12、在“文件名”文本框中输入Div.css，然后单击“保存”。
13、在Div.css创建一个pagebox的CSS规则：
复制代码
1.#pagebox{
2. background-image:
url（../images/4-1.gif）;
3. background-repeat:
repeat-y;
4. height:
740px;
5. width:
788px;
6. margin:
auto;
7. text-align:
left;
8.}
14、按快捷键Ctrl+S保存好该CSS文件。
15、选中index.html，然后单击“CSS样式”面板下部的“附加样式表”按钮。
16、在弹出的“链接外部样式表”对话框中，单击“浏览”按钮，在随后弹出的“选择样式表文件”对话框中选择D:
\myweb\style中的css.css，然后单击“确定”按钮，将css.css 链接到index.html。
17、再次单击“CSS样式”面板下部的“附加样式表”按钮。
18、在弹出的“链接外部样式表”对话框中，单击“浏览”按钮，在随后弹出的“选择样式表文件”对话框中选择D:
\myweb\style中的Div.css，然后单击“确定”按钮，将Div.css 也链接到index.html。
19、单击“新建CSS规则”对话框中的“确定”按钮，然后在弹出的“将样式表文件另存为”对话框中，将新建的样式表文件保存为D:
\myweb\style\css.css.
20、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮。
21、在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为pagebox。
22、在“插入Div标签”对话框中单击“确定”按钮，在页面中将插入pagebox 层。
23、删除pagebox 层中多余的文字，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为header。
设置完成后单击“确定”按钮，在页面中将插入header 层。
24、单击“CSS样式”面板下部的“新建CSS规则”按钮。
在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入#top，在“规则定义”中选择“Div.css”。
25、单击“确定”按钮，然后在弹出的“CSS规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中设置“宽”为770px，“高”为63px，在“边界（Margin）”选项区中分别设置“上”、“下”均为0，“右”、“左”均为auto。
26、单击“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为D:
\myweb\images\4-2.gif，“重复”选择“不重复”。
27、单击“确定”按钮，完成该CSS规则的定义。
注：
以上四步完全可以不用，只需切换到Div.css并写入如下代码的方式即可：
复制代码
1.#top{
2.width:
770px;
3.height:
62px;
4.margin:
auto;
5.background-image:
url（../images/4-2.gif）;
6.background-repeat:
no-repeat;
7.}
28、切换到css.css，创建一个ulli 的CSS规则和一个a 的CSS规则：
复制代码
1.ulli{
2. padding:
6px;
3. list-style:
none;
4. float:
left;
5. font-size:
12px;
6. color:
#575757;
7.}
8.
9.a{
10.text-decoration:
none;
11.color:
#000000;
12.}
29、删除top 层中多余的文字，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为top-right。
设置完成后单击“确定”按钮，在页面中将插入top-right层。
30、切换到Div.css，创建一个#top-right 的CSS规则：
复制代码
1.#top-right{
2.font-size:
14px;
3.float:
right;
4.margin-top:
20px;
5.width:
480px;
6.}
31、将光标移到top-right 层中，将多余的文本内容选中，然后输入（或者复制+粘贴）相应的文本内容。
32、选中top-right 层中输入的所有文字内容，单击属性面板中的“项目列表”按钮。
33、将光标定位到top层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-top。
设置完成后单击“确定”按钮，在页面中将插入main-top层。
34、切换到Div.css，创建一个#main-top的CSS规则：
复制代码
1.#main-top{
2.width:
770px;
3.height:
195px;
4.margin-top:
5px;
5.margin-left:
9px;
6.}
35、将光标移到main-top层中，将多余的文本内容选中，然后然后插入图像 D:
\myweb\images\4-3.gif。
36、将光标定位到main-top层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-top。
设置完成后单击“确定”按钮，在页面中将插入main-line 层。
37、切换到Div.css，创建一个#main-line的CSS规则：
复制代码
1.#main-line{
2.width:
770px;
3.height:
14px;
4.margin-top:
5px;
5.margin-left:
9px;
6.background-image:
url（../images/4-4.GIF）;
7.background-repeat:
repeat-x;
8.}
38、在菜单栏中选择“文件”>“保存全部”，保存所有打开的文件。
39、切换到index.html，然后按F12在浏览器中预览该页面。
制作页面左侧内容
六、制作页面左侧内容
1、将光标定位到main-line 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left。
设置完成后单击“确定”按钮，在页面中将插入main-left 层。
2、切换到Div.css，创建一个#main-left 的CSS规则：
复制代码
1.#main-left{
2.width:
540px;
3.height:
400px;
4.float:
left;
5.margin-left:
9px;
6.margin-top:
4px;
7.}
3、将光标移到main-left 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-top。
设置完成后单击“确定”按钮，在页面中将插入main-left-top层。
4、切换到Div.css，创建一个#main-left-top的CSS规则：
复制代码
1.#main-left-top{
2.width:
540px;
3.height:
130px;
4.background-image:
url（../images/4-5.GIF）;
5.background-repeat:
no-repeat;
6.}
5、将光标移到main-left-top层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-text。
设置完成后单击“确定”按钮，在页面中将插入main-left-text 层。
6、切换到Div.css，创建一个main-left-text 的CSS规则：
复制代码
1.#main-left-text{
2.width:
350px;
3.height:
80px;
4.padding-left:
10px;
5.margin-top:
50px;
6.color:
#767475;
7.line-height:
20px;
8.}
7、将光标移到main-left-text 层中，将多余的文本内容选中，然后输入（或者复制+粘贴）相应的文本内容。
8、将光标定位到main-left-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-left。
设置完成后单击“确定”按钮，在页面中将插入main-left-left 层。
9、切换到Div.css，创建一个#main-left-left 的CSS规则：
复制代码
1.#main-left-left{
2.width:
260px;
3.height:
270px;
4.float:
left;
5.}
10、将光标移到main-left-left 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-left-top 。
设置完成后单击“确定”按钮，在页面中将插入main-left-left-top层。
11、切换到Div.css，创建一个main-left-left-top 的CSS规则：
复制代码
1.#main-left-left-top{
2.width:
260px;
3.height:
25;
4.text-align:
center;
5.}
12、将光标移到main-left-left-top层中，将多余的文本内容选中，然后然后插入图像 D:
\myweb\images\4-6.gif。
13、将光标定位到main-left-left-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-left-1。
设置完成后单击“确定”按钮，在页面中将插入main-left-left-1 层。
14、切换到Div.css，创建一个#main-left-left-1的CSS规则：
复制代码
1.#main-left-left-1{
2.width:
235px;
3.height:
70px;
4.margin:
auto;
5.border-bottom-width:
1px;
6.border-bottom-color:
#e5e5e3;
7.border-bottom-style:
solid;
8.}
15、将光标移到main-left-left-1层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-pic-1。
设置完成后单击“确定”按钮，在页面中将插入main-pic-1层。
16、切换到Div.css，创建一个#main-pic-1的CSS规则：
复制代码
1.#main-pic-1{
2.width:
56px;
3.height:
58px;
4.float:
left;
5.}
17、将光标移到main-pic-1 层中，将多余的文本内容选中，然后然后插入图像 D:
\myweb\images\4-8.gif。
18、将光标定位到main-pic-1 层的下面，然后输入（或者复制+粘贴）相应的文本内容。
19、切换到css.css，创建一个名为.text-2的CSS样式：
复制代码
1..text-2{
2. font-weight:
bold;
3. color:
#CC3333;
4. text-decoration:
underline;
5. line-height:
24px;
6.}
20、将该样式应用到对应的文本上。
21、用同样的方法依次制作main-left-left 层中的其它部分。
22、将光标定位到main-left-left 层的后面，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-right。
设置完成后单击“确定”按钮，在页面中将插入main-left-right 层。
23、切换到Div.css，创建一个#main-left-right 的CSS规则：
复制代码
1.#main-left-right{
2.width:
270px;
3.height:
270px;
4.float:
right;
5.}
24、将光标移到main-left-right 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-right-top 。
设置完成后单击“确定”按钮，在页面中将插入main-left-right-top 层。
25、切换到Div.css，创建一个#main-left-right-top 的CSS规则：
复制代码
1.#main-left-right-top{
2.width:
270px;
3.height:
25px;
4.text-align:
center;
5.}
26、将光标移到main-left-right-top层中，将多余的文本内容选中，然后然后插入图像 D:
\myweb\images\4-7.gif。
27、将光标定位到main-left-right-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-left-right-1。
设置完成后单击“确定”按钮，在页面中将插入main-left-right-1 层。
28、切换到Div.css，创建一个#main-left-right-1 的CSS规则：
复制代码
1.#main-left-right-1{
2.width:
235px;
3.height:
75px;
4.margin:
auto;
5.color:
#767475;
6.padding-top:
10px;
7.border-bottom:
1px#e5e5e3solid;
8.}
29、将光标移到main-left-right-1 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为main-pic-4。
设置完成后单击“确定”按钮，在页面中将插入main-pic-4层。
30、切换到Div.css，创建一个#main-pic-4 的CSS规则：
复制代码
1.#main-pic-4{
2.width:
50px;
3.height:
50px;
4.float:
left;
5.border:
1px#cdcdcdsolid;
6.}
31、将光标移到main-pic-4层中，将多余的文本内容选中，然后然后插入图像 D:
\myweb\images\4-11.gif。
32、将光标定位到main-pic-4 层的下
升级会员 