首页 前端设计正文

1.8 编写第一个HTML文件

kumb 前端设计 2020-06-02 21:28:57 668 0

1.8.1 HTML文件的编写方法

编写HTML文件主要有如下3种方法:

❑手工直接编写。由于HTML编写的文件是标准的ASCII文本文件,所以我们可以使用任何文本编辑器来打开并编写HTML文件,如Windows系统中自带的记事本。

❑使用可视化软件。Microsoft公司的Frontpage、Macromedia公司的Dreamweaver、Adobe公司的Golive等软件均可以可视化的方式进行网页的编辑制作。

❑由Web服务器一方实时动态生成。这需要通过后端的网页编程来实现,如ASP、PHP等。一般情况下都需要数据库的配合。

1.8.2 手工编写页面

下面先使用记事本来编写我们的第一个HTML文件。步骤如下:

Step 1 选择“开始/程序/附件/记事本”命令,打开“记事本”程序,如图1.3所示。

Image00004.jpg

图 1.3 “记事本”界面

Step 2 在“记事本”中直接键入下面的HTML代码:


<html>

<head>

<title>简单的HTML文件</title>

</head>

<body text="blue">

<h2 align="center">HTML你好</h2>

<hr>

<p>让我们认识HTML吧</p>

</body>

</html>


Step 3 输入代码后,记事本中显示出代码的内容,如图1.4所示。

Image00005.jpg

图 1.4 显示了代码的“记事本”

Step 4 选择“记事本”菜单中的“文件/保存”命令,弹出如图1.5所示的“另存为”对话框。

Image00006.jpg

图 1.5 “另存为”对话框

Step 5 在对话框中选择存盘的文件夹,然后在“保存类型”中选择“所有文件”,在“编码”中选择ANSI。这里将“文件名”设置为1-2.html,然后单击“保存”按钮。

Step 6 关闭“记事本”,回到存盘的文件夹,双击如图1.6所示1-2.html文件,可以在IE浏览器中看到最终执行效果,如图1.7所示。

Image00007.jpg

图 1.6 保存的html文件

Image00008.jpg

图 1.7 执行效果

1.8.3 使用可视化软件制作页面

Adobe Dreamweaver CS5.5是一个全面的专业工具集,可用于设计并部署极具吸引力的网站和Web应用程序,并提供强大的编辑环境以及功能强大且基于标准的WYSIWYG设计界面。Adobe Dreamweaver CS5.5新版本使用了最新的技术,加入了多屏幕预览、jQuery集成、CSS3/HTML5支持、尖端的实时视图渲染、移动UI构件、FTPS支持、智能编码协助集成FLV内容等全新功能。下面以Adobe Dreamweaver CS5.5中文版为例,说明使用可视化网页编辑软件制作页面的方法。步骤如下:

Step 1 单击“开始/所有程序/Adobe Dreamweaver CS5.5”,启动软件的主程序,其主界面如图1.8所示。

Image00009.jpg

图 1.8 Adobe Dreamweaver CS5.5主界面

Dreamweaver工作区使您可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中,使您可以快速更改文档。Dreamweaver CS5.5工作区布局如图1.9所示。

Image00010.jpg

图 1.9 Dreamweaver CS5.5工作区布局

❑A应用程序栏:应用程序窗口顶部包含一个工作区切换器、几个菜单(仅限Windows)以及其他应用程序控件。

❑B文档工具栏:包含一些按钮,它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)。

❑C文档窗口:显示您当前创建和编辑的文档。

❑D工作区切换器:通过下拉列表可以选择不同的工作区,如:编辑器。

❑E面板组:帮助您监控和进行修改工作。例如,“插入”面板、“CSS样式”面板和“文件”面板。若要展开某个面板,请双击其选项卡。

❑F CS Live:Adobe Dreamweaver CS5.5相关服务。

❑G标记选择器:位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标记的层次结构。单击该层次结构中的任何标记可以选择该标记及其全部内容。

❑H属性检查器:用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。在“编码器”工作区布局中,“属性”检查器默认是不展开的。

❑I文件面板:用于管理文件和文件夹,无论它们是Dreamweaver站点的一部分还是位于远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件,非常类似于Windows资源管理器(Windows)或Finder(Macintosh)。

Step 2 如图1.10所示,单击文档工具栏中的“拆分”按钮,在这种视图下,编辑窗口被分割成左右两部分,左侧显示的是源代码视图,右侧是可视化视图,这样可以在选择和编辑源代码的时候及时地在可视化视图中看到效果。这两部分是互相联系、密不可分的,在代码视图中所做的任何修改都会影响设计视图,反之亦然。

Image00011.jpg

图 1.10 代码视图和设计视图

Step 3 在如图1.11所示的位置输入“让我们一起体验超炫的HTML旅程吧”作为页面的正文。

Image00012.jpg

图 1.11 输入正文

Step 4 在如图1.12所示的位置输入“HTML初露端倪”作为页面的标题。

Image00013.jpg

图 1.12 输入标题

Step 5 选择“文件/保存”命令,在如图1.13所示的“另存为”对话框中选择存储位置,将文件命名成1-1.html,然后单击“保存”按钮。

Image00014.jpg

图 1.13 保存页面

Step 6 双击1-1.html文件,可以在浏览器中直接看到执行效果,如图1.14所示。

Image00015.jpg

图 1.14 1-1.html执行效果

1.8.4 使用浏览器浏览HTML文件

不同公司有不同的浏览器,最著名的浏览器之一是微软公司的Internet Explorer。使用浏览器最核心的功能就是查看我们编写的HTML文件效果,并可以查看其他网站页面的源代码。下面我们将以Internet Explorer为例来讲解一下使用Internet Explorer浏览器浏览HTML的过程。

启动Internet Explorer浏览器后,打开我们刚才所建立的HTML文件。

选择“文件/打开”命令,然后单击“浏览”按钮,如图1.15所示。找到硬盘中存放的网页文件,如图1.16所示,然后单击“打开”按钮。这样,浏览器就能够显示编写的网页文件的页面效果了。

Image00016.jpg

图 1.15 打开

Image00017.jpg

图 1.16 选择要打开的文件

1.8.5 明日图书网使用HTML开发

明日图书网的前台网页制作就是应用HTML编写完成的。下面我们来具体看一下明日图书网的前台网页实现的源文件。查看源文件的步骤如下:

Step 1 打开浏览器,在地址栏输入http://www.mingribook.com,然后回车。

Step 2 页面显示了明日图书网的首页面。

Step 3 选择浏览器主菜单中的“查看/源文件”命令,如图1.17所示。

Image00018.jpg

图 1.17 查看/源文件

Step 4 这样就会自动打开记事本显示页面的源文件,如图1.18所示。

Image00019.jpg

图 1.18 页面的源文件

我们致力于为三农(农业、农村、农民)提供专业物联网解决方案,同时也提供应用软件、微信小程序、手机App、企业网站的开发和跨境电商建站、网络营销等服务,站长微信号(mywit_net),添加后备注“黎辉物联网”,如有相关需求也可通过电子邮件(12tc@sina.cn)与我们取得联系

本站内容均来自互联网,如有涉及到侵权行为,请你及时与站长联系删除!

本文链接:https://kumb.cn/945.html

发表评论

评论列表(0人评论 , 668人围观)
☹还没有评论,来说两句吧...