网站规划与网页设计

《网站规划与网页设计》实训报告课题名称：草木年华专业：计算机网络技术班级：网络G092学号：09*名：***指导教师：**2011年6月27 日目录一、课程设计目的 (4)二、课程设计题目描述和要求 (4)2.1设计题目 (4)2.2设计题目的要求 (4)三、课程设计报告内容 (5)3.1确定建设网站的主题与规划网站 (5)3.2网页中的色彩搭配 (6)3.3网页的整体布局和导航 (6)3.4网页素材处理技术 (6)3.5网页制作使用工具 (7)3.6创建和设计站点 (8)3.7制作网站中的各页面 (9)四、结论 (13)五、结束语 (14)六、参考书目 (15)七、附录 (15)《网站规划与网页设计》课程设计考核的评定标准一、课程设计目的在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等个方面发挥着重要的作用。

因此网站建设在Internet应用上的地位显而易见，他已成为政府、企业单位信息化建设中的重要组成部分，从而备受人们的重视。

我们当代大学生更是离不开网络给我们带来的好处与便利，但是，我们成天浏览的网站网页到底是如何制作的呢？我想这一点很多同学都没有去深究过，所以，这学期我们学习了“WEB网页设计”这门课。

本课程的设计目的是通过实践是同学们经过网页制作的全过程，通过设计达到掌握网页设计、制作的技巧。

了结合熟悉网页设计的基础知识和实现技巧。

根基题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟悉掌握Photoshop cs3、Dreamweaver cs等软件的操作和应用。

增强动手实践能力，进一步加强自身综合素质。

学会和团队配合，逐渐培养做完一个完整项目的能力。

二、课程设计题目描述和要求2.1设计题目我设计的是个人网站，标题为《草木年华》。

我的每一个网页都具有独特之处，同时也运用了我所学的知识在里面，我的网站的主旨在于从各方面全面的介绍我自己，展示自己，包括我的个人资料，个人相片和爱好。

另外，网站里还包括我的个人日记，收藏的故事，音乐，同时，网站里德每一页都有不同的风格在里面，色彩也很舒适，给浏览者好的欣赏感受。

还有留言板，是跟浏览者之间的互动。

2.2设计题目的要求对于个人制作的网站，网站的定义很重要一定要积极健康向上，体现出个人的能力与修养，同时网站的特色也很重要，要体现出自主创新，在确定了网站的主题后要选择一个适当的题目，题目在个人网站中起了很重要的作用，它很大部分的决定了整套个人网站的定位是否正确，一个好的名字必须有概括性的、简短的、有特色的、容易记得还要符合自己个人主页的主题和风格，另外如果自己的题目不新颖，那么浏览的人在看过一次之后就不想在来了。

在确定了主题和题目后，就要开始选材，（选材一定要有新意紧跟网站的主题和题目），一定要有特色，所谓的特色就是要自己组织素材不要上网上去找现成的拿来就用，更不要去其他的网站上找些模板及布局直接把自己的东西套上去，借鉴可以但是一定要现出自己的创意，那才是自己真正的个人网站。

在自己的网站上可以放些自己喜欢的东西，因为个人网站就是自己的一个小家，你可以放任何你喜欢的东西，在内容上没有限制（违法及不健康内容、涉及到版权的除外），完全可以放些自己曾经创作的作品，及以前的成果。

把这些内容按类别进行分类设置栏目，让人一目了然，栏目上不要设置太多免得让人觉得乱。

而且要保证个人主页用各种浏览器的都能看到最好的效果。

三、课程设计报告内容3.1确定建设网站的主题与规划网站我设计的网站，主要是介绍个人的兴趣爱好，个人介绍，个人日记，个人收藏，同时也体现了年青年的设计风格，另类独特，展现了21世纪青年认的设计风格，青春、活泼、有美感。

同时也是根据自己学习到的知识设计完整的网页。

我的网站共有10个页面：首页、相册、留言板、介绍、故事、收藏、日记、音乐、心愿、连接。

每一个页面都运用背景图片，以保证视觉效果。

我用我的名字命名网站名，用以方便和转发。

网站整体色调为浅色，然后点缀点其他的不同颜色相配，突出主题，颜色没有过多，过染，用于避免给人一种杂乱的感觉。

版面设计十分灵活，根据各部分内容的不同适当的自由设计，网页布局主要用框架和表格，用框架定位的大体结构，再用表格具体定位。

位子的设计也是重要的一部分，根据具体内容决定字体的风格，相同的风格多次多次调用使用CSS设计一个样式，以保证随时，准确的调用。

另外，为了网页布局的协调，我加入了适当的FLASH透明动态图片，用以达到更好的浏览效果。

3.2网页中的色彩搭配网页心愿、日记、是以蓝色为主的，蓝色是最受欢迎的颜色。

蓝色象征着和平与幸福，蓝色还可以使人感觉时间过得很快。

所以我选择蓝色背景，链接。

相册、是以黑色为主的，黑色，黑色是一种不可思议的神秘颜色，黑色还代表着强硬和冷酷，~神秘的颜色中隐藏的力量~，总之我的网页格局颜色是很不错的哦！3.3网页的整体布局和导航网页的布局其实就是一个网页的排版过程，只有你布局布的合理让人一看就能明白你要表达的意思，这才是最重要的。

成功的网页中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览。

