网页设计—佘赛娇

《网页设计—佘赛娇》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页设计与制作（2011/2012学年第一学期）课程名称网页设计与制作设计题目名族音乐课程性质公共选修课学生专业10级中文系历史学专业学生学号1040403033学生姓名佘赛娇授课教师刘红军邵阳学院2011年11月5日目录1设计目的………………………………......12设计特点…………………………………..13设计思想…………………………………..14网页详细设计分析………………………..24.1建立站点………………………...……24.2设计网页布局……………….………..34.3网页中的图像………………………...44.4网页首页效果欣赏…………………...65总结………………

2、…………….………….6网页设计与制作---中国名族音乐一、设计目的本课程的设计目的是通过实践使同学们经历Dreamweavercs4开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweavercs3可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshopcs4、Dreamweavercs4等软件的的操作和应用。

3、增强动手实践能力，进一步加强自身综合素质。我本次主要是设计的以“中国民族音乐”为主题的网页，针对名族音乐做一系列的介绍。二、设计特点在网站上访客能快速的了解“中国民族音乐”是什么。三、设计思想利用Dreamweavercs4制作一个关于“中国民族音乐”的网站，利用表格、行为、层和链接等网页设计技术设计页面。本网站以介绍中国名字音乐为主，讲解了名族音乐的种类。共设置6个大栏目，其中“中国名族音乐”简介一个栏目，具体结构如下图所示：7网页设计与制作---中国名族音乐首页简介名族歌曲歌舞音乐说唱音乐戏曲音乐器乐四、网页详细设计分析4.1建立站点⑴打开站点管理→新建→站点→输入名称“中国民族

4、音乐”→下一步⑵单击“下一步”⑶选好存储位置→单击“下一步”⑷选好服务器文件夹→单击“下一步”⑸单击“下一步”⑹单击“完成”4.2设计网页布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweavercs4是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都

5、要控制好。4.3网页中的图像7网页设计与制作---中国名族音乐图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。（1）在网页中插入

6、图像利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页，把光标定位在网页的开始位置。2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。（2）图像

7、的各种属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.打开“外观”选项卡①设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。②设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图