dw实训案例制作过程1.docx
《dw实训案例制作过程1.docx》由会员分享,可在线阅读,更多相关《dw实训案例制作过程1.docx(32页珍藏版)》请在冰点文库上搜索。
dw实训案例制作过程1
《静态网站设计与制作实训》
案例制作步骤
本案例把前面学习的零碎内容串联起来,组织成一个网站,从建立站点到一个完整的div+css网页的完成,整个流程下来,使学生有一个做完整网站的经历。
1.建立站点
2.结构分析
3.搭建框架
4.切割效果图
5.布局页面——头部和导航
6.布局页面——侧边栏
7.布局页面——主体部分
8.底部和细节调整
9.相对路径和相对于根目录路径
一、建立站点
要做一个网站,首先需要建立一个站点。
那么什么是站点,为什么要建立一个站点呢?
因为网站不同于其它文件,比方一个图片,放到哪个盘哪个目录下都可以访问。
而网站是许多文件相互关联的,所以要专门一个目录把它们分门别类存放起来。
下面以在E盘建立一个myweb文件夹为例,在dreamweaver(简称DW)里创建一个站点指向这个文件夹,然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
站点建立好后,我们先建立一个images和css文件夹,分别用来存放图片和css文件。
直接在windows的资源管理器下建立或者在dw里建立都是可以的;在dw建立需要在文件面板列表的根目录上点击右键,选择新建文件夹后更改名字即可。
二、结构分析
创建完站点后,就需要对页面结构进行分析了,根据效果图,分析页面分为几大块,该怎么布局更合理。
先看下效果图及在网页中显示的样式:
在浏览器中打开效果图预览
从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部,其中主体部分又分为左右两列,整个页面居中显示,看明白了这点,下边的框架就好搭建了。
整体框架结果图如下:
三、搭建框架
首先在dw里新建一个html文件:
点击创建后会自动生成如下代码的一个html文件,保存为index.html并把无标题文档改为:
主页。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":
//w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//w3.org/1999/xhtml">
主页