公共选修课学生学号学生姓名佘赛娇授课教师刘红军邵阳学院

PAGE 网页设计与制作 PAGE1 网页设计与制作（2011/2012学年第一学期） 课程名称 网页设计与制作 设计名称 家庭音乐课程 性质 公共选修课 学生专业 10级 中文系 历史专业 学生姓名 学生姓名 佘赛教 导师刘红军 邵阳学院 2011 年 11 月 5 日 目录 1 设计目的…………………………………… 12 设计特点………………………………. .13 设计思维………………………………..14 网页详细设计分析……………………..2 4.1 建站……………… ……………………24.2设计网页布局……………….……..34.3网页中的图像………………………… …44.4首页效果欣赏……………………65总结………………………….…………. 6网页设计与制作—中国名曲PAGE7网页设计与制作—中国名曲一、设计目的本课程的设计目的是让学生经历开发的全过程，获得一个通过实践进行综合训练，使他们能够更全面地理解、掌握和综合所学知识。结合具体开发案例，了解并初步掌握使用可视化开发工具开发网页的方法；了解网页设计和制作过程。通过设计掌握网页设计和制作的技巧。了解并熟悉网页设计的基础知识和实施技术。根据题目要求，给出一个网页设计方案网页制作门户网站图片展现中的1234滚动播放，符合要求的网页设计作品可以根据需要使用适当的图文材料进行设计制作。精通软件的操作和应用等。增强动手实践能力，进一步增强综合素质。这次主要设计了“中国民族之声”

以“音乐”为主题的网页，对民族音乐进行系列介绍。二、设计特色 在网站上，访问者可以快速了解什么是“中国民族音乐”。三、设计思路是关于“国乐”的网站，页面的设计采用了形式、行为、层次、链接等网页设计技术。本网站主要介绍中文名曲，并说明名曲的种类。共有6大栏目，其中“中国名曲”介绍为一栏，具体结构如下图：首页介绍名曲、舞曲、说唱音乐、歌剧音乐、器乐→新建→网站→进入名称为“中国民乐”→下一步 ⑵点击“下一步” ⑶选择存放位置→点击“下一步” ⑷选择服务器文件夹→点击“下一步” ⑸点击“下一步” ⑹点击“完成”4.2 设计网页布局 在这个网页设计中，很多布局都用到了，所以如何搭建布局是关键。它是大多数人设计网页的利器，也是很多初学者的捷径。尤其是其在布局方面的出色表现更受青睐。每个人都知道，没有表格的帮助，很难组织一个协调良好的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。创建一个通用布局。2.使用背景图片：选择此选项并按浏览插入准备好的图片作为桌子的背景，因为图片是基于平铺形式作为表格背景，所以表格大小和图片大小要控制好。4.3图片和图片在网页中的传输才是WWW真正的魅力所在。与文字相比，具有显着优势：一是直观，查看图像时接收信息的速度比查看文本时快得多；二是把细节表达得更清楚。由于这些优点，图像在网页设计中非常流行。如果把网页做成一幅山水画，浏览者可以 看图片时接收信息的速度比看文字时快得多；二是把细节表达得更清楚。由于这些优点，图像在网页设计中非常流行。如果把网页做成一幅山水画，浏览者可以 看图片时接收信息的速度比看文字时快得多；二是把细节表达得更清楚。由于这些优点，图像在网页设计中非常流行。如果把网页做成一幅山水画，浏览者可以

