CSS图文混排.docx
- 文档编号:10696333
- 上传时间:2023-02-22
- 格式:DOCX
- 页数:20
- 大小:20.53KB
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 层的下
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 图文