网页制作实验报告6个实验.doc

目 录实验一 网页设计基础实验2实验二 HTML语言应用4实验三 CSS样式表的应用-CSS的引用10实验四 Dreamweaver的使用、个人网站的制作13实验五 用框架、模板设计网页15实验六 表单制作19实验一 网页设计基础实验一、实验目的1掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点；2了解网页布局的形式。3.用记事本编写一个简单的网页。二、实验内容1上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。2在网上找出下列版面布局的结构形式：“T”结构布局1.T结构布局。所谓T结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母T,所以我们称之为T形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。2.口型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。3.三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人进入internet找到以上各种布局，并写出各种版面布局网站的域名和所采用的版面布局形式找出使用大色块和抽象线条构图风格的网站（至少各2个）；例：大色块主页找出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。三、实验步骤与要求1）新建一个记事本文件本在其中输入如下代码：我的第一个网页Hello World!2）把记事本文件扩展名改为.html，双击运行。实验二 HTML语言应用 一、实验目的:1掌握常用的HTML语言标记； 2利用文本编辑器建立HTML文档，制作简单网页。 3学习将其它格式的文档转换成HTML格式的文档二、实验内容：1打开文本编辑器“记事本”中输入如下的HTML代码程序,建立一个具有基本结构标记的HTML文件，然后以自己名字（用字母）另存为.htm文件，并在浏览器中运行。王辉的主页王辉的个人主页2. 在以上程序的基础上一步一步的添加红色部分的语句并运行，浏览网页。王辉的主页王辉的个人主页 我要变大 我要更大 我要变成兰色 我要变成褐色 (3)增加移动字幕王辉的主页王辉的个人主页字体变大字体要更大字体变成兰色字体变成褐色背景音乐浏阳河！湖南民歌浏阳河浏阳河弯过了几道弯几十里水路到湘江江边有个什么县哪出了个什么人领导人民得解放啊依呀依子哟浏阳河弯过了九道弯五十里水路到湘江江边有个湘潭县哪出了个毛主席领导人民得解放啊依呀依子哟 4、建立表格王辉的主页王辉的个人主页字体变大字体要更大字体变成兰色字体变成褐色背景音乐浏阳河！湖南民歌浏阳河浏阳河弯过了几道弯几十里水路到湘江江边有个什么县哪出了个什么人领导人民得解放啊依呀依子哟浏阳河弯过了九道弯五十里水路到湘江江边有个湘潭县哪出了个毛主席领导人民得解放啊依呀依子哟我要建立表格表格标题行第1行第1列右对齐第1行第2列右对齐第2行第1列居中第2行第2列居中第3行第1列左对齐第3行第2列左对齐5、插入图片王辉的主页王辉的个人主页字体变大字体要更大字体变成兰色字体变成褐色背景音乐浏阳河！湖南民歌浏阳河浏阳河弯过了几道弯几十里水路到湘江江边有个什么县哪出了个什么人领导人民得解放啊依呀依子哟浏阳河弯过了九道弯五十里水路到湘江江边有个湘潭县哪出了个毛主席领导人民得解放啊依呀依子哟我要建立表格表格标题行第1行第1列右对齐第1行第2列右对齐第2行第1列居中第2行第2列居中第3行第1列左对齐第3行第2列左对齐我要插入图片,将图片newyork.bmp另存为newyork.jpg，并和此网页放在同一目录下 点击以上图象可以到我们学校主页6、建立各种链接王辉的主页王辉的个人主页字体变大字体要更大字体变成兰色字体变成褐色背景音乐浏阳河！湖南民歌浏阳河浏阳河弯过了几道弯几十里水路到湘江江边有个什么县哪出了个什么人领导人民得解放啊依呀依子哟浏阳河弯过了九道弯五十里水路到湘江江边有个湘潭县哪出了个毛主席领导人民得解放啊依呀依子哟我要建立表格表格标题行第1行第1列右对齐第1行第2列右对齐第2行第1列居中第2行第2列居中第3行第1列左对齐第3行第2列左对齐我要插入图片,将图片newyork.bmp另存为newyork.jpg，并和此网页放在同一目录下 点击以上图象可以到我们学校主页我要链接到中国教育科研网我要链接到自己的主页做一名为wang.htm的网页,并和此网页放在同一目录下 我要链接到本页的第七行“我要建立表格” 7、改变网页背景图片，加入背景音乐。王辉的主页新建自己的主页(wang.htm)程序：20秒跳到王辉主页王辉的主页欢迎光临我的个人主页8将WORD文档，POWERPOINT文档转换成HTML格式文件。（1）做一个1页的WORD文档，将其另存为HTML格式文件。（2）做一个有5张幻灯片的Powerpoint文档，将其另存为HTML格式文件。 在浏览器中，运行上述两个HTML文件。并写出转换步骤。实验三 CSS样式表的应用-CSS的引用一、实验目的1、掌握CSS样式表的引用的几种方式2、学习如何控制字号，字模及加入特殊效果3、了解要素和图象方面的样式设置二、实验内容1、整页套用样式：不执行这个网页程序，回答程序中的问题，为什么？网站网站请指出这个几字的颜色及对齐方式请指出这个几字的颜色及对齐方式请指出这个几字的颜色2、样式文件引入你怎样不改变以下程序，分别使“网站实验”几个字变红色，“css网页实验”几个字变成绿色网站实验css网页实验3、如何使有超级链接的文字不出现下划线，如何使鼠标移动到超链上产生变色的效果写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线的类型link css 未访问的链接 访问过的链接 鼠标激活的链接4、用 css 控 制 的 网 页1)用以下语句建立一个6.htm文件用 css 控 制 的 网 页 用 css 控 制 的 网 页文章标题：CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（CascadingStylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。相关文章它的作用可以达到：（1）在几乎所有的浏览器上都可以使用。（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。（4）你可以轻松地控制页面的布局 。作者：来源：2）用记事本程序建立一个css文件：style.css,改变文件中b,input.smallInput,h1,.b2，img的属性，使页面的字体变得更漂亮，使页面及图片更赏心悦目bfont-size: 10pt; font-family:Verdana, Arial, 宋体;color:#5F9EA0;input.smallInputborder:1 solid;FONT-SIZE: 13pt; FONT-STYLE: normal;FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 28px; LINE-HEIGHT:normal; color: #000000; background-color: #F5F5DCh1font-size: 12pt; font-family:Verdana, Arial, 宋体;color:#CC9966;b2font-size: 10pt; font-family:Verdana, Arial, 宋体;color:#006400;imgfilter:Alpha(opacity=100,style=3)3）将下列照片和以上两个文件放在同一文件夹下,重新运行6.htm文件。x.jpg实验四 Dreamweaver的使用、个人网站的制作一、实验目的1掌握Dreamweaver网页制作功能的使用；2掌握Dreamweaver站点创建、管理和维护模块的基本功能；3学会实际运用Dreamweaver制作个人主页。二、实验内容及步骤1、准备材料:你首先对自己的个人主页做一个策划,主题、栏目、个人主页上展示的内容、网页艺术构思等。本实验要求个人主页的内容：1）个人网页宣传主页；2）首页；3）个人简历页；4）我的学校介绍页；5）我的专业介绍页；6）我的相册。你也可以为你自己的主页多准备一些个人页，如：个人爱好页、学习心得、感想页等，首页的下部要有制作者信息：姓名、班级、联系方式等内容，并将此页链接到实验室的网站上。2、规划个人网站的结构：先规划好网站的框架结构。确定主页的栏目及其可能有的子栏目，用树型结构将整个主页的内容组织起来。进入你的默认主页index.htm后，可以通过超级链接链接到个人简历、我的学校介绍、我的专业介绍、我的相册等网页中，每页又能返回默认主页index.htm,如上面的结构图所示。 3、个人主页制作：你可以用Dreamweaver网页编辑软件、或用HTML语言或WORD,进行编辑制作。下面以Dreamweaver为例，制作网页的具体步骤，供学生制作时参考。1）利用Dreamweaver创建网站：开始程序Dreamweaver“文件”新建站点选“只有一个网页的站点”在“指定新站点的位置”框，输入E:你的名字（拼音字母）确定完成新建网站。2）打开网站，利用Dreamweaver制作网页的基本方法：(1) 打开站点:从工具栏中单击打开(或文件菜单的打开)打开站点选择站点文件夹并确定.(2) 网页的新建:文件新建网页普通网页确定.(3) 单击表格选择表格5行5列边框粗细为0指定宽度80%确定(4) 第一行第一列插入图片剪贴画运输设150像素(5) 第三行第五列插入图片剪贴画运输设150像素,120像素(6) 其他行单元合并，插入文本，单元背景等。(7) 保存:单击保存按钮给出文件名和保存位置同时保存图片4、个人网站的测试与调试将你做好的个人站点中的所有网页、图片及其他多媒体文件全部复制到自己机器的IIS服务器中，即C:inetpubwwwroot目录下,首页命名为index.htm,然后在浏览器的地址栏中输入http:/自己的计算机名或http:/自己计算机的IP地址，就可看到自己的网站的主页了。检查主页和所有页面是否连接成功，所有图片是否能显示，外部链接是否正确等，如有问题将重新调试编辑相关网页。5、虚拟空间的申请可以到以下的网站申请免费空间：1）中联网 http:/home.3326.com/支持ftp/WEB方式上传也可自己申请其他虚拟空间。网站提示你的空间已经开通，并给你了ftp用户名，密码，服务器主机地址就是申请成功了，可以上传你的个人网站了。6、发布个人主页及个人网站利用Dreamweaver上传功能，编辑远程站点，然后将在本机制作的个人网站的全部文件上传即可。实验五 用框架、模板设计网页一、实验目的1 了解Dreamveaver框架网页的基本模板2 掌握创建框架的方法3 熟悉框架的编辑方法4 了解创建自定义的框架网页模板5 掌握模板的创建、编辑方法6 熟悉使用模板制作网页的方法二、实验要求框架网页具有这样的特点，在静态的框架内，内容将始终保持不变；而动态的框架内，内容则根据用户的选择作出相应的变化。本实验要求熟悉框架的类别和学会在页面中建立框架的方式，并在此基础上熟练掌握超级链接在网页中的使用。模板网页是对那些风格或版式相同的页面使用模板来创建，本实验要求熟悉模板的创建与编，应用模板来制作网页，并利用模板来更新网页。三、实验内容：创建网页框架（表1）表1校园星辰l 校园论坛l 校友录l 大学城l 社团阵地寄语【步骤1】在新建的页面中创建一个横幅和目录的框架结构。1） 在“文件”菜单中选择“新建”命令，打开“新建”对话框，单击“框架集”选项，显示出可用的框架网页类型，如下图1所示。 图12） 选择“上方固定，左侧嵌套”框架网页，选择这个框架网页后，在“新建”对话框的右侧会显示这个框架网页类型的基本形式。然后单击“确定”，此时的框架网页如下图2所示。图2【步骤2】调整页面的框架布局至适当位置。1） 将鼠标移动到框架的横向分割线上，鼠标指针变为上下箭头，按下鼠标向下拖曵至适当位置。2） 将鼠标移动到框架的纵向分割线上，鼠标指针变为左右箭头，按下鼠标向右拖曵至适当位置。【步骤3】在框架的顶端创建新页面，内容为“校园星辰”，并且插入来自文件的图片。1） 在新页面的框架结构的顶端，单击“新建网页”。2） 输入“校园星辰”四个字。选中“校园星辰”。3） 在“属性”对话框中选择选择“字体”为“楷体GB_2312”。4） 在“字型”列表中选择“粗体”。5） 在“字号”列表中选择“6（24磅）”。6） 单击“确定”按钮。7） 在“校园星辰”的右端插入图片，图片的文件名为/Dreamveaver实验/*.jpg。把光标点在该网页上，选择“网页属性”，单击“背景”，选择颜色为“浅兰色”。如下图3所示。 图3【步骤4】在框架的左边创建新页面，内容如表1所示。1） 在新页面的框架结构的左边，依次输入表1所示内容。2） 选中输入的内容。3） 使用工具栏，设置“字体“为“幼园”、“字号“为“4（14磅）”、“加粗”、“居中”。4） 单击工具栏中的字体颜色“红色”按钮。5） 右击该网页，选择“网页属性”，单击“背景”，选择“银白色”。上述操作的结果如下图4所示。 图4【步骤5】在框架右边创建的新页面中，输入“寄语”，作为初始页面。1） 在新页面的框架结构的右边，输入“寄语”，并单击工具栏上的“居中”按钮，颜色设置为“红色”。2） 网页背景选择“蓝色”。操作结果如下图5所示 实验六 表单制作一、实验目的7 了解表单的基本原理8 熟悉表单基本的制作方法9 掌握常用表单的制作方法二、实验要求表单是用于实现网页浏览者与服务器(或者说网页所有者)之间信息交互的一种页面元素，在WWW上它被广泛用于各种信息的搜集和反馈。本实验要求熟悉和学会在页面中创建表单。三、实验内容：综合表单的设计 Linux光盘需求统计表 姓名 学号 性别 男 女 爱好 服务器配置 网络编程 系统管理 校区 东校区 西校区 北校区     所需光盘种类 Red Hat Linux7.2 阳春白雪XP套装 红旗Linux桌面版2.4 Turbo Linux Server 6.5 Turbo Linux Workstation 7.0 Mandrake Linux 8.2 Linux 网站设计工具及资料 备注 如有特殊要求，请在此写明。