会流连忘返（如果图片很大，效果会适得其反）。图像文件格式有数十种，如 GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF 等。现在并支持，最常用的图像格式是 GIF、JPEG 和 BMP。(1）在网页中插入图片可以很方便的在网页中插入图片，还可以设置图片的边框、大小、位置，还可以直接编辑图片。在网页中添加图片的操作非常简单：1.新建一个空白网页，将光标定位在网页开头。2.打开“工具”菜单网页制作门户网站图片展现中的1234滚动播放，选择“图片”菜单项，选择“来自文件”子菜单中的菜单项，或单击工具栏中的图片工具图标，弹出“图片”对话框。3.单击“ 您可以根据需要定义图像的边框。您也可以将边框值定义为“0”，即无边框。②设置图片换行方式：一般一张图片只能和一行文字等高，但有时需要将图片和文字分开，两者相互独立。影响。比如在网页左侧插入图片，要求右侧的文字可以像没有图片一样多行输入。这是通过设置图像的环绕方式来实现的。并且两者是相互独立的。影响。比如在网页左侧插入图片，要求右侧的文字可以像没有图片一样多行输入。这是通过设置图像的环绕方式来实现的。并且两者是相互独立的。影响。比如在网页左侧插入图片，要求右侧的文字可以像没有图片一样多行输入。这是通过设置图像的环绕方式来实现的。

完成。在网页中包装图像有两种方式：左换行：图像在左侧，文字在图像右侧换行。湾。右换行：图像在右侧，文本在图像左侧换行。打开“外观”选项卡的“布局”列中的“对齐”下拉列表框，选择“左”选项，点击“确定”按钮，图像设置为左环绕方式。同样，如果选择“右”，则图像设置为右绕。③编辑图片尺寸：在网页中添加图片时，图片尺寸默认设置为原始尺寸。如果添加的图像太大或太小，或有其他特殊需要，则必须调整图像尺寸。调整图像大小非常简单灵活，只要选中添加的图片，用鼠标左键拖动图片边框，就可以任意调整图片的宽高，直到对尺寸满意为止。④设置图片缩放比例：网页设计的一个重要原则就是网页的兼容性。对于不同的浏览器或者不同的分辨率，无论是1024×600的窗口还是1440×900的窗口，网页都必须是正常的。节目。设置图片缩放比例就是将图片的大小设置为与浏览器的大小成正比，使图片在不同大小的浏览器窗口中都能正常显示。设置图片缩放比例的步骤如下： 1、在网页中选中图片，点击右键，在弹出的快捷菜单中选择“图片属性”菜单项，出现“图像属性” 2、在“Size”列中，选中“ size”复选框，选中“Width”和“”下的“”单选按钮，然后在“宽度”和“高度”列。比例，然后单击“确定”完成设置。此外，您还可以在“外观”选项卡的“水平间距”和“垂直间距”栏中进行设置。水平间距是指图像与周围元素之间的水平间距，以像素为单位；垂直间距是指图像和周围元素。元素 和“高度”，然后在“宽度”和“高度”栏中输入所需的尺寸。比例，然后单击“确定”完成设置。此外，您还可以在“外观”选项卡的“水平间距”和“垂直间距”栏中进行设置。水平间距是指图像与周围元素之间的水平间距，以像素为单位；垂直间距是指图像和周围元素。元素 和“高度”，然后在“宽度”和“高度”栏中输入所需的尺寸。比例，然后单击“确定”完成设置。此外，您还可以在“外观”选项卡的“水平间距”和“垂直间距”栏中进行设置。水平间距是指图像与周围元素之间的水平间距，以像素为单位；垂直间距是指图像和周围元素。元素 水平间距是指图像与周围元素之间的水平间距，以像素为单位；垂直间距是指图像和周围元素。元素 水平间距是指图像与周围元素之间的水平间距，以像素为单位；垂直间距是指图像和周围元素。元素

垂直方向的间距。（3）如何编辑网页中的图片，可以使用“图片”工具栏中的各种工具来编辑网页中的图片。编辑功能主要有：图片旋转翻转、裁剪、图片淡化、凹凸效果等。另外，为了让图片更符合要求，我们还对中队使用的图片进行了处理，使图片看起来更加精致美观，符合我们的主题要求。(4）使用背景图片使用背景图片和使用背景色不同，使用背景色只是给网页的背景填充一定的颜色，而使用背景图则是平铺网页的背景带有图片。这样做可以使网页更漂亮。在网页中使用 背景图片的具体步骤如下： 1.新建一个空白网页。2.点击鼠标右键，在弹出的快捷方式中选择“网页属性”菜单，弹出“网页属性”对话框。3.打开“背景”选项卡。4.在“背景”选项卡的“格式”栏中，选择“背景图片” ”复选框，然后单击下面的“浏览”按钮，将出现“选择背景图片”对话框。5.单击“选择背景图像”对话框中的“浏览文件”按钮，弹出“选择文件”对话框。< @6.选择文件对话框中的文件列表 在 中选择图像文件，然后单击“确定”按钮。这样，所选图像将用作整个网页的背景。如果在第 4 步中同时勾选了“水印”复选框，则背景图像将显示为特殊的水印效果。网页滚动时，背景不动，只有网页内容滚动，产生透明的图层效果，非常吸引人。(5）插入 Flash 动画 关于 Flash 视频 使用“插入 Flash 视频”命令，您可以在不使用 Flash 创作工具的情况下将 Flash 插入视频内容插入网页。该命令插入 Flash 组件；当您查看它时在浏览器中，它显示选定的 Flash 视频 背景图像将显示为特殊的水印效果。网页滚动时，背景不动，只有网页内容滚动，产生透明的图层效果，非常吸引人。(5）插入 Flash 动画 关于 Flash 视频 使用“插入 Flash 视频”命令，您可以在不使用 Flash 创作工具的情况下将 Flash 插入视频内容插入网页。该命令插入 Flash 组件；当您查看它时在浏览器中，它显示选定的 Flash 视频 背景图像将显示为特殊的水印效果。网页滚动时，背景不动，只有网页内容滚动，产生透明的图层效果，非常吸引人。(5）插入 Flash 动画 关于 Flash 视频 使用“插入 Flash 视频”命令，您可以在不使用 Flash 创作工具的情况下将 Flash 插入视频内容插入网页。该命令插入 Flash 组件；当您查看它时在浏览器中，它显示选定的 Flash 视频 您可以在不使用 Flash 创作工具的情况下将 Flash 插入视频内容插入网页。该命令插入一个 Flash 组件；当您在浏览器中查看时，它会显示选定的 Flash 视频 您可以在不使用 Flash 创作工具的情况下将 Flash 插入视频内容插入网页。该命令插入一个 Flash 组件；当您在浏览器中查看时，它会显示选定的 Flash 视频

内容和一组播放控件。(6）设置鼠标悬停在图片上，与图片交互然后插入图片，下拉菜单中有一项是“鼠标悬停”，点击该项，会弹出一个对话框，在对话框中，可以将鼠标设置在图片和传图上，选择“确定”。（7）设置链接选择图片或文字，在下面的链接属性中输入要连接的地址，同时激活下面的属性，输入空白设置为在新窗口中打开网页。我们设置了链接本站的网页，同时也连接了外网，这样访问页面时可以查询到更详细的信息，方便用户查询。4. 4首页欣赏：< @五、总结通过本网页课程设计激发学习兴趣，调动学习意识，动用自己的脑、手、口，利用网络资源，结合教材和老师的指导，通过自己的实践，打造个人积累个人风格和个性的网页。总的来说，我在整个学期的学习中学到了很多东西。在这次网页设计中，我充分利用了这次设计的机会，一心一意地投身于网络世界。不断学习，不断探索；同时，不断丰富自己，不断完善自己，在互联网的天空下，逐步美化自己的生活！做好页面不易，包括课程选题、内容组织、图片处理、页面布局设置、背景和整个网页的色调等等。这门课程的设计不是很好，页面过于简单，创新的负面意识很弱，这是我需要改进的地方还有很多地方学习。设计一个好的网页需要耐心、坚持、不断学习、综合运用各种知识。总的来说，通过本次网页课程设计，有收获也有遗憾，也有不足，但我想，我已经踏入了网页设计的大门，只要用我对网页的热情和执着，努力学习和提高设计，我以后设计的网页会更专业。，更好的。这是我需要改进的地方还有很多地方需要学习。设计一个好的网页需要耐心、坚持、不断学习、综合运用各种知识。总的来说，通过本次网页课程设计，有收获也有遗憾，也有不足，但我想，我已经踏入了网页设计的大门，只要用我对网页的热情和执着，努力学习和提高设计，我以后设计的网页会更专业。，更好的。这是我需要改进的地方还有很多地方需要学习。设计一个好的网页需要耐心、坚持、不断学习、综合运用各种知识。总的来说，通过本次网页课程设计，有收获也有遗憾，也有不足，但我想，我已经踏入了网页设计的大门，只要用我对网页的热情和执着，努力学习和提高设计，我以后设计的网页会更专业。，更好的。只要我努力学习和提高，以我对网页设计的热情和执着，我未来设计的网页会更加专业。，更好的。只要我努力学习和提高，以我对网页设计的热情和执着，我未来设计的网页会更加专业。，更好的。