网页制作实验报告

1、实验 系网站的制作一。实验目的1） 掌握HTML语法基本的基本用法；2） 熟悉HTML编写网页的方法；3） 熟悉dreamweaver8界面及操作；4） 熟悉使用dreamweaver8建立站点及制作网页；5） 熟悉photoshop的用法；6） 用自己所学的软件，以系网站的内容为参考，制作出有自己风格的系网站7） 掌握创建网页的方法；8） 掌握网页的编辑，包括图片的插入、动态效果、背景图片的的项操作。9） 掌握超链接的创建与编辑。二，实验基本原理（1） Photoshop是一个著名的图像处理理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，具有强大

2、的图像修饰功能,利用这些功能可进行网页背景图像的制作，修复。（2） Dreamweaver8 是一款专业的HTML编辑器，用于对WEB 页和WEB应用程序进行设计，编码和开发。无论直接编写HTML代码还是在可视图化编辑环境中工作，dreamweaver8 都会提供很多快捷的工具。Dreamweaver8 是可以完全自定义的，可以使用它创建自己的对象和命令，修改快捷键，也可以编写JAVAScript 代码，从而用自己创建的新行为，属性检查器和站点报告来扩展 dreamweaver 的功能。三，实验准备(1) 在电脑上安装photoshop cs4及Dreamweaver8；(2) 收集一些关于学

3、校的图片，以及一些其他的风景图片。四，实验内容（一），网站名称：电子工程系（二），网页设计的大体结构主要是对主页进行设计，其结构图大体如下：电子工程系 最新状态通知公告友情链接学生风采文表下载学生工作招生就业成果展示实验室建设师资建设专业设置学校首页系部首页 五，设计规划 （一） 画图 (1) 打开photoshop设置主体布局，将本次的布局为“三”字型布局(2) 利用photoshop画图，打开photoshop，导入一张自己认为可做网页背景的图片；(3) 用photoshop里面的工具对背景图片做适当的编辑修改，调色；(4) 制作文字标志将图片和文字组合，将具有本系特色的logo绘制在顶端

4、；(5) 利用圆角矩形工具和颜色渐变工具制作网站主页导航条，及其他导航条(6) 制作栏目内容；(7) 在图片下方制作版权区域；（二） 网页模型的切片与导出利用切片工具将将导航条等项目分别切片，反复利用这个工具可创建多个矩形切片。切片创建后，切片的周围显示红色的导线，它确定导出时将文档拆分成的单独图像文件的边界。当切片切好后，执行“文件”“导出”命令，打开“导出”对话框。在“导出”下拉列表中，选择“HTML和图像”的格式，在HTML下拉列表中选择“导出HTML文件”，在切片下拉列表中选择“到处切片”，最后单击“导出”按钮。导出后除了到处切片以外，还会导出一个包含表格代码的HTML文件，以便在浏览

5、器重新装配图形（三） 在Dreamweaver8中编辑导出的网页（1） 启动Dreamweaver8，打开生成的html文件；（2） 创建网页名称：选择【查看】【代码】编写HTML语言，电子工程系创建网页名称。（3） 在导航条粗话分别添加链接，链接到其他网页或相关图片（4） 点击“拆分”键，在非导航条出，分别将html语言代码中其图片所示代码修改为背景图像，此过程可通过对把里面的内容剪切到中，便在其后添加”background”如下所示：将 .修改为 反复利用这个工具可对多个需要设为背景的图片进行修改；（5） 当所需要的背景图片全部修改好后，可利用指标工具在其上面制作表格，其方法步骤为：在页面

6、的左上角处选择【插入】【表格】在弹出的对话框中，【行】【列】分别填1，4，【表格宽度】填300像素；（6） 当表格制作好后可利用文字编辑工具，在表格里面进行所需要的文字编辑，编辑中可对其文字字体、颜色等进行设置，其方法步骤为设置文本的大小及颜色：选中要编辑的文本，选择【文本】【颜色】/【大小】设置文本的颜色和大小；（7） 文字编辑好后可对文字进行超级链接（8） 设置页面背景颜色：选择【窗口】【属性】【页面属性】在弹出的对话框中【背景颜色】处选择想要设置的颜色。（9） 当修改好后可点击编辑页面上方的“在浏览器中运行和调试按钮”对其进行调试和观察六 ：具体实验步骤 、photoshop的使用 1：

