本节简介:学习网页制作的流程,案例制作:在DW中制作网上商城二级页面草图。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
div之间是可以相互叠加的,所以后面的div还是位于原来的位置,所以要让后面的产品区沿着导航区的边缘排列,而不是覆盖在上面
对导航区做一个CSS样式,因为该导航区在左侧,所以要对她进行左浮动的对齐
导航区和广告区可以合并作为一个box,拉倒同一个位置上,因为在做box的时候,如果上面的宽度不够的话,下面的广告区会自动移动到导航区下面来,所以不需要在这个地方做两个div的盒子
对第二个方框进行CSS定义,按顺序更改选择器名称,在方框内输入数据
点击确定之后,吧方框类的字改为网页布局中相应区块的名字
在规则里面的方框栏,输入测量好的区块的宽高,居中显示
将光标放在box_1里面,在右侧body的属性栏新建CSS规则。用id的定位尽可以了
接下来对Div标签添加CSS样式,在PS的页面布局中对区块进行测量,右键单击标尺,修改为像素,即可按像素测量,用矩形选框
根据网页的页面布局,确定要建立多少个box,在代码视图中对代码进行复制添加,按顺序更改id
创建完站点和body的CSS样式后,对页面进行Div布局,在插入工具下,布局对象插入Div标签,ID设置为box_1点击确定
确定后对代码做一个精简,margin:0px auto;
首先定义一个body 的样式表的类型,新建一个CSS规则,选择标签,设置字体宋体,字号18号,之后在方框设置页面对齐,上下为0,左右为自动。
这样的话每一个页面都可以加载样式表,这样会方便很多。
2.在新的站点里面使用CSS的一个样式表,因为现在知只做一个单独的网页,所以就不需要 使用Web的样式表,如果定义的是整个网页,那么就要使用Web的样式表。
打开Dreamweaver:选择Html,新建站点,选择保存的文件夹,(文件件需要自己找一个地方建立“站点”文件夹),然后在高级设置里面建立一个保存图片的文件夹“images”,然后保存,保存Html文件到站点文件夹下面。
html格式,新建站点 站点→高级设置→选择位置,保存JPG
网页制作流程:1.网站分析 2.ps实现页面布局 3.ps等实现网站页面效果 4.ps进行页面切片 5.用DW——css+DIV制作