对于一个网站来说如何做到让人一看就记住，还想再次访问，那么整体的布局就非常的重要，虽然网站的内容很重要但是要你的布局部美观这一样那一样，让人找不到自己想要找的东西，那么就是内容在丰富也没有人愿意来看。

我的导航使用了链接，每点击一个标签，都会连接到相对的网页上。

3.4网页素材处理技术1、网页排版用Macromedia Dreamweaver 它是的网页三剑客之一，与Macromedia Fireworks、Macromedia Flash组成的网页三剑客是做网页的利器。

2、用Fireworks MX制作和处理网页中相关图片。

我的LOGO设计：我的LOGO是以暗灰色为主的。

站标的主题是“草色年华”不正规的字体意义更加的明显。

整个站标简单却形象的表达出了网站的主要思想。

我的LOGO见下图（1）我的导航条见下图（2）3、用Flash MX制作网页中的(3) （4）3.5网页制作使用工具本次网页制作使用的工具很多，主要是以Dreamwear、HTML、CSS、Frontpage 等做为主要使用工具。

下面就针对这些工具做一下比较简单的介绍。

一．Dreamwear:Dreamweaver cs3具有强大的“所见即所得”性能，可以方便地在网页中插入图像表格文本特殊字符窗体及其他媒体等，并能够方便地对它们进行各种编辑，比如设置大小和颜色等。

在Dreamweaver cs3中，还可以方便地创建链接和导航条，添加跳转菜单和应用框架集和层，以及通过为网页添加行为快速制作交换图像弹出消息框等。

此外，在设计视图中进行编辑的同时，还可以在代码视图中看到文档的HTML源代码，方便专业人士在代码视图中进行修改。

在编辑由其他网页创作工具所生成的网页时，Dreamweaver 8 会尊重其他工具所生成的源代码，不会任意修改它们，如果需要的话，Dreamweaver 还会“净化”其他工具所生成的垃圾代码。

二．HTML：HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。

这也是HTML获得广泛应用的最重要的原因之脚本语言、CGI、组件等），可以创造出功能强大的网页。

因而，HTML是Web 编程的基础，也就是说万维网是建立在超文本基础之上的。

3.6创建和设计站点1、启用Dreamweaver MX，选择“站点→新建站点”命令，建立一个站点。

2、在“站点定义”对话框的“高级”选项卡的“分类”栏中选择“本地信息”，在“站点名称”的文本框内可以给网站起个名字为weishuojiao，将“本地根文件夹”设置为“E:\weishuojiao\，本地信息设置结果如图所示。

(1)5、设置完毕，单击“确认”按钮，返回到编缉站点对话框。

6、在编辑站点对话框中，单击“完成”按钮。

3.7制作网站中的各页面一、创建文件夹在网站文件夹里面建立一些文件夹，包括“image”（存储图片） (存储flash)“data”(用于存储数据库)。

二、创建文件选择建立的站点文件夹，右键单击该文件夹，在弹出的快捷菜单栏中选择新建文件，主页文件名为index.html, 主要介绍个人主页。

故事文件名为gushi.html,主要介绍了梁山伯与祝英台的唯美爱情故事。

介绍文件名为jieshao.html,主要介绍了我自己的爱好，习惯。

音乐文件名为yinyue.asp,主要介绍了王心凌的音乐。

日记文件名为riji.html,主要介绍了星期四的一些感慨。

心愿文件名为xinyuan.asp.主要介绍了女孩子的小小心愿。

相册的文件名为xiangce.html.主要是我自己的相片展示。

连接的文件名为lianjie.asp.主要介绍了四个主要的连接。

留言文件名为liuyan.asp主要显示别人的一些留言在上面。

收藏的文件名为shoucang.asp。

主要是一些我个人文章收藏。

三、创建主页面index.html1．启动Fireworks并新建一个文档，设置其大小为“1000像素*1000像素”，“画布颜色”为白色，然后单击“确定”按钮。

用Div画个表格，插入图片同时插入6．绘制单元格在适中的地方，单击插入→媒体→Flash动画。

2．FLASH，如图。

（1-1）（ 1-1）3. 再次单击绘制布局单元格4．在单元格里输入，首页、故事、介绍、音乐、日记、心愿、相册、连接、留言、收藏。

并全部选中水平（居中对齐）垂直（居中）。

如图（1-2）（1-3）四、其它页面的制作：启动Dreamweaver，新建一个基本页，重复以上步骤，在网站文件夹里面建立“gushi.html”（故事）、“jiesao.html”（介绍）、“shoucang.asp”（收藏）等。

按照上面步骤，再在网站分类文件夹里面建立所需的网页（接着还要把内容输入网页）。

已经做到了这么多，我们该准备内容了。

把准备好的文档、图片、文件和网页特效等放到图片文件夹中。

把准备好的素材往相应的网页中添加，要注意不要添加错误，我的制作方法是先利用布局表格在页面上画好布局页面，再嵌套布局单元格然后在进行添加内容，我的首页、相册。

音乐是用多个图片和多个flash结合而成，其它内容我加了一些代码和一些自己处理的图片，体现个人网站的主题所以我的其它页页面设计很简单。

各页面的界面及功能如下1.故事（加入了音乐，背景，动画，输入了一些内容）如图所示（2-1）（2-1）2.介绍（运用了DIV格式加入了音乐，背景，输入了一些内容）如图所示（3-1）（3-1）3. 音乐、框架网页：它引用了框架作为布局方式，可实现对多个页面的浏览。