Dreamweaver网页设计设计说明书汇.doc

Dreamweaver网页设计 设计说明书 姓 名： 王 丹 学 号： 20101180124 班 级： 10图文 指导教师： 李德云 完成日期： 2011年月日。1网站规划 1 1．1策划网站主题 1 1．2确定网站风格 1 1．3构思网站栏目结构 1 1．4规划网站目录结构和链接结构 1 1．5设计主要页面的布局 2 2准备素材 2 2．1准备文本 2 2．2准备logo 2 2．3准备图片和按钮 2 2．4建立库项目 3 3创建网站 3 3．1创建本地站点 3 3．2网站目录结构的搭建 3 4网站首页的设计与制作 4 4．1网站首页的布局设计 4 4．2编辑CSS样式文件 4 4．3编辑美化网站首页 7 5制作二级栏目网页和内容网页 7 5．1制作模板 7 5、1、1 新建一个网页文件 7 5、1、2 定义可编辑区域 7 5．2制作基于模板的二级栏目网页 7 5．3制作框架网页 7 歪歪蛋创意生活网站设计说明书 1网站规划 1.1规划网站主题 以家居家饰生活为主题，随着社会的发展，人们生活水平的提高，家居设计越来越成为人们生活中密不可分的一部分。 1.2确定网站风格 健康向上的乐观生活态度，一股自然风构成此网站的主题风格趋势。 1.3构思网站栏目结构 LOGO图片 导航 新 看 点 最 新 动 态 家 居 TOP 5 设计赏 消费资讯 精彩专题 家居设计 家饰生活 广告 乐居方式 装修手册 友情链接 法律声明 1.4规划网站目录结构和链接结构 网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说:每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。 我们研究网站的链接结构的目的在于:用最少的链接，使得浏览最有效率。 网站目录结构如下： 1.5设计主要页面的布局 此网页用了5个导航、结构清晰、分类明确、可另浏览网页着迅速找到自己想要找到的信息，分栏结构用了三分栏结构 2准备素材 2.1准备文本 首先是想了很多关于网站的内容，开始想做旅游的或服饰的网站，可是又觉得很多人都在做这些内容的网站，如果自己再做就有点没什么心意了，最后选择做我喜欢的家居生活网，恰巧我未来也要从事的也是这方面的工作，也为自己的未来多了解一些这方面的知识。然后，我开始考虑这个网站的名字，经过了两个周的考虑，我决定用“歪歪蛋”做为这个家居网站的名字。因此，这个网站最后的名字就是歪歪蛋创意生活网。在设计网站布局的过程中，我曾浏览过很多优秀的网站，并且学习运用了他们里面的令人赏心悦目的优点。最后我的主页用的是三等分的布局模式。在编辑网站的过程中，我不断地浏览其他的家居网站，了解了最新的家居动态，调查了很多家居市场的发展状况，在自己的网站里引用了很多瑞丽家居网的家居动态和家居最新形势。从里面下载了大量的文本内容和家居图片。整个网站的编辑中运用了布局模式、各种形式的表格、CSS样式、表单和鼠标经过图像等网页制作技巧，使网页内容达到了很大的充实。整个网页采用了蓝色调，是网页的颜色达到了协调一致的要求。 2.2准备logo 从网络上浏览了大量的网站logo图片，学习优秀网站的logo特点，又自己学着用fireworks做属于自己网站的logo图片。曾经用过很多颜色作为logo图片的底色，可是都觉得有些地方不合适，最终选定了用普蓝色作为网站logo图片的最终底色。网站的广告语是设计美丽设计生活。曾想用让生活美丽一点，经过很久的斟酌最后选用设计美丽设计生活，最为本网站的广告语。 2.3准备图片及按钮 浏览了大量的网站，从网络上搜集了大量的家居家饰图片，包含各种风格的。有欧式古典风格、中式古典风格、现代清新风格、清新自然风格、现代时尚风格等等。搜集的图片好包含着各种家饰布艺、花艺还有包括各种手工DIY。使整个网页给人一种温暖的家的感觉。 2.4建立库项目 一个总的文件夹命名为waiwaidan，文件夹由word、flash、image文件夹模板文件夹和html文件组成。每个文件夹都有它各自的功能，分工明确，使用时方便快捷。 3创建网站 3.1创建本地站点 创建本地站点的具体操作步骤如下： （1） 在“文件”面板中，单击“文件”下方列表框的下拉箭头，从下拉列表框中单击“管理站点”菜单项。 （2）弹出“管理站点”对话框。 （3）点击“新建”-“站点”弹出“未命名站点1的站点定义为”对话框，在“基本”选项卡，“您打算为您的站点起什么名字？”一栏输入站点