Dreamweaver网页设计设计说明书

1、dreamweaver网页设计设计说明书姓 名： 王 丹 学 号： 20101180124 班 级： 10图文 指导教师： 李德云 完成日期： 2011年12月16日 设 计 要 求考核目的通过开发一个完整网站让同学们亲自动手，身临其境体验制作过程才能将知识真正化为己有，为我所用。一个网站的建设不仅仅是收集制作素材、合成网页，更多的是开发者的创意和构思。从而了解网站开发要求、开发规范、掌握一个网站的完整制作步骤和操作方法。考核项目要求1、 网页内容积极向上、思想健康、有时代气息，网页内容充实，符合网站主题。1）主页上必须有logo、banner、网站导航、网站版权等信息。2）各网页的文字通顺，

2、无文字语法错误。 3）栏目至少有5个，每个栏目不少于3个子页。 2、设计要求： 网页布局设计合理，文字、图片、动画在网页中的运用适当。 各网页之间的设计风格统一，符合设计原理。 3、技术要求： 网页中各种技术运用恰到好处，不为技术而技术。 1）网页中包含表格、层、表单和多媒体等技术2）网页中含有样式和行为技术（鼠标经过图像、跳转菜单等）。 4、美工要求： 网页界面美观大方、引人入胜，色颜搭配合理，所有图片、动画与网站主题相符。 5、创意要求： 网站与同类主题网站相比富有新意，有自己的特色。6、格式要求：使用a4纸，上下左右边距分别为2.5厘米。标题：黑体二号，下划线，居中。内容：首行缩进2个字

3、符，小四号字，宋体，1.5倍行距。页码在右下角，起始页码0，格式“-页码-”，首页页码不显示。目录1网站规划111策划网站主题112确定网站风格113构思网站栏目结构114规划网站目录结构和链接结构115设计主要页面的布局22准备素材221准备文本222准备logo223准备图片和按钮224建立库项目33创建网站331创建本地站点332网站目录结构的搭建34网站首页的设计与制作441网站首页的布局设计442编辑css样式文件443编辑美化网站首页75制作二级栏目网页和内容网页751制作模板75、1、1 新建一个网页文件75、1、2 定义可编辑区域752制作基于模板的二级栏目网页753制作框架网

4、页7歪歪蛋创意生活网站设计说明书n 1网站规划n 1.1规划网站主题以家居家饰生活为主题，随着社会的发展，人们生活水平的提高，家居设计越来越成为人们生活中密不可分的一部分。n 1.2确定网站风格 健康向上的乐观生活态度，一股自然风构成此网站的主题风格趋势。n 1.3构思网站栏目结构logo图片导航新看点最新动态家居top5设计赏消费资讯精彩专题家居设计家饰生活广告乐居方式装修手册友情链接法律声明n 1.4规划网站目录结构和链接结构网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说:每个页面都是一个固定点，链接则是在两个固定点之间的连线

5、。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。我们研究网站的链接结构的目的在于:用最少的链接，使得浏览最有效率。网站目录结构如下：n 1.5设计主要页面的布局此网页用了5个导航、结构清晰、分类明确、可另浏览网页着迅速找到自己想要找到的信息，分栏结构用了三分栏结构n 2准备素材n 2.1准备文本首先是想了很多关于网站的内容，开始想做旅游的或服饰的网站，可是又觉得很多人都在做这些内容的网站，如果自己再做就有点没什么心意了，最后选择做我喜欢的家居生活网，恰巧我未来也要从事的也是这方面的工作，也为自己的未来多了解一些这方面的知识。然

6、后，我开始考虑这个网站的名字，经过了两个周的考虑，我决定用“歪歪蛋”做为这个家居网站的名字。因此，这个网站最后的名字就是歪歪蛋创意生活网。在设计网站布局的过程中，我曾浏览过很多优秀的网站，并且学习运用了他们里面的令人赏心悦目的优点。最后我的主页用的是三等分的布局模式。在编辑网站的过程中，我不断地浏览其他的家居网站，了解了最新的家居动态，调查了很多家居市场的发展状况，在自己的网站里引用了很多瑞丽家居网的家居动态和家居最新形势。从里面下载了大量的文本内容和家居图片。整个网站的编辑中运用了布局模式、各种形式的表格、css样式、表单和鼠标经过图像等网页制作技巧，使网页内容达到了很大的充实。整个网页采用

7、了蓝色调，是网页的颜色达到了协调一致的要求。n 2.2准备logo从网络上浏览了大量的网站logo图片，学习优秀网站的logo特点，又自己学着用fireworks做属于自己网站的logo图片。曾经用过很多颜色作为logo图片的底色，可是都觉得有些地方不合适，最终选定了用普蓝色作为网站logo图片的最终底色。网站的广告语是设计美丽设计生活。曾想用让生活美丽一点，经过很久的斟酌最后选用设计美丽设计生活，最为本网站的广告语。n 2.3准备图片及按钮浏览了大量的网站，从网络上搜集了大量的家居家饰图片，包含各种风格的。有欧式古典风格、中式古典风格、现代清新风格、清新自然风格、现代时尚风格等等。搜集的图片

8、好包含着各种家饰布艺、花艺还有包括各种手工diy。使整个网页给人一种温暖的家的感觉。n 2.4建立库项目一个总的文件夹命名为waiwaidan，文件夹由word、flash、image文件夹模板文件夹和html文件组成。每个文件夹都有它各自的功能，分工明确，使用时方便快捷。n 3创建网站n 3.1创建本地站点 创建本地站点的具体操作步骤如下：（1）在“文件”面板中，单击“文件”下方列表框的下拉箭头，从下拉列表框中单击“管理站点”菜单项。（2）弹出“管理站点”对话框。（3）点击“新建”-“站点”。（4）弹出“未命名站点1的站点定义为”对话框，在“基本”选项卡，“您打算为您的站点起什么名字？”一栏

