第9章 网页设计.ppt

1、第9章 网页设计,9.1 网页设计基础,9.1.1 网页基础知识,静态网页和动态网页 静态网页是指Web服务器中的内容是固定的。 动态网页是指Web服务器根据用户的请求动态生成网页。 HTML和ASP 对于静态网页，通常采用HTML（超文本标记语言）将静态网页内容写入HTML文件并存放与服务器中。,9.1.2 网站开发工具,Dreamweaver MX Dreamweaver MX是Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是一套针对专业网页设计师特别发展的可视化网页开发工具。 FrontPage FrontPage是Microsoft公司主推的网站开发

2、工具，它提供网页视图、导航视图和超链接视图等多种视图，使得用户可以直观查看并管理站点的结构。,9.2 HTML简介,HTML就是英文hyper text markup language，翻译成中文就是“超文本标示语言”，扩展名为.htm或.html;,HTML的编写工具：可以使用任何文本编辑器进行编辑。可以用我们Windows自带的“记事本”程序编写，启动方法是：开始 附件记事本。,HTML的基本格式：, 网页的主体内容 ,显示在标题栏上的文字,网页制作基本操作,1. 选择“文件” “新建” ，单击“其他网站模板”链接，打开“网站模板”对话框。 2. 单击“常规”选项卡，在列表中选择“个人网站

3、”，在网站的位置处输入路径d:mywebs，单击“确定”按钮，则系统将自动创建站点保存在指定路径下。,（1）启动FrontPage,利用个人网站模板创建站点， 保存在D盘的MYWEBS文件夹下。,文件夹视图：右边显示出左边选中的当前文件夹下包含的子文件夹和网页文件的一些信息，如名称、标题、大小、类型、最后修改日期、修改者及关于文件的注释等。 报表视图：显示当前站点的性能的详细记录，以及关于站点访问者的活动的信息。包括有网站摘要报表、文件报表、共享内容报表、问题报表、工作流报表和使用率报表六种类型，可通过下拉列表来切换报表类型。 导航视图：显示网站的网页层次结构，用户可以清晰地看到主页、从页之间

4、的逻辑关系。在此视图下，用户可以方便地改变网页的逻辑关系。 超链接视图：显示出站点中各个网页之间，以及与其他站点的网页的相互链接关系。,（2）观察Mywebs站点的各个视图。,（3）打开index网页,观察网页的四种视图。,设计视图：是一种所见即所得的编辑模式，用户可以象编辑Word文档一样编辑网页，不需考虑代码，系统会自动将设计转换为HTML代码。,网页提供了“设计”、“代码”、“拆分”和“预览”四种视图。,代码视图：显示出实际HTML代码，熟悉HTML语法的用户，可以直接编辑代码。,拆分视图：把工作区分成两部分：一部分显示代码，另一部分显示网页编辑状态。在网页编辑工作区中定位鼠标，代码工作

5、区会自动跳转到对应的代码。在代码工作区中定位鼠标，网页编辑工作也区会自动跳转。,预览视图：用户可以预览在浏览器中网页显示的效果。,（4）关闭MYWEBS站点。新建空白站点，保存在D盘 的ME文件夹中。,1. 选择“文件”|“关闭网站”命令，关闭刚建立的站点。 2. 选择“文件”|“新建”命令，打开“新建”任务窗格，单击“其他网站模板”链接，打开“网站模板”对话框。 3. 在“网站模板”对话框中，在列表中选择“空白网站”，在网站的位置处输入路径d:me,单击“确定”按钮，则系统将自动创建的站点保存在指定路径下，并打开文件夹视图。,（5）新建网页index.htm，将其标题设为“我的主页”。,选择

6、“文件夹列表”窗口的D:me文件 夹，单击文件夹列表的“新建网页”按钮。,2. 系统新建一个网页，命名为index.htm,。按Enter键表示确认。在文件夹视图的“index”网页的标题列单击鼠标，标题处于选中状态，输入“我的主页”，按Enter键表示确认。,（6）在index.htm网页中插入图片“主页菜单”。保存网页，并将图片保存到站点的images子文件夹。,1. 在文件夹列表中双击index.htm网页，打开此网页。 2. 选择“插入”|“图片”|“来自文件”命令，打开“图片” ，在“文件”列表中选取“主页菜单”文件，单击“插入”按钮。则图片插入到文件中。 3. 单击 “保存”按钮，