7、打开photoshop软件，低级菜单栏上的文件-新建 ，在弹出的对话框中可以填写相关信息。例入标题、像素，分辨率以及背景颜色等等。2 ：在刚才新建的模板上我们现在要增加一些因素。首先增加一副图片。增加图片的方法可以在面板的空白处双击鼠标左键，然后找到图片添加即可。3:添加好图片后需要多图片进行剪切。因为我们只需要图片的一部分。选择PS的工具栏上的图标，将不需要的圈出来删除即可。剩余的部分就是我们要的，这是我们可以将图片进行相关处理。例如羽化、变性以及添加其他图片等操作。4：在刚才切好的图片上写上我们的主题“电子工程系”。点击工具栏上的图标。此时还在菜单栏上有一些选择。例如：字体、大小、形状对齐

8、方式和字体颜色。选择好后在想要添加文字的地方点击一下鼠标左键就可以写字了。同样也可以在写好后在“图层”属性框双击图标进行修改。5：接下来增加一条导航条，点击工具栏图标，选择矩形，然后在刚才切好的图片下方画一个矩形框。之后将底色设置为青绿色、6：在导航条上加入一些文字，如学校主页、系部首页、专业介绍、师资建设、实验室建设、实验成果、文表下载等。添加文字的方法同上所述。7：在下面我们规划的是画3个框，分别用来放“通知公告”“本周动态”“就业信息”。步骤和上面第五条类似。点击图标，选择好属性后直接画就可以了。画好后在图层里直接复制2个图层，拖动到相应位置即可。这样就不用画3次了。8：接下来在下面我们

9、画一个矩形框。留着用作滚动图片制作。9：最下面这里放置一些版权信息。如邮编、电话和归属权。添加文字就可以了。10：完成了网页的基本排版后就可以切片了。点击工具栏上的切片工具。将我们的网页切成小块小块。因为我们要在切好的图片上添加超链接。钱不切好后保存为web所用的格式。点击文件存储为web所用格式完成。11：photoshop的基本排版就完成了。下来要用到dreamwear来修改网页了。dreamwear的使用1：点击桌面上的图标，启动dreamwear程序。在打开的界面打开用ps编辑好并保存好的网页，之后就出现了网页。 2：在菜单栏的下方有三个按钮，分别是“代码”“拆分”“设计”，选择不同的

10、方式就可以用不同的界面编辑网页。在这里我们选择拆分。之后就会出现两个界面，一个是代码的界面，另一个是网页的实际效果界面。我们可以用代码操作，也可以在网页上直接操作。接下来先看代码部分。在*之间可以写标题。然后找到,在前面加上，在的后面加上。目的是将网页居中设置。3：接下来要创建超链接。点击要建立超链接的图片或文字，会在底部的属性框显示一些属性设置，例如图片大小，链接地址等。在链接框填入要链接到的地址就可以完成了链接。其他的依次照此即可。4：“通知公告”“本周动态”“就业信息”框的修改。在ps保存的时候我们将这三个框都设置为了图片。而在dreamwear中我们无法在图片上写文字，需要将图片改为背景。具体操作如下：单击图片，就会在代码框中显示该图片的位置及代码，将代码如下滚动 .修改为 经过上面的改动后原来的图片就会变位文本框了。这样就可以在里面写我们要写的内容了。另外的两个框的修改和上面的操作一样。5：滚动图片的制作。先将要放滚动图片的位置的图片删除了。记住此时留下的空白区域的大小。将下列代码添加到原图片的位置： 添加代码后会在网页上有几个小框框，双击既可以添加图片。也可以单击小框框，单击后就会在代码区域显示相关信息，将要显示的图片的了解粘贴在“img src=”后面就可以了，还可以在图片的后面加上长和宽的信息。6：当全部都弄好了之后就可以发布了