张家界_divcss_布局网页制作步骤指导

《张家界_divcss_布局网页制作步骤指导》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、张家界_div+css_布局网页制作步骤指导步骤1：1、新建一个文件夹“张家界-div+css布局”，把图片素材（image文件夹）拷贝到该文件夹“张家界-div+css布局”中。2、打开dreamweaver,创建一个站点，点击“站点”菜单，选择“新建站点”命令，打开对话框，设置如下图，注意本地站点文件夹选择“张家界-div+css布局”。3、在文件面板中新建一个首页文件index4、双击打开首页index.html开始网页制作。5、新建body样式，样式保存到mycss文件中。打开css样式面板，创建css样式。“选择器类型”为“标签”，选

2、择body样式，设置参数如图所示。接下来具体设置body样式的参数。（字体、大小、颜色、边界）设置完参数，单击确定，保存样式。6、创建box标签及设置其css样式执行“插入记录”一“布局对象”一“Div标签”命令，弹出对话框，创建box标签。页面效果如下。接下来设置box标签的样式，打开css样式面板，创建一个新的样式。单击确定，保存样式，页面效果如下将box标签屮的内容删除。7、创建top标签及设置英css样式选择“插入”一“布局对象”一“Div标签”命令，弹出对话框，在box标签屮创建一个新的Div标签top0选中top标签，在CSS样式面

3、板中为top标签创建新的样式。将top标签中的内容删除，插入图片head.jpg,效果如下图。8、创建menu标签及设置其css样式选择“插入”一“布局对象”一“Div标签”命令，弹出对话框，在top标签后面创建一个新的Div标签menu。选中menu标签，在css样式面板中为top标签创建新的样式。将menu标签中的内容删除，插入图片daohangtiao.jpg,效果如下图。9、创建content标签及设置英css样式选择“插入”一“布局对象”一“Div标签”命令，弹出对话框，在menu标签后面创建一个新的content标签。选中conte

4、nt标签，在css样式面板中为content标签创建新的样式。将content标签中的内容删除。10、创建left标签及设置其css样式在content标签中创建一个新div标签left。选择“插入”一“布局对象”一“Div标签”命令，弹出对话框，在content标签屮创建一个新的left标签。选择left标签，创建一个新的css样式。选择方框选项卡，设置left标签的css样式。页面效果如图所示将left标签内容删去，插入images文件夹中的kaimushi.jpg图片。页面效果如下。11、创建right标签及设置其css样式在left标签

5、的右侧插入一个新的div标签righto选择right标签，创建一个新的css样式。切换到“方框”选项卡，设置宽度、高度和浮动方式。页面效果如下：12、创建pic标签及设fCSS样式将right标签内容删去，在right标签中插入新div标签rightlo2、选中rightl标签，设定其css样式。设置参数。删除标签中的文字，输入“新闻动态更多>>”页面效果如下13^创建right2标签及设置其css样式在rightl标签后面插入新div标签right2o2^选中right2标签，设定其css样式。设置参数。删除标签中的文字，输入5

6、条新闻列表内容，每条新闻内容回车换行,给每条新闻设置成空超级链接，页面效果如下。14、创建yyz标签及设置其css样式在content标签后面插入新div标签yyz。2、选中yyz标签，设定其css样式。设置参数。删除标签中的文字，输入页血效果如下。15>创建yyztu标签及设置其css样式在yyz标签后面插入新div标签yyztuo选中yyztu标签，设定其css样式。删除标签中的文字，插入图片yyzl.jpg>yyz2.jpg>yyz3.jpg>yyz4.jpg,输入页面效果如下。16>创建yytt标签和yytttu标签及设置其css样式步

7、骤同1517>创建bottom标签设置其css样式步骤同前。提示：创建标签，标签宽925,高98像素。删除标签内文字，插入图片。