7、对当前编辑的网页进行保存，并打开“保存嵌入式文件”对话框，如果文件夹不是images,单击“更改文件夹”按钮，打开“更改文件夹”对话框。 4. 在“更改文件夹”对话框中，双击“images”子文件夹，单击“确定”按钮，关闭“更改文件夹”对话框。 5.在“保存嵌入式文件”对话框中，单击“确定”按钮，则图片被保存在站点的image子文件夹下。, 头元素 我的主页 标题元素 体元素 分段元素 ,以下是自动生成index.htm网页的程序代码：,（7）新建网页dxsh.htm，标题为“我的大学”。在网页中输入如下文字：楷体、14磅、加粗、双倍行距。,湖南大学坐落在湖南省长沙市岳麓山下，是由岳麓 书院衍

8、续至今、办学历史悠久的全国重点大学，直属国 家教育部，已通过国家“211工程”“九五”期间建设项目 验收。,（8）在dxsh网页上插入剪贴画，在剪贴画上插入到index页面的链接。保存网页，并保存嵌入的剪贴画。,1. 选择“插入”|“图片”|“剪贴画”，选择“箭头”剪切画，向右旋转900，使剪贴画居中显示。 2. 选定剪切画，“插入”|“超链接”命令，打开“插入超链接”对话框，在“链接到”列表中选择“原有文件或网页”，在文件列表中选择“index.htm”,单击“确定”按钮。 3. 单击 “保存”按钮，对当前编辑的网页进行保存，在“保存嵌入式文件”对话框中，单击“确定”按钮，则剪切画被保存在站

9、点的image子文件夹下。, 我的大学 湖南大学坐落在湖南省长沙市岳麓山下，. ,以下是自动生成dxsh.htm网页的部分程序代码：,（9）新建一个普通网页，将网页的文件名保存为 wsly.htm，标题为“网上乐园”，输入一个四行二列表格，表格边框宽度设为0，表格内容如下图所示。,（10）对wsly网页上的图片设置超链接： googlelogo链接到。 baidulogo链接到, 新浪链接到,网易链接到，清华大学链接到 北京大学链接到 湖南大学链接到。,2.选择“文件”|“在浏览器中预览”|“Microsoft Internet Explorer6.0”,弹出对话框询问是否保存，单击“是”按钮

10、，打开对话框询问是否保存嵌入式文件，单击“是”按钮，打开IE浏览器预 览网页。,1. 选中图片“googleogo”，选择“插入”|“超链接”命令，打开 “插入超链接”对话框, 在“链接到”列表中选择“原有文件或网页”， 在“地址”文本框中输入“”,单击“确定”按钮。, 网上乐园 表格 表格的行 网络是无边无际的大海，请与我一起冲浪 a元素指向超链接 ,以下是自动生成Wsly.htm网页的部分程序代码：,（11）设置主页的超链接,1. 单击“index”标签，切换到index网页。选中图片“主页菜单”，单击“图片”工具栏上“长方形热点” 按钮，此时,释放鼠标，自动打开 “插入超链接”对话框，在

11、“链接到”列表 中选择“原有文件或网页”，在文件列表中选择“dxsh.htm”, 单击“确定”按钮。,2. 同样，在 “网上乐园”上建立长方形热点，插入超级链接，链 接到网页wsly.htm。 3. 在 “联系我”上建立长方形热点，在“插入超链接”对话框中， 在“链接到”列表中选择“电子邮件”，在“电子邮件地址”文本框 中输入自己的电子邮件地址，在“主题”文本框中输入“咨询”， 单击“确定”按钮。,按下鼠标左键不动，拖曳鼠标形成一矩形区域。,Index.htm,dxsh.htm,wsly.htm,（1）在网页dxsh.htm上添加字幕组件，字幕内容为“实事求是、敢为人先”，字幕背景为青色，字体

