实验1 Dreamweaver网页制作
Dreamweaver是“所见即所得”的专业网页制作软件,本实验通过具体的网页制作实例,详细介绍了用Dreamweaver8软件进行网页制作、创建网站的操作
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
。
本次实验共分2个内容,包括:
1、网站的架构;
2、制作网页。
实验1.1 网站的架构
要将信息发布到Internet上,应先建立一个网站,确定网站的目录结构和组织形式(即进行网站的规划设计),然后进行具体的页面制作,最后将网站发布到Internet上。
网站是由网页组成的,网页之间由超链接相互连接在一起,网站就是对这些网页等文档提供一套维护管理的
机制
综治信访维稳工作机制反恐怖工作机制企业员工晋升机制公司员工晋升机制员工晋升机制图
。本小节给出使用Dreamweaver软件建立网站的实验,通过实验掌握建立网站的基本规则和方法。
1. 实验目的
学习网页制作首先要认识页面、网站及其组成,通过创建网站的上机实验可以具体掌握网站的目录结构、组织形式,以及使用Dreamweaver软件管理网站。
2.
知识点
高中化学知识点免费下载体育概论知识点下载名人传知识点免费下载线性代数知识点汇总下载高中化学知识点免费下载
建立一个网站应先想好网站的模式,确立存放的物理磁盘位置。仔细规划好网站的结构,根据网站中设置的栏目建立不同的子文件夹,然后将与该栏目相关的所有文档都保存在这个子目录中。
3. 实验内容和要求
图1.1 网站首页
通过Dreamweaver8创建一个“花卉”网站,将网站名称命名为flower-web。在网站的根目录(flower-web)下创建四个子目录,目录名分别命名为flower(常见花卉)、life(花与生活)、server(养花指导)和images(图片),网站首页(index.htm)如图1.1所示。
4. 实验步骤
⑴启动Dreamweaver8,选择“创建新项目”中的“Dreamweaver站点”(见图1.2所示),弹出“站点定义”对话框,在“基本”和“高级”页中可以定义站点名称、站点存储位置等信息(见图1.3、1.4所示)。本实验选择将网站存储在本地,请在D盘上创建flower-web目录用于存放本实验中设计的花卉网站。
图1.2新建网站
图1.3 站点定义——定义站点名称
图1.4 站点定义——指定站点位置
⑵点击确定后,可以看到flower-web站点的文件管理器(如图1.5所示)。在站点名称上单击右键可以选择在本站点的根目录下创建新文件、新文件夹,也可以双击已存在的文件进行编辑。
在网站根目录下新建文件,文件名为“index.html”,该网页为网站首页。
在网站根目录下新建四个文件夹:flower、life、server、images。
图1.5 站点文件管理器
⑶双击文件夹列
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
中的index.htm文件,此时右边出现index.html页面设计视图(见图1.6所示)。点击红框中的“代码”、“设计”分别显示源代码视图(可以直接编辑网页源代码)和设计视图(所见即所得设计网页),点击“拆分”则同时显示源代码视图和设计视图。
设计窗口的下方是属性窗口,在设计视图的设计窗口内选择了网页元素后,可以在属性窗口定义网页元素的属性。
图1.6 设计窗口和属性窗口
⑷单击属性窗口的“页面属性”按钮可以进行页面属性设置(见图1.7所示),设置index.html页面的标题为“花卉网站首页”,文档类型为“HTML 4.01 Transitional”。
图1.7 页面属性设置
⑸在index.htm页面中输入文字“花卉网站欢迎您”,在属性窗口选择
格式
pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载
为“标题1”、字体为“华文楷体”(默认字体中没有此字体,通过“编辑字体列表”窗口从“可用字体”列表中向“选择的字体”列表中增加字体)、文字前景色为#FF6600、字体大小为56px,并设置居中。
⑹在菜单栏中选择“文件/保存全部”命令,保存新建立的网站。
⑺单击工具栏中的“在浏览器中预览/调试”按钮,浏览本网页(如图1.1)。
实验1.2 制作网页
当一个网站创建好后,就要进行网页制作。网页是承载文字、图形图像、声音、动画、视频等媒体元素内容的载体。本小节给出使用Dreamweaver8软件的设计视图制作网页的基本方法。
一、制作一个“花香与健康”网页
1. 实验目的
掌握在一个页面中添加文本、设置文本格式、水平线属性的方法。
2. 知识点
Dreamweaver8提供的“所见即所得”设计页面功能,使在一个网页中添加文字信息变得非常地容易,然而一个能够真正吸引用户的页面,除了文字外,还应对页面进行整体的布局设计。在制作页面时,应事先安排好页面元素摆放在那里,使用什么格式,设计页面的格式(包括页面的边距、背景颜色、背景音乐)等等。
3. 实验内容和要求
为 “flower-web” 网站(实验1.1创建的网站)的“花与生活(life)”栏目制作一个“花香与健康”网页。要求按照图2.1所示页面的内容和样式进行制作。页面的名称为flower_life.html。
图2.1 “花香与健康”网页
4.实验步骤
⑴在flower-web站点的文件管理器中,右键单击life文件夹,新建flower_life.html文件,双击文件名编辑此文件。
⑵单击页面左上角,输入文字“花香与健康”并选中该文字,设置格式为“标题2”,字体为宋体、50px、颜色#FF6600、居中。
⑶将插入点定位在“花香与健康”文字下面一行,选择菜单栏“插入/HTML/水平线”命令插入一条水平线。设置水平线属性:宽度98%、高度1、居中对齐。
⑷在水平线的下面输入以下蓝色文字,效果如图2.1所示。
花香是花的灵魂,香产生了吸引人的魅力。花蕊的芳香分子与人鼻子嗅觉细胞接触后,刺激了嗅神经,使人感到心旷神怡,可改变人的心境与情绪,还可医治病痛。香花使人身心舒畅,是一切人造香气无法比拟的。常闻花香,对情绪与健康能产生很好的影响。
桂花香:
沁人心脾、使人疲劳顿消。科学工作者把鲜花香气,经冷凝制成油精。如桂花油精不仅抗菌消炎,还能止咳、化痰、平喘。
茉莉花香:
使人消除疲劳,精神为之一振。茉莉香所含挥发性芳香物,具有理气、解郁、辟秽、和中的作用。头晕、目眩、感冒、头痛、鼻寒及暑热头痛的人,常闻此香,可减轻症状。
兰花香:
可以缓解肺热、痰咳、神经衰弱。兰香闻得过多,使人过于兴奋,可能发生眩晕的感觉。
⑸按下面方法对输入文字进行格式化编辑。
①选择第一自然段,设字体为宋体,15px。
②选中“桂花香:”,定义格式为:标题3、宋体、12px、颜色#CC0066、左对齐,此时属性窗口的样式下拉框会新建一种样式,例如“style3”,这种样式就对应着“桂花香:”的格式,分别选中“茉莉花香:”、“蓝花香:”,均为它们指定“桂花香:”的样式。
③将页面的其它正文字体设为宋体,10px。
⑹在页面的右下方输入文字“返回首页”,选中输入的“返回首页”这4个文字,选择插入/超链接,点击弹出窗口的文件夹图片,设置超级链接到网站根目录中的index.html页面(如图2.2所示)。
图2.2 插入超链接
⑺在网页空白处单击鼠标右键,选择“页面属性”,在窗口编辑网页标题为“花香与健康”,将左边距和右边距设置为60px。
⑻预览此网页,观察设计效果。
二、制作一个“花卉栽培指南”网页
1. 实验目的
掌握在一个页面中添加图像的方法,学习为图像设置超级链接,掌握表格制作及表格属性设置。
2. 知识点
制作一个漂亮的网页,离不开网页整体布局的设计,网页布局设计的合理与否,直接影响页面的美观。表格在页面中不仅用来表示信息,而且还可在网页制作中布局网页的元素,使页面元素排列整齐。可以通过设置表格的属性,使页面呈现出不同的表现效果。例如将表格边框线设置为0,页面上就看不到表格,而只有表格中的元素被显示出来。
3. 实验内容和要求
为 “flower-web” 网站的“养花指导(server)”栏目制作一个如图3.1所示的“花卉栽培”网页,页面的名称为server1.html。
4.实验步骤
⑴从Internet中下载一些牡丹、蝴蝶兰、菊花和水仙花卉图片(或自己拍照的花卉照片),把这些图片复制到“flower-web”网站的images目录中(每种花卉下载大图、小图各一张)。
⑵在flower-web网站的server文件夹内创建server1.html网页文件。该网页的效果图见图3.1。
图3.1 “花卉栽培”网页
⑶制作提示:
①“花卉栽培”文字格式:“标题2”、宋体,50px、橙色、居中。
②网页标题“花卉栽培”。
③第二段淡红色底色的图文是一个表格。
插入/表格,8行2列,表格边框线宽度为0,背景颜色为淡红色,表格居中,表格宽度80%。(注:属性窗口显示“表格Id”时才是设置表格属性,如果显示“单元格”则是设置单元格属性);
第1、3、5、7行,每行的两个单元格都进行“合并单元格”操作(修改/表格/合并单元格);
文字内容如下:
牡丹
牡丹花是一种喜寒忌热,喜干燥忌水涝,怕狂风烈日的植物。在种植时一定要土质肥松,排水良好,并要注意时节。在种植节气上有“秋分后,重阳前,七芍药,八牡丹”的俗谚。
蝴蝶兰
蝴蝶兰喜欢高温高湿的环境,生长时期最低温度应保持在15摄氏度以上,宜在通风、湿度高的环境中栽培养护。栽培介质主要以水草、苔藓为主。
菊花
菊花喜温暖气候和阳光充足的环境,能耐寒、怕水涝,但苗期、花期不能缺水,菊花属短日照植物,对日照长短反应很敏感,每天不超过10小时的光照,才能现蕾开花。
水仙
冬季水培水仙,温度、光照、给水是水仙能否开花的三要素。水仙生长要求有充足的阳光;适宜温度为12-15摄氏度;干净的水。养水仙不需任何花肥,只用清水即可。
第1、3、5、7行的标题文字“牡丹、蝴蝶兰、菊花和水仙花卉”设置为宋体、13px、绿色,将第2、4、6、8行的解说文字(在该行第二个单元格内)设置为宋体、13px、黑色;
第2、4、6、8行每行的第一个单元格内插入的是一张图片(插入/图像),在属性窗口设置图片宽50px、高40px
④下方横向排列4张花卉图片的表格是边框宽度为1、3行4列的表格,表格的第1行的4个单元格被合并单元格。
第1行输入“用鼠标单击下面的图片可欣赏高清晰大图片:”文字,并将文字设为宋体、15px、蓝色;
第2行的4个单元格中各有1张图片,图片宽170px、高130px;
为每张图片添加超链接,链接至同种花卉图片的大图上(选中图片、插入/超链接可以为图片添加超链接)。
⑤返回首页链接到网站首页(根目录下的index.html)。
⑷保存网页,用浏览器检查网页制作效果是否满足要求。
实验结果提交说明:
将你在本实验中制作好的网站上传到你的个人网站空间中,并将可以访问到该网站index.html的URL记录在txt文件中,将该txt文件上传到教学辅助系统中。