Dreamwerver开发环境及创建第一个网页
创始人
2024-05-24 14:31:37
0

Dreamwerver开发环境及创建第一个网页

  • 一、实验名称:
  • 二、实验日期:
  • 三、实验目的:
  • 四、实验内容:
  • 五、实验步骤:
  • 六、实验结果:
  • 七、源程序:
  • 八、心得体会:

一、实验名称:

Dreamwerver开发环境及创建第一个网页

二、实验日期:

2020年9月15日星期二

三、实验目的:

1、了解HTML的文档结构
2、熟悉Dreamwerver开发环境
3、掌握Dreamweaver的基本操作
4、使用Dreamwerver创建第一个网页

四、实验内容:

1、按照特定要求制作一个网页
2、使用Dreamweaver 、火狐浏览器制作
3、上交的文件,以“学号+姓名”的形式

五、实验步骤:

1、了解HTML文档结构
查阅书籍了解HTML的文档结构,HTML(Hyper Text Markup Language,超文本标记语言),主要用来对网页中的文本、图片、声音等内容进行描述。HTML文档结构一般包括标记(html)头部(head)、主体(body)三部分。标记:说明该文件是用超文本标记语言来描述的,它是文件的开头,而则表示文件的结尾。头部:表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。主体:网页中显示的实际内容包含在这两个正文标记符之间。

2.熟悉Dreamweaver 8开发环境
(1)、下载Dreamweaver 8,并安装在电脑桌面上,后双击运行桌面上的Dreamweaver 8软件图标,进入软件页面。

(2)、进入软件页面后,可以设置页面布局,可通过选择菜单栏【窗口】、【工作布局】后进行选择。

在这里插入图片描述

(3)、接下来,新建文档。选择菜单栏中的【文件】、【新建】选项,会出现“新建文档”窗口。这时,在文档类型下拉选项中选择XHTML 1.0 Transitional,单击【创建】按钮,即可新建一个空白的HTML文档。

在这里插入图片描述

在这里插入图片描述

(4)、了解软件的操作界面,主要由6部分组成,包括菜单栏、插入栏、文档工具栏、文档窗口、属性面板及其常用面板。
菜单栏:包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助这10个菜单选项。
在这里插入图片描述

插入栏:插入栏集成了多种网页元素,包括超链接、电子邮件链接、图像、表格、日期、多媒体等。

在这里插入图片描述

文档工具栏:文档工具栏提供了各种文档视图窗口,如代码、拆分、设计,还提供了各种查看选项和一些常用操作包括“在浏览器中预览/调试”“刷新设计视图”与“文件管理”。

在这里插入图片描述

文档窗口:即可写入代码,也可写完后查看视图效果。

在这里插入图片描述

属性面板:显示在文档窗口中元素的属性。

在这里插入图片描述

常用面板:
在这里插入图片描述

3、Dreamweaver初始化设置
(1)、工作区布局设置
打开软件后,在菜单栏里的【窗口】中的【工作布局】中进行选择。
(2)、必备面板
设置工作布局后,即可把常用3个面板调出来,也就是分别选择菜单栏【窗口】菜单项下的【插入】、【属性】、【文件】这3个选项。

在这里插入图片描述

(3)、新建默认文档设置
单击菜单栏中的【编辑】选项中的【首选参数】选项(其快捷键Ctrl+U),选中左侧分类中的【新建文档】,右边会出现对应设置,默认文档设为“HTML”,默认编码设为“UTF-8”,设置好新建文档的首先参数后,再次新建文档时,就会默认为设置的效果。
在这里插入图片描述

(4)、代码提示设置
软件有代码提示功能,可以提高书写代码的速度,在【首先参数】选项中选择【代码提示】。

在这里插入图片描述

(5)、浏览器设置
在【首先参数】选项中的【在浏览器中预览】选项中将火狐浏览器设为主浏览器,IE浏览器设为次浏览器,后使用主浏览器预览网页的快捷键是F2,次浏览器预览网页的快捷键是Ctrl+F2。
在这里插入图片描述

4、使用Dreamweaver 8创建第一个网页
(1)、编写HTML代码
打开软件,新建一个HTML默认文档,切换到“代码”视图,这时在文档窗口会出现软件自带的代码。
在这里插入图片描述

标记之间输入HTML文档标题,即“我的第一个网页”。后在与标记之间添加网页的主体内容,后在其中的段落

标记之间写入文本“使用Dreamweaver 创建第一个网页”。

在这里插入图片描述

(2)编写CSS代码
在与标记之间添加CSS样式,CSS样式需要写在标记内。
在这里插入图片描述

(3)、预览效果
先将文件进行保存,在菜单栏中选择【文件】、【保存】(其快捷键Ctrl+S),保存文件至C盘,并命名为Untitled-1。

在这里插入图片描述

后在浏览器中预览效果图
在这里插入图片描述

六、实验结果:

在这里插入图片描述

七、源程序:





我的第一个网页



使用Dreamweaver创建第一个网页

八、心得体会:

1、学习网页制作从制作第一个网页入门,它是一个循序渐进的过程,先从简单的入手,再慢慢提升制作的难度,逐步提高自己网页制作的能力。
2、在学习制作网页时,应对网页制作的各类软件进行了解,选择适合自己的软件,并熟悉该软件的一些基础操作。
3、需要记得一些知识点过于繁多,但不记住一些特定的编写代码的格式难以呈现自己想要的视图效果,所以,只有不断动手才能将理论知识实践化,形成一个类似肌肉记忆的编写代码格式。
4、编写代码时,一定要细心,因为制作网页的软件不会与编写C语言代码软件那样可以随时进行报错提醒,当制作的网页效果呈现不出来,只能从代码中查找错误,所以,每一步的编写都应该细心谨慎。
5、在编写代码时,注意整体布局,先编写HTML代码,后编写CSS代码,即可以提高代码的阅读也可以提高代码的编写速度。
6、在入门阶段的学习,可以先按照书本的实例进行练习,还应在实例的基础上有自己的创意,并动手实践。
7、网页设计与制作这门课程毕竟是一门重实践的课程,所以还需要不断动手操作。

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...