最近评论
正在载入评论列表...
15.4 制作页面过程
在Photoshop中设计好图以后，就要在Dreamweaver 8中按照设计的效果切割做成HMTL网页。制作好的网页效果如图15.6所示。
图15.6 网页效果图
15.4.1 新建站点
在制作网页之前，先要建立一个该网站的站点。新建站点的具体操作步骤如下：
（1）选择菜单命令【站点】→【新建站点】，打开【站点定义为】对话框。
（2）在对话框中设置【本地信息】类别中的相关参数。
（3）设置站点名称为【案例一个人网站的制作】。
（4）设置本地文件夹为【E:\书\案例\anli_1\】。
（5）设置默认图像文件夹为【E:\书\案例\anli_1\images\】。
（6）其他设置均按默认，设置完成的对话框如图15.7所示。
（7）单击【确认】按钮，创建站点完成。
图15.7 新建站点
15.4.2 建立站点文件夹
根据网页制作规范建立站点文件夹。先建立images和style两个文件夹，网页文件放在根目录下，之后的文件夹在涉及到时随时添加。
15.4.3 新建网页
建立好站点和文件夹以后，在根目录下新建一个index.htm页。
（1）打开【文件】面板，在站点目录空白处右击，在弹出的菜单中选择【新建文件】选项。
（2）将新建的未命名文件重新命名为“index.htm”。
（3）双击文件名，进入文档视图，进行编辑。
15.4.4 设置标题栏
新建的网页标题是“无标题文档”，在如图15.8所示中修改标题，或切换到代码视图，对<title></title>中间的代码直接修改，设置标题为【余淑坤医生的个人网页--吉林市吉化集团公司肿瘤科！】
图15.8 置标题栏
15.4.5 设置页面属性
按Ctrl+J快捷键或选择菜单命令【修改】→【页面属性】，设置页面的属性。
1．设置外观
设置页面外观属性，整个页面用图像imges/bg_3.gif填充，边距为0，如图15.9所示。
2．设置链接
设置页面的链接属性，即a:link a:visited a:hover a:actived属性，如图15.10所示。
图15.9 面属性设置（外观） 图15.10 面属性设置（链接）
3．设置标题/编码
设置页面的编码类型和文档类型，本案例使用简体中文（GB2312），文档类型选择【XHTML 1.0 Transitional】，如图15.11所示。
图15.11 页面属性设置（编码类型）
其余页面属性暂时选择默认。
15.4.6 创建CSS样式表
根据页面属性及界面色调，将可能用到的样式创建到样式表Style.css文件中，保存在文件夹style中。代码如下：
<!--
body {
font-family: "宋体", Verdana;
font-size: 9pt;
background-image: url(../images/bg_3.gif);
padding-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
margin: 0;
}
a:link {
color: #000000;
text-decoration: none;
font-family: Verdana, "宋体";
font-size: 9pt;
}
a:visited {
color: #000000;
text-decoration: none;
font-family: Verdana, "宋体";
font-size: 9pt;
}
a:hover {
color: #FF6600;
text-decoration: none;
position: relative;
right: 1px;
top: 1px;
font-family: Verdana, "宋体";
font-size: 9pt;
}
a:actived {
color: #000000;
text-decoration: none;
font-family: Verdana, "宋体";
font-size: 9pt;
}
td{
font-size:9pt;
font-family: Verdana, "宋体";
}
p{
line-height: 120%;
text-indent: 2em;
font-family: Verdana, "宋体";
}
input{
font-size:9pt;
font-family: Verdana, "宋体";
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
select{
font-size:9pt;
font-family: Verdana, "宋体";
background-color: #FFFFFF;
border: 1px 1 #CCCCCC;
}
.img {
padding-right: 4px;
padding-left:4px;
padding-bottom:4px;
padding-top:4px
display:inline;
margin:0px 7px 2px 0px;
border:1px solid #999999;
}
.font {
font-family: Verdana, "宋体";
font-size: 9pt;
color: #333333;
}
.title{
font-family: "宋体";
font-size: 14px;
color: #CC0000;
text-align: center;
font-weight: bold;
line-height: 120%;
}
a.title:link { color: #CC0000; text-decoration: none }
a.title:visited { color: #CC0000; text-decoration: none }
a.title:hover { color: #CC6600; text-decoration: none; position: relative; right: 1px; top: 1px }
a.title:active { color: #CC0000; text-decoration: none }
.red {
font-family: Verdana, "宋体";
font-size: 9pt;
color: #FF6600;
text-decoration: none;
}
.b_z {
font-family: "宋体";
font-size: 14px;
color: #DE34A5;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
}
.white_b {
font-family: "宋体";
font-size: 12px;
color: #ffffff;
font-weight: bold;
text-align: center;
}
a.white_b:link { color: #ffffff; text-decoration: none }
a.white_b:visited { color: #ffffff; text-decoration: none }
a.white_b:hover { color: #FDDFFD; text-decoration: none; position: relative; right: 1px; top: 1px }
a.white_b:active { color: #ffffff; text-decoration: none }
.white {font-family: Verdana, "宋体";font-size: 12px;color: #ffffff;}
a.white:link {font-family: Verdana, "宋体";font-size: 9pt; color: #ffffff; text-decoration: none }
a.white:visited { font-family: Verdana, "宋体";font-size: 12px;color: #ffffff; text-decoration: none }
a.white:hover { font-family: Verdana, "宋体";font-size: 12px;color: #FF99CC; text-decoration: none }
a.white:active { font-family: Verdana, "宋体";font-size: 12px;color: #ffffff; text-decoration: none }
-->
图书导读