12、为楷体，24磅，加粗，白色。,常用组件和共享边框,1. 打开网页“dxsh.htm”，将光标定位到网页的第一行，选择 “插入”|“Web组件”命令，打开“插入Web组件”对话框。 2. 在“插入Web组件”对话框中，在“组件类型”列表中选择“动态 效果”，在“选择一种效果”列表中选择“字幕”，单击“完成”按钮， 打开“字幕属性”对话框。,3. 在“字幕”对话框中，在“文本”文本框表中输入“实事求是，敢为 人先”，在“背景色”下拉列表框中选择“青色”，单击“确定”按钮。,（2）在网页dxsh.htm的文字后插入一青色水平线。,1. 将光标定位到网页“dxsh.htm”文字的最后，按回车键插入一空

13、行。 2. 选择“插入”|“水平线”命令，在文字后面插入一水平直线。 3. 选中水平线，按鼠标右键，弹出快捷菜单，选择“水平线属性”命令，打开“水平线属性”对话框。 4. 在“水平线属性”对话框中，在“高度”数值框中输入“3”像素，在“颜色”下拉列表中选择“青色”，单击“确定”按钮。,（3）在网页dxsh.htm上插入一个图片库，将图片“东方红广场”、“复临舍”、“十七舍”“和平斋”加入进去。,1. 将光标定位到网页“dxsh.htm” 水平线的后面，选择“插入” |“图片”|“新建图片库”命令，打开“图片库属性”对话框。 2. 在“图片库属性”对话框中，选择“图片”选项卡，单击“添加” 按钮

14、，在其下拉菜单中选择“图片来自文件”，分别将图片 “岳麓书院”、“东方红广场”、“复临舍”、“十七舍”、“和平斋”添加到图片库中，插入到图片库中。在“标题”文本框中分别输入“岳麓书院”、 “东方红广场”、“复临舍教学楼”、“学生第十七宿舍”、“和平斋教工楼”。 3. 在“图片库属性”对话框中，选择“布局”选项卡，在“布局方式”列表中选择“水平型布局”，在“每行的图片数”下拉列表中选择“5”，单击“确定”按钮。,（4）在网页wsly.htm上插入一交互式按钮，其文本为返回，链接到index页面。,打开网页“wsly.htm”，将光标定位到表格的后面，选择“插 入”|“交互式按钮”命令，打开“交互

15、式按钮”对话框。 2. 在“交互式按钮”对话框中，选择“按钮”选项卡，在“按钮”列 表框中选择“发光标签1”，在“文本”文本框中输入“返回”，在“ 链接”文本框输入“index.htm”或单击“浏览”按钮，打开“编辑 超链接”窗口，定位到“index.htm”。 在“交互式按钮”对话框中，选择“字体”选项卡，在“字体”列 表中选择“幼园”，“字号”列表中选择“12”，“悬停时字体颜色” 下拉列表中选择“蓝色”，“按下时字体颜色”下拉列表中选择“ 紫色”。将按钮“居中”。,（5）为网页wsly.htm设置网页过渡效果：横向棋盘式。,1. 选择“格式”|“网页过渡”命令，打开“网页过渡”对话框。

16、2. 在“网页过渡”对话框中，在“过渡效果”列表框中 选择“横向棋盘式”，在“周期”文本框中输入“1”，单击“确定”按钮。,（6）在网页dxsh.htm、wsly.htm上插入一导航栏，设置到同级页面和主页的超级链接,1. 要插入导航栏，首先要设置网页间的导航关系。选择“视图” |“导航”命令，切换到导航视图。 2. 在导航视图中，只有一个主页。在文件夹列表中选中 “dxsh.htm”，按住鼠标左键不动，拖曳鼠标到“主页”的下方， 释放鼠标。同样，将“wsly.htm”也拖曳到主页的下方。 3. 打开网页“dxsh.htm”，将光标定位到网页的第一行，选择 “插入”|“导航”命令，打开“插入W

17、eb组件”对话框。 4. 在“插入Web组件”对话框中，在“组件类型”列表中选择“链接 栏”，在“选择栏类型”列表中选择“基于导航结构的链接栏”，单 击“下一步”按钮。,在“选择栏样式”列表中选择基于“使用页面主题”，单击“下 一步”按钮。 在“选择方向”列表中选择“横向连接的链接栏”，单击“完成” 按钮。 在“链接栏属性”对话框中，选择“同一层”单选按钮，选中 “主页”复选框。单击“确定”按钮。dxsh网页上加入到了到同 层网页wsly和主页index的链接。 8. 选中新建的导航栏，选择“编辑”|“复制”命令，将导航栏复制 到剪贴板上。打开网页“wsly.htm”,定位到网页的起始处，选

