网页设计实验指导书实验二
《网页设计基础》上机实验指导书
实验二 HTML内联元素
一、实验目的：
1.熟练掌握HTML的基本语法。
2.熟悉HTML内联元素的概念。
3.掌握使用HTML内联元素进行简单网页制作。
二、实验内容：
1.构建最简合法的HTML文档“我的第一个网页”。
2.使用简单内联元素进行文字处理。
3.在网页中创建超级链接。
4.在网页中插入图片。
三、实验要求：
1.掌握使用记事本进行简单网页编辑的方法。
2.熟练掌握基本内联元素及属性的书写。
四、实验学时：2学时
五、实验步骤：
0.实验准备：（1）在硬盘上为本实验建立文件夹（以下称为“实验文件夹”），用于保
存本实验的实验结果；（2）准备3幅图片，其扩展名分别为.jpg，.gif和.png，.gif
图片最好是一个动画，将这3幅图片放到实验文件夹中。
提示：可以使用https://www.wendangku.net/doc/9515488394.html,或https://www.wendangku.net/doc/9515488394.html,搜索并下
载图片，这些图片搜索引擎是可以指定文件类型进行搜索的。
1.构建最简合法的HTML文档“我的第一个网页”：
（1）从开始菜单启动记事本；
（2）在记事本中，录入一个最简合法HTML文档；
（3）设置该文档在最终在浏览器中显示的标题为“我的第一个网页”；
（4）在页面添加可见的文本“我的第一个网页”；
（5）使用记事本的菜单“文件”→“保存”，在“另存为”对话框中，在“保存类型”下拉列表中选择“所有文件”，录入“文件名”myfirstpage.htm，
单击“保存”按钮将该页面保存到实验文件夹。
提示：最简合法HTML文档必须包含的元素有html、head、 title、 body。
2.使用简单内联元素进行文字处理：
（1）从开始菜单启动记事本；
（2）在记事本中，录入一个最简合法HTML文档；
（3）设置该文档最终显示标题为“简单文字处理”；
（4）在文档的
和之间，插入适当元素使最终网页中显示以下内容：这是一段文本
这是一段文本
? Microsoft? Windows 2007
A = a1 + a2 + a3
这是一段文本
这是一段文本
注：以上文字不涉及到文字字体、大小、颜色的设置，且并不居中显示。
提示：对于特殊字符，要使用字符实体。
（5）紧接着步骤（4）插入的元素插入适当元素，使得最终网页上可以显示字号为5、颜色为红色、字体为“华文彩云”的下列样式文字：
这是一段文本
（6）紧接着步骤（5）插入的元素插入适当元素，使得最终网页上显示下列样式的文字（隶书、4号、绿色）：
这是一段文本
（7）如果以上的每条文本之间没有换行，则在它们之间分别插入一个换行；
（8）使用步骤1-（5）中的方法保存当前HTML文档为simpleinline.htm。
3.在网页中创建超级链接：
（1）同步骤2-（1）、2-（2）；
（2）设置该文档最终显示标题为“HTML中的超级链接”；
（3）插入一个可以到达第2个实验中保存的simpleinline.htm的超级链接，单击链接在自身窗口中打开该文件；
（4）插入一个可以到达实验一3-（4）中的网站的链接，单击链接在新窗口中打开该网站；
（5）使用类似1-（5）的方法保存当前HTML文档为anchor.htm；
（6）使用记事本打开和本实验放在同一目录中的文件glossary.htm，这是一个词汇表，在每个以新的首字母开始的单词前插入一个显示为该字母的命名
锚链（书签），在页面的顶部“Glossary”标题下方插入26个大写英文字
母，并将它们分别做成可以到达刚才所做的命名锚链的超级链接。
提示：使用记事本打开.htm(l)文件的方法：①直接双击.htm(l)文件图标
使用浏览器打开该.htm(l)文件，在页面的空白区域单击右键，调用“查看
源文件”命令；②从开始菜单启动记事本，使用菜单“文件”→“打开”，
定位到指定文件夹，选择“文件类型”项为“所有文件”，选定指定.htm(l)
文件，单击“打开”按钮打开文件。
4.在网页中插入图片：
（1）同步骤2-（1）、2-（2）；
（2）设置该文档最终显示标题为“HTML中的图片”；
（3）插入0-（2）中准备的实验文件夹中的.jpg图片；
（4）在页面再次插入（3）中的图片，通过适当设置使其只显示为原来尺寸的1/2；
（5）在页面中插入实验文件夹中的.gif图片，并设置其替换文本；
（6）在页面中插入实验文件夹中的.png图片，并为其设置宽度为5的边框；
（7）使用类似1-（5）的方法保存当前HTML文档为image.htm。
六、实验体会：
网页设计实验报告
实验报告 课程名称网络技术基础实验项目TCP/IP协议配置实验仪器计算机 系别 专业 班级/学号 学生姓名 实验日期 成绩 指导教师
实验一 TCP/IP协议配置 一、实验目的（标题黑体小四） 1.熟练掌握模板的用法。 2.掌握CSS的用法。 3.掌握网站发布的方法。 二、实验内容 1. 创建和使用模板。 2. css的创建和使用。 3. 发布网站。 三、实验课时 4课时 四、实验步骤 创建网站 1、创建一个站点，并创建 images 文件夹存放图片。将示例图片拷贝至images 目录下 2、创建 CSS 文件，名称为 style.css，将其保存至 style文件夹。 3、创建模板文件 tpl.dwt，并保存。结果如下： (1) 给 tpl.dwt 附加样式表 style.css。 在 tpl.dwt 的空白处点击鼠标右键，选择“附加样式表”： 选择 style.css 文件： 完成后，在 tpl.dwt 的 head标签里有如下的代码： (2) 设置模板的背景颜色。打开 CSS 面板，为 style.css 新建一条 css 规则。过程如 下：
将背景颜色设为#ff1e70： 在 style.css 生成如下的代码： body { background-color: #ff1e70? } 3) 制作布局。插入一 2 行 2 列的表格。表格的宽度=316+634=950，其他的设置：让表格居中对齐。 (4) 消除表格两边的空隙。展开 CSS 样式表，双击 body： 双击 body后，打开“body的 CSS 规则定义”对话框，按照下面的方式设置：Style.css 的代码变为： body { background-color: #ff1e70? margin: 0px? }
《网页设计与制作教程》实验指导书
《网页设计与制作教程》 实 验 指 导 书 班级姓名学号
实验一网页基础知识 一、实验目的 理解网页组成元素。 理解主页、静态网页、动态网页等概念。 了解常见的网页布局。 熟悉Dreamweaver CS6的桌面结构。 二、实验软硬件环境 一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。 三、实验内容 1．打开“九江学院”官网，并回答以下问题： （1）该网页上有哪些网页元素组成？ （2）在网站中打开5张不同内容风格的分页面，分析下它是静态网页还是动态网页，为什么？ （3）如果分页面中有图片，把图片下载到电脑中，如何操作？ 2．查找主页为“国字型”、“三字型”、“拐角型”、“封面型”、“Flash型”布局的网站各一个，并记录下网站地址。 3．查找若干个与图1所示布局相似的网页并记录网址。 图1网页布局 4．启动Dreamweaver CS6，并完成以下操作：
（1）新建一个空白网页，并保存，存储名为myweb.html。 （2）在文档工具栏中，切换“设计”、“拆分”、“代码”、“实时视图”，理解它的功能。 （3）对“插入栏”、“属性面板”和各种组合面板进行折叠/展开，打开/关闭操作，熟悉使用。 （4）给网页输入标题栏标题：我的第一张网页。 （5）在网页中输入一首唐诗，并完成简单排版。 （6）保存网页，并用浏览器预览。 四、实验思考 1．动态网页与静态网页如何快速区分？ 2．开发个人网站的首页，可以设计哪些栏目，试做一个布局草图。
实验二常见HTML标签与简单CSS的使用 一、实验目的 理解常见HTML标签在HTML文档中的作用。 掌握通过纯文本编辑器熟练编写简单HTML的技能。 掌握简单CSS的使用。 熟练掌握各种常用标签并利用其来实现网页的排版。 二、实验软硬件环境 一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。 三、实验内容 1．案例：唐诗欣赏 第一步：使用记事本编写网页“page01.htm l”，实现如图1所示效果。 操作提示：
段落文字 图1 关于唐诗的简单网页效果 第二步：使用记事本将网页“page01.htm l”另存为“page02.htm l”并按下列要求对新网页“page02.htm l”进行编辑，效果如图2所示。 要求： ●标题文字大小用
标记。 ●作者信息文字大小为4，字体为幼圆，颜色为红色。 操作提示：文字 ●古诗文字大小为4，字体为隶书，颜色为蓝色，字体加粗。 ●在作者信息后加一条水平线，居中，水平线宽度为浏览器的50%，水平线的粗细为5像素，颜色为棕色。 操作提示：网页设计与制作构思
网页设计与制作构思 姓名：刘海梅 学号：20080514106 专业：08级电子商务 首先是网页的整体布局：因为是网页的自我介绍，所以采用了最简单的格式来布局。网页的左边用的是文字的介绍，右边就是自己的图片，将文字和图片结合起来能更形象的展现自己。 其次，网页整体是体现一个人的风格和思想，展现一个人的想法。而我想要突出的是一种希望，一种追求，一种宁静的生活，在漫无边际的黑夜，有着几颗明亮的星星，天空显得很宁静，但是当黑夜过后，黎明回来到，也就是一种希望，所以我选择的是黑色的背景颜色，然后添加了满天星星的小程序。 然后是自我介绍，自我介绍采取的是渐进的方式，跟着读者的眼球一点一点的往下播放，这个也是我自己根据一些小程序改编的。在自我介绍小面有一首谜底，因为自己喜欢和别人交流，所以是谜底的最后一句话添加了邮件地址，访问者可以点击“想知道答案”然后发
送邮件给我和我交流。网页的开头我设定了时间日期，时间会根据系统自己来调节。右边是我自己的照片，照片我用photoshop进行了色彩的调整，使其和网页的背景相符合。照片上面是一句“梦想随心飞”的动态图案，这句话是体现我的思想，就是有梦想是很好，但是心要向着梦想的方向努力，才能实现自己的梦想。在照片的下面插入了一个表格，分成3行，分别讲了有关于爱情、星座、神话的一些小故事，这些我添加了想左滚动的代码，使文字有序的向左滚动，并调整了滚动的次数、滚动速度等等，加入这些小故事也体现了我的个人爱好，在平时的生活中自己喜欢收集一些小故事，所以拿出来和大家一起分享，也体现对美好事物的追求。自己的照片也是一个超链接，链接到我的另一个网页“梦幻世界”，讲的是一个很唯美的小故事。在主页网站的下面有几张图片，这是为了使网页看起来不那么沉闷，可以说是为了美化网页添加上去的。这几张图片都是我精心挑选的，其中有动态有静态的图片，动态图片“很不错哦，支持一下”是希望大家喜欢我的网页，同时也是对自己的鼓励，希望自己努力！ 最后，在网页底部图片的上面添加了超链接“返回”，这是为了能很快的返回寝室的主页。我的个人介绍网页大体就是这样根据自己的思路而一步一步来展现的，其中的文字、图片都是经过自己的思考和挑选的，这样才能体现出我自己的想要表达的思想和自己喜欢的一些事物。
《网页制作与设计》实验指导书
《网页制作与设计》课程实验指导书 第一部分前言 通过上机实验不仅要验证教材和讲课内容，更重要的是能通过上机实训帮助实训者深入了解网页制作与设计的方法，掌握Html语言知识。 第二部分目录 实验1 安装Dreamweaver实训 实验2 Html语言基本标记实训 实验3 用Html语言编写网页实训 实验4 认识超链接实训 实验5 创建带有多种超链接网页实训 实验6 查询并认识CSS样式实训 实验7 网页中应用CSS样式实训 实验8 查询并认识框架网页实训 实验9 框架网页实训 实验10 网站设计实训 第三部分实验内容 实验1 安装Dreamweaver实训 一、实验目的 熟悉Dreamweaver环境；该软件运行环境的配置；简单网页的编写和运行。 二、实验原理 Dreamweaver（把图像、动画、文字链接组合管理）是一个“所见即所得”的可视化网站开发工具。 三、实验条件
四、实验内容 安装Dreamweaver，并在其上运行简单的网页界面。 五、实验步骤 1、安装Dreamweaver （1）、首先双击可打开安装文件，如图1-1所示。 图1-1 准备安装界面 （2）然后等一下，就会看到出现一个图形界面，在点下一步，如图1-2所示。 图1-2 欢迎界面 （3）然后就可以看到一个图形界面，然后点同意，如图1-3所示。 图1-3 安装界面
（4）就可以看到下面的一个安装图形界面，直到有个按扭是完成，如图1-4所示。 图1-4 安装完成界面 2、运行Html页面 （1）打开Dreamweaver8，如图1-5所示。 图1-5 打开Dreamweaver8 (2) 启动后的界面，如图1-6所示。 图1-6 开启界面
Web网页设计实验报告
WEB系统开发 综合实验报告 题目红尘客栈网上订房页面 专业计算机科学与技术（信息技术及应用） 班级计信2班 学生蒋波涛 重庆交通大学 2013年
目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (4) 五、设计过程 (7) 六、实验心得 (10) 七、实验总结 (11)
一、设计目的 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和团队配合，逐渐培养做一个完整项目的能力。 二、设计题目 《红尘客栈》 三、结构设计 选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。 然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。 我们选做的主题是个人主页，并且选定题目为“红尘客栈”，其目的是做一个简单的网站，介绍酒店概况，提供一定的资讯信息。 四、技术分析 (一)建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。 1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。 （二）网页中的图像
网站设计与制作试卷和答案
第一部分应知考试题库 2.1.2网页制作基础 1．填空题 （1）网页一般分为（）网页和（）网页。 （2）HTML是（）的缩写，意思为（）。（3）网页主要由（）、（）、（）、超链接等基本元素构成。（4）常用的制作网页的专门工具有（）和（）。 （5）如果属性面板被隐藏了，可以通过执行（）菜单下的“属性”命令来打开。2．选择题 （1）下面文件属于静态网页的是______。 （2）属于网页制作工具的是______。 A.photoshop B.flash C.dreamweaver D.cuteFTP （3）用于调整编辑窗口中被选中元素的属性的面板是_____ A.插入面板 B.属性面板 C.设计面板 D.文件面板 （4）在网页中经常用的两种图像格式是_______。 A.bmp和jpg B.gif和bmp C.png和bmp D.gif和jpg （5）下列说法正确的是_____。 A.动态网页使用应用程序解释器但不使用后台数据库 B.动态网页不使用应用程序解释器但使用后台数据库 C.动态网页不使用应用程序解释器也不使用后台数据库 D.动态网页使用应用程序解释器也使用后台数据库 2.1.3网站的创建与管理 1．选择题 （1）如果正在编辑的文件没有存盘，系统在文件名上加上____符号提示用户。 A.! B. C.# D.* （2）在“资源面板”中没有列出的资源是______。 A.文本 B.图像 C.颜色 D.脚本 （3）保存网页文档的快捷键是__________。 A.Ctrl+A B.Ctrl+S C.Ctrl+W D.Ctrl+N （4）下列哪一种视图不属于“文件面板”中视图列表中的视图类型 A.本地视图 B.地图视图 C.远程视图 D.大纲视图 （5）定义站点时，存放网页的默认文件夹为__________。 A.C盘根目录 B.D盘根目录 C.我的文档 D.没有默认文件夹，必须由用户指定 2.1.4页面的整体控制 1．选择题 （1）打开页面属性对话框，使用_______功能键。 A.Ctrl+K B.Ctrl+J C.Ctrl+M D. Ctrl + F （2）下面的颜色中，____表示黄色。 A.#FFFF00 B.#FFOOFF C.#00FFFF D.#00FF00 （3）当网页既设置了背景图像又设置了背景色，那么_____。 A.以背景图像为主 B.以背景色为主
dreamweaver网页设计实验指导书
网页设计实验指导书 （一）DreamWeaver静态网页制作 第一章网站规划 ................................................................................................... - 3 -第二章Dreamweaver静态网页设计实验 ...................................................... - 8 -实验一在Dreamweaver中建立一个站点.................................................. - 8 -实验二在网页中使用文本........................................................................... - 15 -实验三超级链接的建立............................................................................... - 21 -实验四网页图像的应用............................................................................... - 29 -实验五网页表格操作 ..................................................................................... - 36 -实验六利用表格进行网页布局..................................................................... - 39 -实验七利用层进行网页布局....................................................................... - 48 -实验八行为和图层的应用............................................................................. - 53 -
简单网页制作实验总结报告
《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日
目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)
第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”，包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句，色彩缤纷，十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐，影视，购物等非常热门的东西，本站设计的主题是花，能让人们在闲下来的时候看看花，品品诗歌，所以做有关花的网页是个不错的选择。同时，让人们分清楚春夏秋冬都各有什么典型的花。
第二章网站内容设计 1.1链接1标题：春の花 春天是生命的季节，在这个季节里，万物复苏。所以就找了虞美人，桃花，牡丹，以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题：夏の花 夏天充满了激情与阳光，我找了兰花，荷花，百合花等来代表这个季节，色彩艳丽，十分醒目夺人。 1.3 链接3标题：秋の花 大丽花，菊花，月季和牡丹花都竞相出现在本网页，色彩缤纷，赏心悦目。 1.4 链接4标题：冬の花 蝴蝶兰，水仙，迎春花，梅花是冬季的代表，他们刻画了一副傲立冬天的坚强的姿态。
网页设计与制作课程标准
《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用， 一、课程的说明： 通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 二、课程内容与基本要求： 该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：
三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法
(13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标 形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、教学内容 第一章网页制作基础知识（4学时） 教学目标： 网页与网站基本概念、网页基本组成元素、常用网页制作软件 主要教学内容： 网页制作基础知识 网页的基本构成元素 网页制作常用软件和技术 第二章 Dreamweaver CS6轻松入门（2学时）
网页设计实验指导书
网页设计实验指导书 经济与管理学院二零一二年二月
实验一HTML标记的基本语法 一、实验目的和要求 1．熟悉HTML文件的编辑环境； 2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。 3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。 二、实验内容 1、根据如表1-1所示的表格写出完整的HTML代码； 其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。 2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。 图1-1 个人网站首页 3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。
图1-2 列表效果图 三、实验步骤 1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver 的代码窗口。 2．按各种不同标签的语法规则，输入合法的代码。 3．输入完成后保存代码文件，文件后缀为.htm/.html。 4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。 四、程序代码（在实验报告中写出） （1）
课号 | 课程名 | 学分 |
1002201 | 《网络原理》 | 6 |