1站点建立及网页文档的设计
- 格式:doc
- 大小:271.50 KB
- 文档页数:13
Dreamweaver1⽹页制作1.站点1.1 创建站点点击菜单栏中站点进⾏站点创建,输⼊站点名称,路径1.2 设置图像⽂件夹1.3 站点管理站点的编辑、复制、删除2.页⾯属性栏2.1 外观1.设置页⾯整体的字体、⼤⼩、颜⾊2.背景颜⾊,背景图像,图像是否重复,怎么重复3.页⾯边距2.2 链接1.链接的字体、⼤⼩、颜⾊2.链接颜⾊:链接颜⾊:本⾝颜⾊变换图像链接:⿏标经过链接时的颜⾊ 已访问链接:已访问之后的颜⾊ 活动链接:⿏标点击时的颜⾊2.3标题1.能分为六层标题2.设置标题字体、颜⾊2.4 标题/编码1.⽹页名称2.5 跟踪图像跟踪图像”是Dreamweaver⼀个⾮常有效的功能,它允许⽤户在⽹页中将原来的平⾯设计稿作为辅助的背景。
这么⼀来,⽤户就可以⾮常⽅便地定位⽂字、图像、表格、层等⽹页元素在该页⾯中的位置了。
跟踪图像的具体使⽤是这样的:⾸先使⽤各种绘图软件作出⼀个想象中的⽹页排版格局图,然后将此图保存为⽹络图像格式(包括gif、jpg、jpeg和png)。
⽤Dreamweaver打开你所编辑的⽹页,在菜单中选择“修改>页⾯属性”,然后在弹出的对话框中的“跟踪图像”项中输⼊刚才创建的⽹页排版格局图所在位置。
再在图像透明度中设定跟踪图像的透明度,OK。
这样你就可以在当前⽹页中⽅便地定位各个⽹页元素的位置了。
使⽤了跟踪图像的⽹页在⽤Dreamweaver编辑时不会再显⽰背景图案,但当使⽤浏览器浏览时正好相反,跟踪图像不见了,所见的就是经过编辑的⽹页(当然能够显⽰背景图案)。
3.制作⽹页基本操作3.1 ⽂本3.11 添加⽂本直接编辑、复制粘贴、其他⽂件导⼊3.12 添加空格1.默认只能添加⼀个空格2.通过插⼊菜单 —— HTML —— 特殊字符 —— 插⼊空格3.Ctrl+shift+空格3.13 添加⽇期插⼊菜单进⾏操作3.14 插⼊⽔平线.通过插⼊菜单 —— HTML —— ⽔平线3.15 添加特殊字符.通过插⼊菜单 —— HTML —— 特殊字符3.16设置⽂本格式字体、⼤⼩、颜⾊3.17 分段与换⾏分段:enter换⾏:shift+enter3.18 设置段落格式1.对齐⽅式:2.列表变编号3.缩进3.2 图像3.21 常⽤图⽚格式1.GIF:特点:图⽚数据量⼩、可带动画信息、可透明背景显⽰,最⾼只⽀持265种颜⾊ ⽤途:⽹站logo、⼴告条、⽹页背景图像2.JPEG:特点:可⾼效的压缩图⽚的数据量、图⽚变⼩却不会丢失颜⾊画质 ⽤途:显⽰照⽚等颜⾊丰富的图像3. PNG:特点:融合了GIF能做透明背景的特点,⼜具有JPEG处理精美图像的特点 ⽤途:绘制⽹页效果图3.22 插⼊图像3.23 设置图像基本属性图像名称、宽、⾼、源⽂件、替代、边框3.24 图⽂混排1.边距2.对齐3.25 编辑图像1.裁剪2.锐化3.对⽐度、亮度4.重新采样5.优化(为图⽚瘦⾝)3.26 ⿏标经过更换图⽚特效插⼊菜单栏完成4.超链接4.1 内部链接——同个⽹站中的其他⽹页4.2 外部链接——不同站点或本站点以外的⽹页1.链接中输⼊链接地址2.⽬标中选择打开位置 _blank :每点击⼀次链接创建⼀个新的窗⼝ _self :会在当前窗⼝、框架页⾯中打开 _new :会在同⼀个刚创建好的窗⼝中打开 _parent :如果是嵌套框架,会在⽗框架中打开 _top :会在完整的浏览器窗⼝中打开4.3 链接样式参考2.24.4 锚点链接——到⽹页中某⼀特定位置1.选中要命名的锚点点击锚点,对该锚点命名2.选择链接点,当前页⾯:在链接中输⼊ #锚点名其他⽹页:⽹页地址#锚点名4.5 E-mail电⼦邮件链接选中需要连接部分,点击电⼦邮件链接,输⼊链接地址4.6 下载链接1.当⽂件是exe⽂件、zip、rar类型问件时浏览器⽆法直接打开,便会提⽰下载4.7 空链接1.在链接中输⼊#2.⼀般导航栏中⾸页位置就是⼀个空链接4.8 图像热区链接在图像中绘制⼀块区域,创建链接4.9 图像导航条图像超链接4.10 跳转菜单选中表单中的跳转菜单,进⾏编辑4.11 脚本链接——通过触发脚本命令在链接中输⼊脚本代码1. 添加到收藏夹:javascript:window.external.addFavorite('⽹址','名称')2. 表⽰关闭窗⼝:javascript:window.close()3. 表⽰弹出⼀个提⽰对话框:javascript:alert('hello!')4. 设置为默认主页:(需通过空链接#,触发onClick事件)在链接中输⼊#选中链接点,在代码中#后输⼊onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('⽹址')"4.12 超链接的管理1.连接路径: 绝对路径:链接中使⽤完整URL地址 相对于⽂档的路径:../ 表⽰上⼀层⽂件夹 相对于站点根⽬录的路径:/ 表⽰根⽬录2. ⾃动更新链接:⽂件位置变动,⾃动更新⽹页中链接路径3. 检查连接5.表格5.1插⼊表格,进⾏设置5.2 选定表格、单元格进⾏设置5.3 表格嵌套在单元格中插⼊表格5.4 应⽤表格布局页⾯5.41 类型:1.国⼦型2.拐⾓型3.标题正⽂型4.左右框架型5.上下框架型6.综合框架型7.封⾯型8.flash型9.变化型5.42 页眉通常放置logo,⼴告条5.43 页脚放置版权信息、联系电话、⽹站介绍、备案信息等5.44 导航栏双倍单元格,空⼀格放⼀个信息,设置⾼度,内容位置5.45 信息栏6.框架6.1 框架⼀个框架就是⼀个区域,可以单独打开⼀个HTML⽂档,多个框架就组成了框架集6.2 创建框架选择框架结构,创建框架6.3保存框架有多少个框架就要保存多少次,再加最外层6.4 作⽤1.做⽹页的布局,将⽹页分成不同的部分2.简化⽹页的编写:⽹页之间相同的内容,只需要编写⼀次3.加快⽹页的浏览:每次⽹页只需要更新变化的那个框架的内容6.5设置框架集和框架属性⿏标单击框架边框,对框架进⾏设置6.6⾃定义框架1.拖动编辑窗⼝的边框:⿏标位于编辑窗⼝的边框,对边框进⾏拖动,创建新的框架2.按住 alt 键时拖动7.多媒体元素7.1多媒体元素flash多媒体元素⾳频多媒体元素视频多媒体元素7.2 插⼊flash多媒体元素7.21 flash动画插⼊flash动画⽂件,扩展名为 .swf7.22 插⼊flash按钮Dreamweaver⾃⾝带有⼀些flash按钮,也可⾃⼰做,⽂件扩展名为 .swf7.23插⼊flash⽂本7.24插⼊图像查看器7.25插⼊flash paper7.26插⼊flash视频7.3 插⼊⾳频多媒体元素8.AP DIV元素8.1. APAP:绝对定位元素,称为层,定位灵活8.2 创建AP DIV1.点击布局中的绘制层,直接在页⾯中绘制2.按住绘制层,拖动⾄页⾯中,这样的层⼤⼩⼀定,颜⾊⼀定,可设置8.3 编辑AP DIV点击层左上⾓,在属性栏中设置8.4 层的可见性设置在窗⼝菜单中打开层,即可对层可见性进⾏设置8.5 层的嵌套将光标置于层中,进⾏绘制8.6 与表格的转换下修改菜单中,选择转换,将层转换为表格,或表格转换为层9.⾏为特效9.1.添加在窗⼝菜单中(或 shift+F4)打开⾏为,选择所要添加⾏为的部分,进⾏添加,添加后选择事件启动⾏为步骤:选择对象、添加动作、调整事件9.2 事件1.常见事件OnMouseOver :⿏标经过OnMouseOut :⿏标移开OnLoad :页⾯打开OnUnLoad :页⾯关闭其他:onClick :单击onDbclick :双击onKeyDown :当按下任意键的同时产⽣。
网页设计实验报告建立站点一、实验目的本实验旨在通过建立一个网站来实践网页设计的基本原理和技巧,加深对网页设计的理解,并掌握网页设计的常用工具和技术。
二、实验内容1. 确定网站的主题和目标受众;2. 设计网站的结构和布局;3. 选择合适的颜色和字体搭配;4. 制作网站的标志图标;5. 编写网站的HTML和CSS代码;6. 验证和测试网站的功能和布局效果。
三、实验步骤1. 确定网站的主题和目标受众在设计网站之前,我们需要明确网站的主题和目标受众。
这有助于我们选择合适的设计元素和内容,以吸引目标受众的注意力并提供有价值的信息。
例如,我们可以选择建立一个旅游指南网站,面向喜欢旅行的年轻人群体。
这样,我们就可以设计一些活泼、有趣的页面元素,并提供各种旅行目的地的介绍和建议。
2. 设计网站的结构和布局在网站设计中,结构和布局是非常重要的。
我们应该考虑页面的导航方式、页面元素的排列和组织,以及不同页面之间的连接关系。
我们可以使用流程图或草图的形式,将网站的各个页面、导航菜单和元素之间的关系进行规划和设计。
这有助于我们更好地组织网站的内容和导航路径。
3. 选择合适的颜色和字体搭配在网页设计中,颜色和字体的选择对页面的整体效果和用户体验有很大的影响。
我们应该选择适合网站主题的颜色和字体,并保持风格的一致性。
可以通过使用调色板和字体库等工具,来选择合适的颜色和字体。
在选择颜色时,要考虑到网站的整体风格和目标受众的喜好;在选择字体时,要注意字体的可读性和与设计风格的协调性。
4. 制作网站的标志图标网站的标志图标是网站的品牌形象的重要组成部分,也是用户识别和记忆网站的重要标志。
我们可以使用设计软件或在线图标制作工具,来制作符合网站风格和主题的标志图标。
标志图标应该简洁、易于识别,并能够体现出网站的主题和特点。
同时,还可以考虑在标志图标中加入对网站名字的呈现。
5. 编写网站的HTML和CSS代码在网站设计的过程中,我们需要编写HTML和CSS代码来实现页面的结构和样式。
站点的创建与网页制作第一篇:站点的创建与网页制作第4周站点的创建与网页制作【计划课时】:3课时【授课班级】:10班【教学目的与要求】υ熟悉Dreamweaver8工作界面中各个工具的作用υ熟悉Dreamweaver8工作界面中各个面板的调用υ掌握构建本地站点的方法υ掌握网页中超链接的创建、图像的插入、导航条的制作【教学方法与手段】多媒体教学:借助多媒体手段,进行课堂理论教学;启发式教学:教学活动关注的重点从结果转向过程。
激发思维,师生互动,增强学生学习的主动性、积极性和创造性;【教学重点与难点】:基础知识:学会构建本地站点重点知识:学会规划与构建站点结构网页中超链接的创建、图像的插入、导航条的制作【教学组织过程】 1.上讲回顾 2.教授新知【授课内容】一、利用dreamweaver8进行网页设计的基本步骤:1.打开dreamweaver82.创建站点3.在站点根目录下新建网页(HTML文件),并按要求命名4.打开所创建的网页(HTML文件),对网页进行布局、创建超链接等二、新建站点的操作(站点:以自己的名字命名的文件夹)1.在桌面上找到位dreamweaver8点”并运行它。
在“站点”菜单中点“新建站2.在弹出的窗口中,给你的站点以你的名字命名,并点“下一步”,如下图:3.在选择服务技术页面选“否,我不想使用服务技术”并直接点“下一步”。
4.在您把文件存储在计算机的什么位置上选择你前面建立的你自己的文件夹,并点“下一步”,如下图:5.在您如何连接到远程服务器窗体选择您打算将你的文件存储在服务器上的什么文件夹中选中你前面创建的自己的文件夹,然后“下一步”6.然后点“完成”,你的站点就建立完毕。
注意dreamweamver 的右边显示你的站点。
三、在站点中新建一个网页(HTML文件)1.在如图所示的地方(站点根目录)右键点击2.给新建的HTML文件命名四、布局网页的一些操作1.设置标题:在网页上方的“标题”处写上你的网页标题:如下图2.设置背景图片:在最下面找到“页面属性”按钮下图:点击它,然后选择“背景图像”,如3.设置页面文字和字体:选中文字,在下面的属性中设置它的字体大小和颜色,加粗, 居中等4.插入图片:在“插入”菜单中选择“图像”如图,并选中sc文件夹中的img1_2.jpg文件:5.图片的对齐方式:选中图像,在下面设置它的对齐为“右对齐”,如下图:6.设置文字列表形式:在“文本”-“列表”-“项目列表”将所选文字设为列表,如下图:五、上机练习(共3个)在考试文件夹中将“站点的创建与网页制作”文件夹改为(学号姓名)如(2009××××张三)命名的文件夹,在已改为你的学号姓名的文件夹中,建立网页站点,所需素材均在“SC”文件夹中。
实验 1 4.5 网站的的建立及运行专业班级学号姓名报告日期实验类型:○验证性实验○综合性实验●设计性实验实验目的:(1)熟悉 4.5 的开发环境Visual Studio Express 2012 for Web (VSEW 2012)。
(2)掌握利用解决方案管理网站和创建网站的过程。
(3)掌握利用VSEW 2012 复制网站的过程。
(4)掌握IIS 7.5 中网站创建和默认文档设置的过程。
实验内容:(1)创建一个Experiment解决方案,其中包含两个文件系统网站Expt1Site 和Expt2Site。
(2)在Expt1Site网站中创建一个Web窗体Default.aspx,其中包含一个Label 控件。
当浏览器Default.aspx时在Label控件中显示“我开始学习了!”。
(3)在IIS 7.5中创建Experiment网站,复制VSEW2012中Expt1Site网站到IIS 7.5中Experiment网站下的Web应用程序Expt1,再从另一台联网计算机访问复制后的Default.aspx。
(4)设置IIS 7.5中的Web应用程序Expt1的默认文档,使得在另一台联网计算机上仅输入IP地址和Web应用程序名即可访问Default.aspx。
(5)在IIS 7.5中创建端口号为8001的Port网站,复制VSEW2012中的Expt1Site网站到IIs 7.5中Port网站下的Web应用程序Expt1,再从另一台联网计算机访问复制后的Default.aspx。
(6)复制VSEW 2012中的Expt1Site网站到IIS7.5中Experiment网站下VirDir 虚拟目录,再从另一台网站联网计算机访问复制后的Default.aspx。
(7)迁移Experiment解决方案,使得在另一台以安装 4.5网站开发环境的计算机实验原理网站创建实验思考创建网站中的连接过程。
实验报告书写要求:根据实验情况和结果撰写并递交实验报告。
新建站点的步骤
新建一个站点的步骤如下:
1. 确定站点的目标:明确站点建设的目标和定位,确定站点所要表达的信息和功能。
2. 策划站点的架构:确定站点的整体结构和页面布局,设计站点的导航栏和页面之间的链接关系。
3. 设计站点的界面:根据站点的目标和定位,设计符合品牌形象和用户体验的界面风格,包括颜色、字体、图标等。
4. 开发网站的功能:根据站点的需求,选择合适的技术和开发工具,开发各种功能模块,例如注册登录、搜索功能、购物车等。
5. 编写站点的内容:根据站点的目标和定位,编写各个页面的内容,包括文字、图片、视频等。
6. 进行页面优化:通过优化页面的代码、文件大小和加载速度,提高网站的性能和用户体验。
7. 进行浏览器兼容性测试:测试站点在不同浏览器和设备上的兼容性,修复出现的问题。
8. 购买域名和托管空间:选择并购买适合的域名,选择并购买适合的托管空间,将网站部署到服务器上。
9. 上线站点:将站点部署到服务器上,经过一些必要的测试和调试后正式上线。
10. 提供后续维护和更新:定期检查站点的运行情况,及时更新内容和功能,解决出现的问题。
第一讲站点建立及网页文档操作【教学内容】∙Dreamweaver界面∙个人站点创建为例讲述静态站点的创建∙个人网页为例讲述静态网页文档的基本操作∙分析网页文档的HTML结构【教学目的】∙了解Dreamweaver工作界面∙掌握静态站点的创建∙掌握静态网页文档的基本操作∙掌握HTML基本语法结构【教学重、难点】∙重点:掌握静态站点的创建、静态网页文档的基本操作、HTML基本语法结构∙难点:HTML基本语法结构【教学方式】采取讲授、讨论和案例分析相结合的方式。
【教学课时】5节一、Dreamweaver的工作环境图2-1-1 Dreamweaver工作环境注:①标题栏、②菜单栏、③插入栏④文档工具栏、⑤状态栏、⑥浮动面板1.标题栏位于窗口顶端,它的最左边是Dreamweaver标记。
2.菜单栏主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。
这些菜单允许用户方便地管理整个主窗口的布局,配置Dreamweaver环境,获得在线帮助。
“文件”菜单包含“新建”、“打开”、“保存”、“保存全部”,还包含各种其他命令,用于查看当前文档或对当前文档执行操作,例如“在浏览器中预览”和“打印代码”。
“编辑”菜单包含选择和搜索命令,例如“选择父标签”和“查找和替换”。
“编辑”菜单还提供对DW菜单中“首选参数”的访问。
“查看”菜单使您可以看到文档的各种视图(例如“设计”视图和“代码”视图),并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。
“插入”菜单提供“插入”栏的替代项,用于将对象插入文档。
“修改”菜单使您可以更改选定页面元素或项的属性。
使用此菜单,您可以编辑标签属性,更改表格和表格元素,并且为库项和模板执行不同的操作。
“文本”菜单使您可以轻松地设置文本的格式。
“命令”菜单提供对各种命令的访问;包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。
“站点”菜单提供用于管理站点以及上传和下载文件的菜单项。
“窗口”菜单提供对DW中的所有面板、检查器和窗口的访问。
“帮助”菜单提供对Dreamweaver文档的访问,包括关于使用Dreamweaver以及创建Dreamweaver扩展功能的帮助系统,还包括各种语言的参考材料。
3.插入栏“插入”栏包含用于创建和插入对象(如表格、层和图像)的按钮。
当鼠标指针滚动到一个按钮上时,会出现一个工具提示,其中含有该按钮的名称。
某些类别具有带弹出菜单的按钮。
从弹出菜单中选择一个选项时,该选项将成为该按钮的默认操作。
例如,如果从“图像”按钮的弹出菜单中选择“图像占位符”,下次单击“图像”按钮时,Dreamweaver 会插入一个图像占位符。
每当从弹出菜单中选择一个新选项时,该按钮的默认操作都会改变。
“插入”栏按以下的类别进行组织:“常用”类别使您可以创建和插入最常用的对象,例如图像和表格。
“布局”类别使您可以插入表格、div 标签、层和框架。
您还可以从三个表格视图中进行选择:“标准”(默认)、“扩展表格”和“布局”。
当选择“布局”模式后,您可以使用 Dreamweaver 布局工具:“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。
“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。
“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。
“服务器代码”类别仅适用于使用特定服务器语言的页面,这些类别中的每一个都提供了服务器代码对象,您可以将这些对象插入“代码”视图中。
“应用程序”类别使您可以插入动态元素,例如记录集、重复区域以及记录插入和更新表单。
“Flash 元素”类别使您可以插入 Flash 元素。
“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
4.文档工具栏文档工具栏中包含按钮,这些按钮可以快速切换文档的不同视图:“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。
工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
显示代码视图:仅在“文档”窗口中显示“代码”视图。
显示代码视图和设计视图:在“文档”窗口的一部分中显示“代码”视图,而在另一部分中显示“设计”视图。
当选择了这种组合视图时,“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。
请使用该选项指定在“文档”窗口的顶部显示哪种视图。
显示设计视图:仅在“文档”窗口中显示“设计”视图。
标题:允许您为文档输入一个标题,它将显示在浏览器的标题栏中。
如果文档已经有了一个标题,则该标题将显示在该区域中。
没有浏览器/检查错误:使您可以检查跨浏览器兼容性。
文件管理:显示“文件管理”弹出菜单。
在浏览器中预览/调试:在浏览器中预览或调试文档。
从弹出菜单中选择一个浏览器。
刷新设计视图:当您在“代码”视图中进行更改后刷新文档的“设计”视图。
视图选项:允许您为“代码”视图和“设计”视图设置选项。
5.状态栏标签选择器:显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签以选择该标签及其全部内容。
比如:单击 <body> 可以选择文档的整个正文。
窗口大小:弹出菜单(仅在“设计”视图中可见)用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
6.浮动面板组Dreamweaver面板组中选定的面板显示为一个选项卡。
每个面板组都可以展开或折叠,并且可以和其它面板组停靠在一起(或取消停靠)。
面板组还可以停靠到集成的应用程序窗口中,这使得能够很容易地访问所需的面板,而不会使工作区变得混乱。
用户可以通过“编辑/首选参数”设置面板首选参数。
二、设置站点Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。
Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的 Web 站点。
创建Web 站点的第一步是规划。
为了达到最佳效果,在创建任何 Web 站点页面之前,应对站点的结构进行设计和规划。
决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的。
1.创建一个个人站点选择站点-->管理站点,出现“管理站点”对话框。
单击“新建”,从弹出式菜单中选择“站点”,出现“站点定义”对话框,如图2-1-2,在该对话框中输入站点名字。
图2-1-2单击“下一步”。
出现向导的下一个界面,询问用户是否要使用服务器技术。
选择“否”选项,指示目前该站点是一个静态站点,没有动态页,如图2-1-3。
图2-1-3继续“下一步”。
出现向导的下一个界面,询问用户要如何使用文件,如图2-1-4。
选择“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”的选项。
并设置好站点文件夹存放的位置。
图2-1-4单击“下一步”,出现向导的下一个界面,询问用户如何连接到远程服务器。
从弹出式菜单中选择“无”,如图2-1-5。
图2-1-5单击“下一步”,该向导的下一个屏幕将出现,其中显示用户站点设置概要,如图2-1-6。
图2-1-6单击“完成”完成设置,此时,站点建立完成,完成后站点管理窗口如图2-1-7,创建好后的站点在文件面板中的表现如图2-1-8。
图2-1-7 站点管理窗口图2-1-8 文件面板2.管理站点站点/管理站点,将出现管理站点对话框,如图2-1-7,选择“编辑命令”可以对站点设置进行修改,选择“删除”,站点将被删除掉。
3.站点内文档操作站点建立好后,用户可以在文件面板里看到相应的站点信息,如图2-1-7 。
右键点击站点名,可以在站点内新建文件和文件夹。
同时也可以选择编辑命令对建好的文件或文件夹进行删除等基本操作。
三、文档基本操作1.新建个人网页文档通过引导页也可以通过文件菜单来创建个人网页的HTML文档,如图如图2-1-9所示。
图2-1-9通过文件菜单--->新建命令创建文档,弹出如图如图2-1-10所示对话框,选择【基本页】-->【HTML】即可创建HTML文档。
图2-1-103.保存个人网页文档为“index.htm”。
效果如图如图2-1-11所示图2-1-11选择文件/另存为,在“另存为”对话框中,浏览到站点本地根文件夹下,填入文件名,保存退出。
(注意:网页文档的保存格式为“*.htm或/&.html”)2.个人网页文档为“index.htm”的HTML框架结构分析点击文档工具栏的“拆分”视图模式,把index.htm切换到混合模式视图,查看空白页面的HTML 代码。
如图2-1-12所示。
图2-1-12HTML文档分为文件头(HEAD)和文件体(BODY)两部分。
文件头对这个文件进行了一些必要的定义,而文件体的部分才是要显示在网页中的各种信息。
HTML文档的框架结构如下:<html>标记是告诉浏览器这是HTML文件的开始,最后一个</html>用来告诉浏览器HTML文档的终止位置。
<Head>与</Head>标记之间是文件的头部信息,在浏览器中,头部信息是不被显示的,他能显示在浏览器的标题栏里。
<Body>与</Body>标记之间的程序是正文部分。
他们显示在浏览器窗口内。
因此,凡是要在网页中显示的信息,相应的程序要写在该对标记之间。
【课后小结】本讲主要讲述了Dreamweaver工作界面、管理站点的管理和静态网页文档的基本操作,以及网页文档的基本语法格式。
【练习题】填空:1.HTML(超文本标志语言)是英文____________________的缩写。
2.__________标志用于HTML文档的最前边,用来标识HTML文档的开始。
3.HTML文档的扩展名为____________________或者____________________选择题:1. HTML是一种页面()型的语言。
A. 程序设计 B. 执行 C. 编译 D. 描述2. 为了标识一个HTML文档应该使用的HTML标记是()。
A. <P>与</P>B. <BODY>与</BODY>C. <HTML>与</HTML>D. <TABLE>与</TABLE>3.HTML中,用来表示主题标签的是()。
A.〈head〉〈/head〉B.〈body〉〈/body〉C.〈title〉〈/title〉D.〈html〉〈/html〉问答题:1.熟悉Dreamweaver界面,掌握站点管理及站内HTML文档的创建。
2.什么是HTML?一个简单的HTML文档至少应该包括哪些标记?模仿练习模仿本讲课内容,创建自己的个人站点,并制作简单的一句话网页,切换网页试图模式为“拆分试图”,观察起文档基本语法格式。