18、择“编辑”|“粘贴”命令，则wsly网页上也加入到了到同层网页 dxsh和主页index的链接。,（7）打开共享边框支持。,1. 选择“工具”|“网页选项”，打开“网页选项”对话框。 2. 在“网页选项”对话框中，选择“创作”选项卡，选中“创作时 Web组件”下的“共享边框”复选框，单击“确定”按钮。,（8）在网页的下方设置一共享边框，在共享边框中输 入文字：“通信地址：湖南大学计算机通讯学院 邮编 410082”。在共享边框中输入图片letter.gif。,1. 打开“dxsh”或“wsly”网页，选择“格式”|“共享边框”，打开 “共享边框”对话框。 2. 在“共享边框”对话框中，选中应用

19、于“所有网页”单选按钮， 选中“下”复选框，单击“确定”按钮。,3. 在当前网页的下部出现共享边框，鼠标指向共享边框的注释 处，鼠标指针变为 单击选中注释文字。输入文字：“通信 地址：湖南大学计算机与通信学院邮编：410082”。,4. 在共享边框中，将鼠标定位到文字之后，选择“插入”|“图片” |“来自文件”命令，选取“letter.gif”文件。,（9）为网页dxsh.htm应用彩条主题。,Index.htm,dxsh.htm,wsly.htm,框架网页,（1）新建“横幅和目录”的框架网页wdah.htm，将其标题设为“我的爱好”。,1. 在“新建”任务窗格中单击“其他网页模板”链接，打开

20、“网页模板”对话框。在“网页模板”对话框中，选择“框架网页”选项卡，选择列表中的“横幅和目录”框架，单击“确定”按钮。,2. 单击“常用”工具栏的“保存”按钮，打开“另存为”对话框，在“文件名”文本框输入“wdah”，单击“更改标题”按钮，打开 “设置网页标题”对话框。在“网页标题”文本框输入“我的爱好”，单击“确定”按钮。再单击“另存为”对话框的“保存”按钮，保存此框架网页。,（2）在导航视图中将“我的爱好”加入为主页的下一级，并在其下面建立标题为“唐诗宋词”的tssc.htm和标题为“校园歌曲”的“xygq.htm”两个网页。,1. 选择“视图”|“导航”命令，切换到导航视图。在导航视图中

21、， 在文件夹列表中选中“wdah.htm”，按住鼠标左键不动，拖曳 鼠标到“主页”的下方，释放鼠标。则“wdah.htm”成了主页的 下级网页。,2. 选中代表“我的爱好”网页的标签，单击“导航”窗格的“新建网 页”按钮，则在“我的爱好”下面建立了一个标题为“新建网页1”的 网页。 3. 选中代表“新建网页1”网页的标签，单击网页标题，则网页 标题处于选中状态，输入新的网页标题“唐诗宋词”，按Enter键 确认。用同样的方法，在“我的爱好”网页下面建立一个标题为 “校园歌曲”的网页。,4. 双击标题为“唐诗宋词”的网页，打开文件名为“new _page_1” 的网页，单击文件夹列表窗口的“ne

22、w _page_1.htm”,按鼠标右 键，在快捷菜单中选择“重命名”，则文件名处于选中状态，输入 文件名“tssc.htm”，按Enter键确认。用同样的方法， 将“new _page_2.htm”的网页保存为“xygq.htm”。,（3）设置tssc.htm网页的背景为“宋词背景”图片文件，背景音乐为“梦里水乡.mid”。保存网页，将图片保存到站点的images子文件夹，将背景音乐保存到站点下新建的music文件夹下。,1. 在导航栏视图，双击“tssc.htm”图标，打开“唐诗宋词”网页。在工作区上按右键，弹出快捷菜单，选择“网页属性”命令，打开“网页属性” 对话框。 2. 在“网页属性” 对话框中，选择“常规”选项卡，单击“浏览” 按钮，打开“背景音乐”对话框。在“查找范围”下拉列表中切换到背景音乐所在的文件夹，在“文件”列表中选取作为背景的文件，单击“打开”按钮。 3. 在“网页属性” 对话框，选择“格式”选项卡，选中“背景图片”和“使其成为水印”复选框，单击“浏览”按钮，打开“选择背景图片”对话框。在“查找范围”下拉列表中