百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

网站页面在线设计(网站页面在线设计怎么做)

cac55 2024-09-23 04:12 33 浏览 0 评论

有些时候我们会被朋友、同事请求,帮助他们制作一些网页什么的,当然有时我们自己也有类似的需要。虽然可以找到Dreamweaver这类专业的网页制作软件,但是要想制作出一个让人满意的网页仍然是非常的繁琐,好在现如今网上已经有一些免费的网页制作工具可以使用,通过直接调用这些在线工具进行操作,不仅操作快速而且看上去会很有面子的。

创建网页制作工程

这里我们就通过“9466网页助手”来进行操作,它是一款在线可视化网页制作工具。用户不需要有任何的专业知识,只需要通过鼠标拖拽需要的网页元素进行配置,再对某些参数进行简单的修改,就可以得到需要的网页文件。

通过浏览器打开“9466网页助手”的官方网站,首先点击标题栏中的“我的”命令,在弹出的网页中点击“创建新项目”按钮。这时在弹出网页的“项目名称”中,任意输入一个项目的名称即可,比如我这里就设置为“我的网站”(图1)。设置完成后点击右 上角的“确定”按钮,这个项目就创建完成了,而这个项目就相当于是网站的总架构。

添加内容设计网页

由于一个网站是由一个或多个网页组成的,所以接下来我们就需要来设计制作网页,而“9466网页助手”非常体贴地为用户提供了两种设计制作的方式。一种就是传统的“白手起家”,在空白的页面中添加上自己需要的内容,最终完成网页的设计制作操作。另外一种相对比较简单,就是从“9466网页助手”网站中选择合适的模板,在这个模版的基础上进行简单的修改即可。

先来看看“白手起家”是怎么做到的。再一次点击标题栏中的“我的”命令,在弹出的网页中就可以看到刚刚创建的项目名称。将鼠标移动到“设计”按钮的上面,在弹出的菜单里面选择“PC”项,点击它以后就表示我们开始制作适合电脑访问的页面了(图2)。

图2

当进入到设计窗口的时候,系统会自动添加一个命名为“首页”的页面。当点击左侧列表中的“页面”按钮,在弹出的对话框点击“添加页面”按钮,再点击“创建空白页面”命令就可以创建更多的网页。一个公司的网站除了首页以外,还可能包括产品介绍、公司简介等页面。所以我们在弹出对话框的“页面名称”中,设置一个网页的名称信息,比如“公司简介”等等。接着在“文件名”后输入这个网页的名称,需要提醒大家的是,这个名称不能是中文信息,最后点击“创建”按钮就可以了(图3)。

图3

一个页面是由标题、关键字、网页内容等构成的,所以接下来要做的就是为网页添加相应的内容。点击左侧列表中的“添加”按钮,在弹出的对话框中就可以看到众多的元素内容。比如我们需要图文并茂的介绍一下公司的产品,于是就在元素列表中找到“图文”项,接着利用鼠标将其拖放至设计窗口里面。接下来根据提示点击元素窗口中的图片图标,在弹出的对话框中点击“从本地选择图片上传”按钮,然后选择要上传的图片文件就可以了。

现在在右侧列表里面,就可以对图片进行调整了,包括图片对齐、位置大小以及高度和宽度等。接着在图片的旁边输入相应的文字信息,双击输入的文字信息就会弹出一个工具栏,通过它就可以设置文字的字体、大小、对齐方式等(图4)。

图4

设计完成后首先点击左侧列表中的“保存”按钮,接下来再点击工具栏中的“预览”按钮,就可以查看到网页设计的最终效果。

套用模板简捷方便

如果用户不喜欢自己进行设计制作的话,那么我们就点击标题栏中的“模板”命令,在弹出的网页中可以看到大量的模板。当将鼠标移动到某个模板的缩略图上面的时候,可以查看到这个模板的相关信息。其中“页数”这个参数非常重要,它明确告诉用户整个项目里面有多少个网页,而且详细的介绍了PC和移动终端的页数。如果PC的页数显示为0的话,说明这个模板文件只适用于移动终端,而不适用于PC端的网页制作(图5)。

图5

当选中一个模板文件后,点击下面的“克隆”按钮,在弹出的对话框中输入克隆到项目的名称。比如我们设置的项目名称为“我的网站”,接着在下面选择需要克隆的页面类型(图6)。最后点击“克隆”按钮,这个模板就被移动到自己的项目中。现在点击标题栏中的“我的”命令,在创建的项目中就可以看到复制过来的模板文件。接下来进入到自己项目的设计窗口中,按照前面的介绍对模板中的页面进行简单的调整和修改就可以了。

图6

一键发布快速直达

当网页信息编辑完成并且自己也认为非常满意后,就可以将其发布到自己的空间里面,这样其他用户就可以访问自己的网站了。其为用户提供了两种不同的发布方式:一种是将制作的网页整体打包下载到本地系统、一种则是直接上传到自己的空间服务器里面。

