网页设计与制作实验原理-网页设计与制作实验报告.pdf 11页

网页设计与制作实验报告 20 学号：网页设计与制作 题目 计算机应用专业 计算机科学与技术学院 1004 班 李俊清 姓名 丁毅 讲师 2012 年 6 月 10 日 实验一：网页设计 HTML 一、实验目的 1（硕士）常用的HTML语言标签。2(使用文本编辑器创建HTML文档，制作简单的网页。3(掌握网页制作功能的使用。2.实验内容1(熟悉制作网页的基本方法。2 （掌握网页文件的基础操作；页面属性的设置；文字插入和格式设置3（搭建网站。3.实验步骤1（在E:盘创建myweb等文件夹，作为自己网站的根目录）网站，在文本编辑器EditPlus中输入以下HTML代码程序，保存为.htm或.html后缀的文件如index.htm作为你的首页，并在浏览器中运行。欢迎访问我的网站。欢迎到我的网站。欢迎来到我的网站。 2. 将以下属性添加到标记中，看看index.htm 发生了什么变化。 bgcolor=#背景颜色#=rrggbb（十六进制RGB值）或颜色名称background=#背景图像#=image-URL（图像所在路径）text=#不可链接文本的颜色bgproperties=FIXED背景图像不会改变。 欢迎来到我的网站。

欢迎来到我的网站。 欢迎来到我的网站。 四、常见问题 1、新建的网页无法用IE浏览器浏览：保存格式不正确（扩展名不正确）。 保存用记事本编辑的网页时，扩展名必须为.htm或.html； 修改方法：关闭记事本和IE浏览器，在资源管理器中将文件扩展名改为.htm或.html； 2、页面HTML代码显示：标签缺少“>”或“”为全角。 实验2. Dreamweaver 站点/文档 1. 实验目的 1(掌握站点的创建 3(学习将其他格式的文档转换为 HTML 格式文档。 5(掌握站点创建、管理和维护模块的基本功能。 7(学习实际使用插入外部对象和设置效果的方法。3(学习如何使用站点。2.实验内容1(建立本地站点(1)在D盘上新建一个以你的学号和名字命名的文件夹)驱动器，下载回来，解压素材复制到该文件夹​​下，重命名为images (2)创建一个名为“河南开封”的站点，站点路径设置为学号和姓名的文件夹位置问题（1）中创建（温馨提示：站点 | 新建站点） 2、创建并设置网站首页（index.html），要求如下（注意效果图中标注的地方）： 1）设置标题改为“欢迎来到河南开封！”（标题中的内容）；2）设置页面背景为“bj.gif”； （提示：修改-页面属性-外观-背景图片） 3）设置文字“河南开封”属性：字体大小26像素，颜色“#006600”，字体“汉字楷书”，粗体。

3. 创建一个新页面并将其命名为kff.html。 编辑要求如下： 1）将标题设为“开封府简介”； 2）设置文本“开封府的厚重历史”属性：字体大小26像素，颜色红色，默认字体，粗体； 3）插入图片“kff.jpg”。 （6）在主页文件index.html中设置文字“开封府”的超链接，要求点击访问子页面文件kff.html，去掉链接的下划线，并将访问链接的颜色设置为"#000000" ,活动链接颜色"#FF0000";((提示：修改-页面属性-链接) (7)为子页面文件kff.html设置超链接文本“返回首页”，要求点击访问首页index.html，链接属性设置同问题（6）；（8）在调试站点mysite2中预览网页文件并完善实验三、布局表格/框架一、实验目的1、本例是制作1像素形式的边框 2、仪器和工具 1、每个学生一台多媒体电脑，搭建内部局域网，并连接互联网 2、安装Windows XP操作系统；建立IIS服务器环境支持ASP。 3、安装Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件； 4、安装Acdsee、Photoshop等图形处理制作软件； 5.其他一些动画图形处理或制作软件。

三、实验原理 1、创建一个边框为1像素的表格。 4、实验方法及步骤 1）在文档中，单击表格“ ”按钮，在对话框中将“单元格间距”设置为“1”。 2) 选择插入的表格并将“背景颜色”设置为“黑色”(#0000000)。 3) 选择表格中的所有单元格，然后在“属性”面板中将“背景颜色”设置为“白色”(#FFFFFF)。 4) 设置完成后，保存页面并按“F12”键预览。4． 实验内容1（表格制作，在文本编辑器中输入以下HTML代码程序，保存到自己的目录下，文件名为table.htm，在浏览器中运行。课程名称

中国人

数学

物理

化学

测试成绩

80

95

90

85

表格标签2（设计表单，在文本编辑器中输入以下HTML代码程序，保存到自己的目录下，文件名为form.htm，在浏览器中运行。3（利用表格进行精确定位；插入图片和动画等多媒体元素，超文本支持的图像格式一般有X Bitmap（XBM）、GIF、JPEG等，插入图像的标签有

，其格式为：

。 SRC属性指定要链接的图像文件的地址。 该图形文件可以是本地机器上的图形，也可以是远程主机上的图片。 地址表示方法可以遵循上一篇文章《文件链接》中的URL地址表示方法。 例子：

IMG属性包括HEIGHT、WIDTH、BORDER、ALT等，分别表示图像的高度、宽度、边框、替代文本等。

我下载的图片

注意：图像 ball.gif 和 HTML 应保存在同一文件目录中。 5.讨论与结论本实验主要利用整个表格和单元格的颜色差异来突出实验效果。 间距的作用主要是为了表达这种色差。 表格的背景色和单元格的背景色很容易混淆。 实验过程中一定要仔细判断。 如果你犯了错误，你将得不到实验效果。 “表格宽度”文本框右侧表格的宽度单位包括“像素”和“百分比”，很容易混淆。 只有充分理解这两个单元的含义，你才能做出正确的选择，否则你将无法实现你的目标。 如果想要达到理想的效果，设置错误会严重影响实验结果。 实验四、CSS 1、实验目的 1、掌握CSS样式的概念和建立，能够区分三种CSS样式，并根据需求创建相应的样式。 二、实验内容 1、设置CSS样式。 设置左框架内容的样式并将其存储在css1.css样式文件中。 添加h3标签，行高为36px，尺寸为18px； 将笑傲江湖设为标题 3； 添加a标签，字体颜色为#000066，无需修改； 添加Body标签，字体大小12px，背景颜色#99CC66，展开Glow，颜色为红色，强度为5并添加ol标签，设置行高为40px，列表项图像为“3.1list.gif”； 将框架中的四个标题设置为ol格式，效果如下图所示。

在右侧框中，将《第一章：灭族》的字体颜色设置为#000099，字体大小为18px，加粗，并将此设置应用到其他三个标题上。 三、实验步骤 1、鼠标点击左框架，text-css样式-新建，点击标签，输入标签名称h3，保存在css1中，对h3进行如下设置。 2.同时添加其他标签的设置 3.鼠标点击笑傲江湖，将属性面板的格式更改为标题3.4（右框设置“第一章：灭族”为标题，字体颜色# 000099，字号18px，粗体，自动保存为style2，并将其他三个设置为标题，标题样式全部设置为style2。5.全部保存并预览。4.实验总结1.CSS样式广泛使用，实验五、综合作业作为大学第一门公共选修课，我选择了《网站设计与制作》这门课程，并进入了这门课程的学习。这门课程时间比较短，经过老师的精心讲授和我的认真听讲，我学到了很多关于网站设计和制作的知识，这在一定程度上为我了解网站设计和制作打下了良好的基础，也为我以后的网站设计和制作做好了准备。下一步将深入研究相关方面。 知识打下了良好的基础。 一、网站设计制作中使用的工具 1.dreamweaver是编辑HTML、ASP、JSP、PHP的辅助工具。

2、网页需要流动时Flash是首选。 3.Photoshop图像处理软件。 一般网页需要与图片进行匹配。 Photoshop 是一个非常强大的工具。 4、Fireworks和Photoshop都是图像处理软件，但Fireworks更专注于处理网页。 2、网站和域名的概念 网站是指利用HTML等工具制作的、按照一定规则显示特定内容的互联网上相关网页的集合。 人们可以通过网站发布自己想要公开的信息，或者利用网站提供相关的网络服务。 人们可以通过浏览器访问网站，获取自己需要的信息或享受网络服务。 文本和图片是构成网页的两个最基本的元素。 另外网页设计与制作实验原理，网页的元素还包括动画、音乐、程序等。域名是互联网上网站的名称。 一个不以产品推广为目的的纯粹信息服务网站，其建设的全部价值都凝聚在其网站域名上。 如果没有这个域名网页设计与制作实验原理，所有前期工作都将白费。 使域名生动、简单、易记。 。 3、网页制作和网站布局。 通过这些课程的学习，我基本上明白了吉祥物，想要做出一个好的网站，就必须做出一个好的网页。 首先，有必要明确您要建立什么类型的网站。 其次是布局，还有网站信息、网站打开速度等。 (1)网站的整体布局：网站的首页就像一个公告牌或一个店面——它给访问者带来第一印象，他们都希望尽可能地给人留下良好的印象。

网页应该努力吸引而不是淹没浏览者的注意力。 太多的闪烁、颜色、下拉菜单框、图片等会让访问者感到困惑。 一般来说，一个好的网站应该给人以下感觉：干净整洁； 组织清晰； 专业品质； 引人入胜。 (2)信息：无论是商业网站还是个人主页，你必须向人们提供一定价值的内容才能留住访问者，所以你必须提供有价值的东西。 (3)打开速度：我们都知道页面下载速度是网站留住访问者的关键因素。 如果一个网页在20-30秒内打不开，大多数人都会不耐烦。 至少确保主页尽可能快，并且最好不要使用大图像。 (4)色彩搭配：色彩也是影响网页的重要因素。 不同的颜色对人的感受有不同的影响，所以在制作网页时要注意色彩的搭配。 包括网页的整体颜色、网页中文字的颜色等。不要使用所有颜色，尽量限制在三到五种颜色。 (5)网站布局设计：网页设计作为一种视觉语言，特别注重排列和布局。 虽然主页的设计与平面设计不一样，但它们有很多相似之处。 版式设计通过文字与图形的空间结合来表达和谐与美感。 多页面网站页面的布局设计要求体现页面之间的有机联系，特别是页面之间和页面内部的顺序和内容的关系。

为了达到最佳的视觉表现，我们会反复考虑整体布局的合理性，让观众有流畅的视觉体验。 (6)网页标题的可读性：你必须尽量使你的网页易于阅读。 为所有标题和副标题设置相同的字体，将标题字体放大一号，并为所有标题和副标题使用粗体字体。 这将使读者更容易识别标题，并让观众一目了然地看到要点，以便他们可以在感兴趣的情况下找到并继续阅读。 内容。 所以，每个标题一定要认真写~ 4. HTML语言 虽然课程比较短，但是老师在讲课中还是穿插了一点HIML语言。 它在网页制作中也发挥着重要的作用，可以大大提高网页制作的效率。 效率。 虽然我不是计算机专业的，但作为一名计算机爱好者我会在课后抽出时间认真学习和掌握这门语言卡通形象，以装备自己更多的专业知识。 总而言之，通过《网站设计与制作》课程的学习，我收获颇多。 我的专业不是计算机科学，更不是网页设计，但由于我对网页设计和制作的浓厚兴趣，所以我选择这门课程是我最大的荣幸，因为我学到了知识。 而我今后也会在这方面不断提升自己，全面提高，全面发展。 在此我非常感谢老师的细心教导，让我对这门课程有了初步的了解，也学到了很多这方面的知识。 最后，我想对老师说声谢谢您~