网页设计与制作实验报告.doc

高等教育自学考试通信与信息系统管理专业专科实验报告考点名称： 课程名称： 计算机网络与应用 姓名考号成绩教员签名实验名称网页设计与制作实验目的了解专业网页设计工具Dreamweaver、Fireworks和Flash；了解网页的核心技术HTML语言。使用仪器实验环境一台多媒体电脑，组建内部局域网，并且接入国际互联网；安装WindowsXP操作系统，建立IIS服务器环境，并支持ASP；安装网页三剑客（Dreamweaver、Flash、Fireworks）等网页设计软件。实验内容认识网页设计工具Dreamweaver；新建站点和网页；进行网站的结构设计、站点风格的选择、网站层次规划和页面布局；网页的基本组成要素的添加；网页中多媒体的应用；站点和网页的保存；站点的发布。实验步骤：1、确定网站主题 我的网站的主旨在于介绍自己，展示自己，包括我的自我介绍、学习、创作和我的班级等内容。从各个方面全面的介绍我自己。另外，网站里还应包括我的相册，建立一个展示自我形象的平台。同时，网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。最重要的是做出自己的风格，吸引浏览者的眼球。2、搜集材料 主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。3、规划网站 我的网站包括5个页面，首页、自我介绍、我的相册、我的班级和给我留言。每一个页面用统一的背景图片，以保证网站统一的风格。用自己的名字命名网站Loge,搭配合适的元素用Photoshop设计出独特的站标，然后再仿制出相似的其他子页面站标，网站整体色调为白色，然后点缀其他不同的颜色相配，突出主题，但颜色不宜过多，过杂，给人一种杂乱的感觉。版面设计要灵活，根据各部分内容的不同适当的自由设计。但是每个页面的主元素和位置不能变，比如loge.版权信息等。网页布局主要用层和表格，用层定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是，用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。4、选择合适的制作工具 做网页的首先工具当然为Dreamweaver，另外，为了处理网页中的其他元素，还可以使用Photoshop、Gif Animator等软件。5、认识网页设计工具Dreamweaver（1）Dreamweaver的启动单击任务栏上的“开始”“程序” “Macromedia” “Macromedia Dreamweaver”即可启动网页设计工具软件。（2）窗口组成的认识6、新建站点执行“站点”菜单中的“新建站点”命令，在弹出的对话框中选择“基本”标签，在文本框中分别输入新建站点名称和站点的HTTP地址；再选择“高级”标签，在分类列表中选择“本地信息”，并在右边各文本框中输入站点名称、本地根文件夹、默认图像文件夹、HTTP地址，这些设置完成后，单击确定按钮，即可完成站点的创建。7、站点中首页的创建“文件”菜单“新建” 选择“常规”选项卡中的基本页在右边列表中选择“HTML”，再单击“创建”按钮，完成网页文件的新建，然后再通过“修改”菜单中的“页面属性”命令把网页的上、下、左、右边距都设为“0px”，最后在网页中通过表格进行页面的布局，然后输入所需要的网页元素。8、制作网页 素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点，比如说，”mysite”然后再建立各个页面时，都应该建立在本地站点中，在网页制作时所需的各个元素都要进行统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“image”文件夹来存放图片，同时，由于“我的相册”页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css 样式文件也应统一管理，做到有条不紊。9、根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般不超过900像素，以保证左右不出现滚动条。在设计窗口中插入一个一行一列的表格，表格的间距为0，颜色为黑色，居中对齐，然后插入背景图片，就做成了网页的背景，网页的设计布局为，中间部分显示网页最新动态，用层工具定位元素的大致位置，在层中然后插入表格，精确定位图像、文本的位置，同时考虑色彩搭配和布局结构，合理的配置每一个元素。首先制作的是网站的banner，站标是网页中最显眼的部分，因此，站标既要显示出自己的网页主题还要显示出自己的网页风格，在设计我自己的站标时，我先使用了两个立体图像重叠在一起，设置为黑白色，既突出网站的主色调，又给人以凝重的感觉，站标的另一部分是要介绍网站的主要内容，而我设计的是我自己的网站，因此，为“刘瑞的主页”，最后还有一个不能忽视的问题，就是网站站标要显示网站的域名信息，让浏览者下次来的时候，有迹可寻，我没有自己的域名，因此，我设计为象征性的代表。其他子页面的有子站标，其大体内容和风格和主页面的相同。另外，为了达到亮眼的效果，我在每个子页站标上都加入了透明flash,既与主网页相同，又有新意。在页面的右下角擦入一个友情链接的菜单栏，一方面为了布局合理，弥补左下角的空缺，另一方面给浏览者提供放表的导航，这里也使用从来布局，方便灵活。在我的最新动态部分，为了活波页面气氛，可以插入动态的字母效果，用marquee标签设计具体内容。另外，为了使浏览者可以关注到更多的动态信息，在每一项上面可以做一个连接，连接到具体信息的页面。在页面的下方是一个logo，放置一个动态flash广告，也是用层布局，虽然，一般的网页logo和banner都是出现在网页的顶部，但是在我的页面中，考虑到网页的形状，如果logo放于上面，则显得页面太杂乱，放于下面则可以平衡页面，而且可以填补下页面的空缺。在广告的下面是版权信息，尽量用简洁的语言和稳重的色彩，给人留下清新，简练的感觉。其他子页面的制作和主页面的大体相同，在introduce页面中，我使用了层动画效果，使用动画帧控制动画重复播放。在页面的下面是一个滚动字幕，用层进行定位，添加背景后再加上一个一行一列的表格进行文字定位。再用marquee标签控制文字在固定区域内上下滚动。在“我的相册”页面里，我是用了图片交换效果，插入四张照片，可以按下按钮自由翻页，自由浏览，下部分是一段美丽文字欣赏，用相同的色彩布局，明快而又有紧促感，而且使整个页面色调平衡。第三个子页面是“我的班级”页面，也使用相同的背景，相同的布局，但是由于时间仓促，班级信息没有完全收集到，使用弹出信息框说明“网页信息正在搜集中，请大家继续关注我的网站！”最后一个页面是“给我留言”页面，同样的用层和表格进行布局，使用表单同用户进行信息交流，网页的左下面是一个flash动态时钟，显示当前时间，给浏览者提供方便。这就是我的网页设计过程。最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。10、上传测试网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。实验结果及理论分析：非常感谢老师给了我这次，独立设计，制作网页的机会，通过这次试验，我的收益颇多。首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个