1设计首页
(1)回绘制页面布局草图 页头 导航 本站承诺 主广告区 商品分类 主信息区 页脚
2 定义站点,使用Dreamweaver8
a. 在硬盘中建立一个文件夹，作为网站的根目录。
b. 启动Dreamweaver, 选择【站点】/【管理站点】菜单项，在弹出的【管理站点】对话框中单击【新建】按钮，在弹出的菜单中选择【站点】选项
c. 在系统弹出的对话框中单击【基本】选项卡，使用Dreamweaver站点定义向导对站点进项设置，在【您打算为您的站点起什么名字】文本框中输入网站名称“数码商店”，完成设置后单击【下一步】按钮。
d. 在弹出的对话框中，选择【否，我不想使用服务器技术】。单击【下一步】。 e 在弹出的对话框中，选择文本编剧测试方式及文件存储位置，完成后单击【下一步】。 f. 继续设置，检查无误后，这样最终在Dreamweaver生成一个站点，命名为“源地”右击选择新建文件，重新命名为【样式.html】，双击打开后，就可以编辑文件了。 3绘制布局
a. 单击工具条中的布局选项，再单击【布局表格】按钮，这个时候代码视图和蓝色视图都会出现黑色的条纹，这表示已经进入了布局状态。点布局表格按钮，在设计视图中拖动鼠标，绘制一个布局表格，打开属性面板，设置这个表格的宽度为756像素，高度为 105像素。右键单击表格，选择对齐—居中对齐。点击【绘制布局单元格】按钮，使布局单元格的边与布局表格的边有些空隙，拖动鼠标，绘制一个布局730x105像素的单元格，对齐并居中对齐。
b. 再单击【布局表格】按钮，和绘制网页头部一样，绘制一个宽756高45像素的表格，并使其居中。在以绘制好的导航栏布局表格中，绘制布局单元格放置导航栏信息，点击【绘制布局单元格】按钮，在导航栏布局表格中拖动鼠标，绘制一个300x45布局单元格和一个456x45的布局单元格。
c. 在导航栏下方绘制一个宽756高190像素的布局表格，使其居中，然后再其中绘制布局单元格，现在表格左边绘制一个1x190像素的布局单元格，用来放置“本店承诺”的信息，在右边在绘制一个550x19像素的单元格，放置“本站公告”的信息，下面的区域则为主广告区。
d. 单击【布局表格】按钮，绘制一个宽756高5像素的表格，使其居中对齐，在表格内的左边绘制一个宽180高5像素的布局表格，按住【ctrl】键，在其中绘制几个相同大小的矩形单元格。单击【布局表格】按钮，在右边的布局表格绘制一个550x19像素的布局表格，在其下方的区域为主信息区。
e. 单击【布局表格】按钮，在主信息区下方绘制一个宽756高75像素的表格，点击【绘制布局单元格】按钮，在其中绘制宽756高16像素的单元格，在其下方绘制一个宽756高43像素的单元格，在下方在绘制一个宽756高16像素的单元格。网页的页脚就绘制完了。 4 Banner条的制作
a. 打开Photoshop， 在其中新建一个宽730高105的文件，背景颜色为蓝色，点击文字工具，输入店铺名称“数码商店”和网址www.smsd.com，并调整字体大小。打开属性面板，选中文字“数码商店”，给其加上阴影和描边。在Banner条上插入之前准备好的数码相机图片。
b．这样Banner条就制作完成了，存储为web所用格式。打开Dreamweaver,点击布局选项里的标准模式，插入添加做好的Banner条 5导航条和背景图片的制作。
a.打开Photoshop， 在其中新建一个宽20高42 的文件，双击渐变编辑器，选择蓝白色渐变，单击确定按钮，将鼠标从上到下进行填充，这样就做好了导航条背景，存储为web所用格式。
b. 打开Dreamweaver,点击布局选项里的标准模式，插入添加做好的导航条。
c.修饰网页两边，就是之前绘制布局表格留下的空隙，在此添加背景图作美化用的。 d. 打开Photoshop， 在其中新建一个宽13高20 的文件，使用渐变编辑器进行渐变填充，这样左侧的背景图像就做好了，再将其水平翻转，这样，右侧的背景图像就完成了。存储为web所用格式。
e. 打开Dreamweaver,点击布局选项里的标准模式，添加左右单元格之前留下的空隙。 6本店承诺区和主广告区的制作。
a. 打开Photoshop， 在其中新建一个宽180高191 的文件，使用渐变工具，画出蓝白色的渐变背景。新建一个图层，选中圆形工具，在此底部画出一个圆形，填充为深蓝色。
b.新建一个图层，再其上面绘制一个矩形选区，用渐变工具进行渐变。点击文字工具，添加白色文字，白色承诺。然后在字体层下面新建一个图层，选择圆角矩形工具，划个深色的矩形，突出本店承诺区的名字，在其下方输入本店承诺的内容。
c选择矩形选框工具，在上面绘制的圆形选区内绘制一个矩形选框，渐变为蓝白渐变，用文字工具输入“商品分类”，在其前面加上一个合适的符号。存储为web所用格式。
d. 打开Dreamweaver,点击布局选项里的标准模式，添加做好的本店承诺区的图片 e,同样的，依次方法制作完成主广告区，并插入Dreamweaver,点击布局选项里的标准模式的相关位置处。并给信息栏和标语栏添加背景颜色为蓝色。 7信息分类区与页脚制作。
a. 打开Photoshop， 在其中新建一个宽180高800 的文件，然后把事先找好的素材图片拖拽到文件中，并适当剪裁，这样背景图片就做好了，存储为web所用格式。
b. 打开Dreamweaver,将做好的背景图片插入到其中 c.将页脚填充背景颜色。
8创建样式
a. 选择编辑菜单，选择首选参数，在弹出的对话框中勾选【使用css而不是html标签】. b. 新建一个css样式，定义一个“body”样式，在弹出的对话框中选择【方框】，将上边界
c. d. e. f.
9．添加导航栏目与分类信息
a.调整导航栏到适应的宽度，在这里将网站设为5个栏目【店铺介绍】【网上商店】【客户服务】【帮助中心】【发货查询】，调整好间距。将事先创建好的“biaoti”样式引入到导航栏之中。
b. 在左下方的商品分类区域添加商品分类列表，在此为商店要销售的各类商品。在此依次输入【数码mp3】【数码mp4】【数码相机(DC)】【掌上电脑PDA】【数码摄像机DV】【数码相机伴侣】【相机电池】。将事先创建好的“liebiao”样式引入到其中。 10.添加页脚及公告栏、标语栏信息。
a.添加公告栏信息，在公告栏矩形框中输入文字“公告：本店开业9折酬宾，欢迎广大网友订购商品”，居中对齐，然后将事先创建好的“yanse”样式引入到其中。 b.添加标语栏信息，在标语栏矩形框中输入文字“绝无假货，信誉第一！”，居中对齐，并将相应的样式引入其中。
c.最后，添加页脚信息，输入版权信息，联系方式等，并居中对齐。
至此，这个网站的整体风格页面就做好了，在之后的制作中，都会引用到这个页面。
11 制作首页
a.在文件面板中，将事先制作好的整体风格页面复制一份，重新命名为“index.html”。双击文件，将其打开，并将文件标题改为【数码商店首页】。
b. 首页要在主信息区展示一些商品，因此要在主信息区绘制一些商品展示位，将主信息区设为顶端对齐，进入布局模式，点击【布局表格】在主信息区绘制一个宽550高116的布局表格，然后再布局中在绘制两个布局表格，这两个表格平均分配，然后单击【绘制布局单元格】按住【Alt】键（这样做是为了使得单元格不会与表格的边框对齐），在第一个布局表格内绘制一个放置商品图片的121x116矩形单元格，在其旁边绘制几个放置商品信息的单元格，点击单击【绘制布局单元格】按住【Alt】键，然后按住【ctrl】连续绘制几个136x116单元格
c. 如果再这样绘制一次，肯定很麻烦，所以可以回到标准模式，将刚刚绘制好的表格复制，点击【table】标签，选中这个表格，然后按住“ctrl+c”复制这个表格，定位光标到右边按住“ctrl+v”黏贴，这样左右两边就都有展示位了。
d.回到标准模式，点击【table】标签，切换到“代码”视图上，其中被选中的就是商品展示位的代码了，复制代码，将鼠标定在代码“table”连续复制三次，回到设计制图中，就可以发现出现了四个商品展示位的表格了。
e.一次在每个商品展示位的矩形单元格中插入图片和文字。保存。
12．店铺介绍的制作
a. 在文件面板中，将事先制作好的整体风格页面复制一份，重新命名为“index.html”。双击文件，将其打开，并将文件标题改为【dpjj】，首先在导航栏文字中加入文字“首页”，已用作之后的链接网页首页使用。将标题改为店铺介绍。
设为0像素。
创建一个“td”,将字号设为12像素.
创建一个“biaoti”样式，将字号也设为12像素 创建“yanse”样式，将颜色设为白色。
创建“liebiao”样式，将下边框设为实线，1像素，黑色。
b.在主信息区绘制一个552x271像素的单元格，然后插入一张事先准备好的图片，并插入，居中对齐。
c.在其下方区域输入介绍店铺的文字。这样就做好了店铺介绍了，保存为【dpjj.html】 d.依照相同的方法，分别制作【网上商店】【客户服务】【帮助中心】【发货查询】页面，均是在相应的位置插入图片或文字等。分别命名为【wsspzs.html】【客户服务.html】【帮助中心.html】【发货查询.html】。
13．商品分类区产品页面制作。 【数码 mp3】的制作
a. 在文件面板中，将事先制作好的整体风格页面复制一份，重新命名为“index.html”。
双击文件，将其打开，并将文件标题改为【数码mp3】 b.在主信息区绘制一个552x271像素的单元格，然后插入一张事先准备好的图片，并插入，居中对齐。
c.在其下方区域输入介绍店铺的文字。这样就做好了店铺介绍了，保存为【数码mp3.html】 依照相同的方法，分别制作【数码mp4】【数码相机DC】【掌上电脑PDA】【数码摄像机DV】页面。分别命名为【数码mp4.html】【show2.html】【掌上电脑.html】【show1.html】。
14网页链接，网站生成
a. 打开【首页.html】文件，先为导航栏文字添加链接，选中文字“店铺介绍”，在下面
的属性面板中，打开链接文件夹，添加链接为【dpjj.html】,选中文字“网上商店”，在下面的属性面板中，打开连接文件夹，添加链接为【wsspzs.html】，选中文字“客户服务”，为其添加链接为【客户服务.html】，选中文字“帮助中心”，为其添加链接为【帮助中心.html】，选中文字“发货查询”，为其添加链接为【发货查询.html】，选中产品信息栏的文字“数码mp3”，为其添加链接为【数码mp3.html】，选中文字“数码mp4”，为其添加链接为【数码mp4.html】，选中文字“数码相机DC”，为其添加链接为【show2.html】，选中文字“掌上电脑PDA”，为其添加链接为【掌上电脑.html】，选中文字“数码摄像机DV”为其添加文字为【show1.html】。这样，首页的链接就做好了。
b. 打开【店铺介绍,html】文件。先为导航栏文字添加链接。选中文字“首页”，为其添
加链接【首页.html】。复制首页导航栏的链接，再选中【店铺介绍】页面的导航栏文字，黏贴。再回到【店铺介绍,html】文件，这样就做好了【店铺介绍】页面的链接 c. 依照此方法，分别为【网上商店】【客户服务】【帮助中心】【发货查询】【数码mp3】
【数码mp4】【数码相机DC】【掌上电脑PDA】【数码摄像机DV】页面做好链接。 d. 全部保存，这样的话数码商店的网站就做好了。