9、输入站点的名字，如：waiwaidan在“您的站点的http地址（url）是什么？”输入。（5）点击“下一步”按钮，进入编辑文件第2部分，选择“否，我不想使用服务器技术。（o）”（6）点击“下一步”按钮，进入编辑文件第3部分。选择站点保存路径。（7）点击“下一步”按钮，进入“共享文件”窗口。在“您如何连接到远程服务器？”选择“无”。（8）点击“下一步”按钮，进入“总结”窗口。（9）点击“完成”按钮，再次弹出“管理站点”对话框，在“管理站点”对话框中显示出新建的本地站点名称。（10）点击“完成”按钮，web的本地站点就创建完成了。n 3.2网站目录结构的搭建 网站的目录是指你建立网站时创建的目录

10、。注意事项：不要将所有文件都存放在根目录下。按栏目内容建立子目录。在每个主目录下都建立独立的images目录。目录的层次不要太深。waiwaidan这个站点里包括flash、word、image、index和包括家居设计、家饰生活在内的等十个子页。其中，在image文件夹下包含了logo等202个图片。n 4网站首页的设计与制作n 4.1网站首页的布局设计首先是整个网页的logo图片和网站名称，然后是网站的导航分为六类，分别是家居设计、家饰生活、乐居方式、装修手册、建材宝典和设计师在线。导航的下面是各类导航的小菜单。然后是一组四个的家居宣传图片，再下面是新看点、家居最新动态和家居top5。然后

11、是设计赏。再往下是消费资讯和精彩专题。在下面是家居设计、家饰生活、乐居方式和装修手册四个分类的具体内容分类。最后是网站首页的法律声明。n 4.2编辑css样式文件body,td,th font-size: x-large;color: #000000;.style9 font-family: "华文琥珀"font-style: italic;font-size: larger;color: #6699ff;.style10 font-family: "华文隶书"color: #6699ff;font-weight: bold;font-style: it

12、alic;.aa font-family: "宋体"font-size: 14px;font-style: normal;color: #6699ff;list-style-image: url(image/icon_one01-g01.gif);a:hover color: #ffffff;text-decoration: none;a:active color: #ffffff;text-decoration: none;.style19 color: #ffffff; font-weight: bold; font-size: 18px; .style21 color

13、: #999999; font-size: 10px; .style22 font-size: 14px;color: #999999;.style23 color: #999999;font-size: 14px;.style35 color: #003366;font-size: 16px;font-weight: bold;.style37 color: #003366;font-weight: bold;font-size: 14px;.style38 color: #006699;font-weight: bold;font-size: 16px;.style39 font-size

14、: 14px;font-weight: bold;color: #006699;.style41 color: #6699ff.style42 font-family: "华文隶书".style45 color: #006699.style49 color: #6699ff;font-size: 14px;.style50 font-size: 14px;color: #ffffff;font-weight: bold;.cibiaoti font-size: 14px;font-weight: bold;color: #ffffff;.style52 color: #00

15、6699; font-size: 14px; .ti font-size: 18px;font-style: normal;font-weight: bold;color: #6699ff;.xiaobiaoti font-size: 14px;color: #000000;line-height: 20px;font-weight: normal;a:link text-decoration: none;a:visited text-decoration: none;.fuhao font-size: 14px;font-weight: bold;color: #666666;.ww fon

16、t-size: 14px;font-weight: normal;color: #ffffff;.cc font-size: 14px;font-weight: bold;color: #344b3d;.ee font-size: 14px;font-weight: normal;color: #006633;.style54 font-size: 14px;color: #cc6600;font-weight: bold;.style56 font-size: 14px;color: #006633;font-weight: bold;.style58 color: #006633.styl

17、e59 font-size: 14px; font-weight: normal; color: #006633; .style60 font-size: 14px;font-weight: bold;color: #0066ff;.style61 font-size: 14px;color: #cc6600;.style62 font-size: 14px;color: #666666;line-height: 20px;font-weight: bold;.style63 color: #666666; line-height: 20px; font-size: 14px;n 4.3编辑美

18、化网站首页整个网站首页风格采用蓝色基调，使网页给人一种清新愉快的感觉，看的时间久了，也不会让人产生视觉疲劳。整个网页的的内容比例设计的也恰到好处，详略得当，不会让读者看起来的时候觉得没有重点。n 5制作二级栏目网页和内容网页n 5.1制作模板n 5.1.1新建一个网页文件在我的站点文件夹里新建一个网页子页，依次是：家居设计、家饰生活、装修手册、建材宝典、设计师在线。然后设计整个子页的布局和框架，让整个网页的子页设计与主页设计达到协调一致，把整个网页的主要内容构思好。n 5.1.2定义可编辑区域用一个做好的网站子页 ，做了一个网页模板，在需要编辑的地方定义一个可编辑区域，首先选定你想要编辑的区域点击插入记录然后点击模板对象选择此菜单中的可编辑区域选项，然后想要编辑的区域就建立完成了。n 5.2制作基于模板的二级栏目网页在我的站点内创建一个新的网页，也就是整个网站的子页。然后把整体网页的布局给设计好，使新的网页的风格与网站主页的风格相同，使整个网站的风格协调一致，给人一种舒服的感觉。整个网站的banna和导航不变，就是改变了子页里面的具体内容。n 5.3制作框架网页网址：网站名称：歪歪蛋创意生活网网址：http:/ n 参考文献：1.dreamweavercs3 基础与实例教程主编 谬亮 电子工业出版社2.网页设计制作