点击对话框中的“FTP”这项,接着根据提示分别输入FTP的IP地址、端口、用户名和密码(图7)。而“发布路径”选项一般设置为“/”或者“/wwwroot/”就可以了,如果用户使用的是西部数码的网络空间,这里则需要设置为“/用户名/wwwroot/”。这里的用户名指的是用户在西部数码的FTP用户名,设置完成以后点击“发布”按钮,网页文件就可以直接传输到空间服务器中了。当文件传输完成后会有提示,这样通过域名就可以进行访问啦。

图7

相关推荐

Linux :远程访问的 16 个最佳工具(一)

通过远程桌面协议(RDP)可以访问远程Linux桌面计算机,这是Microsoft开发的专有协议。它为用户提供了一个图形界面,可以通过网络连接连接到另一台/远程计算机。FreeRDP是...

Guacamole安装部署_guacamole简单搭建

Guacamole安装部署Guacamole简介Guacamole是提供连接远程桌面的解决方案的开源项目(也可以说是一个远程桌面网关),通过浏览器就能远程操作服务器,适用于Chrome、Firefox...

1-FreeRTOS入门指南_freertos+lwip

本专栏是根据官方提供的文档进行FreeRTOS的各个功能函数的说明,以及函数的使用本专栏不涉及动手操作,只是对原理进行说明,FreeRTOS基础知识篇更新完成会对如何在开发板上进行上手实战操作。这里不...

Windows暂停远程桌面,这些工具可替代

Windows暂停远程桌面,这些工具可替代近日,Windows官方宣布将于2025年5月27日起,在Windows10和Windows11应用商店中下架“Microsoft远程桌面”应用。这一消...

现在做 Web 全景合适吗?_前端全景

作者:前端藏经阁转发链接:https://www.yuque.com/xwifrr/uxqg5v/cgclx0前言Web全景在以前带宽有限的条件下常常用来作为街景和360°全景图片可查看。它可以...

网页直连,MSTSC远程控制Windows新姿势!

不用安装软件,打开浏览器就能远程办公?今天要聊的是一种颠覆传统的远程控制玩法,直接用网页连接Windows电脑,无需下载客户端,手机、平板、Mac甚至Linux都能轻松操作。这可不是吹牛,结合MSTS...

QQ出现大面积盗号,原因已查明,请抓紧改密码

你没有看错,QQ又上了微博热搜,这次比较严重了,QQ出现大面积盗号,多个QQ群出现yellow信息,其次导致多位成员被踢出,并且还被封号处理,到底怎么回事?请继续往下看。在6月26日晚上10点左...

我在淘宝花10块钱,买到了能玩“宝可梦”的Q群机器人

十一月雨|文我是个没事喜欢逛淘宝的人,虽然是个不怎么好的习惯,但总是能够发现一些奇奇怪怪的东西,这次我发现的是一种Q群机器人。Q群机器人,大多是基于腾讯SmartQQ协议实现的一种能自动回复、自定...

Metasploit最实用的攻击模块"Meterpreter"

Meterpreter命令详解Meterpreter是Metasploit渗透测试平台框架中功能最强大的攻击载荷模块,在最新的Metasploitv4.5.0版本中,攻击载荷模块已经达到了25...

手机QQ再更新,上线了一个想让人“无法回避”的新功能

近日,手机QQ更新了V8.2.6.700版本,苹果iOS版和安卓版手机QQ上线了一个新功能:可以实时显示对方的手机电量以及充电状态。开通电量显示也很简单,长按主页左上方的头像,在在线状态中选择我的电量...

「网络安全」常见攻击篇(20)——点击劫持

什么是点击劫持?点击劫持(Clickjacking)技术又称为界面伪装攻击(UIredressattack),是一种视觉上的欺骗手段。通常有两种方式:攻击者使用一个透明的iframe,覆盖...

曾利用驱动人生升级通道传播的木马下载器攻击方法再次升级

一、概述御见威胁情报中心1月25日再次监测到曾利用驱动人生升级通道传播的木马下载器攻击方法再升级。本次升级主要变化在于攻击模块,木马在之前的版本上,新增计划任务“DnsScan”,在其中将永恒之蓝攻击...

QQ飞车手游:点券首个功能性宠物上架,实战稳定触发还不快入手?

随着版本的逐渐更新,点券宠物在道具模式发挥逐渐越来越小,曾经探讨点券宠物在道具是不是真的没有用?直到出现了波斯猫改变了,我对点券宠物在道具模式的看法,如今又一个强势点券宠物来袭,而且特性触发简单,还是...

工单系统设计实战(上):核心配置与效能提升

流程的标准化并非终点,而是研发效能持续革命的基石。当工单系统真正成为研发团队的“神经中枢”,每一次需求的精准流转、每一行代码的受控提交、每一次版本的可靠发布,都将汇聚成驱动产品持续进化的强大动力...

6个编辑PDF文档内容的工具(软件+网站)

在日常办公、学习和生活中,PDF文件因其格式稳定、跨平台兼容性强等特点,被广泛应用。但有时我们拿到PDF文件后,却发现需要修改其中的内容,总感觉有点难搞。其实PDF文档编辑修改也很简单,这里分享6个软...

取消回复欢迎 发表评论: